/* KocaXNetwork premium gold crest theme. Loaded after style.css on purpose.
   WP2.3: this theme's legacy vars are remapped onto the design tokens defined
   at the top of style.css (primitive → semantic → component). */
:root {
  --kx-black: var(--kx-bg-base);
  --kx-night: var(--kx-bg-raised);
  --kx-panel: rgba(18, 20, 27, 0.94);
  --kx-panel-2: rgba(26, 29, 38, 0.92);
  --kx-purple: var(--kx-bg-overlay); /* purple retired — neutral overlay */
  --kx-purple-2: var(--kx-bg-overlay);
  --kx-gold-low: var(--kx-gold-700);
  --kx-gold-mid: var(--kx-gold-500);
  --kx-gold: var(--kx-gold-500);
  --kx-gold-high: var(--kx-gold-300);
  --kx-silver: var(--kx-text-secondary);
  --kx-ink: var(--kx-text-primary);
  --kx-muted: var(--kx-text-secondary);
}

body {
  background:
    radial-gradient(circle at 9% 0%, rgba(26, 29, 38, 0.18), transparent 28rem),
    radial-gradient(circle at 95% 7%, rgba(212, 175, 55, 0.12), transparent 30rem),
    linear-gradient(145deg, #08080d 0%, #090b14 52%, #020306 100%);
}

body::before {
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.024) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.09), transparent 1px);
  background-size: 52px 52px, 52px 52px, 16px 16px;
}

button,
.btn-signin,
.send-btn {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.36), transparent 18%, transparent 75%, rgba(255, 255, 255, 0.16)),
    linear-gradient(180deg, #fff0b4 0%, #dab15b 43%, #9e6a26 100%) !important;
  border-color: var(--kx-border-active) !important;
}

.secondary-button,
.btn-create,
.btn-back,
.burn-btn,
.folder-tab:not(.active),
label.secondary-button {
  color: var(--kx-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  border-color: var(--kx-border-hairline) !important;
}

.secondary-button:hover:not(:disabled),
.btn-create:hover:not(:disabled),
.btn-back:hover:not(:disabled),
.burn-btn:hover:not(:disabled),
.folder-tab:not(.active):hover {
  color: var(--kx-gold-high) !important;
  border-color: var(--kx-border-active) !important;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(212, 175, 55, 0.035)) !important;
}

.login-frame,
.app-window {
  box-shadow:
    0 24px 90px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(255, 255, 255, 0.028) inset,
    0 0 72px rgba(26, 29, 38, 0.08),
    0 0 48px rgba(212, 175, 55, 0.06);
}

.login-frame {
  background:
    linear-gradient(180deg, rgba(26, 29, 38, 0.32), transparent 34%),
    linear-gradient(145deg, rgba(14, 13, 26, 0.98), rgba(7, 8, 15, 0.985));
}

.login-frame::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    0 0 18px rgba(212, 175, 55, 0.07);
}

.login-frame::after {
  background:
    radial-gradient(circle at 50% 16%, rgba(212, 175, 55, 0.16), transparent 9rem),
    radial-gradient(circle at 52% 84%, rgba(26, 29, 38, 0.18), transparent 12rem),
    repeating-linear-gradient(120deg, transparent 0 19px, rgba(212, 175, 55, 0.035) 20px, transparent 21px);
}

.lc {
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.28));
}

.lc::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--kx-border-active);
  background: rgba(12, 10, 18, 0.9);
  transform: rotate(45deg);
}
.lc-tl::after { top: -5px; left: -5px; }
.lc-tr::after { top: -5px; right: -5px; }
.lc-bl::after { bottom: -5px; left: -5px; }
.lc-br::after { bottom: -5px; right: -5px; }

.crest::after {
  content: "";
  position: absolute;
  inset: -32px;
  z-index: -2;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(212, 175, 55, 0.35) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 0 48%, rgba(212, 175, 55, 0.28) 49% 51%, transparent 52%);
  opacity: 0.42;
  mask-image: radial-gradient(circle, #000 0 56%, transparent 57%);
}

.crest-logo {
  background: var(--kx-bg-base);
}

.brand-title {
  background: linear-gradient(180deg, #edd489 0%, #d4af37 55%, #9a7b1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.36));
}

.brand-sub,
.app-secure,
.eyebrow,
#connection-status.ok,
.status.ok {
  text-shadow: 0 0 16px rgba(212, 175, 55, 0.16);
}

.lfield {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(5, 7, 14, 0.78);
}

.lfield:focus-within {
  background:
    radial-gradient(circle at 0% 50%, rgba(212, 175, 55, 0.11), transparent 12rem),
    rgba(8, 10, 18, 0.95);
}

.app-window {
  border-color: var(--kx-border-active);
  background:
    radial-gradient(circle at 12% 0%, rgba(26, 29, 38, 0.14), transparent 18rem),
    linear-gradient(180deg, rgba(9, 11, 19, 0.98), rgba(4, 5, 9, 0.99));
}

.app-titlebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006)),
    rgba(7, 8, 15, 0.92);
}

.app-titlebar::after {
  content: "";
  position: absolute;
}

.sidebar-contacts {
  background:
    radial-gradient(circle at 0% 0%, rgba(26, 29, 38, 0.15), transparent 19rem),
    linear-gradient(180deg, rgba(12, 14, 24, 0.92), rgba(6, 8, 14, 0.92));
}

.main-chat {
  position: relative;
  isolation: isolate;
}

.main-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 42%, rgba(212, 175, 55, 0.08), transparent 20rem),
    repeating-linear-gradient(150deg, transparent 0 24px, rgba(212, 175, 55, 0.018) 25px, transparent 26px);
  opacity: 0.75;
}

.topbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.006)),
    rgba(7, 8, 14, 0.68);
}

.topbar::before {
  content: "";
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  background: url("kxn-logo.png") center / cover no-repeat;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.55), 0 0 22px rgba(212, 175, 55, 0.18);
  order: -1;
}

.topbar > div:first-child {
  display: flex !important;
  align-items: center !important;
}

.contact-item.active::before,
.group-card.active::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.55), rgba(26, 29, 38, 0.18), rgba(212, 175, 55, 0.38));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.message-bubble {
  backdrop-filter: blur(16px);
}

.message-row.own .message-bubble {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    linear-gradient(135deg, rgba(26, 29, 38, 0.96), rgba(26, 29, 38, 0.98));
}

.message-row.own .message-bubble::after {
  content: "✓✓";
  display: inline-block;
  margin-left: 0.55rem;
  color: rgba(212, 175, 55, 0.74);
  font-size: 0.74rem;
  letter-spacing: -0.14em;
}

.system-message {
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.07), rgba(212, 175, 55, 0.025));
}

.composer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    rgba(5, 6, 12, 0.9);
}

#message-input {
  border-color: var(--kx-border-active);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(7, 8, 14, 0.88);
}

.burn-menu,
.drawer-card,
.modal-card,
.lock-card,
#edit-profile-modal .panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 12rem),
    linear-gradient(180deg, rgba(19, 17, 29, 0.99), rgba(6, 7, 12, 0.99)) !important;
}

.privacy-badge,
.lock-logo,
.app-brand img {
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.2));
}

@media (min-width: 901px) {
  .login-screen {
    background:
      radial-gradient(circle at calc(50% - 250px) 18%, rgba(212, 175, 55, 0.07), transparent 18rem),
      radial-gradient(circle at calc(50% + 300px) 62%, rgba(26, 29, 38, 0.12), transparent 26rem);
  }
}

