/* ==========================================================================
   Mobile AI Polish — S3 layer on top of mobile-ai-sheet.css.
   Full-vertical sheet behavior + iOS keyboard accommodation.
   ========================================================================== */

@media (max-width: 767px) {

  /* Full-vertical sheet — push the modal to fill the area between the
     iPhone status bar AND the bottom tab-bar.
     fluffy-puzzling-dongarra S1 D1: replace `width: 100vw` with `100%` +
     `box-sizing: border-box`. iOS Safari resolves `100vw` to
     viewport-width-INCLUDING-scrollbar-gutter, producing a ~15-17px
     horizontal overhang that the gesture system treats as scrollable —
     the long-standing bidirectional viewport rubber-band per Joe's
     2026-05-10 walkthrough Issue #3.
     cementing-modal-chrome-fleet S2 D2 (2026-05-13) — SMOKING GUN #3:
     prior `inset: 0 !important` + `height: 100dvh` overrode mobile.css's
     `.unified-ai-modal.active { bottom: tab-bar-height }` rule, making
     the modal extend UNDER the tab-bar. The sticky composer at the
     modal's bottom edge landed at viewport-bottom-0, where the tab-bar
     (z:11000) sits — chat input fully obscured. Iron-Law fix: clear the
     bottom edge above the tab-bar via individual position rules + auto
     height, so the composer naturally sits above the tab-bar with no
     per-element sticky-offset hack. The pink chrome envelope visually
     continues into the pink-painted tab-bar (palette match shipped at
     `mobile-tab-bar.css:117-123` sweeping-unifying-canopy S2 D3) so the
     two surfaces read as one modal envelope, not as two stacked layers. */
  .unified-ai-modal.mobile-ai-sheet {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mobile-control-panel-height) !important;
    width: 100%;
    height: auto !important;
    border-radius: 0;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
  }

  /* Container + body need to flex to fill the new height. */
  .unified-ai-modal.mobile-ai-sheet .unified-ai-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .unified-ai-modal.mobile-ai-sheet #unifiedAIBody {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .unified-ai-modal.mobile-ai-sheet #unifiedAIMessages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* RAF auto-scroll lands here */
  }

  /* Composer sits sticky to the bottom; on keyboard-open it gets translated
     up by the visualViewport delta so the input stays above the keyboard. */
  .unified-ai-modal.mobile-ai-sheet .unified-ai-composer,
  .unified-ai-modal.mobile-ai-sheet #unifiedAIComposer,
  .unified-ai-modal.mobile-ai-sheet .ai-composer {
    position: sticky;
    bottom: 0;
    bottom: var(--mai-kb-offset, env(safe-area-inset-bottom, 0px));
    background: #1a0e2e;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
    transition: bottom 0.18s ease;
  }

  /* When iOS keyboard is up, the bottom-anchored TabBar would otherwise
     collide with the keyboard; the .mai-kb-open flag lifts a thin shadow
     so the composer reads as the active dock. */
  .unified-ai-modal.mobile-ai-sheet.mai-kb-open .unified-ai-composer,
  .unified-ai-modal.mobile-ai-sheet.mai-kb-open #unifiedAIComposer,
  .unified-ai-modal.mobile-ai-sheet.mai-kb-open .ai-composer {
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04), 0 -8px 16px rgba(0, 0, 0, 0.35);
  }

  /* AttributionDrawer + present_media inline cards — UMI Heart Principle.
     The cards are clickable; visual affordance hint is a subtle hover/tap state. */
  .unified-ai-modal.mobile-ai-sheet [data-media-id]:not(.no-tap),
  .unified-ai-modal.mobile-ai-sheet [data-person-id]:not(.no-tap) {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.12s ease;
  }

  .unified-ai-modal.mobile-ai-sheet [data-media-id]:not(.no-tap):active,
  .unified-ai-modal.mobile-ai-sheet [data-person-id]:not(.no-tap):active {
    opacity: 0.78;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NO TEXT FIELD UNDER 16px ON A TOUCH DEVICE — iOS MAGNIFIES, AND NEVER UNDOES IT
   ═══════════════════════════════════════════════════════════════════════════

   Joe, Mary walk 2026-08-29: "the Fergi AI modal is not fixed in the iphone
   display. Horizontally." Then again on the portrait picker: "this modal is
   also loose in the iphone frame, horizontally."

   ⛔ IT IS NOT AN OVERFLOW. Measured on his iPhone over USB while it was
   happening:

       documentElement.clientWidth  402   (layout viewport)
       window.innerWidth            352   (visual viewport)
       visualViewport.scale         1.1418     — and 402 / 352 = 1.1418 exactly
       document/body scrollWidth    402   — nothing is wider than the page
       widest offending element     none

   Nothing overflows. The PAGE IS ZOOMED. Mobile Safari magnifies the whole
   document when a text field with a computed font-size below 16px receives
   focus, and it does not zoom back out afterwards — so every surface afterwards
   pans horizontally inside a frame that no longer matches the viewport. The
   composer measured 15.2px (0.95rem), which is 0.8px under the threshold.

   Why it appeared only on 2026-08-29: replying from a phone had been forbidden
   since the launch window, so nobody had ever focused this field on iOS. Lifting
   that restriction the same morning is what exposed it.

   ⛔ THE FIX IS THE FONT SIZE, NOT THE VIEWPORT. `maximum-scale=1` or
   `user-scalable=no` in the viewport meta would also stop the zoom — by taking
   pinch-zoom away from every member, including the ones who need it to read.
   That trades a layout annoyance for an accessibility regression on a vault
   built for a family whose eldest members are in their nineties. 16px costs
   nothing and is the documented remedy.

   Scoped to `pointer: coarse` rather than a width query on purpose: an iPad in
   landscape is 1024px wide and still auto-zooms, while a desktop window dragged
   narrow does not and must keep its own type scale. */
@media (pointer: coarse) {
  .fic-text,
  #unifiedAIInput,
  .unified-ai-input-area textarea,
  .unified-ai-input-area input[type="text"],
  .mobile-ai-sheet textarea,
  .mobile-ai-sheet input[type="text"] {
    font-size: 16px !important;
  }
}

/* Greg G-015 (2026-09-18, FergiPAD greg-ipad-2): Fergi's input controls —
   Speak your message / Voice conversation / Send — drew 40×40 on the iPad's
   desktop layout (34×34 inside the ambient rail). Coarse pointers get 44. */
@media (pointer: coarse) {
  .fic-board [data-fic-role] { min-width: 44px; min-height: 44px; }
}