/* ============================================================================
 * KocaX Messenger — Mobile Shell (UI Simplification Pass v1, 2026-07-13)
 * Loaded AFTER style.css + tui-theme.css so it wins. Turns the desktop "cockpit"
 * chat view into a conversations-first mobile messenger shell.
 * Nothing here changes crypto/behaviour — it restyles + relayouts existing DOM.
 * All element IDs from ui.js are preserved; we only hide/reposition/restyle.
 * ==========================================================================*/

/* ---- 1. Theme: KocaX black-gold business shell -------------------------- */
:root {
  --kx-accent: #e6c66d;
  --kx-premium: #f3d78c;
  --kx-premium-soft: rgba(230, 198, 109, 0.16);
  --kx-premium-line: rgba(230, 198, 109, 0.42);
  --kx-accent-ink: #151006;
  --kx-accent-soft: rgba(230, 198, 109, 0.13);
  --kx-accent-line: rgba(230, 198, 109, 0.38);

  /* Override the legacy tokens the components read */
  --bg: #070808;
  --bg-soft: #141416;
  --bg-deep: #030404;
  --panel: #111112;
  --panel-strong: #181716;
  --panel-soft: rgba(255,255,255,0.03);
  --surface: #0d0e0e;
  --surface-2: #171615;
  --border: rgba(230,198,109,0.13);
  --border-strong: rgba(230,198,109,0.42);
  --hairline: rgba(230,198,109,0.12);
  --text: #f4f1e9;
  --text-strong: #ffffff;
  --muted: #a29e94;
  --muted-strong: #c8c0ae;
  --accent: var(--kx-accent);
  --accent-strong: #caa64e;
  --gold: var(--kx-accent);
  --gold-bright: #fff0b5;
  --gold-soft: #a67b2d;
  --danger: #e5675b;
  --green: #58d290;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,0.40);
  --shadow-soft: 0 4px 16px rgba(0,0,0,0.30);
  --glow: none;

  /* mobile-shell metrics (from the spec) */
  --ms-appbar-h: 56px;
  --ms-row-h: 70px;
  --ms-avatar: 48px;
  --ms-profile-avatar: 36px;
  --ms-fab: 56px;
  --ms-bottomnav-h: 0px;
  --ms-chathdr-h: 56px;
}