@media (max-width: 900px) {
  .topbar::before {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .app-titlebar {
    background: rgba(5, 6, 11, 0.96);
  }

  .main-chat::before {
    opacity: 0.46;
  }
}

@media (max-width: 560px) {
  .topbar::before {
    display: none;
  }

  .message-row.own .message-bubble::after {
    display: none;
  }
}

/* Final fit guard: short desktop/laptop viewports should center without pushing under the fold. */
.login-frame {
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
  overflow-y: auto;
  scrollbar-width: none;
}
.login-frame::-webkit-scrollbar { display: none; }
.login-frame {
  max-height: calc(100dvh - max(48px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px)) !important;
}
.login-frame { max-height: calc(100dvh - 56px) !important; }
.login-frame {
  min-height: min(880px, calc(100dvh - 56px)) !important;
  max-height: calc(100dvh - 56px) !important;
}
#join-view { display: flex; min-height: 0; }
.login-screen { flex: 1 1 auto; min-height: 0 !important; height: 100%; }
#join-view { width: 100%; }
#join-view.login-screen {
  display: grid !important;
  place-items: center !important;
  width: 100%;
  min-height: 0 !important;
  height: calc(var(--app-height, 100svh) - 24px) !important;
}
@media (max-width: 900px) {
  #join-view.login-screen { height: var(--app-height, 100svh) !important; }
}
/* Visibility contract guard: ui.js toggles .hidden/hidden; this must override every layout rule. */
.hidden,
[hidden],
#join-view.hidden,
#join-view[hidden],
#chat-view.hidden,
#chat-view[hidden] {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   Composer emoji picker  (added 2026-06-29 · v2.1.0)
   ════════════════════════════════════════════════════════════════════════ */
.emoji-btn {
  flex: 0 0 auto;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px !important;
  font-size: 1.3rem !important;
  line-height: 1;
  color: var(--kx-ink) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid var(--kx-border-hairline) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.emoji-btn:hover:not(:disabled) {
  border-color: var(--kx-border-active) !important;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.04)) !important;
}
.emoji-btn[aria-expanded="true"] {
  border-color: var(--kx-border-active) !important;
  background: rgba(212, 175, 55, 0.16) !important;
}

.emoji-panel {
  position: absolute;
  right: clamp(0.75rem, 2vw, 1.1rem);
  bottom: calc(100% + 10px);
  z-index: 70;
  width: min(348px, calc(100% - 24px));
  max-height: min(360px, 60vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--kx-border-active);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.08), transparent 12rem),
    linear-gradient(180deg, rgba(19, 17, 29, 0.99), rgba(6, 7, 12, 0.99));
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(18px);
}
.emoji-panel.hidden { display: none !important; }

.emoji-search-row { padding: 0.6rem 0.6rem 0.45rem; }
#emoji-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  color: var(--kx-ink);
  border-radius: 10px;
  border: 1px solid var(--kx-border-hairline);
  background: rgba(5, 7, 14, 0.78);
  outline: none;
}
#emoji-search:focus {
  border-color: var(--kx-border-active);
  background: rgba(8, 10, 18, 0.95);
}

.emoji-tabs {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.45rem 0.45rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--kx-border-hairline);
}
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  opacity: 0.7;
}
.emoji-tab:hover { opacity: 1; background: rgba(255, 255, 255, 0.05) !important; }
.emoji-tab.active {
  opacity: 1;
  background: rgba(212, 175, 55, 0.15) !important;
  border-color: var(--kx-border-active) !important;
}

.emoji-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 2px;
  align-content: start;
}
.emoji-grid::-webkit-scrollbar { width: 10px; }
.emoji-grid::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.26);
  background-clip: padding-box;
}
.emoji-cell {
  width: 100%;
  height: 38px;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .1s ease, transform .1s ease;
}
.emoji-cell:hover { background: rgba(212, 175, 55, 0.16) !important; transform: scale(1.14); }
.emoji-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: var(--kx-muted);
  font-size: 0.85rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Sidebar identity card → pinned bottom footer  (added 2026-06-29 · v2.1.0)
   ════════════════════════════════════════════════════════════════════════ */
.sidebar-contacts .my-identity-card.sidebar-footer {
  margin-top: auto !important;
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-radius: 16px !important;
  border: 1px solid var(--kx-border-hairline) !important;
  background:
    linear-gradient(180deg, rgba(20, 18, 30, 0.97), rgba(9, 10, 17, 0.985)) !important;
  box-shadow: 0 -12px 22px rgba(4, 5, 9, 0.5);
}
#contacts-list { flex: 0 0 auto; }

/* Three trailing composer buttons now — let the input shrink, and tighten on phones. */
#message-input { min-width: 0; }
@media (max-width: 560px) {
  .composer { gap: 0.42rem !important; }
  .emoji-btn,
  .burn-btn,
  .send-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   KX "BROKEN GLASS" RETHEME — pure black · gold chrome · ocean-blue accents
   (2026-06-29 · v2.2.0). Background = self-contained low-poly shatter with
   gold-edged shards (data: SVG, CSP-safe), echoing kocaexpress.com.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --kx-ocean: var(--kx-ocean-400);
  --kx-ocean-deep: #1c3c4a; /* own-bubble glass base hue */
  --kx-ocean-ink: var(--kx-ocean-400);
}

