:root { --bg: #ffffff; --fg: #1b1f24; --muted: #5d6670; --card: #f4f6f8; --line: #d8dee4; --accent: #0b6bcb; --ok: #1a7f37; --warn: #9a6700; --bad: #cf222e; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1216; --fg: #e6edf3; --muted: #9aa5b1; --card: #171b21; --line: #2d333b; --accent: #4c9eff; --ok: #3fb950; --warn: #d29922; --bad: #f85149; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
/* The bar's contents line up with main's centred 1200 px column (main has 16 px padding). */
.topbar { position: sticky; top: 0; z-index: 2; padding: 8px max(16px, calc((100% - 1200px) / 2 + 16px)); border-bottom: 1px solid var(--line); background: var(--bg); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--fg); }
/* The KO tile is the launcher icon's cobalt (KOEcoSystemBranding, board H); the rest of the UI keeps its accent. */
.ko-tile { width: 26px; height: 26px; border-radius: 7px; background: #1D5FBF; color: #F2F3F7; font-size: .7rem; font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; }
main { padding: 16px; max-width: 1200px; margin: 0 auto; }
.loading { padding: 16px; color: var(--muted); }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 16px; background: var(--bad); color: #fff; }
#blazor-error-ui .reload { color: #fff; }

h1 { font-size: 1.4rem; margin: 0 0 12px; }
h2 { font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.muted, .empty { color: var(--muted); }
button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.link { background: none; border: none; color: var(--accent); padding: 8px 4px; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, textarea { font: inherit; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
label { display: block; margin: 12px 0 4px; }
.error { color: var(--bad); }
.notice { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; margin-bottom: 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }

/* align-items: start — a folded card keeps its own height next to an open one. */
.machines { display: grid; gap: 16px; align-items: start; }
.machine-card { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); min-width: 0; }
.machine-card header { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin-bottom: 2px; }
.machine-card h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
/* The badge stays one line; when the name and badge do not fit side by side the badge moves under the name. */
.machine-card .toggle { all: unset; cursor: pointer; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.machine-card .toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.machine-card header .new-session { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.machine-card header .new-session:disabled { background: var(--line); border-color: var(--line); color: var(--muted); opacity: 1; }
.machine-card .pc-line { margin: 0 0 6px 1.5em; font-size: .85rem; overflow-wrap: anywhere; }
.machine-card .pc-line .waiting { color: var(--warn); font-weight: 600; }
.machine-card .caret { color: var(--muted); width: 1em; flex: 0 0 auto; text-align: center; }
.machine-card .summary { margin: 0 0 0 1.5em; font-size: .9rem; }
.session-search { margin-bottom: 12px; }
.session-search input { width: 100%; }
.status-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.status-chip { font-size: .8rem; padding: 4px 12px; border-radius: 999px; background: var(--bg); min-height: 32px; }
.status-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.status-chips .clear { padding: 4px 8px; }
.no-match { margin: 4px 0 0; }
.pc-settings { color: var(--muted); text-decoration: none; font-size: 1.25rem; line-height: 1; padding: 4px 8px; }
.pc-settings:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.pc-settings-page .pc-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.settings-actions { display: grid; gap: 4px; max-width: 32rem; margin-top: 16px; }
.settings-actions button { justify-self: start; min-height: 44px; }
.settings-actions .hint { margin: 0 0 12px; font-size: .9rem; }
.settings-actions label { margin: 0 0 4px; }
.rename-row { display: flex; gap: 8px; }
.rename-row input { flex: 1 1 auto; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.devices-link { padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.devices-link:hover { text-decoration: underline; }
.devices-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: .85rem; white-space: nowrap; color: var(--muted); }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge-online { color: var(--ok); }
.badge-vscodeclosed, .badge-notsupported { color: var(--warn); }
.badge-pcoffline, .badge-removed { color: var(--bad); }
/* FocusOnNavigate moves focus to the page h1 for screen readers; it is not an interactive control, so no ring. */
h1:focus { outline: none; }
.sessions { list-style: none; margin: 0; padding: 0; }
.session { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 6px; border-top: 1px solid var(--line); color: var(--fg); text-decoration: none; min-width: 0; }
.session .title { overflow-wrap: anywhere; }
.session .when { grid-column: 1; font-size: .8rem; color: var(--muted); }
.session[aria-disabled="true"] { opacity: .5; }
a.session:hover { background: var(--bg); }
.session.fork { padding-left: 24px; }
.sessions > li { position: relative; }
.sessions > li > .session { padding-right: 36px; }
.favourites { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); margin-bottom: 16px; min-width: 0; }
.favourites h2 { margin-bottom: 8px; }
.group { padding: 8px 6px 4px; font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.row-menu { position: absolute; top: 4px; right: 2px; background: none; border: 0; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 4px 8px; cursor: pointer; }
.menu { position: absolute; top: 30px; right: 4px; z-index: 5; display: flex; flex-direction: column; min-width: 130px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.menu-backdrop { position: fixed; inset: 0; z-index: 4; background: transparent; }
.menu button { background: none; border: 0; color: var(--fg); text-align: left; padding: 8px 12px; cursor: pointer; }
.menu button:hover { background: var(--line); }
.chip { grid-row: 1; grid-column: 2; align-self: start; white-space: nowrap; font-size: .75rem; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.chip-running { color: var(--accent); border-color: var(--accent); }
.chip-waiting { color: var(--warn); border-color: var(--warn); }
.chip-error { color: var(--bad); border-color: var(--bad); }
a.session[aria-current="page"] { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
/* Wide windows only (the phone keeps whole titles): long titles stop at three lines, the full one is the tooltip.
   Cards are wide enough for a PC name next to the badge, +, and ⚙. */
@media (min-width: 900px) {
  .machines { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
  .session .title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Mouse pointers only, so a tap on a phone never leaves a control looking hovered. */
@media (hover: hover) {
  button:not(:disabled):hover { background: var(--line); }
  button.primary:not(:disabled):hover { background: var(--accent); filter: brightness(1.1); }
  button.link:not(:disabled):hover, .row-menu:hover { background: none; text-decoration: underline; color: var(--fg); }
  .row-menu:hover { text-decoration: none; }
  .status-chip:not(:disabled):hover { border-color: var(--accent); background: var(--bg); }
  .status-chip[aria-pressed="true"]:hover { background: var(--accent); filter: brightness(1.1); }
  .pc-settings:hover { color: var(--fg); }
  .machine-card .toggle:hover h2 { color: var(--accent); }
}

.split { display: block; }
.side { display: none; }
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; align-items: start; }
  .side { display: block; position: sticky; top: 60px; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow: auto; }
  .side .machines { grid-template-columns: 1fr; }
}
/* The session page is a column (header, chat, waiting card, composer) at least as tall as the window. Responsive rules only
   (owner, 2026-11-10): every part keeps its natural height and nothing is pinned over another; the chat takes the room
   left over, down to a floor; when the column does not fit, the page grows and scrolls (no part hides in a clipped box). */
.session-pane { display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
.session-pane > * { flex: 0 0 auto; }
/* A wide window gives the session page all of it: no centred column, and both columns run the full height (this page
   has no brand bar, so only main's 16 px padding is taken). The chat keeps readable lines through .msg's max width. */
@media (min-width: 900px) {
  main:has(> .split) { max-width: none; }
  .split { grid-template-columns: minmax(320px, 400px) 1fr; }
  .split > .side { top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .split > .session-pane { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
}
@media (min-width: 1400px) {
  .split .msg { max-width: min(60rem, 92%); }
}
.session-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.session-head .title-row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap; }
.session-head .pc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* VS Code titles a session with its first prompt, which can run to paragraphs: two lines, then an ellipsis. */
.session-head h1 { margin: 0; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A phone keeps the header short (with a long title it took a third of the screen): one title line. The PC line still
   wraps, so the status, the PC and the build commits stay readable (a sideways-scrolling row clipped them on the phone). */
@media (max-width: 899px) {
  .session-head h1 { -webkit-line-clamp: 1; font-size: 1.2rem; overflow-wrap: normal; word-break: break-all; }
  .session-head .pc-row { font-size: .9rem; }
}
/* The chat scrolls inside .chat-wrap, which also holds the scroll rail (storage.js scrollRail) at its right edge. */
/* The chat takes what the other parts leave (basis 0), never less than 12rem; it is the one part that scrolls inside. */
.session-pane > .chat-wrap { position: relative; flex: 1 1 0; min-height: 12rem; display: flex; flex-direction: column; }
.chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chat.has-rail { padding-right: 40px; }
.scroll-rail { position: absolute; top: 8px; bottom: 8px; right: 2px; width: 32px; touch-action: none; cursor: pointer; }
.scroll-rail[hidden] { display: none; }
.scroll-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--line); }
.scroll-thumb { position: relative; width: 32px; height: 44px; border-radius: 16px; background: var(--card); border: 2px solid var(--accent); box-shadow: 0 1px 4px #0003; cursor: grab; }
.scroll-thumb::before { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 8px; margin-top: -4px; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.scroll-rail.dragging .scroll-thumb { background: var(--accent); cursor: grabbing; }
.scroll-rail.dragging .scroll-thumb::before { border-color: #fff; }
.to-bottom { position: absolute; right: 44px; bottom: 12px; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--card); color: var(--accent); font-size: 1.2rem; line-height: 1; box-shadow: 0 1px 4px #0003; }
.to-bottom[hidden] { display: none; }
.msg { max-width: min(46rem, 92%); padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.msg .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .when { display: block; margin-top: 2px; font-size: .7rem; line-height: 1.2; opacity: .7; text-align: right; }
.msg .when.approx { opacity: .5; font-style: italic; }
/* Read-aloud: a small speaker on an assistant reply; it turns into the stop state while that reply is read. */
.msg .read-aloud { margin-top: 4px; padding: 2px 6px; font-size: .8rem; line-height: 1.2; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); cursor: pointer; }
.msg .read-aloud:hover { color: var(--fg); border-color: var(--accent); }
.msg .read-aloud.speaking { color: var(--accent); border-color: var(--accent); }
.msg-user { align-self: flex-end; background: var(--accent); border-color: var(--accent); color: #fff; }
.msg-assistant, .msg-tool { align-self: flex-start; }
.msg-tool { font-size: .85rem; color: var(--muted); }
.step-label { font-weight: 600; }
.step-input { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, monospace; margin: 4px 0; }
.msg-tool.step-failed, .msg-tool.step-error { color: var(--bad); }
.step-thinking .text { opacity: .8; }
.msg-tool.step-skipped { color: var(--muted); }
/* Rendered markdown (assistant replies, a plan review's plan): compact, wide content scrolls inside the bubble. */
.md { white-space: normal; min-width: 0; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin: 0 0 .6em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: .8em 0 .4em; line-height: 1.25; }
.md h1 { font-size: 1.15rem; }
.md h2 { font-size: 1.08rem; }
.md h3, .md h4, .md h5, .md h6 { font-size: 1rem; }
.md ul, .md ol { padding-left: 1.4em; }
.md li > p { margin: 0; }
.md blockquote { padding: 0 0 0 .8em; border-left: 3px solid var(--line); color: var(--muted); }
.md code { font-family: ui-monospace, Consolas, monospace; font-size: .88em; padding: .1em .3em; border-radius: 4px; background: #8882; overflow-wrap: anywhere; }
.md pre { padding: 8px; overflow-x: auto; border-radius: 6px; background: #8881; border: 1px solid var(--line); }
.md pre code { padding: 0; background: none; white-space: pre; overflow-wrap: normal; }
.md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.md th, .md td { padding: 4px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.md th { background: #8881; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: .8em 0; }
.md a { overflow-wrap: anywhere; }
.working { align-self: flex-start; margin: 0; color: var(--muted); }
.working .dots { animation: working-pulse 1.4s ease-in-out infinite; }
@keyframes working-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .working .dots { animation: none; } }
/* A waiting card (approval, question, plan review): a one-line header that collapses it, then its body and its answers at
   their natural height. It never shrinks and never scrolls inside: when it does not fit, the page scrolls (owner,
   2026-11-10; a capped card hid its own answers in a clipped box on a phone). Every control is at least 44 px tall. */
.approval-card, .question-card { flex: 0 0 auto; margin: 8px 0; padding: 4px 12px 12px; border: 1px solid var(--line); border-radius: 8px; }
.approval-card button, .question-card button, .composer button { min-height: 44px; }
.approval-card.collapsed { padding-bottom: 4px; }
.approval-card h2 { margin: 0; font-size: 1rem; }
.approval-card.collapsed .question-toggle .chevron { transform: rotate(45deg); }
.approval-card p { margin: 4px 0; }
.approval-command { margin: 8px 0; padding: 8px; max-height: 12em; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: #8881; border-radius: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 0.85rem; }
.question-card.collapsed { padding-bottom: 4px; }
.question-card h2 { margin: 0; font-size: 1rem; }
/* The header: one line that names the question and collapses the card (a 44px touch target). */
.question-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.question-topic { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.question-toggle .chevron { flex: 0 0 auto; width: 8px; height: 8px; margin: 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); transition: transform .15s; }
.question-card.collapsed .question-toggle .chevron { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .question-toggle .chevron { transition: none; } }
.question-body > p:first-child { margin-top: 0; }
.question-card details.plan { margin: 4px 0 8px; border: 1px solid var(--line); border-radius: 6px; }
.question-card details.plan > summary { min-height: 44px; display: flex; align-items: center; padding: 0 10px; cursor: pointer; color: var(--accent); }
.question-card details.plan > .md { padding: 0 10px 10px; }
/* Queued messages (sent while a turn runs): the user's, but muted until their turn starts. */
.msg.queued { background: transparent; border-style: dashed; border-color: var(--accent); color: var(--fg); }
.msg.queued > .text, .msg.queued > .queued-label { opacity: .75; }
.msg.queued .pending-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.msg.queued .pending-actions button { min-height: 44px; min-width: 44px; }
.msg.queued .queued-label { font-size: .75rem; color: var(--muted); margin-bottom: 2px; }
.composer .send-hint { margin: 4px 0 0; font-size: .85rem; }
.composer .editing-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.composer .editing-line .send-hint { margin: 0; flex: 1 1 12rem; }
.composer .editing-line .edit-stop { min-height: 44px; flex: 0 0 auto; }
/* Dictation: a microphone beside the message box; it shows the listening state while it hears, and a tap stops it. */
.composer .mic { margin-top: 6px; padding: 4px 10px; font-size: 1rem; line-height: 1.2; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); cursor: pointer; }
.composer .mic:hover:not(:disabled) { color: var(--fg); border-color: var(--accent); }
.composer .mic[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.question-card fieldset.question { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.question-card legend { padding: 0; margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
/* Each choice: the radio/checkbox, then its label (and description under the label). Overrides the global block label and full-width input. */
.question-card .choice { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; margin: 0; padding: 6px 0; min-height: 44px; cursor: pointer; }
.question-card .choice input[type=radio], .question-card .choice input[type=checkbox] { width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--accent); }
.question-card .choice-desc { grid-column: 2; font-size: .85rem; }
.question-card input[type=text], .question-card input[type=number], .question-card textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; min-height: 44px; }
.approval-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* A phone shows the direct answers (Allow Once, Skip, even when VS Code groups Skip) and "More…" for the rules (in this session, always); a wide screen all. */
@media (max-width: 899px) {
  .approval-options .rule { display: none; }
  .approval-options.more-open .rule { display: inline-block; }
}
@media (min-width: 900px) {
  .approval-options .more { display: none; }
}
.loading-session { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px; font-size: 1.05rem; color: var(--fg); background: var(--card); border-bottom: 1px solid var(--line); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--line); } }
/* Back to the PC list: a pill with a chevron, the KO tile and "PCs"; 40 px tall for a thumb. */
.back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px 4px 8px; border: 1px solid transparent; border-radius: 999px; background: var(--card); color: var(--fg); font-weight: 600; line-height: 1; white-space: nowrap; }
.back .chevron { color: var(--accent); }
.back .ko-tile { width: 22px; height: 22px; border-radius: 6px; font-size: .6rem; }
.back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .back:not(:disabled):hover { background: var(--card); border-color: var(--accent); color: var(--accent); }
}
.machine-details { font-size: .85rem; }
.machine-card .machine-details { margin: -4px 0 8px; }
.load-older, .beginning { align-self: center; }
.composer { padding-top: 8px; }
/* The message box keeps three lines however the page is laid out (its padding 2 × 8 px and border 2 × 1 px on top). */
.composer textarea { min-height: calc(3 * 1.45em + 18px); }
.composer .actions, .dialog .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.info { color: var(--ok); }
/* Dialogs sit near the top: on a phone the keyboard covers the lower half, and the app's view does not always shrink for it. */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: max(16px, 6vh) 16px 16px; background: rgba(0, 0, 0, .45); overflow: hidden; }
@media (prefers-color-scheme: dark) { .modal-backdrop { background: rgba(0, 0, 0, .7); } }
.dialog { width: 100%; max-width: 32rem; max-height: calc(100vh - max(16px, 6vh) - 16px); max-height: calc(100dvh - max(16px, 6vh) - 16px); overflow-y: auto; overflow-x: hidden; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--fg); }
.dialog h2 { margin-top: 0; }
.confirm-text { margin: 0 0 8px; overflow-wrap: anywhere; }
.dialog textarea, .dialog input { max-width: 100%; }
/* Touch targets (spec 2026-11-09 A): every control of the New session / Fork session window is at least 44px tall. */
.dialog input, .dialog select, .dialog button { min-height: 44px; box-sizing: border-box; }

.session-meta { flex-basis: 100%; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.stale { flex-basis: 100%; font-size: .85rem; color: var(--warn); }
.badge-connecting { color: var(--muted); }
.picker { position: relative; min-width: 0; }
.picker label { display: block; margin-bottom: 4px; }
.picker-list { position: absolute; z-index: 5; left: 0; right: 0; max-height: 16rem; overflow-y: auto; margin: 4px 0 0; padding: 4px 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); }
/* Inside the scrolling dialog an overlaid list is clipped by the dialog's edge (two rows visible on a phone);
   in the flow the dialog grows with the list and scrolls as a whole. */
.dialog .picker-list { position: static; }
/* The composer's Model box sits at the bottom of the session pane and the keyboard opens on focus: open upward. */
.composer .picker-list { top: auto; bottom: 100%; margin: 0 0 4px; max-height: min(16rem, 50dvh); }
/* The session's agent options above the composer: compact, side by side, wrapping on a phone; lists open upward too. */
.options-row, .model-options { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.options-row .picker, .model-options .picker { flex: 1 1 12rem; }
.options-row .picker-list { top: auto; bottom: 100%; margin: 0 0 4px; max-height: min(16rem, 50dvh); }
/* The composer's settings: one line (model · options) and a gear above the message box; the panel opens in place, not as a
   modal, so the keyboard and the chat keep working. Open, it scrolls on its own and its lists sit in the flow (an overlaid
   list would be clipped by the scrolling panel). */
.settings-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.settings-summary { flex: 1 1 auto; min-width: 0; padding: 6px 4px; background: none; border: 0; color: var(--muted); font-size: .9rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-toggle { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 4px 10px; background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; }
.settings-toggle[aria-expanded="true"] { color: var(--accent); }
.settings-summary:focus-visible, .settings-toggle:focus-visible, .options-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-panel.open { max-height: min(18rem, 35svh); overflow-y: auto; overflow-x: hidden; padding: 4px 2px 8px; border-bottom: 1px solid var(--line); }
.settings-panel .picker-list, .settings-panel .options-row .picker-list { position: static; margin: 4px 0 0; max-height: min(12rem, 28svh); }
.composer > p { margin: 4px 0; }
/* The New session dialog's Options section: a one-line header (summary · chevron), collapsed by default. */
.options-section { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; }
.options-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; text-align: left; background: none; border: 0; }
.options-summary { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.options-toggle .chevron { flex: 0 0 auto; color: var(--muted); }
.options-body:not(:empty) { display: grid; gap: 8px; padding: 0 12px 12px; }
.options-body .no-options { margin: 0; }
.picker-group { padding: 6px 10px 2px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.picker-option { padding: 8px 10px; cursor: pointer; overflow-wrap: anywhere; }
.picker-option.active, .picker-option:hover { background: var(--bg); outline: 1px solid var(--accent); outline-offset: -1px; }
.picker-option.disabled { cursor: not-allowed; opacity: 0.6; }
.picker-option.disabled:hover { outline: none; background: none; }
.picker-hint { display: block; font-size: 0.85em; color: var(--muted, inherit); }
.picker-empty { padding: 8px 10px; }
.picker-error { margin-top: 4px; font-size: .85rem; color: var(--bad); }
.picker input[aria-invalid="true"] { border-color: var(--bad); }
.session-head .head-menu { position: relative; display: inline-block; min-width: 2rem; min-height: 1.6rem; }
.session-head .head-menu .row-menu { top: 0; right: 0; }
.session-head .head-menu .menu { top: 28px; right: 0; }
.fork-of { font-size: .85rem; }
/* A fork started here, before the PC has made or listed it: its prompt and "starting…" (AB#364). */
.fork-starting .starting, .fork-starting .error, .fork-starting .info { margin: 8px 2px; }
.modal-backdrop .fork-folder { margin: 4px 0 8px; overflow-wrap: anywhere; }
.qr { margin: 1rem auto; max-width: 20rem; text-align: center; }
.qr svg { display: block; width: 100%; height: auto; background: #fff; border-radius: .5rem; }
.qr figcaption { margin-top: .5rem; font-size: .9rem; }
.setup-screen { display: grid; gap: 12px; margin-bottom: 16px; }
.setup-screen h1, .setup-screen p { margin: 0; }
.setup-screen.done { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.setup-screen > button, .scan-flow > button { justify-self: start; min-height: 44px; }
.scan-flow { display: grid; gap: 12px; }
.scan-result { display: grid; gap: 8px; }
.scan-result p { margin: 0; overflow-wrap: anywhere; }
.scan-result .next { font-weight: 600; }
.scan-result .hint, .setup-screen .join-hint { color: var(--muted); font-size: .9rem; }
.devices { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; max-width: 40rem; }
.device { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.device-info { display: grid; gap: 2px; min-width: 0; }
.device .name { font-weight: 600; overflow-wrap: anywhere; }
.device .role, .device .fingerprint, .device .state { color: var(--muted); font-size: .9rem; }
.device .fingerprint { font-family: ui-monospace, Consolas, monospace; }
.device-actions, .device .rename-row { display: flex; gap: 8px; align-items: center; }
.device .rename-row { flex: 1 1 100%; }
.device button { min-height: 44px; }
.relay-qr { display: grid; gap: 12px; margin-top: 12px; }
.relay-qr > button, .reset-phone-row > button { justify-self: start; min-height: 44px; }
.relay-qr .hint { margin: 0; color: var(--muted); font-size: .9rem; }
.reset-phone-row { display: grid; gap: 8px; margin-top: 24px; }
button.reset-phone { min-height: 44px; margin-bottom: 12px; }

/* A logged-in browser: "Until 14:32 · Log out" on the brand bar's right (the phone's bar keeps the brand alone). */
.topbar-login { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-until { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.login-until button.log-out { min-height: 44px; }
/* The browser's login page: one centred column at every width; the QR is 240 px (class sizes only: strict CSP). */
.login { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 360px; margin: 24px auto 0; text-align: center; }
.login h1, .login p { margin: 0; }
.login .brand { font-size: 1.1rem; }
.login-notice { width: 100%; padding: 10px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.login .qr { margin: 0; max-width: none; }
.login .qr svg { width: 240px; height: 240px; }
.login .fingerprint { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.login .hint, .login .countdown { color: var(--muted); font-size: .9rem; }
.login > button { min-height: 44px; }
.qr-blurred { filter: blur(6px); }
/* Which agent in VS Code owns the session (Copilot, Claude, Codex): on the row's time line and beside the status on the session page. */
.session .provider { font-weight: 600; }
.session-head .provider { font-size: .85rem; font-weight: 600; }
/* The environment label (TEST...): one fixed warning style, high contrast in both themes. */
.env-badge { display: inline-block; white-space: nowrap; font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: 1px 8px; border-radius: 999px; background: #f59e0b; color: #1b1f24; border: 1px solid #b45309; }