/**
 * iphone-fixes.css — Hypatia Chat iPhone Layout Fixes
 * Addresses all reported issues on iPhone 12 / 16 Pro Max / 17 variants.
 *
 * ══ CORE PRINCIPLE ══
 * In Safari BROWSER mode (URL bar visible), the browser positions content
 * BELOW its own chrome (URL bar + status bar). The layout viewport starts
 * BELOW the browser chrome, so env(safe-area-inset-top) on .chat-main
 * creates a DOUBLE-OFFSET gap. We must NOT add padding to .chat-main in
 * browser mode. Only PWA/standalone mode needs it (no browser chrome).
 *
 * Issues fixed:
 *   1. iPhone 16 Pro Max: 59px gap between Safari bar and Hypatia header
 *   2. Dynamic Island / notch blocks top menu in PWA/standalone mode
 *   3. Voice dock (#hv-dock) appears at top instead of bottom
 *   4. Composer / input dock not padded for home indicator bar
 *   5. Chat hangs off edges (missing side safe-areas in landscape)
 *   6. Text too small and buttons too small to tap ("Read more", action buttons)
 *   7. Layout height wrong for non-minimal (cyberpunk) platform on mobile
 *   8. Chat glitches in/out: height transitions fight JS height setter (fixed)
 *   9. Sessions drawer clipped or mis-positioned on all iPhone models (fixed)
 *
 * Load order: after mobile-fixes.css, before iphone-specific overrides.
 * Scope: chat.html only (safe — all rules are specific enough not to bleed).
 *
 * Updated 2026-07-11 (glitch fix: transition suppression + iPhone SE / 13 / 14 /
 *                      15 / 16 / 16 Pro Max full breakpoint coverage)
 */


/* ══════════════════════════════════════════════════════════════════════
   §1  SAFARI BROWSER MODE — No top padding on .chat-main
   ══════════════════════════════════════════════════════════════════════
   In Safari browser mode with viewport-fit=cover:
   — env(safe-area-inset-top) = 59px on iPhone 16 Pro Max (Dynamic Island)
   — BUT the browser URL bar already positions content below the chrome
   — Adding padding-top: 59px creates an extra 59px GAP below the URL bar
   — FIX: zero out the padding on .chat-main; let .ch-header handle it

   The .ch-header gets padding-top: env(safe-area-inset-top) ONLY in PWA/standalone
   mode (§10 below) where no browser chrome exists and the DI is directly visible.
   In browser mode, padding is explicitly zeroed on both elements.             */