/* Pure-black canvas + shattered-glass gold backdrop, fixed behind everything. */
body {
  background-color: #000000 !important;
  background-image: linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.72)), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjkwMCIgdmlld0JveD0iMCAwIDE0NDAgOTAwIj48cmVjdCB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSI5MDAiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJNMC4wLDAuMCAxMzYuMywwLjAgMTUxLjEsOTUuOFoiIGZpbGw9IiMxMjEyMTQiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTAuMCwwLjAgMTUxLjEsOTUuOCAwLjAsOTEuN1oiIGZpbGw9IiMxNTE1MTciIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTEzNi4zLDAuMCAyNzMuMSwwLjAgMjY1LjAsMTQwLjVaIiBmaWxsPSIjMWExYTFjIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0xMzYuMywwLjAgMjY1LjAsMTQwLjUgMTUxLjEsOTUuOFoiIGZpbGw9IiMyMjFhMDYiIHN0cm9rZT0iI2ZmZTA4YSIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1vcGFjaXR5PSIwLjkyIi8+PHBhdGggZD0iTTI3My4xLDAuMCA1MDAuMywwLjAgNTIzLjksMTAyLjZaIiBmaWxsPSIjMTAxMDEyIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0yNzMuMSwwLjAgNTIzLjksMTAyLjYgMjY1LjAsMTQwLjVaIiBmaWxsPSIjMTExMTEzIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik01MDAuMywwLjAgNTgyLjUsMC4wIDUyMy45LDEwMi42WiIgZmlsbD0iIzBhMGEwYyIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik01ODIuNSwwLjAgNjAyLjgsMTY2LjEgNTIzLjksMTAyLjZaIiBmaWxsPSIjMTkxOTFiIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik01ODIuNSwwLjAgODA0LjgsMC4wIDYwMi44LDE2Ni4xWiIgZmlsbD0iIzE1MTUxNyIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik04MDQuOCwwLjAgODYwLjIsMTU5LjcgNjAyLjgsMTY2LjFaIiBmaWxsPSIjMTUxNTE3IiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik04MDQuOCwwLjAgOTQxLjksMC4wIDg2MC4yLDE1OS43WiIgZmlsbD0iIzExMTExMyIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNOTQxLjksMC4wIDk0Ni4xLDIxMC4wIDg2MC4yLDE1OS43WiIgZmlsbD0iIzE0MTQxNiIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik05NDEuOSwwLjAgMTA2MC42LDAuMCA5NDYuMSwyMTAuMFoiIGZpbGw9IiMxZDFkMWYiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNMTA2MC42LDAuMCAxMDU5LjEsMTk1LjIgOTQ2LjEsMjEwLjBaIiBmaWxsPSIjMWUxZTIwIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0xMDYwLjYsMC4wIDEyODEuMCwwLjAgMTA1OS4xLDE5NS4yWiIgZmlsbD0iIzBkMGQwZiIgc3Ryb2tlPSIjZmZlMDhhIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLW9wYWNpdHk9IjAuOTIiLz48cGF0aCBkPSJNMTI4MS4wLDAuMCAxMjUxLjcsMTA1LjIgMTA1OS4xLDE5NS4yWiIgZmlsbD0iIzEwMTAxMiIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMTI4MS4wLDAuMCAxNDQwLjAsMC4wIDEyNTEuNywxMDUuMloiIGZpbGw9IiMyMjFhMDYiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTE0NDAuMCwwLjAgMTQ0MC4wLDEwMS44IDEyNTEuNywxMDUuMloiIGZpbGw9IiMwODFiMjUiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTAuMCw5MS43IDE1MS4xLDk1LjggMjAyLjUsMjU5LjhaIiBmaWxsPSIjMGMwYzBlIiBzdHJva2U9IiNmZmUwOGEiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2Utb3BhY2l0eT0iMC45MiIvPjxwYXRoIGQ9Ik0wLjAsOTEuNyAyMDIuNSwyNTkuOCAwLjAsMjc1LjlaIiBmaWxsPSIjMTgxMDA2IiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0xNTEuMSw5NS44IDI2NS4wLDE0MC41IDIwMi41LDI1OS44WiIgZmlsbD0iIzE4MTgxYSIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik0yNjUuMCwxNDAuNSAzMzEuMCwzMTcuNSAyMDIuNSwyNTkuOFoiIGZpbGw9IiMwODE5MjMiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTI2NS4wLDE0MC41IDUyMy45LDEwMi42IDMzMS4wLDMxNy41WiIgZmlsbD0iIzE1MTUxNyIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNNTIzLjksMTAyLjYgNDYyLjksMzA2LjAgMzMxLjAsMzE3LjVaIiBmaWxsPSIjMGEwYTBjIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTUyMy45LDEwMi42IDYwMi44LDE2Ni4xIDQ2Mi45LDMwNi4wWiIgZmlsbD0iIzFlMWUyMCIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik02MDIuOCwxNjYuMSA1ODEuMiwyNDQuNSA0NjIuOSwzMDYuMFoiIGZpbGw9IiMwZTBlMTAiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNNjAyLjgsMTY2LjEgODYwLjIsMTU5LjcgNTgxLjIsMjQ0LjVaIiBmaWxsPSIjMTAxMDEyIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik04NjAuMiwxNTkuNyA3NjAuNSwzMjIuNyA1ODEuMiwyNDQuNVoiIGZpbGw9IiMxZTE2MDYiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNODYwLjIsMTU5LjcgOTQ2LjEsMjEwLjAgOTUwLjMsMjc2LjZaIiBmaWxsPSIjMTIxMjE0IiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTg2MC4yLDE1OS43IDk1MC4zLDI3Ni42IDc2MC41LDMyMi43WiIgZmlsbD0iIzBiMGIwZCIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNOTQ2LjEsMjEwLjAgMTA1OS4xLDE5NS4yIDExMzEuNSwyOTQuMVoiIGZpbGw9IiMxODE4MWEiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTk0Ni4xLDIxMC4wIDExMzEuNSwyOTQuMSA5NTAuMywyNzYuNloiIGZpbGw9IiMxYTFhMWMiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTEwNTkuMSwxOTUuMiAxMjUxLjcsMTA1LjIgMTI1My4xLDMzNy4xWiIgZmlsbD0iIzFhMWExYyIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMTA1OS4xLDE5NS4yIDEyNTMuMSwzMzcuMSAxMTMxLjUsMjk0LjFaIiBmaWxsPSIjMDgxODIyIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTEyNTEuNywxMDUuMiAxNDQwLjAsMTAxLjggMTI1My4xLDMzNy4xWiIgZmlsbD0iIzBmMGYxMSIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik0xNDQwLjAsMTAxLjggMTQ0MC4wLDMyNS4xIDEyNTMuMSwzMzcuMVoiIGZpbGw9IiMwZTBlMTAiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTAuMCwyNzUuOSAyMDIuNSwyNTkuOCAxNzAuMCw0NTMuMloiIGZpbGw9IiMwZDBkMGYiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNMC4wLDI3NS45IDE3MC4wLDQ1My4yIDAuMCw0MTcuOFoiIGZpbGw9IiMxYTFhMWMiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTIwMi41LDI1OS44IDMzMS4wLDMxNy41IDM3MC40LDQ3OC45WiIgZmlsbD0iIzBkMGQwZiIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMjAyLjUsMjU5LjggMzcwLjQsNDc4LjkgMTcwLjAsNDUzLjJaIiBmaWxsPSIjMDgxMzFkIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0zMzEuMCwzMTcuNSA0NjIuOSwzMDYuMCA0NTEuNSw1MTAuNVoiIGZpbGw9IiMxYTFhMWMiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNMzMxLjAsMzE3LjUgNDUxLjUsNTEwLjUgMzcwLjQsNDc4LjlaIiBmaWxsPSIjMDgxMTFiIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik00NjIuOSwzMDYuMCA1ODEuMiwyNDQuNSA1ODguNyw0MzkuN1oiIGZpbGw9IiMxYTFhMWMiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTQ2Mi45LDMwNi4wIDU4OC43LDQzOS43IDQ1MS41LDUxMC41WiIgZmlsbD0iIzFhMTIwNiIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNNTgxLjIsMjQ0LjUgNzYwLjUsMzIyLjcgODM0LjYsNDA2LjJaIiBmaWxsPSIjMTkxOTFiIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik01ODEuMiwyNDQuNSA4MzQuNiw0MDYuMiA1ODguNyw0MzkuN1oiIGZpbGw9IiMxYTFhMWMiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTc2MC41LDMyMi43IDk1MC4zLDI3Ni42IDk1OC41LDM5MS45WiIgZmlsbD0iIzEyMTIxNCIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNNzYwLjUsMzIyLjcgOTU4LjUsMzkxLjkgODM0LjYsNDA2LjJaIiBmaWxsPSIjMTAxMDEyIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik05NTAuMywyNzYuNiAxMTMxLjUsMjk0LjEgMTE0Mi42LDQ4My4zWiIgZmlsbD0iIzA4MTExYiIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNOTUwLjMsMjc2LjYgMTE0Mi42LDQ4My4zIDk1OC41LDM5MS45WiIgZmlsbD0iIzExMTExMyIgc3Ryb2tlPSIjZmZlMDhhIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLW9wYWNpdHk9IjAuOTIiLz48cGF0aCBkPSJNMTEzMS41LDI5NC4xIDEyNTMuMSwzMzcuMSAxMjg5LjgsNDk3LjNaIiBmaWxsPSIjMWExMjA2IiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0xMTMxLjUsMjk0LjEgMTI4OS44LDQ5Ny4zIDExNDIuNiw0ODMuM1oiIGZpbGw9IiMwZTBlMTAiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTEyNTMuMSwzMzcuMSAxNDQwLjAsMzI1LjEgMTQ0MC4wLDQyNi41WiIgZmlsbD0iIzE1MTUxNyIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMTI1My4xLDMzNy4xIDE0NDAuMCw0MjYuNSAxMjg5LjgsNDk3LjNaIiBmaWxsPSIjMTgxODFhIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTAuMCw0MTcuOCAxNzAuMCw0NTMuMiAxNzIuNyw2MTAuMVoiIGZpbGw9IiMxNjE2MTgiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNMC4wLDQxNy44IDE3Mi43LDYxMC4xIDAuMCw2MjQuNloiIGZpbGw9IiMyMDE4MDYiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTE3MC4wLDQ1My4yIDM3MC40LDQ3OC45IDMxNC4xLDY0Mi44WiIgZmlsbD0iIzFjMTQwNiIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMTcwLjAsNDUzLjIgMzE0LjEsNjQyLjggMTcyLjcsNjEwLjFaIiBmaWxsPSIjMTcxNzE5IiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0zNzAuNCw0NzguOSA0NTEuNSw1MTAuNSAzMTQuMSw2NDIuOFoiIGZpbGw9IiMxNTE1MTciIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNNDUxLjUsNTEwLjUgNTM5LjgsNTk2LjcgMzE0LjEsNjQyLjhaIiBmaWxsPSIjMTgxODFhIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTQ1MS41LDUxMC41IDU4OC43LDQzOS43IDUzOS44LDU5Ni43WiIgZmlsbD0iIzFhMWExYyIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNNTg4LjcsNDM5LjcgNjYyLjEsNTQ0LjYgNTM5LjgsNTk2LjdaIiBmaWxsPSIjMGMwYzBlIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik01ODguNyw0MzkuNyA4MzQuNiw0MDYuMiA4MjcuMSw2MTguNVoiIGZpbGw9IiMxMTExMTMiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNNTg4LjcsNDM5LjcgODI3LjEsNjE4LjUgNjYyLjEsNTQ0LjZaIiBmaWxsPSIjMDgxNDFlIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik04MzQuNiw0MDYuMiA5NTguNSwzOTEuOSAxMDI2LjMsNjQwLjZaIiBmaWxsPSIjMGYwZjExIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTgzNC42LDQwNi4yIDEwMjYuMyw2NDAuNiA4MjcuMSw2MTguNVoiIGZpbGw9IiMwODE2MjAiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNOTU4LjUsMzkxLjkgMTE0Mi42LDQ4My4zIDEwOTEuMCw1ODUuNloiIGZpbGw9IiMxMjEyMTQiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTk1OC41LDM5MS45IDEwOTEuMCw1ODUuNiAxMDI2LjMsNjQwLjZaIiBmaWxsPSIjMWExYTFjIiBzdHJva2U9IiNmZmUwOGEiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2Utb3BhY2l0eT0iMC45MiIvPjxwYXRoIGQ9Ik0xMTQyLjYsNDgzLjMgMTI4OS44LDQ5Ny4zIDEzMDIuNyw1MzkuOFoiIGZpbGw9IiMwYzBjMGUiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTExNDIuNiw0ODMuMyAxMzAyLjcsNTM5LjggMTA5MS4wLDU4NS42WiIgZmlsbD0iIzBmMGYxMSIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik0xMjg5LjgsNDk3LjMgMTQ0MC4wLDQyNi41IDE0NDAuMCw1OTUuMloiIGZpbGw9IiMwODEwMWEiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTEyODkuOCw0OTcuMyAxNDQwLjAsNTk1LjIgMTMwMi43LDUzOS44WiIgZmlsbD0iIzBjMGMwZSIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMC4wLDYyNC42IDE3Mi43LDYxMC4xIDAuMCw3MDguMloiIGZpbGw9IiMxYTEyMDYiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTE3Mi43LDYxMC4xIDEwOC41LDY5NC40IDAuMCw3MDguMloiIGZpbGw9IiMxNDE0MTYiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTE3Mi43LDYxMC4xIDMxNC4xLDY0Mi44IDEwOC41LDY5NC40WiIgZmlsbD0iIzEyMTIxNCIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMzE0LjEsNjQyLjggMzU2LjEsNzAzLjMgMTA4LjUsNjk0LjRaIiBmaWxsPSIjMDgxYjI1IiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0zMTQuMSw2NDIuOCA1MzkuOCw1OTYuNyA0NDYuMSw3MzYuM1oiIGZpbGw9IiMwODEyMWMiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNMzE0LjEsNjQyLjggNDQ2LjEsNzM2LjMgMzU2LjEsNzAzLjNaIiBmaWxsPSIjMWExMjA2IiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTUzOS44LDU5Ni43IDY2Mi4xLDU0NC42IDY4OS45LDY5Ny4yWiIgZmlsbD0iIzEwMTAxMiIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNNTM5LjgsNTk2LjcgNjg5LjksNjk3LjIgNDQ2LjEsNzM2LjNaIiBmaWxsPSIjMGYwZjExIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTY2Mi4xLDU0NC42IDgyNy4xLDYxOC41IDc5My4yLDc1Ni4yWiIgZmlsbD0iIzEyMTIxNCIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik02NjIuMSw1NDQuNiA3OTMuMiw3NTYuMiA2ODkuOSw2OTcuMloiIGZpbGw9IiMwODE4MjIiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNODI3LjEsNjE4LjUgMTAyNi4zLDY0MC42IDEwMTEuNSw3OTAuMloiIGZpbGw9IiMxZDE1MDYiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTgyNy4xLDYxOC41IDEwMTEuNSw3OTAuMiA3OTMuMiw3NTYuMloiIGZpbGw9IiMxZTFlMjAiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48cGF0aCBkPSJNMTAyNi4zLDY0MC42IDEwOTEuMCw1ODUuNiAxMTY4LjksNzIyLjFaIiBmaWxsPSIjMTYxNjE4IiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0xMDI2LjMsNjQwLjYgMTE2OC45LDcyMi4xIDEwMTEuNSw3OTAuMloiIGZpbGw9IiMxMDEwMTIiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTEwOTEuMCw1ODUuNiAxMzAyLjcsNTM5LjggMTI2OC42LDczMi4yWiIgZmlsbD0iIzFlMWUyMCIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMTA5MS4wLDU4NS42IDEyNjguNiw3MzIuMiAxMTY4LjksNzIyLjFaIiBmaWxsPSIjMGIwYjBkIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTEzMDIuNyw1MzkuOCAxNDQwLjAsNTk1LjIgMTI2OC42LDczMi4yWiIgZmlsbD0iIzA4MWEyNCIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMTQ0MC4wLDU5NS4yIDE0NDAuMCw3OTguNCAxMjY4LjYsNzMyLjJaIiBmaWxsPSIjMGYwZjExIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0wLjAsNzA4LjIgMTA4LjUsNjk0LjQgMjIxLjUsOTAwLjBaIiBmaWxsPSIjMTYxNjE4IiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTAuMCw3MDguMiAyMjEuNSw5MDAuMCAwLjAsOTAwLjBaIiBmaWxsPSIjMTMxMzE1IiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0xMDguNSw2OTQuNCAzNTYuMSw3MDMuMyAyNzMuMSw5MDAuMFoiIGZpbGw9IiMwYjBiMGQiIHN0cm9rZT0iIzJhMmEzMCIgc3Ryb2tlLXdpZHRoPSIwLjciIHN0cm9rZS1vcGFjaXR5PSIwLjg1Ii8+PHBhdGggZD0iTTEwOC41LDY5NC40IDI3My4xLDkwMC4wIDIyMS41LDkwMC4wWiIgZmlsbD0iIzA4MTcyMSIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMzU2LjEsNzAzLjMgNDQ2LjEsNzM2LjMgMjczLjEsOTAwLjBaIiBmaWxsPSIjMTQxNDE2IiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTQ0Ni4xLDczNi4zIDQzNi41LDkwMC4wIDI3My4xLDkwMC4wWiIgZmlsbD0iIzExMTExMyIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNNDQ2LjEsNzM2LjMgNjg5LjksNjk3LjIgNDM2LjUsOTAwLjBaIiBmaWxsPSIjMTAxMDEyIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTY4OS45LDY5Ny4yIDYwNC4wLDkwMC4wIDQzNi41LDkwMC4wWiIgZmlsbD0iIzA4MTYyMCIgc3Ryb2tlPSIjZmZlMDhhIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLW9wYWNpdHk9IjAuOTIiLz48cGF0aCBkPSJNNjg5LjksNjk3LjIgNzkzLjIsNzU2LjIgNzY0LjIsOTAwLjBaIiBmaWxsPSIjMWUxZTIwIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTY4OS45LDY5Ny4yIDc2NC4yLDkwMC4wIDYwNC4wLDkwMC4wWiIgZmlsbD0iIzBhMGEwYyIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik03OTMuMiw3NTYuMiAxMDExLjUsNzkwLjIgNzY0LjIsOTAwLjBaIiBmaWxsPSIjMGUwZTEwIiBzdHJva2U9IiNkOGIyNWEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2Utb3BhY2l0eT0iMC44Ii8+PHBhdGggZD0iTTEwMTEuNSw3OTAuMiA5NTguMCw5MDAuMCA3NjQuMiw5MDAuMFoiIGZpbGw9IiMwODEwMWEiIHN0cm9rZT0iI2ZmZTA4YSIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1vcGFjaXR5PSIwLjkyIi8+PHBhdGggZD0iTTEwMTEuNSw3OTAuMiAxMTY4LjksNzIyLjEgMTEzMi4wLDkwMC4wWiIgZmlsbD0iIzBjMGMwZSIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik0xMDExLjUsNzkwLjIgMTEzMi4wLDkwMC4wIDk1OC4wLDkwMC4wWiIgZmlsbD0iIzBlMGUxMCIgc3Ryb2tlPSIjMmEyYTMwIiBzdHJva2Utd2lkdGg9IjAuNyIgc3Ryb2tlLW9wYWNpdHk9IjAuODUiLz48cGF0aCBkPSJNMTE2OC45LDcyMi4xIDEyNjguNiw3MzIuMiAxMTMyLjAsOTAwLjBaIiBmaWxsPSIjMWQxZDFmIiBzdHJva2U9IiMyYTJhMzAiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2Utb3BhY2l0eT0iMC44NSIvPjxwYXRoIGQ9Ik0xMjY4LjYsNzMyLjIgMTI0OC4xLDkwMC4wIDExMzIuMCw5MDAuMFoiIGZpbGw9IiMxOTE5MWIiIHN0cm9rZT0iI2ZmZTA4YSIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1vcGFjaXR5PSIwLjkyIi8+PHBhdGggZD0iTTEyNjguNiw3MzIuMiAxNDQwLjAsNzk4LjQgMTI0OC4xLDkwMC4wWiIgZmlsbD0iIzFlMWUyMCIgc3Ryb2tlPSIjZDhiMjVhIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPjxwYXRoIGQ9Ik0xNDQwLjAsNzk4LjQgMTQ0MC4wLDkwMC4wIDEyNDguMSw5MDAuMFoiIGZpbGw9IiMxYTFhMWMiIHN0cm9rZT0iI2Q4YjI1YSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz48L3N2Zz4=") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  /* 'scroll' not 'fixed': background-attachment:fixed forces costly full-screen
     repaints in iOS WKWebView (jank on scroll/keyboard). The body is page-locked
     (overflow:hidden) so the backdrop stays put without the perf cost. */
  background-attachment: scroll, scroll !important;
  background-repeat: no-repeat, no-repeat !important;
}
body::after { display: none !important; }
body::before { opacity: 0.16 !important; }

