/* ==========================================================================
   Mobile AI Sheet — mobile-native Fergi AI wrapper
   CSS-gated: all rules inside @media (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {

  /* ── Slide-up animation for the AI modal on mobile ── */
  .unified-ai-modal.mobile-ai-sheet {
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .unified-ai-modal.mobile-ai-sheet.mobile-ai-sheet-visible {
    transform: translateY(0);
  }

  /* ══ ONE HEADER — truing-pocket-stagecraft S1 (#1), 2026-08-27 ═══════════
     Joe, pocket walk: "The header panel over the Fergi AI modal shows just
     'Fergi AI', centered — with an exit × in the upper right corner of the
     modal."

     What he was looking at was TWO headers, not one. Measured on iPhone
     geometry before the fix:

       .top-nav             y=0  h=56  z-index 11500   ← what he saw
       .mobile-ai-header    y=0  h=56  z-index (10350) ← fully occluded

     The sheet injects its own header band (hamburger · "Fergi AI" · control)
     precisely so the modal owns its chrome — but .top-nav was later raised to
     z-index 11500 for the crown skin, so it has been painting straight over
     that band. The sheet's title, its drawer hamburger and its right-hand
     control have all been invisible; what showed instead was the app header
     carrying the operator strip, a second "Fergi AI" title and the focus chip
     — three stacked elements where the design says one.

     So the exit × Joe asked for cannot go in .top-nav without conceding the
     duplicate. The band beneath is the modal's own; revealing it is what makes
     "the upper right corner of the modal" a real place. This rule retires the
     app header for exactly as long as the sheet's header replaces it.

     ⚠️ THE CONDITION IS A SURVIVAL ASSERTION, NOT AN ABSENCE CHECK. All three
     terms must hold:
       .mobile-ai-sheet-open  — the SHEET is mounted (not merely any AI modal;
                                the ?fergi_open=1 path opens the modal without
                                a .mobile-ai-header, and hiding .top-nav there
                                would leave NO header at all);
       .ai-modal-open         — a modal is genuinely open. This is the self-
                                healing term: it is added/removed by the
                                canonical openUnifiedAIModal/closeUnifiedAIModal
                                pair, so ANY close path — ESC, the modal
                                manager's sweep, a programmatic close that never
                                reaches _closeMobile — brings the app header
                                back rather than stranding the surface headerless;
       :has(.mobile-ai-header)— the replacement header is actually IN THE DOM.
     A rule that only asked "is the sheet open" would fail dark the first time
     a close path skipped the sheet's own teardown.

     ⛔ This is NOT the `display: none` on .nav-center that stories.css:4429
     forbids. That INVARIANT protects the mobile title SLOT from being hidden
     while it is the only title on screen. Here a different element (.top-nav)
     steps back while a full-bleed sheet with its own title covers it, and it
     returns the instant that stops being true. */
  body.mobile-ai-sheet-open.ai-modal-open:has(#unifiedAIModal .mobile-ai-header) .top-nav {
    display: none !important;
  }

  /* ── The operator strip and the focus chip never ride over Fergi AI ──────
     truing-pocket-stagecraft S1 (#1). The ONE HEADER rule above covers the
     sheet path. This covers the OTHER mobile entry — ?fergi_open=1, which
     calls openUnifiedAIModal() directly and keeps .top-nav as its header.
     There the band must still read as Joe asked: just the centered title.

     · #gcpMobileStrip is the administrator-only context readout. It is the
       widest node in .nav-center (measured w=233 in a 390px band) and it is
       operator telemetry, not a header label — over a modal whose whole
       subject IS the current context it is redundant as well as crowding.
     · #ffaActiveFocusBanner's × clears a MEDIA FILTER. Beside a modal that
       until now had no exit at all, a clipped chip ending in × reads as the
       way out and is not. It belongs on the vault surfaces it describes. */
  body.ai-modal-open #gcpMobileStrip,
  body.ai-modal-open #ffaActiveFocusBanner {
    display: none !important;
  }

  /* ── Mobile AI Header — Unified Top-Bar Chrome Contract ──
     fluffy-puzzling-dongarra 2026-05-10 — Issue #1 carry-forward, then
     realizing-mobile-modals S1 D4 (2026-05-13) palette completion.
     Joe directive at /listen 2026-05-13 Issue #7: "Universal chrome
     color-matching — BOTH iPhone header band AND FFA control panel
     should fill with a color complementary to the active modal's main
     palette." The Fergi AI bottom band already paints deep pink #831843
     (sweeping-unifying-canopy S2 D3, Issue #19b); the bookend was the
     in-modal `.mobile-ai-header` carrying the iPhone-header-band visual
     role for this modal. Pre-S1 it shipped white (#ffffff) with a 3px
     purple bottom hairline — the gap Joe pointed at in screenshot
     7.13.48 AM. S1 paints it pink to match the bottom band, dropping
     the now-redundant purple hairline (the band IS the mode signal at
     full saturation now). Hamburger + new-chat icons + title flip to
     light cream so they read against the pink wash. The control
     geometry (hamburger-left + "Fergi AI" title-center + sparkle icon-
     right) is unchanged — only the surface paint shifts. */
  .mobile-ai-header {
    flex-shrink: 0;
    background: #831843;
    color: #fde68a;
    padding-top: env(safe-area-inset-top, 0px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-ai-header-top {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 8px;
    gap: 4px;
  }

  .mobile-ai-hamburger,
  .mobile-ai-exit {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fde68a;
    cursor: pointer;
    border-radius: 22px;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    flex-shrink: 0;
  }

  .mobile-ai-hamburger:active,
  .mobile-ai-exit:active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .mobile-ai-title {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.01em;
    color: #fde68a;
  }

  /* ── Segmented Control ── */
  .mobile-ai-segments {
    display: flex;
    padding: 0 12px 8px;
    gap: 0;
  }

  .mobile-ai-seg {
    flex: 1;
    min-height: 44px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-ai-seg:first-child {
    border-radius: 8px 0 0 8px;
  }

  .mobile-ai-seg:last-child {
    border-radius: 0 8px 8px 0;
  }

  .mobile-ai-seg.active {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-weight: 600;
  }

  /* ── When mobile header is showing, hide the desktop header ── */
  .mobile-ai-sheet .unified-ai-header {
    display: none !important;
  }

  /* ── Recent Conversations Panel ── */
  .mobile-ai-recent-panel {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    background: #f8f8f8;
  }

  .mobile-ai-recent-list {
    display: flex;
    flex-direction: column;
  }

  .mobile-ai-recent-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #eee;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
  }

  .mobile-ai-recent-item:first-child {
    border-top: 1px solid #eee;
  }

  .mobile-ai-recent-item:active {
    background: #f0f0f0;
  }

  .mobile-ai-recent-item.active {
    background: #f3eeff;
    border-left: 3px solid #7c3aed;
  }

  .mobile-ai-recent-title {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a2e;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-ai-recent-meta {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: #888;
    margin-top: 4px;
  }

  .mobile-ai-recent-loading,
  .mobile-ai-recent-empty {
    padding: 32px 16px;
    text-align: center;
    color: #888;
    font-size: 14px;
  }

  /* ── Override existing mobile.css AI modal rules when sheet is active ── */
  .unified-ai-modal.mobile-ai-sheet:is(.active, .is-open) {
    top: 0 !important;
    padding-top: 0;
  }

  .mobile-ai-sheet .unified-ai-container {
    border-radius: 0 !important;
  }

  /* ── Input area: clears above the TabBar with 12px gutter.
        sweeping-unifying-canopy S2 D3 (Issue #21, 2026-05-11) — Joe directive
        /listen: "Fergi AI input visible above TabBar."
        cementing-modal-chrome-fleet S2 D2 (2026-05-13) — paired with the
        modal-bottom Iron-Law fix (modal `bottom: var(--mobile-control-panel-height)`
        in mobile-ai-polish.css), the input-area now sits in the modal's
        bottom slot ABOVE the tab-bar. The TabBar's own `padding-bottom:
        var(--mobile-safe-area-bottom)` handles the iPhone home-indicator
        below this row, so the env(safe-area-inset-bottom) padding-bottom
        residue from the pre-fix layout is no longer needed (was double-
        padding the home-indicator zone above the tab-bar's own safe-area
        handling). 12px is the clean visual gutter.

        Contract:
          1. padding-bottom = 12px clean gutter (no safe-area duplication)
          2. background gradient signals the Fergi AI bottom-band identity
             (white → pink-50) so the input row reads as part of the pink
             chrome envelope (top band #831843 → input row pink wash →
             TabBar #831843 dark band below = continuous envelope)
          3. border-top in saturated pink reinforces the band boundary so
             the user sees the input row as a distinct affordance, not a
             continuous wash. ── */
  .mobile-ai-sheet .unified-ai-input-area {
    padding-bottom: 12px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fff0f6 100%) !important;
    border-top: 1px solid rgba(131, 24, 67, 0.22);
  }

  /* ── Bottom-panel mic slot (cementing-modal-chrome-fleet S2 D4, 2026-05-13)
        Replaces the prior Silent-Speaker narrator slot per Joe directive at
        /listen 2026-05-13 PM. Icons read cream-on-pink in the default state
        (matching the Fergi AI bottom band palette) and shift to a pulsing red
        accent during active recording so the user gets unambiguous feedback
        that the mic is hot. ── */
  body[data-modal-palette="fergi-ai"] .mobile-tab-bar .mcp-slot {
    color: #fde68a;
  }
  .ffa-fergi-ai-mic-icon-rec {
    color: #fecaca;
    animation: ffa-fergi-ai-mic-pulse 1.0s ease-in-out infinite;
  }
  @keyframes ffa-fergi-ai-mic-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(1.08); }
  }
}