/* ==========================================================================
   Mobile Face Tagging — S3 polish patch.
   Targeted overrides on top of mobile-photo-face-tagging.css (the baseline),
   delivering: full safe-area corner coverage, ≥44pt tap targets per HIG,
   thumb-zone clustering of confirm/reject pair near the bottom 1/3 of the
   viewport so the user's thumb reaches them without stretching.
   ========================================================================== */

@media (max-width: 767px) {

  /* Safe-area corners — pad horizontals on iPhone 14 Pro / 16 Pro Max where
     the curved corners and Dynamic Island shave a few px from the edges. */
  .mpft-overlay {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* Header — bump back button to canonical 44pt, ensure safe-area horizontal. */
  .mpft-header {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  .mpft-back {
    width: 44px;
    height: 44px;
    border-radius: 22px;
  }

  /* Action panel — thumb-zone tightening: pull primary action up from the
     keyboard-area floor so it sits in the comfortable 1/3-from-bottom band on
     a one-handed grip. The .mpft-actions stack stays vertical (D2.2 layout)
     but its primary button now has a slightly heavier tap target. */
  .mpft-action-panel {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  .mpft-btn,
  .mpft-actions-pair > .mpft-btn {
    min-height: 44px;        /* HIG canonical (was 42) */
    border-radius: 12px;
  }

  /* Confirm "Yes that's <Name>" sits closer to thumb — bump padding for
     visual weight on the dominant action. */
  .mpft-actions > .mpft-btn-confirm {
    min-height: 50px;
    font-size: 15px;
    font-weight: 700;
  }

  /* Comment unified footer — match safe-area horizontal handling. */
  .mpft-comment-unified {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  /* Voice dictation mic — bump to 36×36 (was implied smaller) for HIG mid-tier
     tap target without crowding the textarea. Baseline lives in
     css/voice-dictation.css; we just position-tune for face tagging. */
  .mpft-comment-field .vd-mic-btn {
    width: 36px;
    height: 36px;
    top: 4px;
    right: 4px;
    border-radius: 18px;
  }
}

/* ==========================================================================
   THE `faces` PALETTE — the Face Tagging Room's band and bar
   (surfacing-desktop-rooms-mobile S3, 2026-09-21)

   Joe, 2026-09-18: *"Dressing, and Browse and probably face training all need
   mobile surfaces."* S3 gave the Room a drawer cell, and its mobile shell is
   the Cluster Sweep overlay — which sits BETWEEN the vault's two always-visible
   bands under `.ffa-mobile-modal-chrome`. Both bands therefore stay on screen
   over a Room whose own ground is near-black indigo, and left alone they keep
   painting the palette of the view underneath.

   ⛔ REGISTERING A PALETTE KEY IS THREE DECLARATIONS, NOT ONE — S2 measured the
   cost of learning that on the Dressing Room: with only `THEME_COLORS`
   (mobile-shell.js) the top band tinted and the universal control panel fell to
   its bare default and went WHITE under a dark room. So: the table, the band,
   and the bar. All three, together, or none.

   #0f121e is `.csweep-overlay`'s own background (rgba(15,18,30,.96)) at full
   opacity, so the chrome reads as the Room's own edge rather than as a frame
   around it. The accent is the sweep's confirm-green (#38ef7d), which is the
   colour already carrying "this will be confirmed" inside the grid — the same
   information in the same hue, per the colour-conveys-information standard.
   ========================================================================== */

@media (max-width: 767px) {

  /* (2 of 3) the bar */
  body[data-modal-palette="faces"] {
    --mobile-tab-bar-bg: #0f121e;
    --mobile-tab-bar-border-top: rgba(56, 239, 125, 0.22);
    --mobile-tab-bar-fg-inactive: rgba(232, 234, 242, 0.65);
    --mobile-tab-bar-fg-active: #38ef7d;
    --mobile-tab-bar-shadow: 0 -2px 8px rgba(15, 18, 30, 0.55);
  }

  /* (3 of 3) the band */
  body[data-modal-palette="faces"] .top-nav {
    background: #0f121e;
    border-bottom-color: rgba(56, 239, 125, 0.22);
    color: #e8eaf2;
  }
  body[data-modal-palette="faces"] .mobile-hamburger-btn,
  body[data-modal-palette="faces"] .mobile-fergi-ai-launcher {
    color: #e8eaf2;
  }
}

/* ==========================================================================
   THE SWEEP QUEUE'S LAST CARD SAT UNDER THE UNIVERSAL CONTROL PANEL
   (surfacing-desktop-rooms-mobile S4, 2026-09-21)

   `s4-battery-1` — the first run in which the cell battery EVER reached this
   Room — filed `cluster-sweep / C6` ❌ against a control that is drawn 362×52,
   comfortably over the 44 px floor in both axes:

     "Johnnie Snyder  5 faces · ★ 3 in stories" — a 44×44 box centred on this
     control is not hittable as it at 1/4 axis point(s), missing at (195, 816)
     where elementFromPoint returned a BUTTON that is not the card.

   ⛔ IT WAS NEVER A SIZE PROBLEM, AND C6's OWN NAME FOR IT SAYS SO — *effective*
   target. `probes/c6-csweep-occluder.js` resolved the occluder's identity rather
   than guessing: the hit at the card's bottom edge is the universal control
   panel's own **✓Done** button (`.mobile-tab-item.mcp-done-btn`, rect y 798-844,
   z-index 11000 in mobile-tab-bar.css) lying over the bottom 23 px of the 59th
   and LAST card (y 769-821). `.csweep-body` scrolls with a flat `padding: 14px`
   (styles.css:47620) and the bar is `position: fixed` ABOVE the overlay's own
   z 10300 — so the queue's final row ends underneath it.

   ⚠️ THE MIS-TAP DISMISSES THE ROOM. This is why it is a defect and not a
   cosmetic overlap: a member who scrolls to the end of a 59-person queue and
   taps the last row does not merely miss the row — they hit **Done**, and the
   Face Tagging Room closes. The worst outcome of the wrong pixel should be
   nothing; here it is losing your place.

   The fix is the chrome contract's established scroll-container inset, not a
   per-card hack — same shape as `mobile-library.css:701` for the same reason
   (that one was Joe's 2026-05-12 /listen Issue #1, the TabBar clipping the
   filter footer's Apply CTA). Scoped to `body.has-mobile-tab-bar` so it costs
   the desktop overlay — which has no tab bar and no occlusion — nothing, and it
   keeps the original 14 px of breathing room above the bar.

   Fallback is 48px, the canonical value declared at mobile.css:78.
   ========================================================================== */

@media (max-width: 767px) {

  body.has-mobile-tab-bar .csweep-body {
    padding-bottom: calc(14px + var(--mobile-tab-bar-height, 48px) + env(safe-area-inset-bottom, 0px));
  }
}