/* Strip the old purple/gold haze so the black glass shows through the panels. */
.app-window,
.sidebar-contacts,
.main-chat::before,
.login-frame,
.login-frame::after,
.login-screen { background-image: none !important; }

.app-window {
  background: linear-gradient(180deg, rgba(2,3,6,0.34), rgba(1,2,4,0.46)) !important;
  border-color: rgba(212, 175, 55,0.42) !important;
}
.main-chat, #messages, .messages { background: transparent !important; }
.sidebar-contacts {
  background: rgba(3,4,8,0.80) !important;
  border-right: 1px solid rgba(212, 175, 55,0.18) !important;
}
.app-titlebar { background: rgba(2,3,6,0.72) !important; }
.topbar { background: rgba(2,3,6,0.50) !important; }
.composer { background: rgba(2,3,6,0.72) !important; }
.login-frame {
  background: linear-gradient(180deg, rgba(7,9,14,0.92), rgba(2,3,6,0.96)) !important;
}

/* Headers / titles → gold. */
.app-brand span,
#chat-title,
.sidebar-header h3,
.sidebar-section-header h3,
.drawer-head h3,
.modal-card h3 { color: var(--kx-gold-high) !important; }

/* Accent text → ocean blue. */
.eyebrow,
.app-secure,
.brand-sub,
.message-meta,
.micro-time,
.my-identity-chev,
.pinned-bar-title,
.strip-label { color: var(--kx-ocean) !important; }
#connection-status { color: var(--kx-ocean-ink) !important; }
#connection-status.ok, .status.ok { color: var(--kx-ocean) !important; text-shadow: 0 0 12px rgba(127, 200, 222,0.3) !important; }

