/* ============================================================
   CONTEXT — Premium Mobile Polish (Chat + shared)
   Loaded AFTER styles.css so it refines, never rebuilds.
   Goal: high-end fintech feel (Robinhood/Bloomberg-mobile),
   not "developer terminal". Inter for prose, mono kept only
   for data/labels. Desktop layout is preserved; structural
   changes are gated to <=768px / <=480px.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --prose: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────
   1. CHAT PROSE TYPOGRAPHY  (all widths — universal upgrade)
   The single biggest "premium vs terminal" lever: read the
   AI's words in a humanist sans, keep mono for tickers/code.
   ───────────────────────────────────────────────────────── */
.message-content,
.message-bubble.user-bubble {
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.message-content p { margin: 0 0 10px; }
.message-content p:last-child { margin-bottom: 0; }
.message-content strong { font-weight: 600; color: var(--text-bright); }
.message-content code,
.message-content pre {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.message-content h1, .message-content h2, .message-content h3 {
  font-family: var(--prose);
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* Refined sender labels — whisper the brand, don't shout it */
.message-row.user .message-bubble::before,
.message-row.assistant .message-bubble::before {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.4px;
  font-weight: 600;
  opacity: 0.5;
  margin-bottom: 5px;
}

/* Smooth message entrance — subtle, premium, not bouncy */
@keyframes ctxMsgIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.message-row {
  animation: ctxMsgIn 0.34s var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .message-row { animation: none; }
}

/* Refined timestamp + copy affordance */
.msg-timestamp {
  font-family: var(--font-mono);
  font-size: 9.5px;
  opacity: 0.4;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  (<= 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 2. CHAT BUBBLES — refined, not boxy ── */
  .message-bubble {
    max-width: 88%;
    font-size: 14.5px;
    line-height: 1.55;
    padding: 11px 14px 13px;
    border-radius: 16px;
  }
  .message-row.user .message-bubble {
    border-radius: 16px 16px 5px 16px;          /* tail bottom-right */
    background: linear-gradient(135deg, rgba(245,166,35,0.10), rgba(245,166,35,0.04));
    border: 1px solid rgba(245,166,35,0.22);
  }
  .message-row.assistant .message-bubble {
    border-radius: 16px 16px 16px 5px;          /* tail bottom-left */
    border-left-width: 1px;                      /* drop the heavy 2px rail */
    border-top: 1px solid rgba(0,234,255,0.14);
    border-left: 2px solid rgba(0,234,255,0.45);
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  }
  .message-content { font-size: 14.5px; }
  .message-row { margin-bottom: 12px; }

  /* ── 3. TICKER BAR — fix cramped/overlapping chips ── */
  #ticker {
    padding: 5px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  #ticker-track { gap: 18px; padding: 0 14px; }
  #ticker-track .tick-item,
  #ticker-track > span {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    padding: 2px 0;
  }

  /* ── 4. TAB BAR — premium pills, scrollable ── */
  .lh-nav-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 12px;
    -webkit-overflow-scrolling: touch;
  }
  .lh-nav-tabs::-webkit-scrollbar { display: none; }
  .lh-tab {
    flex: 0 0 auto;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.06);
    color: rgba(212,219,232,0.55);
    transition: all 0.18s var(--ease-out);
  }
  .lh-tab.active {
    background: linear-gradient(135deg, rgba(0,234,255,0.16), rgba(123,92,255,0.12));
    border-color: rgba(0,234,255,0.35);
    color: var(--text-bright);
    box-shadow: 0 0 16px rgba(0,234,255,0.12);
  }
  .lh-tab.active::after { display: none; }   /* kill underline; pill carries state */
  .lh-tab:active { transform: scale(0.96); }

  /* ── 5. SUGGESTION / QUICK-ACTION PILLS ── */
  #suggestion-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 2px 2px;
  }
  #suggestion-pills .suggestion-pill,
  #suggestion-pills button,
  #suggestion-pills > * {
    font-family: var(--prose);
    font-size: 13px;
    font-weight: 500;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0,234,255,0.18);
    color: var(--text);
    transition: all 0.18s var(--ease-out);
    cursor: pointer;
  }
  #suggestion-pills .suggestion-pill:active,
  #suggestion-pills button:active { transform: scale(0.96); background: rgba(0,234,255,0.10); }

  /* ── 6. COMMAND BAR — rounded, tactile, safe-area aware ── */
  #command-bar {
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(6,9,16,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  #chat-input {
    font-family: var(--prose);
    font-size: 16px;                 /* N2: iOS auto-zooms ANY sub-16px input on focus and the
                                        zoom sticks after send — THE left-clip bug. 16 is the floor. */
    padding: 11px 14px;
    border-radius: 13px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
  }
  #chat-input:focus {
    border-color: rgba(0,234,255,0.4);
    box-shadow: 0 0 0 3px rgba(0,234,255,0.10);
    outline: none;
  }
  #send-btn {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 11px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00eaff, #7b5cff);
    color: #04121b;
    border: 0;
    transition: transform 0.15s var(--ease-out);
  }
  #send-btn:active { transform: scale(0.95); }
  #mode-toggle button { border-radius: 999px; font-size: 10px; }

  /* ── 7. MOBILE BOTTOM NAV — frosted, refined active state ── */
  #mobile-bottom-nav {
    background: rgba(6,9,16,0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bnav-item {
    color: rgba(212,219,232,0.5);
    transition: color 0.18s var(--ease-out), transform 0.15s var(--ease-out);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    gap: 3px;
  }
  .bnav-item span { font-family: var(--prose); }
  .bnav-item.active { color: var(--cyan); }
  .bnav-item.active svg { filter: drop-shadow(0 0 6px rgba(0,234,255,0.5)); }
  .bnav-item:active { transform: scale(0.92); }

  /* ── 8. Hull strip — keep it tidy, not cramped ── */
  #hull-strip {
    gap: 10px;
    font-size: 10.5px;
    padding: 5px 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #hull-strip::-webkit-scrollbar { display: none; }
}

