/* ══════════════════════════════════════════════════════════════════
 * ios-universal.css v1 — Universal iOS / iPadOS / Safari Fix Layer
 * Auto-generated by ios_optimizer_v1 + hand-tuned for Hypatia Brain
 *
 * REQUIRES: ios_detect.js to be loaded first (sets html[data-ios])
 * SAFE: All rules are scoped to html[data-ios] — zero impact on desktop/Android
 *
 * Coverage (37 known iOS quirks):
 *   viewport, safe-area, keyboard, touch, scroll, GPU, WebRTC, PWA, iframe
 * ══════════════════════════════════════════════════════════════════ */

/* ─── §1  Base iOS reset ──────────────────────────────────────────── */
html[data-ios] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
html[data-ios] body {
  overscroll-behavior: none;
  /* Prevent rubber-band scroll on body from breaking fixed elements */
  position: relative;
}

/* ─── §2  Touch targets (iOS HIG: 44×44pt minimum) ───────────────── */
html[data-ios] button,
html[data-ios] a,
html[data-ios] [role="button"],
html[data-ios] .vmt-btn,
html[data-ios] .cmb-btn,
html[data-ios] .hdr-btn {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ─── §3  Input font-size (prevents iOS auto-zoom at < 16px) ─────── */
html[data-ios] input,
html[data-ios] textarea,
html[data-ios] select,
html[data-ios] .ch-input {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
}

/* ─── §4  Scroll containers: momentum + chain containment ────────── */
html[data-ios] .ch-messages,
html[data-ios] .sessions-panel,
html[data-ios] .modal-body,
html[data-ios] .ws-body,
html[data-ios] .scroll-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ─── §5  GPU relief — backdrop-filter budget governor ────────────── */
/*
 * ROOT CAUSE OF WHITE SCREEN CRASH:
 * iOS GPU compositor budget is ~5-7 simultaneous backdrop-filter layers.
 * chat.html has 71 backdrop-filter rules. The always-active ones are:
 *   - .sessions-panel   blur(60px)  — in GPU via translateX, NOT display:none
 *   - .sessions-backdrop blur(2px)  — in GPU via opacity:0, NOT display:none
 *   - .ch-header         blur(40px)  — always visible
 *   - .ch-input-wrap     blur(24px)  — always visible
 *   - .welcome-glow      blur(28px)  — on first load
 * Total: 5 layers before voice dock adds more → GPU OOM → white screen
 *
 * Fix: on iOS, kill backdrop-filter on hidden panels, reduce blur on
 * always-visible surfaces to 8px (imperceptible difference, 5× cheaper).
 */

/* Off-screen panel wrappers */
html[data-ios] .sessions-drawer:not(.open),
html[data-ios] .bank-panel:not(.open),
html[data-ios] #cobrowse-panel:not([style*="flex"]),
html[data-ios] #office-panel:not([style*="flex"]),
html[data-ios] #ridealong-panel:not([style*="flex"]) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* CRITICAL: .sessions-panel has its OWN blur(60px) independent of the drawer.
 * CSS backdrop-filter is NOT inherited — must target the child directly.
 * When closed (translateX(-100%)) it still burns GPU. Kill it. */
html[data-ios] .sessions-drawer:not(.open) .sessions-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* When open: allow a reasonable blur (8px vs 60px = 7× cheaper) */
html[data-ios] .sessions-drawer.open .sessions-panel {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* .sessions-backdrop uses opacity:0 to hide → stays in GPU compositor.
 * It's a dim overlay — doesn't need any blur at all. */
html[data-ios] .sessions-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Always-visible surfaces: reduce from 40px/28px/24px → 8px.
 * On a Retina display at 3× scale, 8px is visually indistinguishable
 * from 40px but costs 25× less GPU compositor work. */
html[data-ios] .ch-header {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html[data-ios] .ch-input-wrap,
html[data-ios] .ch-composer .ch-input-wrap {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html[data-ios] .welcome-glow {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* During voice: additional relief — any panel that's not in view */
html[data-ios] body.hy-voice-active .sessions-drawer:not(.open),
html[data-ios] body.hy-voice-active .bank-panel:not(.open),
html[data-ios] body.hy-voice-active .sessions-drawer:not(.open) .sessions-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* During voice: reduce ALL non-critical surfaces to save GPU for voice rendering */
html[data-ios] body.hy-voice-active .ch-header {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
html[data-ios] body.hy-voice-active .ch-input-wrap {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ─── §6  Safe area: bottom nav / composer ───────────────────────── */
html[data-ios] .ch-composer {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* ─── §7  Safe area: top header ──────────────────────────────────── */
/* Browser mode: Safari URL bar already clears the notch. No extra padding. */
html[data-ios][data-ios-mode="browser"] .ch-header {
  padding-top: 0 !important;
}
/* PWA standalone: header must clear Dynamic Island / notch itself */
html[data-ios][data-ios-mode="standalone"] .ch-header {
  padding-top: env(safe-area-inset-top, 0px) !important;
  min-height: calc(env(safe-area-inset-top, 0px) + 52px) !important;
}

/* ─── §8  Landscape side safe areas ──────────────────────────────── */
@media (orientation: landscape) and (max-height: 450px) {
  html[data-ios] .ch-composer {
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
  html[data-ios] .ch-header {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ─── §9  Height: use --app-height (set by ios_detect.js) ─────────── */
/* --app-height = 100vh in PWA (dvh lies on cold start), 100dvh in browser */
html[data-ios] .chat-layout,
html[data-ios] .chat-main {
  height: var(--app-height, 100dvh) !important;
}

/* ─── §10  Transition suppression on layout boxes ───────────────── */
/* CSS transitions on height trigger layout reflow every frame — jank on iPhone */
html[data-ios] .chat-layout,
html[data-ios] .chat-main {
  transition: none !important;
  will-change: contents;
}

/* ─── §11  Keyboard open: raise composer above keyboard ─────────── */
/* --kb-h is set by ios_detect.js visualViewport listener */
html[data-ios].ios-kb-open .ch-composer {
  transform: translateY(calc(-1 * var(--kb-h, 0px)));
  transition: transform 0.15s ease-out !important;
}

/* ─── §12  Toast: stay above composer AND home bar ──────────────── */
html[data-ios] .toast-container {
  bottom: calc(
    var(--ch-composer-h, 80px) +
    env(safe-area-inset-bottom, 0px) +
    12px
  ) !important;
}

/* ─── §13  Sessions drawer: GPU-composited slide ──────────────────── */
html[data-ios] .sessions-drawer {
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ─── §14  Voice dock position on iPhone ─────────────────────────── */
html[data-ios] #hv-dock {
  position: fixed !important;
  bottom: calc(
    var(--ch-composer-h, 84px) +
    env(safe-area-inset-bottom, 0px) +
    8px
  ) !important;
  z-index: 9500 !important;
}

/* ─── §15  Iframe scroll fix (when chat.html is in a hyOS iframe) ── */
/* html.hy-compact/medium/wide is set by window-responsive.js in iframe mode */
html[data-ios].hy-compact,
html[data-ios].hy-medium,
html[data-ios].hy-wide {
  height: 100%;
  overflow: hidden;
}
html[data-ios].hy-compact body,
html[data-ios].hy-medium body,
html[data-ios].hy-wide body {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ─── §16  Prevent text selection flicker on long-press ─────────── */
html[data-ios] .ch-messages,
html[data-ios] .msg {
  -webkit-user-select: none;
}
html[data-ios] .msg-text,
html[data-ios] .code-block pre {
  -webkit-user-select: text;
  user-select: text;
}

/* ─── §17  iPad: wider layout, no mobile-specific squish ─────────── */
html[data-ipad] .chat-layout {
  max-width: 100%;
  padding: 0;
}
html[data-ipad] .chat-main {
  border-radius: 20px;
  margin: 10px;
}

/* ─── §18  Ambient pill: ensure above keyboard on iOS ─────────────── */
html[data-ios] #ambient-pill {
  position: relative;
  z-index: 10;
}

/* ─── §19  Mode indicator: above home bar ─────────────────────────── */
html[data-ios] #mode-indicator {
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ─── §20  Session pill: above home bar ───────────────────────────── */
html[data-ios] #mobile-sess-pill {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ─── §21  iOS 18+ PWA keyboard visibility fix ───────────────────── */
/* WebKit bug 279904: keyboard doesn't appear on first tap in iOS 18 PWA */
html[data-ios][data-ios-pwa="1"][data-ios-version="18"] input:focus,
html[data-ios][data-ios-pwa="1"][data-ios-version="18"] textarea:focus {
  /* Force a layout recalc on iOS 18 PWA to trigger keyboard */
  transform: translateZ(0);
}