/* Message text gets a soft ocean-white cast (readable on black). */
.message-text { color: var(--kx-text-primary) !important; }

/* Own messages → ocean-blue glass; incoming → neutral black glass. */
.message-row.own .message-bubble {
  background:
    linear-gradient(180deg, rgba(127, 200, 222,0.18), rgba(14,127,160,0.10)),
    rgba(4,10,16,0.92) !important;
  border: 1px solid rgba(127, 200, 222,0.38) !important;
}
.message-row.own .message-bubble::after { color: rgba(212, 175, 55,0.82) !important; }
.message-bubble {
  background: rgba(7,9,14,0.9) !important;
  border: 1px solid rgba(212, 175, 55,0.16) !important;
}

/* Active contact rail → gold→ocean sheen. */
.contact-item.active::before,
.group-card.active::before {
  background: linear-gradient(90deg, rgba(212, 175, 55,0.6), rgba(127, 200, 222,0.42), rgba(212, 175, 55,0.45)) !important;
}

/* Identity footer: gold edge on black glass (undo the too-dark plain card). */
.sidebar-contacts .my-identity-card.sidebar-footer {
  background: linear-gradient(180deg, rgba(9,11,17,0.96), rgba(2,3,6,0.98)) !important;
  border: 1px solid rgba(212, 175, 55,0.32) !important;
  box-shadow: 0 -12px 24px rgba(0,0,0,0.6) !important;
}

