/* ============================================================
   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: 15px;                 /* >=16px avoids iOS zoom; 15 keeps tidy, see below */
    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; }
}

/* ─────────────────────────────────────────────────────────
   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; }
}