/* Small screens (under 820 px; phones under 600 px). Loaded last, after focus.css.

   Nothing here applies from 820 px up: every rule sits inside a width query (or, for touch-only
   affordances, a pointer query that a desktop mouse never matches), so the desktop is unchanged.

   1. Elevation. On a small screen every panel that is part of the layout sits at the same level,
      level 0, with no shadow at all: the tasks list, a task or building, the conversations column,
      a chat that fills the screen, the Focus columns, the calendar and documents sheet, the top
      bar's clusters. A hairline and the surface's own tint against the backdrop separate them.
      Only what floats over them has a shadow, level 1, and it is one short, soft, low shadow,
      much smaller than the desktop's: the assistant's field and the strip of faces, call pills
      and cards, the quick message, the results sheet, pickers, menus, toasts, tips. In the dark
      the shadow is barely visible anyway, so level 1 there is a faint lit top edge plus a contact
      shadow rather than a heavier blur. The desktop's glass stacks three things (an inner
      highlight, an inner lowlight and a deep outer shadow); on a phone that read as a pile of
      cards, so the glass keeps its tint, blur, grain and sheen, and loses the stack.
*/

/* ------------------------------------------------------------------ 1. elevation tokens
   (also on a phone held sideways, which is wider than 820 px but short and driven by a finger) */

@media (max-width: 819.98px), (max-height: 480px) and (pointer: coarse) {
  :root {
    --elev-line: rgba(30, 42, 61, 0.1);
    --elev-0: none;
    --elev-1: 0 1px 2px rgba(20, 28, 40, 0.07), 0 3px 8px -2px rgba(20, 28, 40, 0.11);
    /* The old names now mean level 1, so every floating thing that used them follows. */
    --shadow: var(--elev-1);
    --shadow-sm: var(--elev-1);
    --glass-shadow: var(--elev-1);
  }
  :root[data-theme='night'], body.dark {
    --elev-line: rgba(255, 255, 255, 0.09);
    --elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.34), 0 3px 8px -3px rgba(0, 0, 0, 0.4);
    --shadow: var(--elev-1);
    --shadow-sm: var(--elev-1);
    --glass-shadow: var(--elev-1);
  }

  /* Level 1 is the default for anything glass: one shadow, no inner highlight and lowlight. */
  :root[data-glass] .glass, :root[data-glass='off'] .glass { box-shadow: var(--elev-1); }
  .dock-bar, .dock-sheet, .dock-find, .menu, .tooltip, .ptip, .mcard, .qm, .ch-pick, .undo-toast, .move-confirm,
  .lift, .drag-ghost, .incident-card, .planbar, .onboard, .drawer, .panel:not(.side-panel), dialog, .camctl,
  .map-note, .map-status, .bubble, .p-flash { box-shadow: var(--elev-1) !important; }
  /* Focus states keep their ring, over the same one shadow. */
  .dock.open .dock-bar, .dock-bar:focus-within, .dock.open .dock-bar.glass, .dock-bar.glass:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 80%, transparent), var(--elev-1) !important;
  }
  /* Calls keep their coloured ring (ringing, holding, an agent, stuck, missed), over level 1. */
  .callstack .cs-card, .callstack .cs-pill { box-shadow: var(--elev-1) !important; }
  .callstack .cs-card.ringing { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--elev-1) !important; }
  .callstack .cs-card.holding { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 60%, transparent), var(--elev-1) !important; }
  .callstack .cs-pill.agent { box-shadow: 0 0 0 1px color-mix(in srgb, #8fb3ef 55%, transparent), var(--elev-1) !important; }
  .callstack .cs-pill.stuck { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--orange) 80%, transparent), var(--elev-1) !important; }
  .callstack .cs-pill.missed { box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent), var(--elev-1) !important; }

  /* Level 0: the panels of the layout. No shadow; a hairline. In the world (under 1000 px the
     rails are a strip of faces and a strip of counts) and in Focus (the columns, the sheet). */
  .bar-group, .focus-bar,
  body.narrow .rail:not(.open), body.narrow .side.collapsed,
  body.focus-mode .rail, body.focus-mode .side, body.focus-mode .focus,
  body.focus-phone.chatting .rail {
    box-shadow: var(--elev-0) !important;
    border-color: var(--elev-line) !important;
  }
  /* In the world an open rail or side panel slides over the canvas: that one floats. */
  body.narrow:not(.focus-mode) :is(.rail.open, .side:not(.collapsed)) { box-shadow: var(--elev-1) !important; }
  /* On a phone the strip of faces floats with the assistant's field, over the tasks. */
  body.focus-phone .rail:not(.open) { box-shadow: var(--elev-1) !important; border-color: var(--elev-line) !important; }
  :root[data-glass]:not([data-glass='off']) body.focus-phone .rail:not(.open) { border-color: var(--glass-rim) !important; }

  /* Nothing inside a panel has a shadow: a selected segment or tab, a hovered document card,
     a row. A selected segment is told apart by its surface and a hairline. */
  .segmented button[aria-pressed='true'], [role='tab'][aria-selected='true'], .focus-bar [aria-selected='true'] {
    box-shadow: inset 0 0 0 1px var(--elev-line);
  }
  .doc-card:hover { box-shadow: none; }
}