/* Fold older CTA tokens into the same premium gold system. */
:root {
  --kx-cta-gradient: linear-gradient(135deg, #fff0b5 0%, #e6c66d 45%, #b9852d 100%);
  --kx-gold-300: #fff0b5; --kx-gold-500: #e6c66d; --kx-gold-700: #9d7028;
  --kx-border-hairline: rgba(230,198,109,0.14);
  --kx-border-active: rgba(230,198,109,0.46);
  --kx-focus-ring: #f1ce77;
  --kx-ink-on-gold: #151006;
  --kx-bubble-own: linear-gradient(135deg, #fff0b5 0%, #e7c968 47%, #bd8a31 100%);
  --kx-bubble-own-border: rgba(255,230,150,0.50);
}

body {
  background:
    radial-gradient(circle at 82% -10%, rgba(230,198,109,0.10), transparent 34%),
    linear-gradient(rgba(230,198,109,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,198,109,0.035) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 36px 36px, 36px 36px, auto;
}

/* ---- 2. Remove cockpit chrome on the chat screen ------------------------- */
.kxn-watermark { display: none !important; }

/* When logged in (chat view visible), hide the big hero + login artwork so the
 * app fills the viewport like a native messenger. ui.js toggles #chat-view. */
body.ms-inapp .hero,
body.ms-inapp .mountains { display: none !important; }

/* The decorative "app window" frame + titlebar → flat full-bleed */
.app-window {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background:
    radial-gradient(circle at 80% 0%, rgba(230,198,109,0.08), transparent 28%),
    linear-gradient(rgba(230,198,109,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,198,109,0.026) 1px, transparent 1px),
    var(--bg) !important;
  background-size: auto, 34px 34px, 34px 34px, auto !important;
  max-width: 100% !important; height: 100vh; height: var(--app-height, 100dvh);
}
.app-titlebar { display: none !important; }          /* KocaX / E2E ribbon — folded into the app-bar */

/* Kill heavy shadows/glow globally in the shell */
.panel, .modal-card, .drawer-card { box-shadow: var(--shadow-soft) !important; }

/* ---- 3. Mobile shell: one screen at a time ------------------------------ */
/* Height tracks --app-height (set from visualViewport by ui.js) so the shell
   shrinks WITH the soft keyboard — composer rides above it, header stays put,
   nothing scrolls/displaces (WhatsApp behavior). Fixed+top anchored, not inset:0. */
#chat-view { position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: 100vh; height: var(--app-height, 100dvh); }
.split-layout { display: block !important; height: 100vh; height: var(--app-height, 100dvh); position: relative; }

/* LIST screen = the contacts sidebar, full-bleed */
.sidebar-contacts {
  position: absolute; inset: 0;
  width: 100% !important; max-width: 100% !important;
  border: 0 !important; border-radius: 0 !important;
  background:
    radial-gradient(circle at 84% 0%, rgba(230,198,109,0.08), transparent 30%),
    linear-gradient(rgba(230,198,109,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,198,109,0.024) 1px, transparent 1px),
    var(--bg) !important;
  background-size: auto, 34px 34px, 34px 34px, auto !important;
  display: flex; flex-direction: column;
  padding: 0 !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* CHAT screen = main-chat, slides over the list when a chat is open */
.main-chat {
  position: absolute; inset: 0;
  width: 100% !important; border: 0 !important; border-radius: 0 !important;
  background:
    radial-gradient(circle at 84% 0%, rgba(230,198,109,0.08), transparent 30%),
    linear-gradient(rgba(230,198,109,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,198,109,0.024) 1px, transparent 1px),
    var(--bg) !important;
  background-size: auto, 34px 34px, 34px 34px, auto !important;
  transform: translateX(100%); transition: transform 200ms ease;
  display: flex; flex-direction: column; z-index: 20;
}
.split-layout.chat-open .main-chat { transform: translateX(0); }
.split-layout.chat-open .sidebar-contacts { /* keep mounted underneath */ }

/* The base responsive stylesheet uses a two-pane parent slider
   (.split-layout.chat-open { transform: translateX(-50%) }). This mobile shell
   owns the phone layout instead: both panes are full-screen absolute layers and
   only .main-chat slides. Reassert that contract after style.css loads. */
.split-layout {
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}
.split-layout.chat-open {
  transform: none !important;
}
.split-layout > .sidebar-contacts,
.split-layout > .main-chat {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}
.split-layout > .sidebar-contacts {
  transform: none !important;
}
.split-layout > .main-chat {
  transform: translateX(100%) !important;
}
.split-layout.chat-open > .main-chat {
  transform: translateX(0) !important;
}

/* ---- 4. App-bar (title + search + profile avatar) ----------------------- */
.sidebar-header {
  height: var(--ms-appbar-h); min-height: var(--ms-appbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px !important; margin: 0 !important;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(8,8,8,1), rgba(8,8,8,0.96));
  position: sticky; top: 0; z-index: 5;
}
.sidebar-header h3 {
  margin: 0 !important; font-size: 1.15rem !important; font-weight: 700 !important;
  letter-spacing: 0 !important; color: var(--text) !important;
  text-transform: none !important;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-header h3::before, .sidebar-header h3::after { content: none !important; }  /* drop decorative rules */
.sidebar-header-actions { gap: 6px !important; flex: none; }

/* The app-bar action buttons -> premium filled icon chips */
#app-lock-btn {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(230,198,109,0.035)) !important;
  border: 1px solid rgba(230,198,109,0.22) !important;
  width: 42px; height: 42px; min-height: 42px !important; padding: 0 !important;
  color: #ead796 !important; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 22px rgba(0,0,0,0.34) !important;
}
#app-lock-btn:hover {
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(230,198,109,0.18), rgba(255,255,255,0.04)) !important;
}
#app-lock-btn .icon { width: 22px; height: 22px; }
#app-lock-btn .icon rect { fill: currentColor; fill-opacity: .16; }

/* Settings live behind the avatar now. Keep the real button in the DOM so ui.js
   remains the single owner of the settings modal, but remove the duplicate chip. */
#app-settings-btn { display: none !important; }

/* The + in the header is replaced by the FAB — hide the header one */
.sidebar-header #new-chat-button { display: none !important; }

/* Round profile avatar (injected by mobile-shell.js as #ms-profile-btn) */
#ms-profile-btn {
  width: 44px !important; height: 44px !important;
  min-width: 44px !important; max-width: 44px !important;
  min-height: 44px !important; max-height: 44px !important; flex: none;
  border-radius: 50%; border: 1px solid rgba(255,232,166,0.58) !important; padding: 0 !important; cursor: pointer;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.56), transparent 30%),
    linear-gradient(145deg, #fff0b5 0%, #e3c15e 48%, #a8772b 100%) !important;
  color: #12100a !important;
  font-weight: 800; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex: none;
  box-shadow: 0 9px 26px rgba(230,198,109,0.24), inset 0 1px 0 rgba(255,255,255,0.40) !important;
}
#ms-profile-btn img { width: 100%; height: 100%; object-fit: cover; }

/* Search icon button (injected) */
#ms-search-btn {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(230,198,109,0.035)) !important;
  border: 1px solid rgba(230,198,109,0.22) !important;
  width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 !important;
  border-radius: 999px !important; color: #ead796 !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 22px rgba(0,0,0,0.34) !important;
}
#ms-search-btn:hover { color: #ffffff !important; }