/* iPhone-width tuning */
@media (max-width: 430px) {
  .message-bubble { max-width: 90%; font-size: 14px; }
  #chat-input { font-size: 16px; }   /* prevent iOS focus-zoom on the input */
  .lh-tab { padding: 6px 13px; font-size: 10.5px; }
}

/* ─────────────────────────────────────────────────────────
   COMMAND BAR — PHONE LAYOUT (2026-07-21 mobile sweep).
   The desktop bar is one long row; at phone width the input,
   char counter, attach clip and FAST/DEEP/SEND collide and
   spill off-screen (Korey's screenshot). Two clean rows:
     row 1: [input ................................. 📎]
     row 2: [FAST|DEEP]  [counter]            [SEND ↵]
   The "/" hint ornament and read-aloud/⌘ buttons are desk
   affordances — hidden on phones. Sits above the tab bar.
   ───────────────────────────────────────────────────────── */
@media (max-width: 740px) {
  /* ══ AI-CHAT-APP LAYOUT (2026-07-21 v3) — modeled on the best mobile AI
     chat apps: full-bleed assistant prose (no boxes), compact user bubbles,
     ONE input row: [attach] [pill input] [FAST|DEEP] [circular send]. ══ */

  /* messages: assistant text is full-width reading prose, not a bordered box */
  .message-row.assistant .message-bubble {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 2px 4px !important;
  }
  .message-row.assistant .message-bubble::before { display: none !important; }
  .message-content { font-size: 16px !important; line-height: 1.66 !important; }
  /* user messages: compact right-side bubble, subtle */
  .message-row.user .message-bubble {
    max-width: 86% !important;
    background: rgba(0, 234, 255, 0.08) !important;
    border: 1px solid rgba(0, 234, 255, 0.14) !important;
    box-shadow: none !important;
    border-radius: 18px 18px 4px 18px !important;
  }
  .message-row.user .message-bubble::before { display: none !important; }

  /* command bar: one clean row above the tab bar */
  #command-bar {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 10px;
    align-items: center;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 12px);
    border-radius: 22px;
  }
  #command-bar::before { display: none; }
  #ctx-legal-pill { display: none !important; }
  #chat-window { bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important; }

  #cmd-hint, #news-read-btn, #cmd-palette-btn, #char-counter { display: none !important; }
  #chat-attach-btn {
    order: 1;
    flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 15px; padding: 0;
  }
  #chat-input {
    order: 2;
    flex: 1 1 0;               /* basis 0: the long placeholder must not push
                                  the toggle/send off the edge */
    min-width: 0;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
  }
  #mode-toggle { order: 3; flex: 0 0 auto; display: flex; }
  #send-btn { order: 4; }
  #mode-toggle button { font-size: 8.5px; padding: 5px 7px; letter-spacing: .3px; }
  /* circular gradient send — the "↑" of a real chat app */
  #send-btn {
    flex: 0 0 42px; width: 42px; height: 42px;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0 !important;            /* hide "SEND ↵" */
    display: flex; align-items: center; justify-content: center;
  }
  #send-btn::after {
    content: '\2191';                   /* ↑ */
    font-size: 19px; font-weight: 800; line-height: 1;
  }
}

