: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); }
/* One top bar on every page (#520): brand and environment on the left, Drafts / New session / the login time on the right. It
   wraps on a narrow phone instead of scrolling sideways. --topbar-h is its one-line height (the columns below start under it). */
:root { --topbar-h: 61px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--topbar-h); padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
.topbar-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.topbar-actions > button { min-height: 44px; padding: 6px 12px; white-space: nowrap; }
.drafts-button .count { display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .8rem; text-align: center; }
/* A phone scrolls the bar away with the page: pinned, it would cover the chat and the cards a phone scrolls into view. */
@media (max-width: 899px) {
  .topbar { position: static; }
}
/* A phone keeps the bar to one line where it can: New session shows its + alone. */
@media (max-width: 599px) {
  .brand .ko-tile + span { display: none; }
  .top-new-session .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top-new-session { min-width: 44px; font-size: 1.2rem; line-height: 1; }
}
.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 { min-height: 44px; }
.menu button.delete { color: var(--bad); }
.menu button:hover { background: var(--line); }
.list-info { color: var(--ok); overflow-wrap: anywhere; margin: 8px 0 0; }
.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); }
/* No turn runs, but agents the session started are still at work (AB#465): the running colour, a dashed edge. */
.chip-background { color: var(--accent); border-color: var(--accent); border-style: dashed; }
.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); }
  .settings-actions a.archived-sessions:hover { background: var(--line); }
  .machine-card .toggle:hover h2 { color: var(--accent); }
}

/* The shell of the home page and the session page (#520): one list column and the pane beside it, the same on both, so opening a
   session never moves or resizes the list. A wide window: the list is a fixed 360 px column under the top bar that scrolls on
   its own; the pane takes the rest. A phone: the home page is the list, a session is full screen, and the list opens from ☰
   as a drawer. */