/* ---- 5. Search field (revealed on demand) + filter tabs ----------------- */
#contact-search-input {
  margin: 8px 12px 4px !important; border-radius: 12px !important;
  background: rgba(18,18,20,0.92) !important; border: 1px solid rgba(230,198,109,0.20) !important;
  color: var(--text) !important;
}
#contact-search-input:focus {
  border-color: rgba(255,232,166,0.62) !important;
  box-shadow: 0 0 0 2px rgba(230,198,109,0.12) !important;
}
body:not(.ms-search-open) #contact-search-input { display: none !important; }

#folder-tabs.folder-tabs {
  display: flex; gap: 8px; padding: 10px 12px 8px !important; margin: 0 !important;
  overflow-x: auto; -webkit-overflow-scrolling: touch; border: 0 !important;
}
#folder-tabs .folder-tab, #folder-tabs button {
  flex: none; border-radius: 999px !important; padding: 6px 14px !important;
  font-size: 0.82rem !important; font-weight: 600;
  background: rgba(255,255,255,0.045) !important; color: var(--muted) !important;
  border: 1px solid rgba(255,255,255,0.025) !important; min-height: 32px;
}
#folder-tabs .folder-tab.active, #folder-tabs button.active, #folder-tabs [aria-selected="true"] {
  background: var(--kx-accent-soft) !important; color: var(--kx-accent) !important;
  border-color: var(--kx-accent-line) !important;
}

/* ---- 6. Remove the big Groups section + the big profile card ------------- */
.sidebar-contacts .sidebar-section[aria-labelledby="groups-heading"] > .sidebar-section-header { display: none !important; }
#group-list .empty-state { display: none !important; }
/* Groups now just flow as rows in the same scroll area (no header, no border) */
.sidebar-contacts .sidebar-section[aria-labelledby="groups-heading"] { margin: 0 !important; padding: 0 !important; border: 0 !important; }

.my-identity-card { display: none !important; }   /* profile moved to the top-right avatar */

/* The scrollable conversation area = groups + contacts together */
#group-list, #contacts-list { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.sidebar-contacts .contacts-list, .sidebar-contacts #group-list { flex: 0 0 auto; }
/* Wrap both lists so they scroll as one; ui.js keeps writing into each */
.ms-conv-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- 7. Conversation rows (spec: 68–74px, avatar / name / preview / time) - */
.contact-item, .group-item, #group-list > * {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--ms-row-h); padding: 10px 14px !important;
  border: 0 !important; border-bottom: 1px solid rgba(230,198,109,0.09) !important;
  border-radius: 0 !important; margin: 0 !important; background: transparent !important;
  box-shadow: none !important;
}
.contact-item.active {
  background: linear-gradient(90deg, rgba(230,198,109,0.16), rgba(230,198,109,0.045) 64%, transparent) !important;
  box-shadow: inset 2px 0 0 rgba(230,198,109,0.72) !important;
}
.contact-avatar-wrapper { position: relative; flex: none; }
.contact-avatar {
  width: var(--ms-avatar) !important; height: var(--ms-avatar) !important;
  border-radius: 50% !important; font-size: 1.05rem !important; font-weight: 700;
  background: linear-gradient(145deg, #fff0b5 0%, #d4a64b 52%, #8e6025 100%) !important;
  color: #11100b !important;
  border: 1px solid rgba(255,232,166,0.45) !important;
  display: flex; align-items: center; justify-content: center;
}
.status-indicator { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); }
.status-indicator.online { background: var(--green); }
.status-indicator.offline { background: transparent; }
.contact-info { flex: 1 1 auto; min-width: 0; }
.contact-name {
  font-size: 0.98rem !important; font-weight: 600 !important; color: var(--text) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
/* The fingerprint line becomes the message-preview slot (filled by mobile-shell.js) */
.contact-id-text {
  font-size: 0.85rem !important; color: var(--muted) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
  font-family: var(--sans) !important; letter-spacing: 0 !important;
}
.contact-item .ms-time { font-size: 0.72rem; color: var(--muted); flex: none; align-self: flex-start; margin-top: 3px; }
.contact-unread-pill {
  background: var(--kx-cta-gradient) !important; color: #151006 !important;
  min-width: 20px; height: 20px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; flex: none;
}
.online-badge { display: none !important; }   /* calmer: online shown by the dot only */

/* right column holding time (top) + unread (bottom) — built by mobile-shell.js */
.ms-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }

/* ---- 8. Floating action button (＋) ------------------------------------- */
#new-chat-button.ms-fab, .ms-fab {
  position: fixed; right: 16px; bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  width: var(--ms-fab); height: var(--ms-fab); border-radius: 50%;
  background: var(--kx-cta-gradient) !important; color: #151006 !important;
  border: 0 !important; font-size: 26px; line-height: 1; font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(230,198,109,0.25), inset 0 1px 0 rgba(255,255,255,0.38); z-index: 30; cursor: pointer;
}
body.ms-chat-open .ms-fab { display: none !important; }

/* ---- 9. Legacy bottom navigation, removed from the mobile shell ---------- */
.ms-bottomnav {
  display: none !important;
}