/* ------------------------------------------------------------------ 2. the phone's layout

   Under 600 px (Focus on a phone). The tasks are one sheet from under the top bar to the bottom
   edge of the screen, and everything at the bottom floats over its end: the call pills, the strip
   of faces and the assistant's field (the floating block). The sheet's list leaves exactly that
   block's height free at its end (--ffloat; --fcalls is the pills' height, measured by focus.js),
   so its last rows scroll clear of it instead of being covered. A chat, the calendar and documents
   are the same sheet over it. Safe areas: the top bar clears the notch and the field the home
   indicator, or the on-screen keyboard (--kb), whichever is higher. */

.cs-more { display: none; }

@media (max-width: 599.98px) {
  body.focus-phone {
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --ftop: calc(58px + var(--safe-t));
    --fdock-h: 50px;
    --fdock: calc(8px + max(var(--kb, 0px), var(--safe-b)));
    --fstrip-h: 58px;
    --fstrip-b: calc(var(--fdock) + var(--fdock-h) + 6px);
    --ffloat: calc(var(--fstrip-b) + var(--fstrip-h) + var(--fcalls, 0px));
    --fsheet-r: 20px;
  }
  body.focus-phone .topbar { top: calc(8px + var(--safe-t)); left: 8px; right: 8px; }

  /* The sheet: the tasks, a task or a building, the calendar and documents. */
  body.focus-phone .side, body.focus-phone.chatting .side, body.focus-phone .focus {
    left: 0; right: 0; top: var(--ftop); bottom: 0;
    border-width: 1px 0 0; border-radius: var(--fsheet-r) var(--fsheet-r) 0 0;
  }
  body.focus-phone .side .side-body { padding-bottom: calc(var(--ffloat) + 16px); scroll-padding-bottom: calc(var(--ffloat) + 16px); }
  body.focus-phone .focus :is(.f-scroll, .f-detail) { padding-bottom: calc(var(--ffloat) + 16px); }
  /* Under the floating block the sheet fades to its own surface, so the pills, the strip and the
     field read on a quiet ground rather than over half a row of text. */
  body.focus-phone :is(.side, .focus)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--ffloat) + 8px); pointer-events: none; z-index: 2;
    background: linear-gradient(to bottom, rgb(var(--glass-tint) / 0), rgb(var(--glass-tint) / 0.94) 42%, rgb(var(--glass-tint)));
  }
  :root[data-glass='off'] body.focus-phone :is(.side, .focus)::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--card) 0%, transparent), var(--card) 42%); }
  /* At 16 px the field's long placeholder is cut; on a phone it says what it does in three words. */
  body.focus-phone .dock-bar .mfield[data-placeholder^='Ask or search']:empty::before { content: 'Ask or search…'; }

  /* A chat: the same sheet, over the tasks; its composer sits just above the assistant's field. */
  body.focus-phone.chatting .rail {
    left: 0; right: 0; top: var(--ftop); bottom: 0;
    border-width: 1px 0 0; border-radius: var(--fsheet-r) var(--fsheet-r) 0 0;
    padding-bottom: calc(var(--fdock) + var(--fdock-h) + 8px);
  }

  /* The floating block: the field, the strip above it, the call pills above that. */
  body.focus-phone .dock { bottom: var(--fdock); z-index: 34; }
  body.focus-phone .dock-bar { height: var(--fdock-h); border-radius: 16px; }
  body.focus-phone .rail:not(.open) { height: var(--fstrip-h); z-index: 26; }
  body.focus-phone .callstack {
    bottom: calc(var(--fstrip-b) + var(--fstrip-h) + 6px); gap: 6px;
    max-height: calc(100dvh - var(--ftop) - var(--fstrip-b) - var(--fstrip-h) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  /* The results sheet opens upwards from the field and stops under the top bar. */
  body.focus-phone :is(.dock-find, .dock-sheet) { max-height: calc(100dvh - var(--ftop) - var(--fdock) - var(--fdock-h) - 14px); }

  /* A call on a phone is a one-line pill: who, how long, and the one thing to do now (answer a
     ringing call, call back a missed one); the agent's live line and every other action are in
     the whole card, which a tap on the pill unfolds over the tasks (and folds again). */
  body.focus-phone .callstack > :not(.expanded) {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 5px 4px 5px 8px; min-height: 54px; border-radius: 18px; cursor: pointer;
  }
  body.focus-phone .callstack > :not(.expanded) > .cs-top { display: contents; }
  body.focus-phone .callstack > :not(.expanded) > :not(.cs-top, .cs-actions, .cs-ask, .cs-hold) { display: none; }
  body.focus-phone .callstack > :not(.expanded) .cs-who { flex: 1; order: 2; }
  body.focus-phone .callstack > :not(.expanded) :is(.cs-face, .face, .acct-av) { order: 1; }
  body.focus-phone .callstack > :not(.expanded) .cs-wave { order: 3; }
  body.focus-phone .callstack > :not(.expanded) .cs-timer { order: 4; }
  body.focus-phone .callstack > :not(.expanded) .cs-actions { display: none; order: 5; margin: 0; flex-wrap: nowrap; }
  body.focus-phone .callstack > .cs-card.ringing:not(.expanded) .cs-actions,
  body.focus-phone .callstack > .cs-pill.missed:not(.expanded) .cs-actions { display: flex; }
  body.focus-phone .callstack > .cs-card.ringing:not(.expanded) .cs-actions > :not([data-ca='answer']),
  body.focus-phone .callstack > .cs-pill.missed:not(.expanded) .cs-actions > :not([data-ca='callback']) { display: none; }
  body.focus-phone .callstack > :not(.expanded) .cs-end { order: 6; }
  body.focus-phone .callstack > :not(.expanded) .cs-more { order: 7; }
  body.focus-phone .callstack > :not(.expanded) .cs-ask { order: 8; flex-basis: 100%; }
  body.focus-phone .cs-more {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-left: -4px; border: 0; border-radius: 50%;
    background: transparent; color: var(--ink-3); cursor: pointer;
  }
  body.focus-phone .callstack > .expanded .cs-top { flex-wrap: nowrap; }
  body.focus-phone .callstack > .expanded { padding: 10px 12px 12px; }
}

/* Safe areas in the world, under 820 px (the phone's World button, a small window). */
@media (max-width: 819.98px) {
  body:not(.focus-phone) .topbar { top: calc(10px + env(safe-area-inset-top, 0px)); }
  body:not(.focus-mode) :is(.rail, .side) { top: calc(62px + env(safe-area-inset-top, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  body:not(.focus-phone) .dock { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .callscreen { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
}

/* ------------------------------------------------------------------ 3. touch

   On a phone, and on any small screen driven by a finger: every tap target is at least
   44 × 44 px. Where a dense row needs a smaller drawing (Yes / No, the filters), the control is
   drawn at 32 to 40 px and an invisible ::before widens what a finger hits to 44, never into
   its neighbour (neighbours are at least 8 px apart, and nothing wider than 44 is widened
   sideways). Fields are 16 px, the size under which iOS zooms the page on focus. */

@media (max-width: 599.98px), (max-width: 819.98px) and (pointer: coarse), (max-height: 480px) and (pointer: coarse) {
  :is(.qa, .btn, .segmented button, [role='tab'], .sh-back, .sh-link, .ch-back, .cs-end, .cs-more, .dock-mic, .dock-send, .dock-agent,
    .pc-mic, .qm-mic, .cs-mic, .org-btn, .acct-btn, .csn-later, .check, .lv-av, .lv-all, .link, .icon-btn, .r-toggle, .ss-btn) {
    position: relative;
    touch-action: manipulation;
  }
  :is(.qa, .btn, .segmented button, [role='tab'], .sh-back, .sh-link, .ch-back, .cs-end, .cs-more, .dock-mic, .dock-send, .dock-agent,
    .pc-mic, .qm-mic, .cs-mic, .org-btn, .acct-btn, .csn-later, .check, .lv-av, .lv-all, .link, .icon-btn, .r-toggle, .ss-btn)::before {
    content: ''; position: absolute; inset: min(0px, calc(50% - 22px));
  }

  /* Drawn sizes. */
  .qa { min-height: 34px; min-width: 44px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
  .qa.ghosted { min-width: 36px; padding: 0 8px; }
  .todo-row .t-decide, .t-actions, .cs-actions, .cv-actions { gap: 8px !important; }
  .btn { min-height: 36px; padding: 0 12px; border-radius: 8px; }
  .btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; }
  .btn.icon-only { width: 36px; height: 36px; }
  .segmented button { min-height: 32px; min-width: 44px; padding: 0 12px; font-size: 13px; border-radius: 6px; }
  .segmented { gap: 2px; border-radius: 9px; }
  [role='tab'] { min-height: 32px; }
  .sh-back, .ch-back { min-height: 40px; font-size: 14px; padding-right: 10px; }
  .sh-link { min-height: 36px; font-size: 13px; }
  .cs-end { width: 36px; height: 36px; }
  .dock-mic, .dock-send { width: 40px; height: 40px; border-radius: 11px; }
  .pc-mic, .qm-mic { width: 40px; height: 40px; border-radius: 11px; }
  .dock-agent { min-height: 36px; }
  .check { width: 22px; height: 22px; border-radius: 6px; }
  .check.on::after { left: 7px; top: 3px; }
  .csn-later { padding: 12px 18px; font-size: 13px; min-height: 44px; }
  .csn-btn { min-width: 72px; }

  /* The top bar: 44 high, its controls 36 drawn and 44 to a finger. */
  .topbar { height: 44px; }
  .org-btn, .acct-btn, .topbar .btn { min-height: 36px; }
  .topbar .btn.icon-only { width: 36px; height: 36px; }

  /* Fields: 16 px, so iOS does not zoom in on focus. */
  input:not([type='checkbox'], [type='radio'], [type='range']), select, textarea, .mfield, .gh, .ghost-field input,
  .dock-bar input, .cs-whisper input { font-size: 16px !important; }
  select { min-height: 36px; border-radius: 8px; }
  :is(.qm-form, .ch-form) :is(.mfield, .gh) { line-height: 22px; }

  /* Long-press belongs to voice notes and lifting things: no iOS callout, no text selection on
     those targets (and only those, so text elsewhere stays selectable); no double-tap zoom. */
  :is(.r-face, .lv-av, .cs-card, .pf, .p-hit, .pc-mic, .qm-mic, .dock-mic, .cs-mic, .doc-card) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  button:not(.r-face, .lv-av), .todo-row, [role='tab'], select { touch-action: manipulation; }
}

/* What a mouse finds by hovering, a finger sees: a row's reschedule button and the other row
   actions that only came up on hover are always there on a touch screen. */
@media (max-width: 819.98px) and (hover: none), (max-height: 480px) and (hover: none) {
  .todo-row .t-actions, .todo-row.compact .t-actions, .p-row .t-actions { opacity: 1; }
  .todo-row.compact .t-actions .qa.ghosted { color: var(--ink-3); }
}

/* ------------------------------------------------------------------ 4. type on a phone

   The desktop's 11 to 12.5 px type is for a dense pro tool at arm's length; on a phone the same
   rows are read at a hand's length on a third of the width. One scale for the phone screens:
   18 for a screen's title, 15 for a row's title and a message, 13 for its meta, 11 for the small
   capitals over a section. */

@media (max-width: 599.98px) {
  body.focus-phone .sh-row h2, body.focus-phone .side .sh-row h2 { font-size: 18px; }
  body.focus-phone .side-body h2, body.focus-phone .f-detail h2 { font-size: 18px; }
  body.focus-phone .todo-row.compact .t-main strong { font-size: 15px; line-height: 1.32; }
  body.focus-phone .todo-row.compact .t-main small, body.focus-phone .t-main small { font-size: 13px; }
  body.focus-phone .ai-note { font-size: 13px; line-height: 1.4; }
  body.focus-phone .todo-row.compact .t-who .mini-av { width: 17px; height: 17px; font-size: 9.5px; }
  body.focus-phone :is(.side-body h3, .chat h3, .f-scroll h3, .rail h4) { font-size: 11px; }
  body.focus-phone .rail:not(.open) h4 { font-size: 8px; }
  body.focus-phone .todo-row.compact { gap: 12px; padding: 10px 4px; }
  body.focus-phone .todo-row.compact .t-decide { margin-top: 8px; }
  body.focus-phone :is(.cm-b, .msg) { font-size: 15px; line-height: 1.4; }
  body.focus-phone .cm small { font-size: 11px; }
  body.focus-phone .side-body { padding-left: 16px; padding-right: 16px; }
  body.focus-phone .side-head { padding: 12px 12px 10px 16px; }
  body.focus-phone .qm-who b { font-size: 15px; }
  body.focus-phone .qm-who small, body.focus-phone .qm-last { font-size: 13px; }
  body.focus-phone .cs-who b { font-size: 14px; }
  body.focus-phone .cs-who small, body.focus-phone .cs-timer { font-size: 12px; }
  body.focus-phone .cs-line { font-size: 14px; }
}
@media (max-width: 599.98px) {
  body.focus-phone .rail:not(.open) .lv-av { width: 44px; height: 44px; }
  body.focus-phone .rail:not(.open) .lv-avs { gap: 4px; }
}

/* ------------------------------------------------------------------ 5. screens on a phone */

@media (max-width: 599.98px) {
  /* The top bar: the clock's and history's groups were left behind as two empty rings once
     their buttons were hidden. */
  body.focus-phone .topbar :is(.clock-group, .undo-seg) { display: none; }
  body.focus-phone .topbar .bar-group { gap: 6px; padding: 3px 4px; border-radius: 12px; }

  /* Sheets that slide over the tasks (a chat, the calendar and documents) carry a grabber:
     a swipe down from their header closes them (focus.js), as back and Escape do. */
  body.focus-phone.chatting .rail { padding-top: 16px; }
  body.focus-phone.chatting .rail::before, body.focus-phone .focus::before {
    content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 18%, transparent); pointer-events: none; z-index: 3;
  }
  body.focus-phone .focus { padding-top: 10px; }

  /* The calendar and documents sheet: its header is the way back and the two tabs, sharing the
     row; the toolbar's filters each take a full row's width; a chosen item replaces the list
     (its × is the way back), as a task replaces the tasks. */
  body.focus-phone .f-head { padding: 6px 12px 10px; gap: 8px; }
  body.focus-phone .f-head > .muted { display: none; }
  body.focus-phone .f-head .f-back { flex: none; margin-left: -4px; padding: 0 8px; }
  body.focus-phone .f-head .f-back span { display: none; }
  body.focus-phone .f-tabs { flex: 1; min-width: 0; }
  body.focus-phone .f-tabs [role='tab'] { flex: 1; justify-content: center; padding: 0 8px; font-size: 14px; }
  body.focus-phone .f-toolbar { padding: 10px 12px; gap: 8px; }
  body.focus-phone .f-toolbar .segmented { flex: 1 1 100%; }
  body.focus-phone .f-toolbar .segmented button { flex: 1; justify-content: center; padding: 0 6px; }
  body.focus-phone .f-toolbar .sel-field { flex: 1 1 40%; min-width: 0; }
  body.focus-phone .f-toolbar select { width: 100%; }
  body.focus-phone .f-toolbar .menu-wrap { margin-left: 0; }
  body.focus-phone .f-scroll { padding: 8px 16px; }
  body.focus-phone .focus :is(.f-split, .f-split.with-detail, .f-docs, .f-docs.with-detail) { grid-template-columns: minmax(0, 1fr); }
  body.focus-phone .focus .f-split.with-detail > .f-scroll { display: none; }
  body.focus-phone .focus .f-detail { border-left: 0; padding: 14px 16px; }
  body.focus-phone .focus .f-detail .icon-btn { width: 36px; height: 36px; font-size: 20px; border-radius: 10px; }
  /* Documents: the folders become one sideways row of chips above the grid. */
  body.focus-phone .focus .f-docs { grid-template-rows: auto minmax(0, 1fr); }
  body.focus-phone .focus .f-docs.with-detail > :not(.f-detail) { display: none; }
  body.focus-phone .focus .folders { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--elev-line); padding: 8px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 6px; overscroll-behavior-x: contain; }
  body.focus-phone .focus .folders::-webkit-scrollbar { display: none; }
  body.focus-phone .focus .folders h4 { display: none; }
  body.focus-phone .focus .folder { flex: none; min-height: 36px; border: 1px solid var(--elev-line); border-radius: 18px; padding: 0 12px; }
  body.focus-phone .focus .folder span { flex: none; }
  body.focus-phone .focus .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* The week: the head wraps instead of pushing the page sideways; the legend goes under it. */
  body.focus-phone .cal-head { flex-wrap: wrap; row-gap: 8px; }
  body.focus-phone .cal-head strong { margin-left: 4px; white-space: nowrap; }
  body.focus-phone .cal-head .btn { white-space: nowrap; }
  body.focus-phone .cal-legend { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; gap: 6px 14px; }
  body.focus-phone :is(.cal-days, .cal-body) { grid-template-columns: 38px repeat(7, minmax(0, 1fr)); }
  body.focus-phone .cal-days span { padding: 6px 2px; text-align: center; font-size: 10px; }
  body.focus-phone .cal-days span b { display: block; margin: 2px 0 0; font-size: 12px; }
  body.focus-phone .cal-hours span { right: 4px; }
  body.focus-phone .cal-block { left: 1px; right: 1px; padding: 2px 3px; font-size: 10px; }

  /* Empty states: a strip with nobody in it yet says who will be there (the rail's own sentence),
     rather than floating as a blank pill; an empty list reads at the phone's type size. */
  body.focus-phone .rail:not(.open) .r-scroll:has(> .r-empty:only-child) { flex: 1; }
  body.focus-phone .rail:not(.open) .r-empty:empty::before { content: 'Your team, customers and agents appear here.'; }
  body.focus-phone .rail:not(.open) .r-empty { padding: 0 12px; font-size: 13px; }
  body.focus-phone .sd-empty { font-size: 14px; }
  /* One scroll per screen, and it does not hand its overscroll to the page. */
  body.focus-phone :is(.side-body, .f-scroll, .f-detail, .ch-log) { overscroll-behavior-y: contain; }

  /* A task or a building opened in the sheet: one back affordance, as wide as a finger. */
  body.focus-phone .side .sd-person { min-height: 44px; }

  /* The incoming call: a little more room around the three actions on a small phone. */
  body.focus-phone .csn-actions { gap: 20px; }
  .csn-btn:focus-visible { outline-offset: 4px; border-radius: 16px; }
  /* Toasts come down under the top bar, not over it. */
  body.focus-phone .toast { top: calc(var(--ftop) + 8px); max-width: calc(100vw - 32px); }
}

/* A phone on its side (844 × 390 and the like) is wider than 820, so it gets the desktop's
   two-column Focus and the world; only the vertical margins shrink, so the columns are not cut
   to a strip. A desktop window is never this short and coarse. */
@media (max-height: 480px) and (pointer: coarse) {
  body.focus-mode { --ftop: calc(52px + env(safe-area-inset-top, 0px)); --fbot: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .topbar { top: calc(6px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); }
  .dock { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  body.focus-phone :is(.rail, .focus) { transition: none !important; }
}

/* ------------------------------------------------------------------ 6. contrast

   The quiet grey for meta text (#7b8594) is 3.5:1 on the glass at its lightest, under the 4.5:1
   that text of 11 to 13 px needs; on a small screen, read in daylight, it is a step darker in the
   light themes (4.6:1 and up) and a step lighter at night. */
@media (max-width: 819.98px) {
  :root:not([data-theme='night']) { --ink-3: #646e7e; }
  :root[data-theme='sand'] { --ink-3: #6d6863; }
  :root[data-theme='night'] { --ink-3: #8f9bb0; }
}

/* ------------------------------------------------------------------ 7. phone follow-ups (decided by Bruno)

   7.1 The calendar on a phone is an agenda (focus.js `lensAgenda`): the chosen day's week as a
   strip of days (today marked, a dot under each day that has something, ‹ › and a sideways swipe
   move a day), the day's items as ordinary rows, and the next seven days under Upcoming. The week
   grid stays from 600 px up. */
@media (max-width: 599.98px) {
  .ag-head { display: flex; align-items: center; gap: 8px; padding: 6px 0 8px; }
  .ag-head strong { flex: 1; font-size: 15px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ag-head .btn { min-width: 44px; min-height: 40px; justify-content: center; }
  .ag-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 0 10px; border-bottom: 1px solid var(--elev-line, var(--line)); touch-action: pan-y; }
  .ag-day { display: grid; justify-items: center; gap: 1px; min-height: 56px; padding: 6px 0 4px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink-2); cursor: pointer; touch-action: manipulation; }
  .ag-day small { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
  .ag-day b { font-size: 17px; font-weight: 600; }
  .ag-day i { width: 5px; height: 5px; border-radius: 50%; }
  .ag-day i.dot { background: var(--accent); }
  .ag-day.today b { color: var(--accent-ink); }
  .ag-day.today small { color: var(--accent-ink); font-weight: 600; }
  .ag-day[aria-pressed='true'] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--ink); }
  .ag-list { touch-action: pan-y; }
  .ag-none { padding: 14px 4px; font-size: 14px; }
  .ag-up { margin: 18px 0 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
}

/* 7.3 A chat on a phone: the assistant's field and the strip of faces step aside, and the chat's
   own composer is the one field (mentions, the suggestion, the mic, and its light glyph that asks
   about this conversation in a small sheet over it). Closing the chat brings them back. */
.ch-ai, .ch-asks { display: none; }
@media (max-width: 599.98px) {
  body.focus-phone.chatting .dock, body.focus-phone.chatting .callstack { display: none !important; }
  body.focus-phone.chatting .rail { padding-bottom: calc(max(var(--kb, 0px), var(--safe-b)) + 8px); }
  body.focus-phone .ch-ai { display: grid; place-items: center; width: 40px; height: 40px; margin: -2px 0 -2px -6px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; position: relative; touch-action: manipulation; }
  body.focus-phone .ch-ai::after { content: ''; position: absolute; inset: -2px; }
  /* Keyboard hints mean nothing to a finger; the glyph button says what the light does. */
  body.focus-phone .ch-tools .ch-foot { display: none; }
  body.focus-phone .ch-tools { justify-content: flex-start; }
  body.focus-phone .ch-tools .pc-mic { margin-left: auto; }
  body.focus-phone .ch-ai[aria-expanded='true'] { background: var(--accent-soft); }
  body.focus-phone .ch-compose { position: relative; }
  body.focus-phone .ch-asks:not([hidden]) {
    display: grid; gap: 2px; position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); z-index: 5; padding: 8px; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--elev-1); max-height: 60dvh; overflow-y: auto;
  }
  body.focus-phone .ch-asks .cha-h { display: flex; align-items: center; gap: 6px; padding: 2px 4px 6px 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
  body.focus-phone .ch-asks .cha-h .icon-btn { margin-left: auto; width: 40px; height: 40px; }
  body.focus-phone .ch-asks .cha-answer { margin: 0 4px 6px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 15px; line-height: 1.4; }
  body.focus-phone .ch-asks [role='menuitem'] { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; touch-action: manipulation; }
  body.focus-phone .ch-asks [role='menuitem']:active, body.focus-phone .ch-asks [role='menuitem']:focus-visible { background: var(--card-2); }
  body.focus-phone .ch-asks [role='menuitem'] span { display: grid; gap: 1px; }
  body.focus-phone .ch-asks [role='menuitem'] b { font-size: 15px; font-weight: 600; }
  body.focus-phone .ch-asks [role='menuitem'] small { font-size: 13px; color: var(--ink-3); }
}

/* 7.5 A phone on its side, in Focus: the call cards no longer cover the top of Conversations. They
   are one-line pills in the floating block, just above the field (who, the timer, and the one thing
   to do now), a tap unfolds the whole card upwards as a sheet and folds it again, and both columns
   leave the pills' height free at their end, so every row can still scroll clear of them. */
@media (max-height: 480px) and (pointer: coarse) {
  /* Over the foot of the Tasks column, side by side while they fit: Conversations is never under
     them. Unfolded, a card grows upwards over Tasks as a sheet. */
  body.focus-mode .callstack {
    top: auto; left: calc(var(--fl) + var(--fconv) + 24px); right: calc(var(--fl) + 8px); width: auto; transform: none;
    bottom: calc(var(--fbot) + 8px); max-height: calc(100dvh - var(--ftop) - var(--fbot) - 16px);
    flex-direction: row; flex-wrap: wrap-reverse; align-items: flex-end; gap: 6px; padding: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  body.focus-mode .callstack > * { flex: 1 1 280px; min-width: 0; }
  body.focus-mode .callstack > .expanded { flex-basis: 100%; }
  body.focus-mode.chatting .callstack { top: auto; }
  body.focus-mode .side .side-body { padding-bottom: calc(var(--fcalls, 0px) + 12px); scroll-padding-bottom: calc(var(--fcalls, 0px) + 12px); }
  /* The top bar's World / Sky / Map switch would say World twice next to Focus's World button. */
  body.focus-mode.phone-side .topbar .views { display: none; }
  body.focus-mode .callstack > :not(.expanded) {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 4px 4px 4px 8px; min-height: 50px; border-radius: 18px; cursor: pointer;
  }
  body.focus-mode .callstack > :not(.expanded) > .cs-top { display: contents; }
  body.focus-mode .callstack > :not(.expanded) > :not(.cs-top, .cs-actions, .cs-ask, .cs-hold) { display: none; }
  body.focus-mode .callstack > :not(.expanded) .cs-who { flex: 1; order: 2; }
  body.focus-mode .callstack > :not(.expanded) :is(.cs-face, .face, .acct-av) { order: 1; }
  body.focus-mode .callstack > :not(.expanded) .cs-wave { order: 3; }
  body.focus-mode .callstack > :not(.expanded) .cs-timer { order: 4; }
  body.focus-mode .callstack > :not(.expanded) .cs-actions { display: none; order: 5; margin: 0; flex-wrap: nowrap; }
  body.focus-mode .callstack > .cs-card.ringing:not(.expanded) .cs-actions,
  body.focus-mode .callstack > .cs-pill.missed:not(.expanded) .cs-actions { display: flex; }
  body.focus-mode .callstack > .cs-card.ringing:not(.expanded) .cs-actions > :not([data-ca='answer']),
  body.focus-mode .callstack > .cs-pill.missed:not(.expanded) .cs-actions > :not([data-ca='callback']) { display: none; }
  body.focus-mode .callstack > :not(.expanded) .cs-end { order: 6; }
  body.focus-mode .callstack > :not(.expanded) .cs-more { order: 7; }
  body.focus-mode .callstack > :not(.expanded) .cs-ask { order: 8; flex-basis: 100%; }
  body.focus-mode .cs-more {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: -4px; border: 0; border-radius: 50%;
    background: transparent; color: var(--ink-3); cursor: pointer;
  }
  body.focus-mode .callstack > .expanded { padding: 10px 12px 12px; }
}