/* Emoji panel sits on the same black glass. */
.emoji-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55,0.06), transparent 12rem),
    linear-gradient(180deg, rgba(8,10,15,0.99), rgba(2,3,6,0.99)) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   UX FIXES 2026-06-30 — fit-to-viewport login · Signal-style profile chip
   ════════════════════════════════════════════════════════════════════════ */
/* (1) The PAGE never scrolls; only inner regions (messages list, login frame). */
html, body { height: 100% !important; overflow: hidden !important; overscroll-behavior: none; }

/* (1) Compact the login so it fits common phone/laptop heights without scrolling. */
.login-frame {
  min-height: 0 !important;
  padding-top: clamp(0.8rem, 2.5vh, 1.4rem) !important;
  padding-bottom: clamp(0.8rem, 2.5vh, 1.4rem) !important;
}
.crest { transform: scale(0.78); margin-bottom: clamp(0.1rem, 1vh, 0.4rem) !important; }
.brand-title { font-size: clamp(1.7rem, 6vw, 2.3rem) !important; margin: 0.1rem 0 0 !important; }
.brand-sub { margin: 0.15rem 0 0.4rem !important; }
.login-frame .lfield { margin-bottom: 0.5rem !important; }
.login-frame .or-div { margin: 0.45rem 0 !important; }
.privacy { margin-top: clamp(0.5rem, 2vh, 0.95rem) !important; }
.mountains { display: none !important; }   /* decorative — drop so the form always fits */