/* Kept only as a stale-cache guard for older mobile-shell.js versions. */
.ms-bottomnav {
  position: fixed; left: 10px; right: 10px; bottom: max(8px, env(safe-area-inset-bottom, 0px));
  height: var(--ms-bottomnav-h);
  display: flex; align-items: center; gap: 6px; z-index: 25;
  background:
    linear-gradient(180deg, rgba(22,21,19,0.94), rgba(6,7,7,0.98)) !important;
  border: 1px solid rgba(230,198,109,0.16) !important;
  border-radius: 22px !important;
  padding: 8px !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,0.54),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(230,198,109,0.08) !important;
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.ms-bottomnav button {
  flex: 1; min-width: 0;
  background: transparent !important; border: 1px solid transparent !important; color: #9c9689 !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.64rem; line-height: 1; letter-spacing: .04em; font-weight: 750;
  text-transform: uppercase;
  cursor: pointer; padding: 6px 3px !important; min-height: 54px !important;
  border-radius: 16px !important;
  box-shadow: none !important; text-shadow: none !important;
}
.ms-bottomnav button .icon {
  width: 25px; height: 25px; display: block;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.32));
}
.ms-bottomnav button.active {
  color: #fff7db !important;
  background:
    linear-gradient(180deg, rgba(230,198,109,0.18), rgba(230,198,109,0.075)) !important;
  border-color: rgba(230,198,109,0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 8px 22px rgba(230,198,109,0.13) !important;
}
.ms-bottomnav button.active .icon { color: #f0cf78; }
.ms-bottomnav button[data-tab="settings"].active .icon { color: var(--kx-premium); }
.ms-bottomnav .ms-nav-label {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.ms-chat-open .ms-bottomnav { display: none !important; }

@media (max-width: 360px) {
  .ms-bottomnav { left: 8px; right: 8px; padding-inline: 6px !important; }
  .ms-bottomnav button { font-size: 0.58rem; }
  .ms-bottomnav button .icon { width: 23px; height: 23px; }
}

/* ---- 10. Compact chat header (‹ back · avatar · name · status · ⋯) ------- */
.main-chat .topbar {
  flex: 0 0 var(--ms-chathdr-h);
  height: var(--ms-chathdr-h) !important; min-height: var(--ms-chathdr-h) !important;
  max-height: var(--ms-chathdr-h) !important; overflow: hidden;
  display: flex; align-items: center; gap: 10px; padding: 0 8px 0 4px !important;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(8,8,8,1), rgba(8,8,8,0.96));
}
.main-chat .topbar > div { align-items: center !important; min-width: 0; overflow: hidden; }
.main-chat .topbar .eyebrow { display: none !important; }   /* "Active Chat" label gone */
.main-chat .topbar #chat-title { line-height: 1.15 !important; }
.main-chat .topbar #connection-status { line-height: 1.1 !important; margin: 0 !important; }
#back-button {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-height: 40px !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; color: var(--text) !important;
  font-size: 1.4rem; overflow: hidden; text-indent: -9999px; position: relative;
}
#back-button::after { content: "‹"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-indent: 0; font-size: 1.8rem; }
#chat-title { font-size: 1.02rem !important; font-weight: 600 !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#connection-status { font-size: 0.74rem !important; color: var(--muted) !important; }
/* Only the ⋯ menu stays visible in the header; collapse the rest into it */
.topbar-actions #topbar-settings-btn,
.topbar-actions #clear-chat-button { display: none !important; }
.topbar-actions #chat-settings-btn {
  background: transparent !important; border: 0 !important; color: var(--gold-bright) !important;
  width: 40px; height: 40px; min-height: 40px !important;
}
.topbar-actions #chat-settings-btn::after { content: "⋯"; font-size: 1.5rem; }
.topbar-actions #chat-settings-btn .icon { display: none; }