/* ─────────────────────────────────────────────────────────
   9. MOBILE LAYOUT FIX — ticker no longer overlaps chat;
   STATUS toggle pulled out of the AI sub-nav row.
   On mobile, nav.js injects its global nav (~40px) + the AI
   sub-nav (~31px) in normal flow, but #ticker / #chat-window /
   the STATUS toggle are position:fixed with offsets left over
   from the old desktop header. Re-anchor them into a clean
   vertical stack: nav → sub-nav → ticker → chat.
   ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* ticker sits just below the injected nav + AI sub-nav */
  #ticker { top: 74px !important; }

  /* all panels (chat + others) start BELOW the ticker, not behind it */
  #chat-window { top: 102px !important; }
  #tab-content { top: 102px !important; }
  /* when the legacy stats header is toggled open it overlays from 40px down,
     so push content clear of it */
  body.mobile-header-open #chat-window,
  body.mobile-header-open #tab-content { top: 150px !important; }

  /* STATUS toggle: out of the centered tab row, to the right edge, restyled
     as a clearly-distinct utility chip (not a 4th tab) */
  #mobile-header-toggle {
    top: 44px !important;
    left: auto !important;
    right: 8px !important;
    transform: none !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,234,255,0.22) !important;
    background: rgba(0,234,255,0.07) !important;
    color: var(--cyan) !important;
    padding: 4px 11px 5px !important;
    font-size: 8.5px !important;
    letter-spacing: 1.3px !important;
    z-index: 260 !important;
  }
}
@media (max-width: 430px) {
  #ticker { top: 70px !important; }
  #chat-window, #tab-content { top: 98px !important; }
}

/* ─────────────────────────────────────────────────────────
   10. DECLUTTER LEGACY CHAT HEADER
   nav.js owns the brand on every page, so the legacy chat
   header's duplicate brand/version/tagline is noise — hide it
   (all widths). On mobile the bottom nav + nav.js already cover
   navigation, so retire the hidden-header + its STATUS reveal
   chip entirely (the root cause of the ticker/STATUS quirks).
   Done in CSS so app.js element wiring stays intact.
   ───────────────────────────────────────────────────────── */
.lh-brand-link,
.lh-version-badge,
#lh-sub-brand { display: none !important; }