/* (3) Signal-style profile chip: top-left of the sidebar (was the big card). */
.profile-bar { margin: 0 0 0.25rem; }
.profile-chip {
  width: 100%;
  box-sizing: border-box;          /* keep the 100% + horizontal padding inside the sidebar */
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  text-align: left;
  cursor: pointer;
  color: var(--kx-ink, #edebe4) !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(212, 175, 55,0.18) !important;
  box-shadow: none !important;
}
.profile-chip:hover { border-color: rgba(212, 175, 55,0.42) !important; background: rgba(212, 175, 55,0.06) !important; }
.profile-chip .my-avatar-wrap { flex: 0 0 auto; position: relative; }
.profile-chip #my-avatar-img,
.profile-chip #my-avatar-placeholder {
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  object-fit: cover; align-items: center; justify-content: center;
  background: var(--kx-gold, #d4af37); color: var(--kx-ink-on-gold); font-weight: 800; font-size: 1.05rem;
}
.profile-chip #my-avatar-placeholder { display: flex; }
.profile-chip-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.profile-chip-name { font-weight: 700; color: var(--kx-gold-high, #edd489); font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-chip-status { font-size: 0.76rem; color: var(--kx-ocean, #7fc8de); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-chip-gear { flex: 0 0 auto; color: var(--kx-gold, #d4af37); font-size: 1.05rem; opacity: 0.85; }

/* (3) Safety-code row + Logout inside the profile modal. */
.safety-code-row { display: flex; align-items: center; gap: 0.5rem; }
.safety-code-row #own-fingerprint {
  flex: 1 1 auto; min-width: 0; font-size: 0.74rem; line-height: 1.3; word-break: break-all;
  color: var(--kx-ocean-ink, #7fc8de); background: rgba(5,7,14,0.7);
  border: 1px solid rgba(212, 175, 55,0.16); border-radius: 8px; padding: 0.45rem 0.6rem;
  font-family: ui-monospace, Menlo, monospace;
}
.safety-code-row #copy-fingerprint-button { flex: 0 0 auto; min-height: 40px !important; border-radius: 8px !important; }
.logout-btn {
  width: 100%; margin-top: 0.75rem !important; border-radius: 10px !important;
  color: var(--kx-danger) !important; border-color: rgba(224, 106, 94,0.4) !important;
  background: rgba(224, 106, 94,0.08) !important;
}
.logout-btn:hover { background: rgba(224, 106, 94,0.16) !important; border-color: rgba(224, 106, 94,0.6) !important; }

/* (1) refinement: shrink the crest's real box (transform:scale doesn't free layout
   space) and give the login frame a little more height so it fits ~700px. */
.crest { transform: none !important; }
.crest-logo, .crest img { width: 92px !important; height: 92px !important; }
.login-frame { max-height: calc(100dvh - 18px) !important; }

/* (1) refinement 2: trim the login to fit short screens (≈640px) with no scroll. */
.crest-logo, .crest img { width: 68px !important; height: 68px !important; }
.crest { margin-bottom: 0.2rem !important; }
.brand-title { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; }
.brand-sub { letter-spacing: 0.12em !important; }
.login-frame { padding-top: 0.7rem !important; padding-bottom: 0.7rem !important; }
.login-frame .lfield { margin-bottom: 0.42rem !important; }
.login-frame .lfield input { min-height: 46px !important; }
.privacy { margin-top: 0.55rem !important; }
.privacy-text { font-size: 0.76rem !important; line-height: 1.35 !important; }
.privacy-badge svg { width: 22px !important; height: 22px !important; }

/* Final login-frame clamp — routed through --app-height and, crucially, accounting
   for the notch/home-indicator (the previous calc(100dvh - 6px) dropped safe-area,
   which let the frame ride under the Dynamic Island on iOS). */
.login-frame { max-height: calc(var(--app-height, 100svh) - max(8px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important; }

/* ════════════════════════════════════════════════════════════════════════
   WEBVIEW POLISH 2026-06-30 (v2.3.4) — native feel inside the Capacitor iOS
   WKWebView shell (nl.kocax.messenger) + Android. Safe-area insets, dvh, the
   page-lock, keyboard inset, and 16px inputs are ALREADY handled in style.css;
   this layer removes the remaining "it's a web page" tells.
   ════════════════════════════════════════════════════════════════════════ */
/* Stop iOS from auto-inflating text on rotation/reflow. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Kill the grey tap-flash box on every touchable element. */
* { -webkit-tap-highlight-color: transparent; }
/* Drop the 300ms tap delay + double-tap-zoom on interactive controls. */
button, .btn-signin, .send-btn, .burn-btn, .emoji-btn, .emoji-tab, .emoji-cell,
.profile-chip, .profile-chip-gear, [role="button"], a, label,
.contact-item, .group-card, .topbar-actions button {
  touch-action: manipulation;
}
/* Momentum scrolling in the inner scroll regions. */
.messages, .sidebar-contacts, #contacts-list, .emoji-grid { -webkit-overflow-scrolling: touch; }
/* Native selection feel: chrome isn't selectable; message text + safety code are.
   (Composer/#message-input deliberately excluded so typed text stays selectable.) */
.app-titlebar, .topbar, .sidebar-header, .sidebar-section-header,
.profile-chip, .emoji-panel .emoji-tabs, button, [role="button"] {
  -webkit-user-select: none; user-select: none;
}
.message-bubble, .message-text, #message-input, .safety-code-row #own-fingerprint {
  -webkit-user-select: text; user-select: text;
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE APP-SHELL · KEYBOARD · A11Y  (v2.4.0, 2026-06-30)
   Presentation only. Pairs with the ui.js viewport runtime (--app-height /
   --keyboard-inset / body.keyboard-open / body.mobile-chat-open). No crypto,
   network, or storage touched.
   ════════════════════════════════════════════════════════════════════════ */

/* When the soft keyboard is up, the shell already shrank to the visual viewport
   (ui.js sets --app-height = visualViewport.height), so the composer is sitting
   directly on the keyboard — the home-indicator safe-area below it is hidden, so
   drop that extra bottom padding to avoid a dead gap above the keys. */
body.keyboard-open .composer {
  padding-bottom: 0.6rem !important;
}
/* Keep the message list pinned to its newest line as the keyboard opens. */
body.keyboard-open .messages { scroll-padding-bottom: 0.5rem; }

/* Respect reduced-motion: kill the pane slide, bubble pop, and matrix shimmer. */
@media (prefers-reduced-motion: reduce) {
  .split-layout { transition: none !important; }
  .animate-pop-in, .new-burst .message-bubble { animation: none !important; }
  .matrix-overlay { display: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Visible keyboard-focus rings (pointer focus stays clean via :focus-visible). */
:where(button, [role="button"], a, select, .contact-item,
       .profile-chip, .emoji-cell, .burn-opt):focus-visible {
  outline: 2px solid var(--kx-gold, #d4af37) !important;
  outline-offset: 2px !important;
  border-radius: 10px;
}

/* ════════════════════════════════════════════════════════════════════════
   WP2 VISUAL POLISH (v2.5.0, 2026-07-04) — typography rhythm, calmer canvas,
   modern bubbles, subtle meta. Presentation only; overrides ride last in the
   cascade (same !important pattern the retheme above uses).
   ════════════════════════════════════════════════════════════════════════ */

/* Calm the shattered-glass canvas behind the conversation so bubbles read
   cleanly; the shards stay visible but recede. */
.main-chat { background: rgba(2, 3, 6, 0.62) !important; }
.main-chat::before { opacity: 0.28 !important; }

/* — Message bubbles — */
.messages { gap: 0.3rem; padding-inline: clamp(1rem, 3vw, 2.2rem) !important; }

.message-bubble {
  max-width: min(64%, 640px);
  padding: 0.62rem 0.85rem 0.5rem;
  border-radius: 16px 16px 16px 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}
.message-row.own .message-bubble { border-radius: 16px 16px 5px 16px; }
.message-row.consecutive .message-bubble { border-radius: 16px; }
.message-row.consecutive.own .message-bubble { border-radius: 16px; }

/* Incoming: neutral dark glass, hairline gold. Own: ocean glass, slightly
   stronger — the pair now reads at a glance. */
.message-bubble {
  background: rgba(13, 16, 22, 0.88) !important;
  border: 1px solid var(--kx-border-hairline) !important;
}
.message-row.own .message-bubble {
  background:
    linear-gradient(180deg, rgba(127, 200, 222, 0.22), rgba(28, 60, 74, 0.12)),
    rgba(5, 12, 18, 0.9) !important;
  border: 1px solid rgba(127, 200, 222, 0.34) !important;
}

/* Sender meta: small and quiet, not shouting caps. */
.message-meta {
  margin-bottom: 0.22rem;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  opacity: 0.85;
}
/* Own bubbles don't need a name tag — you know who you are. */
.message-row.own .message-meta { display: none; }

.message-text { font-size: 0.94rem !important; line-height: 1.5 !important; }
.micro-time {
  margin-top: 0.34rem;
  font-size: 0.62rem;
  color: var(--kx-text-muted) !important;
}
.message-row.own .message-bubble::after {
  font-size: 0.68rem;
  color: rgba(212, 175, 55, 0.6) !important;
}

.system-message {
  font-size: 0.76rem;
  padding: 0.4rem 0.85rem;
  border-color: var(--kx-border-hairline);
  color: var(--kx-text-secondary);
}

/* — Sidebar rows — */
.sidebar-contacts { gap: 0.7rem; }
.group-card, .contact-item {
  min-height: 60px;
  padding: 0.55rem 0.6rem;
  border-radius: 14px;
  transition: background 160ms ease, border-color 160ms ease;
}
.contact-item:hover, .group-card:hover {
  background: rgba(212, 175, 55, 0.05);
  border-color: var(--kx-border-hairline);
}
.contact-item.active, .group-card.active {
  background: rgba(212, 175, 55, 0.07);
  box-shadow: none;
}
.contact-avatar-wrapper { flex-basis: 42px; }
.contact-avatar { width: 42px; height: 42px; font-size: 0.95rem; }
.contact-avatar, #my-avatar-placeholder {
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28) !important;
}
.contact-name, .group-card-name { font-weight: 700; font-size: 0.94rem; }
.contact-id-text, .group-card-meta, .group-card-members {
  font-size: 0.74rem;
  color: var(--kx-text-secondary);
}
.contact-unread-pill, .badge {
  min-width: 21px;
  height: 21px;
  font-size: 0.66rem;
}
.online-badge { font-size: 0.64rem; height: 20px; }
.sidebar-header h3, .sidebar-section-header h3 {
  font-size: 1.02rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em;
}
.folder-tab { min-height: 36px; padding: 0.4rem 0.75rem; font-size: 0.78rem; }
.folder-tabs { min-height: 38px; }

/* — Topbar: quieter chrome, consistent icon buttons — */
.topbar { min-height: 76px !important; padding-block: 0.7rem !important; }
.topbar::before {
  width: 44px; height: 44px; flex-basis: 44px;
  box-shadow: 0 0 0 1.5px rgba(212, 175, 55, 0.4);
}
.eyebrow { font-size: 0.6rem; letter-spacing: 0.14em; opacity: 0.8; }
#chat-title {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
}
#connection-status { font-size: 0.72rem !important; opacity: 0.85; }
.topbar-actions .secondary-button,
#back-button, #chat-settings-btn, #lock-setup-btn, #lock-remove-btn,
#topbar-settings-btn, #clear-chat-button, #close-chat-settings {
  min-width: 40px !important;
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 0.82rem !important;
}

/* — Empty state — */
.empty-state {
  padding: 0.9rem 0.4rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--kx-text-muted);
  white-space: normal;
}

/* ════════════════════════════════════════════════════════════════════════
   WP2 VISUAL POLISH — PASS 2 (v2.5.1, 2026-07-04) — finish the design system:
   one disciplined accent story (gold is the brand accent; the cool ocean tint
   is kept ONLY as the functional "your message" cue, not sprayed across every
   label), a globally calmer canvas, and the small interaction-state details
   that read "professional" — focus rings, selection, placeholders, scrollbars.
   Presentation only; rides last in the cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* — Accent discipline — retire the loud teal from text labels so gold stays the
   single brand accent. Meta/eyebrows go calm; gold marks brand + actions only. */
.message-meta { color: var(--kx-text-secondary) !important; }
.eyebrow { color: rgba(212, 175, 55, 0.6) !important; text-shadow: none !important; }
.app-secure { color: rgba(212, 175, 55, 0.62) !important; }
.brand-sub { color: rgba(212, 175, 55, 0.66) !important; }
.pinned-bar-title,
.strip-label { color: rgba(212, 175, 55, 0.72) !important; }
.my-identity-chev,
.profile-chip-gear { color: var(--kx-gold, #d4af37) !important; }
.profile-chip-status { color: var(--kx-text-secondary) !important; }

/* — Calmer login canvas — the shattered-glass shards were competing with the
   sign-in frame; the deepened body scrim (above) plus a softer frame glow let
   the form breathe while keeping the premium gold-crest identity. */
.login-frame,
.app-window {
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 40px rgba(26, 29, 38, 0.05) !important;
}

/* — Global type rhythm — align section headings + modal titles to one scale. */
.modal-card h3,
.drawer-head h3 { font-weight: 750 !important; letter-spacing: 0.01em; }
.modal-card > .muted,
.nc-hint { color: var(--kx-text-secondary) !important; }

/* — Interaction states — visible keyboard focus on inputs too (buttons already
   handled above), smooth and short. Pointer focus stays clean via :focus-visible. */
:where(#message-input, #contact-search-input, #nc-search-input, #nc-group-name,
       .lfield input, .modal-card input, .modal-card textarea,
       #lock-pin-input, #report-detail):focus-visible {
  outline: 2px solid var(--kx-gold, #d4af37) !important;
  outline-offset: 1px !important;
}
/* Consistent disabled read across every control. */
button:disabled,
button[disabled],
textarea:disabled,
input:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
/* Subtle press feedback on the primary actions. */
.btn-signin:active:not(:disabled),
.send-btn:active:not(:disabled),
#nc-primary-btn:active:not(:disabled) { transform: translateY(1px); }

/* — The small details that read professional — */
::selection { background: rgba(212, 175, 55, 0.28); color: var(--kx-text-primary); }
::placeholder { color: var(--kx-text-secondary) !important; opacity: 1; }

/* Calmer, thinner scrollbars — a hairline gold that warms on hover, not a bar. */
.sidebar-contacts::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.emoji-grid::-webkit-scrollbar { width: 8px !important; }
.sidebar-contacts::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.16) !important;
  border-width: 2px !important;
  transition: background 160ms ease;
}
.sidebar-contacts:hover::-webkit-scrollbar-thumb,
.messages:hover::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.3) !important;
}

/* — Modal / drawer coherence — one radius + one hairline, calmer backdrops. */
.modal-card,
.drawer-card,
.lock-card,
#edit-profile-modal .panel {
  border: 1px solid var(--kx-border-hairline) !important;
  border-radius: 18px !important;
}

/* — Composer polish — keep the send action the one gold moment down here; the
   burn/timer button stays a calm dark control until active. */
#message-input { border-radius: 14px !important; }
.composer { padding-top: 0.8rem !important; }

/* ═══════════════════════════════════════════════════════════════════
   WP2.2 MONOCHROME ICON SWEEP (v2.5.2, 2026-07-04) — emoji chrome replaced
   with inline stroke SVGs (Lucide shape language). Icons size with the
   control's font and inherit its text color, so gold-on-active /
   dim-on-inactive follows the theme automatically.
   ═══════════════════════════════════════════════════════════════════ */
svg.icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex: none;
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════
   WP2.1 MESSAGE-LIST & DRAWER POLISH (v2.5.3, 2026-07-04) — day separators,
   intentional empty states, Safety Code relocated to the profile modal.
   Presentation only; rides last in the cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* — Day separators: centered pill that sticks to the top of the scroll. — */
.day-separator {
  position: sticky;
  top: 0.35rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 0.18rem 0;
  pointer-events: none;
}
.day-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(212, 175, 55, 0.78);
  background: rgba(10, 12, 18, 0.88);
  border: 1px solid var(--kx-border-hairline);
  border-radius: 999px;
  padding: 0.24rem 0.72rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* — Empty chat placeholder — */
.chat-empty-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 2.2rem 1rem;
  text-align: center;
}
.chat-empty-glyph svg.icon {
  width: 46px;
  height: 46px;
  color: rgba(212, 175, 55, 0.4);
}
.chat-empty-line {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--kx-text-secondary);
}
.chat-empty-sub {
  margin: 0;
  max-width: 340px;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--kx-text-muted);
}