/* ---- 11. Composer ------------------------------------------------------- */
.main-chat .composer {
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0)) !important;
  border-top: 1px solid var(--hairline); background: rgba(7,8,8,0.96); gap: 8px;
}
#message-input {
  border-radius: 16px !important; background: rgba(20,20,22,0.94) !important;
  border: 1px solid rgba(230,198,109,0.16) !important; color: var(--text) !important;
  padding: 10px 14px !important;
}
.send-btn { background: var(--kx-cta-gradient) !important; color: #151006 !important; border: 0 !important; }
.burn-btn { color: var(--muted) !important; background: transparent !important; border: 0 !important; }

/* ---- 12. Message bubbles: own = gold, theirs = charcoal surface ---------- */
.messages {
  background:
    linear-gradient(rgba(230,198,109,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,198,109,0.022) 1px, transparent 1px),
    transparent !important;
  background-size: 34px 34px, 34px 34px !important;
  padding: 12px !important;
}
.message:not(.own) .bubble, .msg:not(.own) .bubble { background: #151519 !important; border-color: rgba(255,255,255,0.09) !important; color: var(--text) !important; }
.message.own .bubble, .msg.own .bubble, .bubble.own { background: var(--kx-bubble-own) !important; border-color: var(--kx-bubble-own-border) !important; color: #151006 !important; }
.message-row:not(.own) .message-bubble {
  background: rgba(15,16,18,0.94) !important;
  border-color: rgba(255,255,255,0.09) !important;
  color: var(--text) !important;
}
.message-row.own .message-bubble {
  background: var(--kx-bubble-own) !important;
  border-color: var(--kx-bubble-own-border) !important;
  color: #151006 !important;
}
.message-row.own .message-text,
.message-row.own .message-meta {
  color: #151006 !important;
}
.system-message { color: var(--muted) !important; }

/* ---- 13. Buttons / CTAs across the shell -> premium gold ---------------- */
button:not(.secondary-button):not(.ms-bottomnav button):not(.nc-tab):not(.folder-tab) ,
.btn-signin, .btn-create, #nc-primary-btn, #lock-pin-submit {
  background: var(--kx-cta-gradient) !important; color: #151006 !important;
  border: 0 !important; box-shadow: 0 8px 22px rgba(230,198,109,0.15) !important; text-shadow: none !important;
}
.secondary-button { border-radius: 12px !important; }
a { color: var(--kx-accent); }

/* ---- 14. Modals/drawers: calmer corners + surfaces ---------------------- */
.modal-card, .drawer-card, .lock-card, #edit-profile-modal .panel {
  border-radius: 16px !important; background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}

/* ---- 15. Reachability: one-hand — keep primary actions in the lower half - */
@media (min-width: 720px) {
  /* On a wide screen (desktop QA), constrain to a phone-width column so the
     shell always reads as the mobile app it is. */
  #chat-view { max-width: 460px; margin: 0 auto; box-shadow: 0 0 60px rgba(0,0,0,.5); }
}

/* ---- 16. Calmer login screen (v2): drop the big hero + decorative artwork -- */
.hero { display: none !important; }                 /* big logo/title/strap band */
#join-view .mountains { display: none !important; } /* decorative ridge SVG */
#join-view .lc { display: none !important; }        /* login-frame corner accents */
#join-view .login-frame {
  border: 1px solid var(--border) !important; box-shadow: var(--shadow-soft) !important;
  background: var(--panel) !important; border-radius: 18px !important;
}
#join-view .crest-logo { filter: none !important; }
#join-view .brand-title { color: var(--text) !important; }
#join-view .brand-sub { color: var(--muted) !important; letter-spacing: 0.12em !important; }
.btn-signin, .btn-create { border-radius: 14px !important; }
#join-view .privacy-badge { color: var(--kx-accent) !important; }

/* ---- 2026-07-15 SAFE-AREA HEADER FIX: reserve iOS status-bar space on the mobile headers
   (.app-titlebar that handled this is display:none on mobile). env()=0 on non-notched → no-op. */
.sidebar-header {
  padding-top: env(safe-area-inset-top, 0px) !important;
  height: calc(var(--ms-appbar-h) + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(var(--ms-appbar-h) + env(safe-area-inset-top, 0px)) !important;
}
.main-chat .topbar {
  padding-top: env(safe-area-inset-top, 0px) !important;
  height: calc(var(--ms-chathdr-h) + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(var(--ms-chathdr-h) + env(safe-area-inset-top, 0px)) !important;
  max-height: calc(var(--ms-chathdr-h) + env(safe-area-inset-top, 0px)) !important;
  flex-basis: calc(var(--ms-chathdr-h) + env(safe-area-inset-top, 0px)) !important;
}

/* ---- 2026-07-17 iOS NO-ZOOM-ON-FOCUS ------------------------------------
   iOS/WKWebView auto-zooms the whole page when a focused field has font-size
   < 16px. Combined with maximum-scale=1 (chat.html viewport) the app must never
   leave scale 1. Force every editable text field to 16px so focusing the PIN
   lock / search / settings fields on entry never zooms the app in.
   Checkboxes/radios/range/file don't trigger zoom -> excluded (sizing untouched). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select {
  font-size: 16px !important;
}

/* ---- 2026-07-19 SNAPCHAT-STYLE MESSAGE TIMES -----------------------------
   Normal chat stays clean. Press/drag the message list left and every row shifts
   left as one stack, revealing a clear timestamp rail on the right. */
.message-row {
  position: relative;
}

.message-row .micro-time {
  display: none !important;
}

.message-meta:empty {
  display: none !important;
}

.message-row .ms-row-time {
  position: absolute;
  right: 2px;
  top: 50%;
  z-index: 0;
  width: 58px;
  transform: translate(8px, -50%);
  opacity: 0;
  pointer-events: none;
  color: rgba(244, 241, 233, 0.78);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  transition: opacity 120ms ease, transform 120ms ease;
}

.messages.ms-time-peek .ms-row-time {
  opacity: var(--ms-time-alpha, 1);
  transform: translate(0, -50%);
}

.messages.ms-time-peek .message-bubble {
  z-index: 1;
}

.messages.ms-time-peek .gesture-bubble {
  transform: translateX(calc(var(--ms-time-shift, 0px) * -1)) !important;
  transition: none !important;
}

body.ms-time-peek-active .message-row.actions-open .msg-actions,
body.ms-time-peek-active .msg-actions {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- 2026-07-19 iOS keyboard alignment -----------------------------------
   Fixed overlays used the full layout viewport while the iOS keyboard was up,
   so the PIN and new-chat cards stayed centered behind the keyboard/accessory
   bar. The viewport runtime sets --app-height to visualViewport.height; keep
   input-heavy overlays inside that real visible area. */
@media (max-width: 900px) {
  body.keyboard-open .modal,
  body.keyboard-open .lock-overlay,
  body.keyboard-open #edit-profile-modal {
    top: 0 !important;
    bottom: auto !important;
    height: var(--app-height, 100dvh) !important;
    min-height: 0 !important;
    place-items: center !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 10px !important;
  }

  body.keyboard-open .modal-card,
  body.keyboard-open .lock-card,
  body.keyboard-open #edit-profile-modal .panel {
    max-height: calc(var(--app-height, 100dvh) - max(20px, env(safe-area-inset-top, 0px)) - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.keyboard-open #new-chat-modal .modal-card,
  body.keyboard-open #screen-lock-overlay .lock-card {
    gap: 0.65rem !important;
    padding: 1rem !important;
  }

  body.keyboard-open #new-chat-modal .nc-search-state {
    min-height: 36px;
  }

  body.keyboard-open #new-chat-modal #nc-primary-btn {
    min-height: 48px;
  }

  body.keyboard-open #screen-lock-overlay .lock-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }
}

