/* The chat view on a phone (760px and less, or a short touch window up to
 * 960px wide, so rotating a phone keeps its layout): more words per screen, cheaper
 * paint, and the edges of the device respected. Reyansh (iPhone, 2026-10-20):
 * "seems very big and less text is readable and also very sturdy instead of
 * being fluid". Loaded last, so these win over the component sheets without
 * changing them; the desktop is untouched. On any touch screen the app is
 * the visible area (viewport.js, the first rules below).
 * Measured (scripts/mobile-chat.browser.mjs, 390px): the composer took 208 of
 * 844px; each answer lost 36px of width to the avatar column; every bubble
 * blurred what was behind it (backdrop-filter, the costliest paint on iOS).
 * Hamet (iPhone, 2026-10-21): "make the font larger and thicker when I'm on
 * mobile"; then (2026-10-23) "The font is still too thin and small" and "The
 * phone button is also too small ... I don't even have to wear my glasses".
 * The type section below sets phone reading text at 19px, weight 600
 * (Aeonik Pro's variable file carries 100-900, so 600 is real, not a
 * synthetic bold), the chrome at 15-16px, the grays darker; the call button
 * is a solid 56px disc at the composer's foot. Someone who finds it big
 * picks Small in Look (rem, so all of it scales).
 * Also here: Share's home greeting on a phone (small, low, by the thumb), and
 * Share installed as an app (display-mode: standalone, manifest.webmanifest),
 * on a phone or a desktop window. */

/* ---- a touch screen: the app is the visual viewport's box ----
 * viewport.js puts .vv-fit on <html> and the box in --app-top/left/w/h. The
 * page under the app is locked (while the app shows: the sign-in page may
 * still scroll to its field), so it never slides under the browser's chrome;
 * the app's foot is the keyboard's top while one is up, where the composer
 * drops the home bar's margin (.kb-open). */