@media screen and (max-width: 1024px) {

  /* BROWSER MODE: No top padding anywhere — Safari URL bar already provides
     the offset. Adding env(safe-area-inset-top) here creates the 59px gap
     visible in the iPhone 16 Pro Max screenshot.                              */
  html .chat-main {
    padding-top: 0 !important;
  }
  html .ch-header {
    padding-top: 0 !important;   /* zero in browser mode; PWA rule below sets it */
  }

  /* The actual usable header bar height. */
  html .cmb {
    min-height: 54px !important;
    margin-top: 0 !important;
  }

  /* Sessions drawer: must clear the DI + any remaining safe area */
  html .sessions-drawer {
    top: env(safe-area-inset-top, 0px) !important;
  }
  html[data-chat-layout="minimal"] .sessions-drawer {
    top: env(safe-area-inset-top, 0px) !important;
  }

  /* Layout itself: zero top padding (safe area is on ch-header now) */
  html .chat-layout {
    padding-top: 0 !important;
    height: calc(100dvh - var(--nav-height, 0px)) !important;
  }
  html .chat-main {
    height: calc(100dvh - var(--nav-height, 0px)) !important;
  }

  /* Boot overlay needs safe area so boot content isn't clipped */
  #boot-overlay {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §1b  SUPPRESS HEIGHT TRANSITIONS DURING JS RESIZE
   ══════════════════════════════════════════════════════════════════════
   wireChatViewportFit sets .chat-layout / .chat-main height via
   inline style on every keyboard/viewport resize event. Any CSS
   `transition` on those properties causes them to animate toward the new
   height, which (a) looks like flickering, (b) triggers more resize
   events, creating an oscillation loop on iOS Safari. Kill all
   transitions on the layout shell on mobile — individual UI elements
   (messages, buttons) still get their own transitions untouched.       */

@media screen and (max-width: 768px) {

  /* Hard-stop: no transition on the layout box or the chat panel itself.
     Use will-change:contents so the GPU layer IS promoted (hardware
     compositing) but no animated height change ever runs.               */
  html .chat-layout,
  html .chat-main {
    transition: none !important;
    /* Promote to its own compositor layer — avoids full-page repaint */
    will-change: contents;
  }

  /* The sessions drawer slides in with a CSS transform — keep that.
     But ensure its HEIGHT never participates in an animated reflow.     */
  html .sessions-drawer {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §2  VOICE DOCK — Fix position:absolute → position:fixed on mobile
   ══════════════════════════════════════════════════════════════════════════
   #hv-dock is position:absolute in the inline style, positioned relative to
   .chat-layout. On iPhone this produces incorrect results due to:
     (a) height calculation differences between visual-viewport and layout height
     (b) overflow:hidden on .chat-main clips the dock unexpectedly
     (c) env(safe-area-inset-bottom) not factored into the bottom calculation

   Fix: position:fixed makes the dock always anchor to the ACTUAL viewport,
   independent of any parent overflow or height calculation quirks.
   Add env(safe-area-inset-bottom) so it sits above the home indicator bar.    */

@media screen and (max-width: 768px) {

  #hv-dock {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    /* Bottom = composer height + home bar + 8px gap */
    bottom: calc(var(--ch-composer-h, 84px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    z-index: 9500 !important; /* above all overlays (8000-9400 range) */
    /* Ensure dock doesn't extend above the fold when brain-panel is expanded */
    max-height: calc(100dvh - var(--ch-composer-h, 84px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 80px) !important;
    overflow: visible !important;
  }

  /* When ride-along / cobrowse is active, keep the dock in its overlay position
     (set by _rideAvatarOnTop) but still above the safe-area bottom */
  #hv-dock.hv-dock-overlay {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    left: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §3  COMPOSER — Bottom safe area (home indicator bar)
   ══════════════════════════════════════════════════════════════════════════
   iPhone home indicator bar = 34px. Without padding-bottom, the composer's
   send button and input field are physically hidden behind the home bar.      */

@media screen and (max-width: 768px) {

  .ch-composer {
    /* 12px gap + home bar height */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    /* Also ensure safe-area-inset on sides for correct alignment */
    padding-left: max(8px, calc(8px + env(safe-area-inset-left, 0px))) !important;
    padding-right: max(8px, calc(8px + env(safe-area-inset-right, 0px))) !important;
  }

  /* Minimal layout overrides the composer padding — re-apply with safe-area */
  [data-chat-layout="minimal"] .ch-composer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Toast stack also needs to be above the composer + home bar */
  .toast-container {
    bottom: calc(var(--ch-composer-h, 80px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §4  SIDE SAFE AREAS — Landscape mode on iPhone
   ══════════════════════════════════════════════════════════════════════════
   In landscape, iPhone has safe-area-inset-left/right (30px each on
   Dynamic Island models). Without these, the chat layout is clipped.          */

@media screen and (max-width: 1024px) and (orientation: landscape) {

  .chat-layout {
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }

  .ch-composer {
    padding-left: max(12px, calc(12px + env(safe-area-inset-left, 0px))) !important;
    padding-right: max(12px, calc(12px + env(safe-area-inset-right, 0px))) !important;
  }

  /* In landscape, voice dock needs landscape-aware safe-areas */
  #hv-dock {
    left: calc(8px + env(safe-area-inset-left, 0px)) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §5  TAP TARGETS — Message action buttons & "Read more" expand button
   ══════════════════════════════════════════════════════════════════════════
   Apple HIG minimum tap target: 44×44pt. The chat's .msg-act, .msg-tts,
   and .msg-expand-btn are currently 24px which is far below the minimum.
   Result: users can't reliably tap "Read more" or the copy/TTS/react buttons. */

@media screen and (max-width: 768px) {

  /* Expand / Read-more button — needs a full-width 44px tap zone */
  .msg-expand-btn {
    min-height: 44px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 11px !important;
    letter-spacing: .04em !important;
  }

  /* Per-message action icons (copy, bookmark, react, TTS) */
  .msg-act,
  .msg-tts {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 16px !important;
  }

  /* Action row — always visible on mobile (no hover state on touch) */
  .msg-row .msg-actions,
  .msg .msg-actions {
    opacity: 1 !important;
    display: flex !important;
    gap: 4px !important;
  }

  /* Sticky action buttons (choice buttons) — bigger touch target */
  .sticky-btn {
    min-height: 44px !important;
    padding: 12px 18px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §6  TEXT READABILITY — Message font + bubble max-width on iPhone
   ══════════════════════════════════════════════════════════════════════════
   Default font-size: 13px (monospace). Too small on a 3x retina display.
   Bump to 14-15px and widen bubbles slightly so "Read more" has a chance.     */

/* iPhone 16 Pro Max (440px) / 16 Plus / 15 Pro Max (430px) */
/* NOTE: iPhone 16 Pro Max CSS viewport = 440×956 (1320×2868 px at 3x).
         iPhone 16 Plus / 15 Pro Max = 430×932.  DO NOT lower to 430px. */
@media screen and (max-width: 440px) {

  .msg-text {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Widen bubbles — 88% of 440px = 387px, fits long peptide reports. */
  .msg {
    max-width: min(88%, 390px) !important;
  }

  /* Code blocks: slightly larger text for readability */
  .code-block pre {
    font-size: 11px !important;
  }
}

/* iPhone 16 / 15 / 14 / 13 (390px) */
@media screen and (max-width: 410px) {

  .msg-text {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }

  .msg {
    max-width: min(86%, 370px) !important;
  }
}

/* iPhone 12 mini / SE (375px) */
@media screen and (max-width: 380px) {

  .msg-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .msg {
    max-width: min(90%, 340px) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §7  HORIZONTAL OVERFLOW — Prevent bubbles and code blocks from overflowing
   ══════════════════════════════════════════════════════════════════════════
   Some elements use width:100% or fixed widths that can exceed the bubble
   width on narrow viewports. Force them to stay within their containers.      */

@media screen and (max-width: 768px) {

  /* Messages container — prevent any child from creating horizontal scroll */
  .ch-messages {
    overflow-x: hidden !important;
  }

  /* Message bubble content must not overflow its bubble */
  .msg-text {
    overflow-x: hidden !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Images stay within bubble width */
  .msg-img-thumb {
    max-width: 100% !important;
  }

  .msg-img-grid {
    max-width: 100% !important;
  }

  /* Code blocks: horizontal scroll within the block, not the page */
  .code-block {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .code-block pre {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* Video thumbnails: fit the bubble */
  .msg-video-shell {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .msg-video-wrap {
    max-width: 100% !important;
  }

  /* Voice mode tray: keep within viewport */
  #voice-mode-tray {
    right: 0 !important;
    left: auto !important;
    min-width: min(92px, 80vw) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §8  HEADER / TOP BAR — Clean Mobile Bar visibility fixes
   ══════════════════════════════════════════════════════════════════════════
   On very narrow phones or when the boot overlay is present, ensure the CMB
   buttons have enough size and the header is never clipped.                   */

@media screen and (max-width: 768px) {

  /* Ensure the chat header never gets hidden under .chat-main's overflow */
  .ch-header {
    overflow: visible !important;
    position: relative !important;
    z-index: 50 !important;
    flex-shrink: 0 !important;
  }

  /* CMB buttons: always 44px tall on touch (HIG minimum) */
  .cmb-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* HYPATIA wordmark in the CMB: no overflow clip */
  .cmb {
    overflow: visible !important;
  }

  /* The hy-chat-banner (animated HYPATIA banner above header) should be
     hidden on mobile to save vertical space — replaced by cmb-wordmark */
  #hy-chat-banner {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §9  BOTTOM SHEET & SESSION DRAWER — Safe-area aware on iPhone
   ══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {

  /* Mobile session sheet bottom (already has padding, but ensure home bar) */
  #mobile-sess-sheet {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Session pill: float above home bar */
  #mobile-sess-pill {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Mode indicator pill: above home bar */
  #mode-indicator {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §10  PWA FULLSCREEN — Extra padding for when installed as home screen app
   ══════════════════════════════════════════════════════════════════════════
   When installed as PWA (apple-mobile-web-app-capable=yes), Safari hides the
   browser chrome completely. The top safe-area-inset becomes the full
   Dynamic Island height (~59px on iPhone 16 Pro). Ensure the chat-main
   accounts for this in both normal browser and PWA modes.                     */

/* ── PWA / Standalone mode ──────────────────────────────────────────────
   In PWA mode (added to Home Screen) there is NO browser chrome at all.
   The content starts at y=0 of the physical screen, directly behind the
   Dynamic Island. We MUST add padding-top: env(safe-area-inset-top) to
   .ch-header so the header background extends into the DI area and the
   header CONTENT (HYPATIA wordmark) starts below the DI.                  */
@media screen and (display-mode: standalone) and (max-width: 768px) {

  /* .ch-header absorbs the safe area (native iOS navigation bar pattern) */
  html .ch-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  /* .chat-main has NO additional padding — ch-header handles it */
  html .chat-main {
    padding-top: 0 !important;
  }

  /* Composer: home indicator bottom margin */
  .ch-composer {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §11  SEARCH BAR & CONTEXT BAR — don't clip under notch
   ══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {

  #search-bar {
    /* When search bar opens (below header), give some breathing room */
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §12  CHAT LAYOUT HEIGHT — Fallback fix for classic/cyberpunk platform
   ══════════════════════════════════════════════════════════════════════════
   layout-minimal.css correctly uses var(--nav-height,48px) which becomes 0px.
   But the raw chat.html §20 mobile rule uses a hardcoded 52px:
     .chat-layout { height: calc(100dvh - 52px) !important }
   Since nav is disabled, 52px is wrong. This rule corrects it for ALL layouts.
   Note: specificity must beat the inline §20 rule — achieved via being loaded
   after the inline <style> block (this file is linked after it).               */

@media screen and (max-width: 768px) {

  /* Override the hardcoded 52px — use the CSS variable nav.js correctly sets.
     html .chat-layout has specificity (0,0,2), beating the inline-style
     .chat-layout { height: calc(100dvh - 52px) !important } at (0,0,1). */
  html .chat-layout {
    height: calc(100dvh - var(--nav-height, 0px)) !important;
  }

  html .chat-main {
    height: calc(100dvh - var(--nav-height, 0px)) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §13  COMPLETE iPHONE BREAKPOINTS
        iPhone SE 3rd gen  — 375 × 667   @1x display (safe-area-inset-top: 20px)
        iPhone 13 mini     — 375 × 812   @3x with notch  (inset-top: 50px)
        iPhone 13 / 14     — 390 × 844   @3x with notch  (inset-top: 47px)
        iPhone 14 Plus/15  — 430 × 932   @3x DI          (inset-top: 59px)
        iPhone 15 Pro      — 393 × 852   @3x DI          (inset-top: 59px)
        iPhone 16          — 390 × 844   @3x DI          (inset-top: 59px)
        iPhone 16 Pro Max  — 440 × 956   @3x DI          (inset-top: 59px)  ← NOT 430
   ══════════════════════════════════════════════════════════════════════ */

/* ── All iPhones (up to 440px wide) — shared base rules ──────────────── */
/* Covers iPhone SE through iPhone 16 Pro Max (440px CSS width). */
@media screen and (max-width: 440px) {

  /* Prevent iOS elastic bounce scroll on the page root.
     IMPORTANT: Do NOT use position:fixed on html or body here — it
     breaks all position:fixed children (drawers, toasts, voice dock,
     mode indicator) because their containing block shifts from the
     viewport to the fixed body. overscroll-behavior:none is the correct
     lightweight fix for elastic bounce without side effects.            */
  html {
    overscroll-behavior: none;
  }
  body {
    overscroll-behavior: none;
  }

  /* Chat layout fills exactly the visual viewport — no nav offset.
     Using dvh (dynamic viewport height) which correctly excludes the
     URL bar on iOS Safari.                                             */
  html .chat-layout {
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  html .chat-main {
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Input font-size must be ≥16px on iOS to prevent Safari auto-zoom */
  .ch-input {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }

  /* Prevent overscroll bounce on the messages container */
  .ch-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Sessions drawer: full-height left panel */
  html .sessions-drawer {
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    width: min(80vw, 300px) !important;
    max-width: 300px !important;
  }
}


/* ── iPhone SE 3rd gen (375px, no Dynamic Island, flat notch) ──────────── */
@media screen and (max-width: 375px) {

  /* SE has a HOME BUTTON, not DI. safe-area-inset-top = 20px (status bar only).
     The header just needs the standard status-bar clearance. */
  html .ch-header {
    padding-top: env(safe-area-inset-top, 20px) !important;
    min-height: calc(env(safe-area-inset-top, 20px) + 48px) !important;
  }

  /* Composer: safe area + extra gap for the home button hardware (8px) */
  .ch-composer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* On SE, make bubbles slightly narrower so long words don't overflow */
  .msg {
    max-width: min(90%, 330px) !important;
  }

  .msg-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}


/* ── iPhone 13 mini, 13, 14, 15, 16 (375–393px, notch/Dynamic Island) ────
   All have safe-area-inset-top ≥ 47px (notch) or 59px (DI).            */
@media screen and (min-width: 376px) and (max-width: 393px) {

  html .ch-header {
    /* Ensure header absorbs the notch / DI in PWA; zero in browser mode
       (browser mode rule in §1 already zeroes this with !important).    */
    min-height: calc(env(safe-area-inset-top, 47px) + 50px) !important;
  }

  .msg {
    max-width: min(86%, 340px) !important;
  }

  .msg-text {
    font-size: 13.5px !important;
    line-height: 1.52 !important;
  }

  /* More breathing room on the composer bottom edge */
  .ch-composer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 34px)) !important;
  }
}


/* ── iPhone 14 Plus (430px) · 15 Pro Max (430px) · 16 Plus (430px) · 16 Pro Max (440px) */
/* Extends to 440px to capture iPhone 16 Pro Max which is 440×956 CSS pixels. */
@media screen and (min-width: 394px) and (max-width: 440px) {

  html .ch-header {
    min-height: calc(env(safe-area-inset-top, 59px) + 52px) !important;
  }

  /* 440px is wide enough for slightly larger bubbles */
  .msg {
    max-width: min(88%, 390px) !important;
  }

  .msg-text {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* On wide phones the composer can afford a bit more bottom padding */
  .ch-composer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 34px)) !important;
  }

  /* Voice dock: position above home indicator + composer */
  #hv-dock {
    bottom: calc(var(--ch-composer-h, 90px) + env(safe-area-inset-bottom, 34px) + 8px) !important;
  }
}


/* ── Ensure safe-area-inset-bottom is always respected for sessions drawer */
@media screen and (max-width: 440px) {

  /* Sessions drawer bottom must clear home indicator */
  html .sessions-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Sessions panel (inner scroll area): also clear home indicator */
  html .sessions-panel {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Context bar (pills row) must never be cut off */
  .ch-ctx-bar {
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }

  /* Toast stack: always above composer AND home bar */
  .toast-container {
    bottom: calc(var(--ch-composer-h, 80px) + env(safe-area-inset-bottom, 34px) + 14px) !important;
  }

  /* Mode indicator stays above home bar */
  #mode-indicator {
    bottom: calc(10px + env(safe-area-inset-bottom, 34px)) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §14  VOICE DOCK — iPhone 16 Pro Max compact layout (≤430px)
   ══════════════════════════════════════════════════════════════════════════
   Two problems on iPhone 16 Pro Max (430px CSS width, 414px usable):

   A) OVERFLOW — the default dock buttons row is ~453px wide:
        ✕(30) + ⏸ Pause(65) + 🎙 Mute(60) + 🎵(40) + 📷 Look(70)
        + 🦩 Hypatia mode pill(80) + gap(20) + avatar(~100) = 465px
      This overflows into the right safe-area, clipping the avatar face.
      Fix: hide #hv-mode-pill (redundant — mode is on hv-mount itself)
           and compact button padding → total drops to ~350px. ✓

   B) OVERLAP — avatar halos use `inset: -10% / -16%` with overflow:visible.
      On a 90px face the outer halo extends 14px ABOVE the face element.
      With only 4px gap between the dock column items, the halos reach into
      the brain panel ("👂 LISTENING...") above, creating visual clutter.
      Fix: reduce halo inset on narrow screens + increase dock column gap.

   C) CONDENSED feel — all this combined with the brain panel makes the dock
      tall and covers a large portion of the visible message area.
      Fix: the compact buttons + hidden mode pill reduce dock width; the extra
      gap (4→8px) gives breathing room without increasing total dock height. */

@media screen and (max-width: 440px) {

  /* A. Hide mode pill — frees ~80px width, prevents overflow.
     Mode is always "Hypatia" by default; the waveform shows the active mode. */
  #hv-mode-pill {
    display: none !important;
  }

  /* A. Compact button padding — saves ~50px total across all 5 buttons */
  #hv-close-btn,
  #hv-pause-btn,
  #hv-mic-btn,
  #hv-shazam-btn,
  #hv-cam-btn {
    padding: 5px 7px !important;
    font-size: 9px !important;
  }

  /* B. Increase dock column gap so halos don't reach brain panel above */
  #hv-dock {
    gap: 8px !important;  /* was 4px */
  }

  /* B. Reduce halo extent — face ~90px, -8% = 7px vs -16% = 14px.
     Still visually present but won't bleed into the brain-panel area above. */
  .hv-halo-1 { inset: -8% !important; }
  .hv-halo-2 { inset: -5% !important; }

  /* C. Brain panel: tighter, full dock width */
  #hv-brain-panel {
    padding: 6px 10px 5px !important;
    max-width: 100% !important;
  }

  /* C. Thought stream pill: fill dock width */
  #hv-thought-stream {
    max-width: calc(100% - 8px) !important;
  }

  /* C. Avatar mount: can shrink when space is tight, no forced overflow */
  #hv-mount {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}


/* ── iPhone landscape: side safe-areas + height correction ──────────────── */
@media screen and (max-width: 932px) and (orientation: landscape) and (max-height: 430px) {

  /* Landscape on iPhone: height is very small (e.g. 390px wide = 844px tall
     but rotated = 390px HEIGHT). Use dvh instead of 100vh to avoid URL-bar
     measurement bug. */
  html .chat-layout,
  html .chat-main {
    height: 100dvh !important;
  }

  /* In landscape the header can be compact — save vertical pixels */
  html .ch-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
    min-height: calc(env(safe-area-inset-top, 0px) + 40px) !important;
  }

  /* Banner hidden in landscape — not enough height for it */
  #hy-chat-banner {
    display: none !important;
  }
}