/* ---- 2026-07-19 lock PIN keyboard clearance ------------------------------
   iOS can show its form-navigation/accessory bar before visualViewport has
   shrunk enough to toggle body.keyboard-open. When the PIN field is focused,
   lift and compact the lock card itself so the input + Unlock button stay clear. */
@media (max-width: 900px) {
  #screen-lock-overlay.lock-overlay:not(.hidden):focus-within {
    place-items: start center !important;
    padding-top: clamp(18px, 9dvh, 92px) !important;
    padding-bottom: 8px !important;
  }

  #screen-lock-overlay.lock-overlay:not(.hidden):focus-within .lock-card {
    width: min(100%, 430px) !important;
    max-height: calc(var(--app-height, 100dvh) - clamp(26px, 9dvh, 100px)) !important;
    overflow: hidden !important;
    gap: 0.58rem !important;
    padding: 0.95rem !important;
  }

  #screen-lock-overlay.lock-overlay:not(.hidden):focus-within .lock-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  #screen-lock-overlay.lock-overlay:not(.hidden):focus-within h2,
  #screen-lock-overlay.lock-overlay:not(.hidden):focus-within .muted {
    margin-top: 0;
    margin-bottom: 0;
  }

  #lock-pin-input,
  #lock-pin-submit {
    min-height: 52px;
  }
}

@media (max-width: 900px) and (max-height: 560px),
       (max-width: 900px) and (orientation: landscape) {
  #screen-lock-overlay.lock-overlay:not(.hidden):focus-within {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  }

  #screen-lock-overlay.lock-overlay:not(.hidden):focus-within .lock-card {
    gap: 0.42rem !important;
    padding: 0.75rem !important;
    max-height: calc(var(--app-height, 100dvh) - 16px) !important;
  }

  #screen-lock-overlay.lock-overlay:not(.hidden):focus-within .lock-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  #screen-lock-overlay.lock-overlay:not(.hidden):focus-within .muted {
    display: none;
  }
}

/* ---- 2026-07-19 touch highlight polish -----------------------------------
   The base desktop theme paints a large gold focus ring. In WKWebView that can
   appear after normal taps as a square highlight around avatar/name controls.
   Keep keyboard focus on desktop, but make touch feedback quiet and native. */
button,
[role="button"],
a,
label,
.contact-item,
.group-item,
#ms-profile-btn,
#ms-search-btn,
.ms-fab {
  -webkit-tap-highlight-color: transparent !important;
}