:root.vv-fit:has(body > .app:not([hidden])) { overflow: hidden; overscroll-behavior: none; }
:root.vv-fit body:has(> .app:not([hidden])) { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
:root.vv-fit .app { position: fixed; top: var(--app-top, 0px); left: var(--app-left, 0px); width: var(--app-w, 100%); height: var(--app-h, 100dvh); }
:root.kb-open .composer { margin-bottom: var(--sv-space-1); }

@media (max-width: 760px), (pointer: coarse) and (max-width: 960px) and (max-height: 500px) {
  /* ---- chrome type and grays: read without glasses ----
   * Chrome 14px -> 16px, meta (times, previews, receipts) 13px -> 15px. The
   * grays darken so secondary words keep 7:1 on their surface (light
   * #4f4f4f/#6e6e6e -> #3d3d3d/#525252; dark #b8b8b8/#8c8c8c -> #cccccc/#adadad). */
  :root { --ui-text: 1rem; --ui-meta: 0.9375rem; }
  :root:not(.theme-dark) { --sv-ink-secondary: #3d3d3d; --sv-ink-tertiary: #525252; }
  :root.theme-dark { --sv-ink-secondary: #cccccc; --sv-ink-tertiary: #adadad; }
  /* Without the blur the light composer reads on a solid card, as reduced transparency has it. */
  :root:not(.theme-dark) .composer { background: var(--sv-surface-raised); }

  /* ---- the page itself never moves: no rubber band, no pull to refresh ---- */
  html, body { overscroll-behavior: none; }
  .transcript { overscroll-behavior-y: contain; }

  /* ---- header: 48px, the controls still 44px targets, clear of the notch ---- */
  .topbar {
    min-height: 48px;
    padding: max(2px, env(safe-area-inset-top)) max(var(--sv-space-1), env(safe-area-inset-right)) 2px max(var(--sv-space-1), env(safe-area-inset-left));
  }
  .topbar > .chat-title { line-height: 1.3; }
  .topbar > .meta { line-height: 1.3; }

  /* ---- the reading column: tighter gaps, the full width (type: below) ---- */
  .transcript {
    padding: var(--sv-space-3) max(var(--sv-space-3), env(safe-area-inset-right)) var(--sv-space-4) max(var(--sv-space-3), env(safe-area-inset-left));
  }
  .transcript > * + * { margin-top: var(--sv-space-3); }
  .transcript > .turn-user + .turn-user, .transcript > .turn-agent + .turn-agent { margin-top: var(--sv-space-1); }
  .transcript > .turn-user + .trace, .transcript > .trace + .turn-agent { margin-top: var(--sv-space-2); }
  .transcript > .trace { margin-left: 0; }
  .turn-user { padding: 8px 12px; }
  .turn-user { max-width: 86%; }
  /* The answer takes the whole column: Share's mark is the same on every
   * answer, so on a phone its 36px column goes to the words. */
  .turn-agent { grid-template-columns: minmax(0, 1fr); column-gap: 0; max-width: 100%; }
  .turn-agent .who { display: none; }
  .turn-agent > :not(.who) { grid-column: 1; }
  .turn-agent > .turn-tools { margin-top: 2px; margin-left: 0; }
  .turn-user > .turn-tools { margin-top: 2px; }
  .text p { margin: 6px 0; }
  .text :is(ul, ol) { margin: 6px 0; padding-left: var(--sv-space-4); }
  .text li { margin: 2px 0; }
  .text :is(h3, h4, h5, h6) { margin: var(--sv-space-3) 0 2px; }
  .text pre.code { margin: var(--sv-space-2) 0; padding: var(--sv-space-2) var(--sv-space-3); }
  .text .table-wrap, .text .md-table { margin: var(--sv-space-2) 0; }
  .text :is(th, td) { padding: 3px var(--sv-space-2); }
  /* A short table needs no filter on a phone: Copy and Expand on one row. */
  .md-table:not([data-long]) > .md-table-bar > :is(.md-table-find, .md-table-count) { display: none; }
  .md-table:not([data-long]) > .md-table-bar { justify-content: flex-end; }

  /* ---- composer: two rows, Send beside the words, above the home bar ---- */
  .composer {
    width: calc(100% - 2 * var(--sv-space-2) - env(safe-area-inset-left) - env(safe-area-inset-right));
    /* Each side's inset is its own margin: a side rail of system controls is often on one side only. */
    margin: var(--sv-space-1) env(safe-area-inset-right) max(var(--sv-space-2), env(safe-area-inset-bottom)) env(safe-area-inset-left);
    padding: var(--sv-space-1);
    gap: 0;
  }
  .composer textarea { min-height: 48px; padding: 10px 56px 10px var(--sv-space-2); }
  /* Send (or Stop) sits beside the words, at the field's top right: the
   * options row below may wrap (a Track chip, a 320px phone) without
   * running under it. */
  .composer :is(#send, #stop) {
    position: absolute;
    top: var(--sv-space-1);
    right: var(--sv-space-1);
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
  }
  /* A reply or attachment bar above the field: Send keeps the end of the
   * options row instead, and the row keeps its room. */
  .composer:has(> :is(.reply-bar, .composer-tools):not([hidden])) :is(#send, #stop) { top: auto; bottom: var(--sv-space-1); }
  .composer:has(> :is(.reply-bar, .composer-tools):not([hidden])) > .composer-options { padding-right: 52px; }
  .composer :is(#send, #stop) > .label { display: none; }
  .composer :is(#send, #stop) > .icon { width: 22px; height: 22px; stroke-width: 2.5; opacity: 1; }
  /* Attach is its glyph (the name stays in its title and accessible name). */
  .composer-options #attach { min-width: 44px; min-height: 44px; padding: 0; font-size: 0; gap: 0; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  .composer-options #attach > .icon { width: 22px; height: 22px; }
  /* The row's glyphs (attach, mic, the wake ear) and the header's: ink, not
   * gray, a heavier stroke, 44px targets. */
  .composer-options :is(#attach, .voice-dictate:not(.on), .wake-listen) { color: var(--sv-ink); }
  .composer-options :is(#attach, .voice-dictate, .wake-listen) > .icon { width: 22px; height: 22px; stroke-width: 2.25; opacity: 1; }
  .topbar :is(.rail-toggle, .back-home, .panel-toggle, .inbox-toggle) { color: var(--sv-ink); }
  .topbar :is(.rail-toggle, .back-home, .panel-toggle, .inbox-toggle) .icon { width: 22px; height: 22px; stroke-width: 2.25; opacity: 1; }
  /* Effort sits in the row: no label word (the slider keeps its name,
   * aria-label in index.html), a shorter track. */
  .composer-options .effort-control { flex: 0 1 auto; order: 0; gap: var(--sv-space-1); }
  .composer-options .effort-control > label { display: none; }
  .composer-options .effort-track { flex: 0 0 4rem; width: 4rem; }
  .composer-options #effort-value { flex: none; }
  .composer-options #effort-summary { min-width: 36px; }
  /* Your-message arrows have no room beside Send's row on a phone. */
  .composer-options .msg-nav { display: none; }

  /* ---- inputs: 16px, so iOS does not zoom the page when one takes focus ---- */
  :is(input:not([type="range"], [type="checkbox"], [type="radio"], [type="color"]), select, textarea) { font-size: 16px; }

  /* ---- type: larger and heavier than the desktop ----
   * Desktop: 16px at 400 (tables 14px, code 13px, chat titles 14px), headings
   * 16px at 600. Phone: 19px at 600 (tables 17px, code 15px, chat titles
   * 18px), headings 20-22px at 700, so they stay above the body. rem, so the
   * person's Text size (look.css) still scales it. Code keeps 400: the system
   * mono may have no heavier weight. */
  .turn-user, .turn-agent .text { font-size: 1.1875rem; line-height: 1.5; font-weight: 600; }
  .text h3 { font-size: 1.375rem; }
  .text h4 { font-size: 1.3125rem; }
  .text :is(h5, h6) { font-size: 1.25rem; }
  .text :is(h3, h4, h5, h6) { line-height: 1.25; font-weight: 700; }
  .text table { font-size: 1.0625rem; line-height: 1.45; }
  .text th { font-weight: 700; }
  .text pre.code code { font-size: 0.9375rem; font-weight: 400; }
  /* The composer reads as the answers do; never under 16px (no iOS zoom). */
  .composer textarea { font-size: max(16px, 1.1875rem); line-height: 1.5; font-weight: 600; }
  /* Sidebar and Recents chat titles: 18px at 600 (the open chat and Share's row heavier). */
  .chats .c-label, .board-row .b-label { font-size: 1.125rem; font-weight: 600; }
  .chats button[aria-current="true"] .c-label, .board-row:is(.needs, .fresh) .b-label, .need-row .n-head .b-label { font-weight: 700; }
  .chats .c-home .c-label { font-weight: 700; }
  /* Room for the larger lines: no descender clipped, rows of 44px or more. */
  .chats :is(.c-label, .c-preview, .c-when) { line-height: 1.3; }
  /* The words around them, one step heavier: the open chat's title, times and
   * previews, Trace rows, the actions under a message, the home tiles. */
  .topbar > .chat-title { font-size: 1.0625rem; font-weight: 600; }
  :is(.chats .c-when, .c-preview, .board-row .b-status, .need-row .n-text, [data-slot="trace-line"], .turn-tools button.ghost, .board-tile .t-label, .chats .c-body .c-preview) { font-weight: 500; }
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 960px) and (max-height: 500px) {
  /* ---- Share's home: the greeting small and low ----
   * It took the middle of the screen with a 64px mark (~65% of an 844px
   * screen above the composer). Now it rests on the dock, just above the
   * priority pills and the composer, where the thumb already is; the empty
   * space stays above it, the way a conversation starts at the bottom. */
  .transcript > .home-empty { margin: auto auto 0; gap: var(--sv-space-2); max-width: 21rem; padding-bottom: var(--sv-space-2); }
  .home-empty > .mark3d { width: 40px; height: 45px; margin-bottom: var(--sv-space-2); }
  .home-empty > .mark3d::after { bottom: -12px; height: 7px; }
  .transcript > .home-empty h2 { font-size: 1.25rem; font-weight: 600; }
  .home-empty > p { font-size: var(--ui-text); line-height: 1.4; }
}

/* ---- installed: Share as an app (manifest.webmanifest) ----
 * The window is the app's: no rubber band at its edges, and a long press on
 * a button is a press, not a link preview (no user-select: none, which on
 * iOS can lock a field inside it). The status bar keeps its own strip,
 * coloured by theme-color (index.html, theme.js), so the top bar only clears
 * the notch's sides; the home indicator's inset is the composer's margin
 * (above). Links still open: an outside one leaves for the browser, which is
 * how a standalone window shows it. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior: none; }
  button { -webkit-touch-callout: none; }
}

/* On a phone's side, reuse the phone shell and the existing compact call
 * bar. The composer uses the extra width, not a second row of scarce height.
 * Its tools/reply still take their own rows. A long draft scrolls inside its
 * field instead of pushing End call or Send under the keyboard. */
@media (pointer: coarse) and (min-width: 600px) and (max-width: 960px) and (max-height: 500px) {
  :root.vv-fit .main { padding-right: 0; }
  .composer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .composer > :is(.reply-bar, .composer-tools) { grid-column: 1 / -1; }
  .composer textarea { min-width: 0; padding-right: var(--sv-space-2); max-height: max(48px, calc(var(--app-h, 100dvh) * 0.22)); }
  .composer-options { max-width: 55vw; }
  .composer :is(#send, #stop) { position: static; }
  .composer:has(> :is(.reply-bar, .composer-tools):not([hidden])) > .composer-options { padding-right: 0; }
  .composer .effort-control { position: static; }
  .voice-bar.open .voice-controls { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; }
}

/* These boxes must respect each safe edge, not only a symmetric gutter.
 * A touch viewport can be shorter than the transcript's normal padding. */
:root.vv-fit .transcript { min-height: 0; }
:root.vv-fit :is(.voice-bar, .voice-notice, .artifact-strip) {
  max-width: calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right)));
  margin-left: env(safe-area-inset-left);
  margin-right: env(safe-area-inset-right);
}