/* — Sidebar: no contacts yet — */
.contacts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.4rem 0.6rem;
  text-align: center;
}
.contacts-empty-glyph svg.icon {
  width: 34px;
  height: 34px;
  color: rgba(212, 175, 55, 0.38);
}
.contacts-empty-line {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kx-text-secondary);
}
.contacts-empty-sub {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--kx-text-muted);
}

/* — Safety Code block, relocated into the Edit Profile modal — */
.safety-code-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--kx-border-hairline);
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.04);
}
.safety-code-text { min-width: 0; }
.safety-code-label {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted, var(--kx-text-secondary));
}
.safety-code-block .fingerprint {
  margin: 2px 0 0;
  font-size: 0.7rem;
  word-break: break-all;
  color: var(--muted-strong, var(--kx-text-secondary));
}
.safety-code-copy {
  flex: none;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
}

/* ─── Notifications settings (Edit Profile modal) — added v2.6.1 ─── */
.notif-block { margin-top: 0.25rem; padding: 0.85rem 0 0.35rem; border-top: 1px solid rgba(212,175,55,0.14); }
.notif-row { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: 0.5rem 0; }
.notif-row .notif-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-row .notif-label b { font-size: 0.9rem; font-weight: 600; color: var(--text, #efe9dc); }
.notif-row .notif-label small { font-size: 0.7rem; color: #9a938a; line-height: 1.35; }
.notif-hint { margin: 0.45rem 0 0; font-size: 0.7rem; color: #9a938a; line-height: 1.45; }
.kx-switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: 0 0 auto; }
.kx-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.kx-switch .kx-slider { position: absolute; inset: 0; pointer-events: none; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; transition: background 160ms ease, border-color 160ms ease; }
.kx-switch .kx-slider::before { content: ''; position: absolute; height: 21px; width: 21px; left: 2px; top: 2px; border-radius: 50%; background: #efe9dc; box-shadow: 0 1px 3px rgba(0,0,0,0.45); transition: transform 160ms ease, background 160ms ease; }
.kx-switch input:checked + .kx-slider { background: var(--kx-gold-500, #d4af37); border-color: var(--kx-gold-500, #d4af37); }
.kx-switch input:checked + .kx-slider::before { transform: translateX(19px); background: #1a1305; }
.kx-switch input:focus-visible + .kx-slider { box-shadow: 0 0 0 3px rgba(212,175,55,0.35); }


/* REQUEST KEY / in-chat grant controls (v2.6.2) */
.request-key-panel {
  display: grid;
  gap: 0.42rem;
  margin-top: -0.15rem;
}
.request-key-panel[hidden] { display: none !important; }
.btn-request-key {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(43, 182, 217, 0.45);
  background: linear-gradient(135deg, rgba(43, 182, 217, 0.22), rgba(212, 175, 55, 0.14));
  color: #f7fbff;
  font-weight: 800;
  letter-spacing: 0;
}
.request-key-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
}
.grant-key-btn {
  border-color: rgba(43, 182, 217, 0.42) !important;
  color: #dff8ff !important;
  background: rgba(43, 182, 217, 0.10) !important;
  font-weight: 700;
}

/* New chat/group segmented control sits above the global gold button skin. */
#new-chat-modal .nc-tab:not(.active) {
  color: var(--kx-text-secondary, #a8acb8) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
#new-chat-modal .nc-tab.active {
  color: var(--kx-ink-on-gold, #191203) !important;
  border-color: var(--kx-border-active, rgba(212, 175, 55, 0.4)) !important;
  background: var(--kx-gold-500, #d4af37) !important;
}