@media (max-width: 768px) {
  #context-header { display: none !important; }
  #mobile-header-toggle { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-07-23 — Chat mobile sweep (Korey): tighter, uniform prose sized like
   the Claude iOS app; a calmer, less-busy welcome; and ONE bottom nav. The
   chat shipped its own 2-item #mobile-bottom-nav which now duplicates the
   global 6-tab #ctx-mtabs — retire it on phones and dock the composer to the
   real nav so there is no dead gap underneath.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 740px) {
  .message-content { font-size: 14.5px !important; line-height: 1.55 !important; letter-spacing: .1px; }
  .message-content p { margin: 0 0 7px !important; }
  .message-content p:last-child { margin-bottom: 0 !important; }
  .message-content h1, .message-content h2, .message-content h3 {
    font-size: 15px !important; line-height: 1.3 !important; font-weight: 600 !important;
    margin: 11px 0 5px !important; color: var(--text-bright, #eef2fa);
  }
  .message-content h1 { font-size: 15.5px !important; }
  .message-content hr {
    border: 0 !important; height: 1px !important;
    background: rgba(255,255,255,.06) !important; margin: 9px 0 !important;
  }
  .message-content ul, .message-content ol { margin: 3px 0 8px !important; padding-left: 17px !important; }
  .message-content li { margin: 2px 0 !important; }
  .message-content blockquote { margin: 6px 0 !important; padding-left: 10px !important;
    border-left: 2px solid rgba(0,234,255,.25) !important; }

  /* one bottom nav, not two — retire the chat-native bar, dock composer to #ctx-mtabs */
  #mobile-bottom-nav { display: none !important; }
  #command-bar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
  #chat-window { bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
  body { padding-bottom: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-07-23b — Welcome brief goes glass: soft glow on the colored values,
   gradient dividers, a top-left history/new-chat button (the header that held
   it is hidden on phones), and the message-timeline rail cleared of the ticker.
   ═══════════════════════════════════════════════════════════════════════ */
/* gentle premium halo — color-mix keeps it ~50% of each span's own colour so it
   reads as a soft glass glow, not harsh terminal neon (falls back to no glow). */
.message-content span[style*="color"] {
  text-shadow: 0 0 7px color-mix(in srgb, currentColor 48%, transparent);
}
.message-content hr {
  border: 0 !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,234,255,.18), transparent) !important;
}

/* mobile history / new-chat button (hidden on desktop — the header has it there) */
#ctx-hist-fab { display: none; }

@media (max-width: 768px) {
  #timeline-rail { top: 122px !important; }

  #ctx-hist-fab {
    display: flex !important; position: fixed;
    top: 74px; left: 8px; z-index: 400;
    width: 36px; height: 30px; align-items: center; justify-content: center;
    border-radius: 9px; cursor: pointer;
    background: rgba(0,234,255,0.07); border: 1px solid rgba(0,234,255,0.22);
    color: #00eaff; font-size: 15px; line-height: 1;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
  }
  #ctx-hist-fab:active { transform: scale(0.92); }
  #ticker-track { padding-left: 52px !important; }
}
@media (max-width: 430px) {
  #timeline-rail { top: 118px !important; }
  #ctx-hist-fab { top: 70px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-07-23c — Chat: kill the sideways pan (wide === dividers / long tokens
   were making the message column wider than the screen, so vertical scrolling
   drifted left/right). And tighten the bottom stack so the nav sits flush to
   the home indicator with more chat headroom.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 740px) {
  html, body { overflow-x: hidden !important; }
  #chat-window, #tab-content { overflow-x: hidden !important; }
  .message-content { max-width: 100% !important; }
  .message-content pre, .message-content table, .message-content img {
    max-width: 100% !important; overflow-x: auto !important;
  }

  /* nav flush to the bottom (only the iOS home-indicator inset remains) */
  #ctx-mtabs {
    padding-top: 4px !important;
    padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* dock the composer + message area tighter -> more headroom */
  #command-bar { bottom: calc(53px + env(safe-area-inset-bottom, 0px)) !important; }
  #chat-window { bottom: calc(111px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* 2026-07-23d — smaller chat font (Korey: still too big vs the Claude app feel).
   14.5px -> 13px body, headers scaled to match. */
@media (max-width: 740px) {
  .message-content { font-size: 13px !important; line-height: 1.5 !important; }
  .message-content h1, .message-content h2, .message-content h3 { font-size: 13.5px !important; margin: 9px 0 4px !important; }
  .message-content h1 { font-size: 14px !important; }
  .message-content p { margin: 0 0 6px !important; }
  .message-content code, .message-content pre { font-size: 11.5px !important; }
  .message-row.user .message-bubble { font-size: 13px !important; }
}

/* 2026-07-23e — shrink the example-prompt pills to match the smaller chat font */
@media (max-width: 740px) {
  #suggestion-pills { gap: 7px !important; padding: 2px 2px !important; }
  #suggestion-pills .suggestion-pill,
  #suggestion-pills button,
  #suggestion-pills > * {
    font-size: 11.5px !important;
    padding: 7px 13px !important;
    font-weight: 500 !important;
  }
}