main:has(> .split) { max-width: none; }
.split { display: block; }
.side { display: none; }
.split.at-home > .side { display: block; }
.empty-pane { display: none; }
.list-toggle { flex: 0 0 auto; min-width: 44px; min-height: 40px; padding: 4px 10px; font-size: 1.2rem; line-height: 1; }
.page-head .list-title { font-size: 1.4rem; margin: 0; }
@media (max-width: 899px) {
  .split.at-session > .side.open { display: block; position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(360px, 88vw); overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var(--bg); border-right: 1px solid var(--line); box-shadow: 4px 0 16px rgba(0,0,0,.25); }
  .side-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, .45); }
}
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
  .split > .side { display: block; position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); max-height: calc(100dvh - var(--topbar-h) - 32px); overflow: auto; }
  .side .machines { grid-template-columns: 1fr; }
  .list-toggle, .side-backdrop { display: none; }
  .empty-pane { display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - var(--topbar-h) - 32px); border: 1px dashed var(--line); border-radius: 12px; padding: 24px; text-align: center; }
  .empty-pane p { margin: 0; }
}
/* The session page is a column (header, chat, waiting card, composer) at least as tall as the window under the top bar.
   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 - var(--topbar-h) - 32px); min-height: calc(100dvh - var(--topbar-h) - 32px); }
.session-pane > * { flex: 0 0 auto; }
@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; }
/* What a command printed, as markdown (it holds a table): blocks by their margins; the renderer keeps the output's own line breaks. */
.msg.step .text.md { white-space: normal; }
.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); }
/* The assistant message a user message answers (AB#426): like a markdown quote, in the colour of the bubble it sits in (accent, or dashed while it waits). */
.regarding-quote { margin: 0 0 .4em; padding: 0 0 0 .8em; border-left: 3px solid currentColor; opacity: .8; font-size: .9em; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.queued > .regarding-quote { opacity: .6; }
.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; }
/* white-space: a bubble's text keeps its line breaks (.msg .text), and a kept line break between the header and the body would split the table in two. */
.md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; white-space: normal; }
/* Words stay whole in a cell (a bubble breaks anywhere): a table too wide for the bubble scrolls in itself. */
.md th, .md td { padding: 4px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.md th { background: #8881; white-space: nowrap; }
.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; }
/* AB#471: the question VS Code's older copy still holds: one title line and one line that says so; nothing to press. */
/* 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; }
/* The assistant message a draft answers (AB#426): one line above the message box, cut with an ellipsis; the full quote is its tooltip. */
.composer .regarding-chip { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; margin: 4px 0; padding: 0 0 0 10px; border-left: 3px solid var(--accent); border-radius: 4px; background: var(--card); color: var(--muted); font-size: .85rem; }
.composer .regarding-chip .regarding-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer .regarding-chip .regarding-remove { 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; }
.composer .regarding-chip .regarding-remove:hover:not(:disabled) { color: var(--fg); }
.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; }
/* A made fork whose prompt the chat does not show yet (AB#462): the prompt under the chat, not a second scrolling chat. */
.fork-pending { flex: 0 0 auto; }
.fork-pending .chat { flex: 0 0 auto; overflow: visible; border-top: 0; padding-top: 0; }
.fork-pending .starting { 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-flow .paste { display: flex; gap: 8px; min-width: 0; }
.scan-flow .paste input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.scan-flow .paste button { flex: none; min-height: 44px; }
.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 { gap: 8px 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; }
/* Which program runs a Claude session (VS Code, Claude Desktop, Terminal CLI): after the agent's name; a dot while its process has the session open. */
.engine { white-space: nowrap; }
.engine .dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--ok); vertical-align: middle; }
.session-head .engine { font-size: .85rem; color: var(--muted); }
/* AB#471: a session taken over into VS Code that the other program has open again. */
.session-head .older-copy { margin: 4px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.read-only { margin: 6px 0; font-size: .85rem; overflow-wrap: anywhere; }
/* The take-over question: each choice is a button with what it does under it. */
/* 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; }
/* The slash-command menu (AB#405): a "/" beside Send; its panel opens upward over the message box, as wide as the composer
   (the action row is its frame), scrolls on its own and never grows past 60% of the screen. Rows are 44 px touch targets. */
.composer .actions { position: relative; }
.composer .slash { min-width: 44px; font-weight: 700; }
.slash-panel { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(100% + 4px); max-height: min(60dvh, 24rem); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
@media (min-width: 900px) { .slash-panel { right: auto; width: min(100%, 36rem); } }
.slash-panel > p { margin: 4px 8px; }
.slash-list { display: flex; flex-direction: column; }
.slash-panel .slash-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 2px; align-items: center; width: 100%; min-height: 44px; box-sizing: border-box; padding: 6px 8px; background: none; border: 0; border-radius: 6px; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.slash-panel .slash-item:disabled { color: var(--muted); cursor: default; }
.slash-panel .slash-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) { .slash-panel .slash-item:not(:disabled):hover { background: var(--line); } }
.slash-name { grid-column: 1; font-weight: 600; overflow-wrap: anywhere; }
.slash-desc { grid-column: 1; grid-row: 2; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.slash-tag { grid-column: 2; grid-row: 1; font-size: .75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.slash-tick, .slash-more { grid-column: 3; grid-row: 1; color: var(--accent); font-weight: 700; }
.slash-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.slash-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.slash-form { display: flex; gap: 8px; padding: 4px; }
.slash-form .slash-arg { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; box-sizing: border-box; font: inherit; padding: 8px; }
.slash-form .slash-run { flex: 0 0 auto; }
.slash-panel .slash-how, .slash-panel .slash-about { font-size: .85rem; }

/* Archived sessions (AB#457): the row on the PC's settings page, and the page with Restore / Delete per session. */
.settings-actions a.archived-sessions { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); text-decoration: none; }
.settings-actions a.archived-sessions::after { content: "\203A"; color: var(--muted); font-size: 1.2rem; line-height: 1; }
.settings-actions a.archived-sessions:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-head.archived-head { justify-content: flex-start; gap: 12px; }
.archived-page .pc-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.archived-page .pc-row h2 { margin: 0; overflow-wrap: anywhere; }
.archived-list { list-style: none; margin: 12px 0 0; padding: 0; max-width: 56rem; }
.archived-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 6px; border-top: 1px solid var(--line); }
.archived-row { flex: 1 1 14rem; min-width: 0; display: grid; gap: 2px; }
.archived-row .title { overflow-wrap: anywhere; }
.archived-row .title .chip { margin-left: 8px; }
.archived-row .when { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.archived-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.archived-actions button { min-height: 44px; min-width: 5.5rem; }
.archived-info { color: var(--ok); overflow-wrap: anywhere; }
.archived-page .error { overflow-wrap: anywhere; }
.archived-retry, .archived-search-retry { min-height: 44px; }
/* The search: the box takes the row, the clear (x) is a 44 px target beside it and never takes the focus from the box. */
.archived-search { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; max-width: 56rem; }
.archived-search input { flex: 1 1 auto; min-width: 0; width: auto; min-height: 44px; box-sizing: border-box; font: inherit; padding: 8px; }
.archived-search-clear { flex: 0 0 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 1.1rem; line-height: 1; }
.archived-count, .archived-searching, .archived-search-note, .archived-none { margin: 8px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.archived-actions button.delete { color: var(--bad); border-color: var(--bad); }

/* AB#467: Claude Desktop's card under a turn (recap, question, answer buttons), its task list, and notice lines. The card is a
   message of the chat, full width, in normal text; its buttons are at least 44 px tall and wrap on a phone. */
.msg.msg-tool.step-card { align-self: stretch; max-width: none; font-size: 1rem; color: inherit; padding: 0; background: none; border: 0; }
.action-card { padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 8px; }
.action-card.open { border-color: var(--warn); }
.action-card .card-recap { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.action-card .card-ask { margin-top: 8px; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.action-card .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.action-card .card-action { min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
.action-card .card-app { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.action-card .card-only, .action-card .card-closed { font-size: .85rem; }
.action-card .card-closed { margin-top: 6px; }
/* AB#467: the step of a claude AskUserQuestion call: header, question, options with their descriptions, outcome. */
.ask-step.open { padding: 10px 12px 12px; border: 1px solid var(--warn); border-radius: 8px; }
/* AB#467: the open question is one card in the wrap_up card's look; the chat bubble around it is dropped (no second frame). */
.msg.msg-tool.ask-open { align-self: stretch; max-width: none; font-size: 1rem; color: inherit; padding: 0; background: none; border: 0; }
.action-card.ask-step .ask-header { font-size: .85rem; }
.action-card.ask-step .ask-choice { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
.action-card.ask-step .ask-choice-label { font-weight: 600; }
.action-card.ask-step .ask-choice-desc { font-size: .8rem; opacity: .85; font-weight: normal; }
.action-card.ask-step .ask-note { margin-top: 8px; }
.ask-step .ask-question + .ask-question { margin-top: 10px; }
.ask-step .ask-header { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.ask-step .ask-text { font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-step .ask-options { list-style: disc; margin: 4px 0 0; padding-left: 1.3em; }
.ask-step .ask-options li { overflow-wrap: anywhere; }
.ask-step .ask-label { font-weight: 600; }
.ask-step .ask-desc { margin-left: 6px; }
.ask-step .ask-outcome { margin-top: 4px; overflow-wrap: anywhere; }
.ask-step .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ask-step .card-action { min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
.ask-step .ask-note, .ask-step .card-closed { margin-top: 6px; font-size: .85rem; overflow-wrap: anywhere; }
.plan-list { list-style: none; margin: 4px 0 0; padding: 0; }
.plan-list li { display: flex; gap: 6px; align-items: baseline; }
.plan-list .plan-mark { flex: 0 0 1.1em; text-align: center; }
.plan-list .plan-text { overflow-wrap: anywhere; }
.plan-list .plan-completed .plan-text { text-decoration: line-through; opacity: .75; }
.plan-list .plan-in_progress { font-weight: 600; }
.msg.msg-tool.step-notice { font-size: .8rem; }
.notice-line { font-style: italic; overflow-wrap: anywhere; }
.notice-text { white-space: pre-wrap; overflow-wrap: anywhere; opacity: .85; max-height: 6.5em; overflow: hidden; }

/* #481: the new session's row, created without switching to it, is marked for a few seconds. */
.session.highlight { background: var(--bg); box-shadow: inset 3px 0 0 var(--ok); outline: 2px solid var(--ok); outline-offset: -2px; }
/* The New session window's PC box, its switch checkbox and the Smart Fork start choice (#481, #480). */
.dialog select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; }
.dialog .pc-offline, .dialog .defaults-notice, .dialog .context-error { margin: 4px 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.dialog .switch-to-new { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0 0; cursor: pointer; }
.dialog .switch-to-new input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--accent); }
.start-choice { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; min-width: 0; }
.start-choice legend { padding: 0; margin-bottom: 4px; }
.start-choice .choice { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; margin: 0; padding: 6px 0; min-height: 44px; cursor: pointer; }
.start-choice .choice input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); }
.start-choice .choice-desc { display: block; font-size: .85rem; }
/* A session started outside VS Code (#490): no message box, Smart Fork alone. */
.composer.smart-fork-only .actions button { min-height: 44px; }
.session-head .head-smart-fork { min-height: 44px; padding: 4px 12px; font-size: .9rem; }
/* #490: Claude programs that are not VS Code's run on the PC: one warning strip with its button, wrapping on a phone. */
.claude-programs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--warn); border-radius: 8px; background: var(--card); }
.claude-programs-text { flex: 1 1 14rem; margin: 0; min-width: 0; color: var(--fg); overflow-wrap: anywhere; }
.claude-programs .close-programs { flex: 0 0 auto; min-height: 44px; }
.program-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.program-list li { display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.program-list .program { font-weight: 600; }
.program-outcome { font-size: .9rem; }
/* The drafts drawer (#521): from the right, over the page, its own scroll; every control 44 px. */
.drawer-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .45); }
.drafts-drawer { position: fixed; z-index: 46; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 16px; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -4px 0 16px rgba(0,0,0,.25); animation: drawer-in .15s ease-out; }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .drafts-drawer { animation: none; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.drawer-close { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.3rem; line-height: 1; background: none; border: 0; color: var(--muted); }
.drafts { list-style: none; margin: 0; padding: 0; }
.draft { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.draft-title { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.draft-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.draft-when { font-size: .8rem; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.draft-actions button { min-height: 44px; }