@media (hover: none) and (pointer: coarse) {
  input:focus,
  textarea:focus,
  select:focus {
    outline: 0 !important;
    border-color: rgba(230, 198, 109, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  }

  #contact-search-input:focus,
  #message-input:focus,
  #new-chat-modal input:focus,
  #edit-profile-modal input:focus,
  #edit-profile-modal textarea:focus,
  #screen-lock-overlay input:focus,
  .modal input:focus,
  .modal textarea:focus,
  .lock-card input:focus,
  .lfield input:focus {
    outline: 0 !important;
    border-color: rgba(230, 198, 109, 0.34) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  }

  .lfield:focus-within {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  }

  button:focus,
  button:focus-visible,
  [role="button"]:focus,
  [role="button"]:focus-visible,
  a:focus,
  a:focus-visible,
  label.secondary-button:focus-within,
  .contact-item:focus,
  .group-item:focus,
  #ms-profile-btn:focus,
  #ms-search-btn:focus,
  .ms-fab:focus {
    outline: 0 !important;
    outline-offset: 0 !important;
  }

  #ms-profile-btn:focus,
  #ms-profile-btn:focus-visible {
    box-shadow: 0 9px 26px rgba(230,198,109,0.24), inset 0 1px 0 rgba(255,255,255,0.40) !important;
  }

  #ms-search-btn:focus,
  #ms-search-btn:focus-visible,
  #app-lock-btn:focus,
  #app-lock-btn:focus-visible {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 22px rgba(0,0,0,0.34) !important;
  }

  .ms-fab:focus,
  .ms-fab:focus-visible,
  #new-chat-button.ms-fab:focus,
  #new-chat-button.ms-fab:focus-visible {
    box-shadow: 0 10px 28px rgba(230,198,109,0.25), inset 0 1px 0 rgba(255,255,255,0.38) !important;
  }
}

/* 2026-07-19 login touch focus cleanup: the password field was still getting a
   thick gold rectangular focus box on iPhone. Keep the field stable and quiet. */
#join-view .lfield,
#join-view .lfield:focus-within {
  outline: 0 !important;
}

#join-view .lfield:focus-within {
  border-color: rgba(230, 198, 109, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 8px 24px rgba(0,0,0,0.16) !important;
}

#join-view .lfield input,
#join-view .lfield input:focus,
#join-view .lfield input:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Final login alignment override lives in this last-loaded stylesheet. */
@media (max-width: 900px) {
  #join-view.login-screen {
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #join-view .login-frame {
    margin: 0 auto !important;
    justify-content: flex-start !important;
  }

  body.keyboard-open #join-view.login-screen,
  #join-view.login-screen:focus-within {
    overflow: hidden !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 8px !important;
  }

  body.keyboard-open #join-view .login-frame,
  #join-view:focus-within .login-frame {
    max-height: calc(var(--app-height, 100dvh) - max(12px, env(safe-area-inset-top, 0px)) - 8px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 0.55rem !important;
    padding: 0.85rem clamp(0.85rem, 4vw, 1.1rem) !important;
    border-radius: 18px !important;
  }

  body.keyboard-open #join-view .crest,
  body.keyboard-open #join-view .brand-title,
  body.keyboard-open #join-view .brand-sub,
  body.keyboard-open #join-view .privacy,
  body.keyboard-open #join-view .or-div,
  body.keyboard-open #create-account-button,
  body.keyboard-open #tab-register-btn,
  #join-view:focus-within .crest,
  #join-view:focus-within .brand-title,
  #join-view:focus-within .brand-sub,
  #join-view:focus-within .privacy,
  #join-view:focus-within .or-div,
  #join-view:focus-within #create-account-button,
  #join-view:focus-within #tab-register-btn {
    display: none !important;
  }

  body.keyboard-open #join-form,
  #join-view:focus-within #join-form {
    margin-top: 0 !important;
    gap: 0.55rem !important;
  }

  body.keyboard-open #join-view .remember-banner,
  #join-view:focus-within .remember-banner {
    min-height: 56px !important;
    padding: 0.55rem 0.65rem !important;
  }

  body.keyboard-open #join-view .lfield,
  #join-view:focus-within .lfield {
    min-height: 50px !important;
  }

  body.keyboard-open #join-view .btn-signin,
  body.keyboard-open #join-view .btn-create,
  body.keyboard-open #join-view .btn-back,
  #join-view:focus-within .btn-signin,
  #join-view:focus-within .btn-create,
  #join-view:focus-within .btn-back {
    min-height: 48px !important;
  }
}

/* Final New Chat focus cleanup: keep the exact-username fallback available,
   but never show the desktop gold rectangle in iOS/Android WebViews. */
#new-chat-modal .lfield,
#new-chat-modal .lfield:focus,
#new-chat-modal .lfield:focus-within,
#new-chat-modal input,
#new-chat-modal input:focus,
#new-chat-modal input:focus-visible,
#new-chat-modal textarea,
#new-chat-modal textarea:focus,
#new-chat-modal textarea:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

#new-chat-modal .lfield:focus-within {
  border-color: rgba(230, 198, 109, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 8px 24px rgba(0,0,0,0.16) !important;
}

#new-chat-modal input,
#new-chat-modal input:focus,
#new-chat-modal input:focus-visible,
#new-chat-modal textarea,
#new-chat-modal textarea:focus,
#new-chat-modal textarea:focus-visible {
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 900px) {
  #new-chat-modal:not(.hidden):focus-within {
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 8px !important;
  }

  #new-chat-modal:not(.hidden):focus-within .modal-card {
    max-height: calc(var(--app-height, 100dvh) - max(14px, env(safe-area-inset-top, 0px)) - 8px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 0.55rem !important;
    padding: 0.9rem !important;
  }

  #new-chat-modal:not(.hidden):focus-within .nc-search-state {
    min-height: 36px !important;
    max-height: min(34dvh, 220px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #new-chat-modal:not(.hidden):focus-within #nc-primary-btn:disabled {
    display: none !important;
  }

  #new-chat-modal:not(.hidden):focus-within .modal-card {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
}