/* 2026-07-23f — full-fit pass: remove the vw-driven zoom/clip (page rendered a
   touch wide, chopping right-hand bubble corners until a pinch-out), give the
   message column edge breathing room, and retire the left timeline dots on phones. */
@media (max-width: 740px) {
  #command-bar { left: 6px !important; right: 6px !important; width: auto !important; }
  #chat-window {
    left: 0 !important; right: 0 !important; transform: none !important;
    width: auto !important; max-width: 100% !important;
    padding-left: 12px !important; padding-right: 12px !important;
    box-sizing: border-box !important; overflow-x: hidden !important;
  }
  .message-row, .message-bubble, .message-content {
    box-sizing: border-box !important; max-width: 100% !important;
  }
  .message-row.user .message-bubble { max-width: 82% !important; }
  #timeline-rail { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   2026-08-01 — M1 (MOBILE-AUDIT-2026-08-01.md §A).
   A1: kill the sideways drift AT THE SOURCE. 07-23c capped pre/table/img
   and hid the scrollbar, but long unbroken inline tokens (chart URLs,
   inline code) still made the column wider than the screen — and iOS pans
   a hidden-overflow scroller. These make wide content impossible instead
   of merely unscrollable. Tables become their own scroller (max-width
   alone cannot shrink a table below its min-content width).
   A2: the five undersized touch targets get ≥44px hit areas.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 740px) {
  .message-bubble { overflow-wrap: anywhere; }   /* USER bubbles too — plain
    textContent, no .message-content wrapper; the bisect caught this */
  .message-content { overflow-wrap: anywhere; }
  .message-content li { overflow-wrap: anywhere; }
  .message-content a { word-break: break-all; }
  .message-content code,
  .message-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .message-content table { display: block; max-width: 100%; overflow-x: auto; }
  #chat-window { overscroll-behavior-x: none; }

  /* A2 — audit: 19×18 / 24×44 / 31×36 / 34×44 / 36×44 → all ≥44 hit */
  #ctx-ios-x { min-width: 44px; min-height: 44px; display: flex;
    align-items: center; justify-content: center; padding: 0 !important; }
  #ctx-sp-close { min-width: 44px; min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }
  #history-close-btn { min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; }
  #chat-attach-btn { min-width: 44px; min-height: 44px; }
  #ctx-hist-fab { min-width: 44px; min-height: 44px; }
}

/* ── N2 (2026-08-01, overnight): Claude-app-like side gutters for the chat
   scroller on phones — full-bleed prose sat ~8px off the glass edge, so any
   residual iOS zoom/pan clipped the first characters. Comfortable gutters
   read better and survive small pans. ── */
@media (max-width: 740px) {
  #chat-window { padding-left: 12px !important; padding-right: 12px !important; }
}