/* dsh-mobile-pwa · mobile shell CSS
 * Loaded on every device that isn't explicitly marked "desktop"
 * (`html:not([data-lan-device="desktop"])`). A real phone paired through the
 * gateway defaults to kind "auto" — which never gets a `data-lan-device`
 * attribute at all (see lib/lan-gate-server.cjs) — so gating on the literal
 * `[data-lan-device="phone"]` value (only set when an admin manually flips a
 * device to "phone") meant these patches never actually applied on a real
 * phone. `:not([data-lan-device="desktop"])` matches both "no attribute" and
 * an explicit "phone", so auto devices get them too. Desktop is still never
 * affected.
 *
 * Division of labor (2026-08-17): mobile UI layout — font-size scale,
 * fullscreen dialogs, composer chrome, popover positioning, touch-target
 * sizing, double-tap-zoom suppression — now belongs entirely to the
 * @dsh-external/dsh-mobile-nav plugin. This file keeps only rules the PWA
 * shell itself needs: browser-behavior workarounds (iOS input zoom, text
 * auto-resize) and the CSS side of this plugin's own touch gestures
 * (pinch-to-resize) implemented in touch-gestures.js.
 * None of the rules below duplicate dsh-mobile-nav, and the page does not
 * depend on dsh-mobile-nav being installed for them to make sense.
 *
 * Trimmed from 163 to this: removed the font-size-variable compression
 * block, fullscreen modal rules, composer select-pill compaction (incl. the
 * hashed `.Sh0Q9G_triggerLabel` selector), popover positioning, touch-target
 * min-height/touch-action rules, and the whole non-phone
 * `@media (max-width: 820px)` fallback block — dsh-mobile-nav's own media
 * queries are not gated on data-lan-device, so they already cover that
 * fallback scenario.
 */

/* ----- Browser-behavior baseline: stop iOS/Android auto text resize, kill
   the tap-highlight flash, respect the safe-area inset. These apply to the
   whole page (not just dsh-mobile-nav's own elements), so they stay here
   rather than move to dsh-mobile-nav. ----- */
html:not([data-lan-device="desktop"]) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-bottom: max(env(safe-area-inset-bottom), 0px);
}

/* Suppress the browser's own overscroll "rubber band"/pull-to-refresh at the
 * document edge. This plugin's touch-gestures.js used to implement its own
 * pull-to-refresh gesture here too, but that was removed (users found it
 * trigger-happy and disorienting: any accidental overscroll reloaded the
 * page and dropped them back to the conversation list mid-chat). This rule
 * stands on its own now — it just stops the browser's native gesture from
 * firing an unwanted reload inside the standalone PWA. */
html:not([data-lan-device="desktop"]) body {
  overscroll-behavior-y: none;
}

/* Apply the pinch-to-resize font scale. touch-gestures.js sets
 * --dsh-pwa-font-scale via root.style.setProperty() on pinch; this is this
 * plugin's own gesture feature, not a dsh-mobile-nav concern. */
html:not([data-lan-device="desktop"]) {
  --dsh-pwa-font-scale: 1;
}
html:not([data-lan-device="desktop"]) [data-slot="conversation"] [data-phase] {
  font-size: calc(1em * var(--dsh-pwa-font-scale));
}

/* iOS Safari zooms the whole page when a focused input's font-size is below
 * 16px, and it does NOT zoom back out when focus leaves — the page just stays
 * magnified until the user pinches it back (reported 2026-09-06: the UI came
 * back enlarged after a trip through a subagent session, and only leaving to
 * the session list and re-entering cleared it).
 *
 * This was scoped to [data-slot="conversation"], which is an exact attribute
 * match: it covers inputs inside the element whose slot is literally
 * "conversation" and nothing in the dozens of conversation.* subtrees around
 * it. Measured on the running UI: one input matched, while a visible 12px
 * text field sat outside the rule — and the composer never triggered the zoom
 * at all because it is contenteditable, not an input, which is why this went
 * unnoticed for so long. So the guard now covers the whole mobile shell.
 *
 * File / checkbox / radio are excluded: they carry no text, the file inputs
 * here are hidden anyway, and forcing 16px on them only disturbs layout.
 *
 * `[contenteditable]` is in the list because the thing users actually focus
 * — the message composer — is one: a contenteditable div with role=textbox,
 * not an input or a textarea. iOS treats it like any other editing host and
 * zooms on it just the same, so covering only inputs left the single most
 * focused element on the page unprotected, which is why widening this rule to
 * every input still did not stop the page coming back magnified (2026-09-06).
 * Measured before changing it: the composer computes 14px, and raising it to
 * 16px moves no geometry at all — its line-height is a fixed 24px rather than
 * a ratio, so the line box, the editor height and the card height are
 * identical either way, and section 5 of composer.css.ts can go on counting
 * lines in 24px units.
 *
 * It has to come AFTER the pinch-scale rule above, and say max() rather than
 * a flat 16px. The composer's editing host carries `data-phase` of its own,
 * so `[data-slot="conversation"] [data-phase]` matches it too — at exactly the
 * same specificity as this rule (0,3,1). Source order was therefore the whole
 * ballgame, and with this block sitting first the pinch rule quietly won and
 * put the composer back to 1em. That is why the composer stayed at 14px even
 * after this selector learned about contenteditable, and why the page went on
 * zooming (measured 2026-09-06: both rules matched, the later one applied).
 * max() keeps the two goals from fighting — a hard 16px floor so iOS never
 * zooms, and everything above it still scaling with the pinch gesture.
 *
 * dsh-mobile-nav does not add this workaround, so it stays here. */
html:not([data-lan-device="desktop"]) input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html:not([data-lan-device="desktop"]) textarea,
html:not([data-lan-device="desktop"]) [contenteditable]:not([contenteditable="false"]) {
  font-size: max(16px, calc(1em * var(--dsh-pwa-font-scale, 1)));
}

/* Home-indicator clearance for the composer USED to live here, as
 *   [data-slot="conversation.composer"], [data-slot="conversation.input.bar"]
 *   { padding-bottom: max(env(safe-area-inset-bottom), 8px) }
 * It is gone (S4.1, 2026-08-17) and should not come back. Two reasons:
 *
 * 1. It never did anything. Both of those slot elements are `display:
 *    contents` in the current DSH shell — they generate no box, so padding on
 *    them is discarded. Measured 2026-08-17: forcing the declaration to a
 *    literal 34px moved the composer capsule by exactly 0px.
 * 2. Composer chrome is dsh-mobile-nav's job (see the file header). The real
 *    clearance now lives in that plugin's styles/composer.css.ts, on an
 *    element that actually lays out, and reads its --mnav-sab variable so it
 *    can be regression-tested off-device with ?mobile-nav-inset=54,34.
 *    env() here was untestable on any desktop browser, which is how an inert
 *    rule survived this long.
 */

/* Scroll long code lines horizontally instead of letting them widen the
 * page. dsh-mobile-nav has no equivalent rule; dropping this would let a
 * long code block push the whole phone layout into horizontal scroll.
 * pre + pre code ONLY: the old bare `code` selector also hit INLINE code,
 * whose white-space:pre vetoed every wrapping property and clipped long
 * paths off-screen on phones — while desktop loopback (which never loads
 * this file) wrapped fine. Days of "why only on the phone" (2026-08-18);
 * inline-code wrapping is owned by styles/content.css.ts. */
html:not([data-lan-device="desktop"]) pre,
html:not([data-lan-device="desktop"]) pre code {
  white-space: pre;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}