/* Final phone polish pass: no page/card drag, no yellow input rectangles, and
   compact controls for small phones plus keyboard landscape. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html,
  body,
  .shell,
  #join-view.login-screen {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #join-view.login-screen {
    touch-action: manipulation !important;
  }

  #join-view .login-frame,
  body.keyboard-open #join-view .login-frame,
  #join-view:focus-within .login-frame {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  #join-view input,
  #join-view input:focus,
  #join-view input:focus-visible,
  #message-input,
  #message-input:focus,
  #message-input:focus-visible,
  #new-chat-modal input,
  #new-chat-modal input:focus,
  #new-chat-modal input:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #join-view .lfield,
  #join-view .lfield:focus-within,
  #new-chat-modal .lfield,
  #new-chat-modal .lfield:focus-within {
    outline: 0 !important;
  }

  body.keyboard-open #join-view .login-links,
  #join-view:focus-within .login-links {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .main-chat .composer {
    gap: 6px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #message-input {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 12px !important;
    line-height: 44px !important;
    overflow: hidden !important;
    resize: none !important;
  }

  .send-btn,
  .burn-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-height: 520px) {
  body.keyboard-open #join-view.login-screen,
  #join-view.login-screen:focus-within {
    padding: 6px max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px)) !important;
  }

  body.keyboard-open #join-view .login-frame,
  #join-view:focus-within .login-frame {
    width: min(100%, 520px) !important;
    max-height: calc(var(--app-height, 100dvh) - 12px) !important;
    gap: 0.35rem !important;
    padding: 0.45rem 0.65rem !important;
    border-radius: 16px !important;
  }

  body.keyboard-open #join-form,
  #join-view:focus-within #join-form {
    gap: 0.35rem !important;
  }

  body.keyboard-open #join-view .remember-banner,
  #join-view:focus-within .remember-banner {
    min-height: 42px !important;
    padding: 0.35rem 0.5rem !important;
  }

  body.keyboard-open #join-view .remember-banner .ava,
  #join-view:focus-within .remember-banner .ava {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  body.keyboard-open #join-view .remember-banner small,
  #join-view:focus-within .remember-banner small {
    display: none !important;
  }

  body.keyboard-open #join-view #masterkey-field,
  #join-view:focus-within #masterkey-field,
  body.keyboard-open #join-view .mountains,
  #join-view:focus-within .mountains {
    display: none !important;
  }

  body.keyboard-open #join-view .switch-account,
  #join-view:focus-within .switch-account {
    min-height: 34px !important;
    padding: 0 0.75rem !important;
  }

  body.keyboard-open #join-view .lfield,
  #join-view:focus-within .lfield {
    min-height: 42px !important;
  }

  body.keyboard-open #join-view .btn-signin,
  body.keyboard-open #join-view .btn-create,
  body.keyboard-open #join-view .btn-back,
  #join-view:focus-within .btn-signin,
  #join-view:focus-within .btn-create,
  #join-view:focus-within .btn-back {
    min-height: 42px !important;
  }

  #message-input,
  .send-btn,
  .burn-btn {
    min-height: 44px !important;
    height: 44px !important;
  }

  #new-chat-modal:not(.hidden):focus-within .modal-card {
    max-height: calc(var(--app-height, 100dvh) - 12px) !important;
    gap: 0.35rem !important;
    padding: 0.55rem !important;
    overflow: hidden !important;
  }

  #new-chat-modal:not(.hidden):focus-within .nc-search-state {
    max-height: 70px !important;
  }

  #new-chat-modal:not(.hidden):focus-within #nc-status {
    display: none !important;
  }
}

/* Final contacts-screen polish: the legacy tabbar was re-enabled by its stale
   fallback rule later in this file. Keep it removed everywhere and make tapped
   contact rows quiet instead of drawing a hard gold rectangle. */
.ms-bottomnav,
body .ms-bottomnav,
body.ms-chat-open .ms-bottomnav {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  transform: translateY(120%) !important;
}

.sidebar-contacts {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
}

#new-chat-button.ms-fab,
.ms-fab {
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 16px)) !important;
}

.contact-item,
.group-item,
#group-list > * {
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.contact-item.active,
.group-item.active,
.contact-item:focus,
.contact-item:focus-visible,
.group-item:focus,
.group-item:focus-visible {
  outline: 0 !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: rgba(230,198,109,0.09) !important;
  background: linear-gradient(90deg, rgba(230,198,109,0.09), rgba(230,198,109,0.03) 64%, transparent) !important;
  box-shadow: none !important;
}