/* Only the session list and the conversation scroll; the page itself never does (nor bounces). */
html:has(main.console), body:has(> main.console) { overflow: hidden; overscroll-behavior: none; }
/* Remote Control page (/native) and the chat pane beside an artifact. */
.console { position: relative; height: calc(100dvh - 56px); display: grid; grid-template-columns: var(--sidebar-width, 260px) minmax(0, 1fr); }
.console[data-sidebar="hidden"] { grid-template-columns: minmax(0, 1fr); }
.console[data-sidebar="hidden"] aside, .console[data-sidebar="hidden"] .sidebar-divider { display: none; }
.sidebar-divider { position: absolute; z-index: 2; top: 0; left: calc(var(--sidebar-width, 260px) - 6px); width: 12px; height: 100%; cursor: col-resize; touch-action: none; }
.sidebar-divider:hover, .sidebar-divider:focus-visible, .sidebar-dragging .sidebar-divider { background: var(--accent-soft); outline: none; }
.sidebar-dragging { cursor: col-resize; user-select: none; }
.sidebar-toggle { flex-shrink: 0; width: 30px; min-height: 30px; height: 30px; padding: 0; font-size: 16px; border: 0; background: transparent; color: var(--paper); }
.sidebar-toggle:hover { background: var(--hover); }
/* The artifact pane (native.js setupArtifactPane): a column after the conversation while it is open. */
.artifact-pane, .artifact-pane-divider { display: none; }
.console[data-artifact="open"] { grid-template-columns: var(--sidebar-width, 260px) minmax(0, 1fr) var(--artifact-width, 50%); }
.console[data-artifact="open"][data-sidebar="hidden"] { grid-template-columns: minmax(0, 1fr) var(--artifact-width, 50%); }
.console[data-artifact="open"] .artifact-pane { display: block; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: var(--surface); }
.console[data-artifact="open"] .artifact-pane-divider { display: block; position: absolute; z-index: 2; top: 0; right: calc(var(--artifact-width, 50%) - 6px); width: 12px; height: 100%; cursor: col-resize; touch-action: none; }
.artifact-pane-divider:hover, .artifact-pane-divider:focus-visible, .artifact-dragging .artifact-pane-divider { background: var(--accent-soft); outline: none; }
.artifact-pane iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* A page kept loaded but not shown keeps its size, so its scroll position survives (display: none would not). */
.artifact-pane iframe[data-shown="false"] { visibility: hidden; pointer-events: none; }
.artifact-pane { position: relative; }
.artifact-tabs { display: none; position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 1; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--surface); }
.artifact-pane[data-tabs="true"] .artifact-tabs { display: flex; }
.artifact-pane[data-tabs="true"] iframe { top: 34px; height: calc(100% - 34px); }
.artifact-tab { display: flex; align-items: center; flex: 0 1 200px; min-width: 90px; border-right: 1px solid var(--line); color: var(--muted); }
.artifact-tab[aria-selected="true"] { color: var(--paper); background: var(--hover); box-shadow: inset 0 -2px 0 var(--accent, currentColor); }
.artifact-tab-label { flex: 1; min-width: 0; height: 34px; min-height: 34px; padding: 0 10px; border: 0; background: transparent; color: inherit; font-size: 12.5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-tab-label:hover { background: var(--hover); }
.artifact-tab-close { flex: 0 0 28px; width: 28px; height: 28px; margin-right: 3px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: inherit; font-size: 16px; line-height: 1; }
.artifact-tab-close:hover { background: var(--hover); color: var(--paper); }
.artifact-tab-picker { flex: 0 0 170px; min-width: 150px; height: 28px; margin: 3px 6px 3px auto; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--paper); font-size: 12px; }
.artifact-pane-empty { display: none; position: absolute; inset: 0; place-items: center; color: var(--muted); font-size: 14px; }
/* Pages kept loaded stay sized while the pane shows its note, so a session switch that passes through it keeps their scroll. */
.artifact-pane[data-empty="true"] iframe { visibility: hidden; pointer-events: none; }
.artifact-pane[data-empty="true"] .artifact-pane-empty { display: grid; }
.artifact-pane-empty button { position: absolute; top: 8px; right: 10px; width: 28px; min-height: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--paper); font-size: 16px; }
.artifact-pane-empty button:hover { background: var(--hover); }
.artifact-dragging { cursor: col-resize; user-select: none; }
/* The frame would take the pointer from the divider mid-drag. */
.artifact-dragging iframe { pointer-events: none; }
.console aside { min-height: 0; overflow: auto; background: var(--sidebar); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.console aside .eyebrow { margin: 0 8px; }
.console aside .lede { font-size: 13px; padding: 0 8px; overflow-wrap: anywhere; }
.console aside code { font: 12px var(--mono); }
#enable-notifications { align-self: stretch; margin: 0 8px; font-size: 13px; }
/* native.js renderSessions keeps the scroll position by hand across its rebuilds; the browser's own
   anchoring would shift it a second time. */
#sessions, .console aside { overflow-anchor: none; }
#sessions { min-height: 0; overflow: auto; }
.session { width: 100%; display: block; min-height: 0; margin: 2px 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--paper); text-align: left; font-size: 14px; overflow-wrap: anywhere; }
.session:hover { background: var(--hover); }
a.session { text-decoration: none; cursor: pointer; }
.session.selected { background: var(--surface); border-color: var(--line); }
.session-row { position: relative; }
.session-project { display: inline-block; flex-shrink: 0; white-space: nowrap; margin-right: 6px; padding: 0 6px; border-radius: 4px; color: hsl(var(--hue) 55% 30%); background: hsl(var(--hue) 70% 50% / .14); font-weight: 600; }
.session-machine { display: inline-block; flex-shrink: 0; white-space: nowrap; margin-right: 6px; padding: 0 5px; border: 1px solid hsl(var(--hue) 60% 45% / .55); border-radius: 4px; color: hsl(var(--hue) 55% 32%); font-size: .92em; }
.session-actions { position: absolute; top: 50%; right: 1px; transform: translateY(-50%); display: none; gap: 4px; padding: 4px 5px 4px 18px; border-radius: 0 6px 6px 0; background: linear-gradient(to right, transparent, var(--hover) 14px); }
.session-archive, .session-mark { display: grid; place-items: center; width: 24px; height: 24px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); }
.session-archive svg { width: 14px; height: 14px; }
/* A ring: mark unread; a filled dot: mark read (it is unread now). */
.session-mark::before { content: ''; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; }
.session-mark[data-unread="true"]::before { border-color: var(--accent); background: var(--accent); }
.session-archive:hover, .session-mark:hover { color: var(--paper); }
@media (hover: hover) { .session-row:hover .session-actions, .session-actions:focus-within { display: flex; } }
/* Two lines: a title cut to one line on a phone often loses the words that tell sessions apart. */
.session-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.session[data-connected="false"] .session-title { color: var(--muted); }
.session[data-unread="true"] .session-title { color: var(--paper); font-weight: 700; }
.session[data-unread="true"] .session-title::before, button.session-group[data-unread="true"] .project-count::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.session-group { margin: 14px 10px 4px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.session-group:first-child { margin-top: 0; }
.project-group + .project-group { margin-top: 6px; }
.project-group-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; background: var(--sidebar); }
.project-new { flex-shrink: 0; min-height: 0; margin-right: 4px; padding: 2px 8px; border: 0; background: none; color: var(--muted); font: 500 15px var(--mono); line-height: 1; }
.project-new:hover { color: var(--paper); background: var(--hover); }
button.session-group { flex: 1; min-width: 0; width: 100%; min-height: 0; margin: 0; padding: 8px 10px 4px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 0; background: var(--sidebar); text-align: left; }
button.session-group::before { content: '▾'; flex-shrink: 0; width: 10px; }
button.session-group[aria-expanded="false"]::before { content: '▸'; }
button.session-group:hover { background: var(--sidebar); color: var(--paper); }
button.session-group span:first-child { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.session-group .project-count { flex-shrink: 0; font-weight: 500; }
button.session-group .project-machine { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; text-transform: none; letter-spacing: 0; }
.session-status { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.session[data-activity="running"] .session-status::before { content: '✻'; display: inline-block; margin-right: 4px; color: var(--accent); animation: activity-spin 2s linear infinite; }
.session[data-activity="requires_action"] .session-status::before { content: '?'; margin-right: 4px; color: var(--accent); font-weight: 700; }
.conversation { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 28px 16px; position: relative; }
/* The title asks for 320px before any button: at flex-basis 0 it was the one item with nothing to
   keep, and five buttons in a narrow pane squeezed it to one character per line. Buttons that do not
   fit beside it wrap to a second row, on the right. */
.conversation-top { min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; flex-shrink: 0; }
.conversation-top > div { flex: 1 1 320px; min-width: 0; }
.conversation-top > button { flex-shrink: 0; white-space: nowrap; }
.conversation-top .eyebrow { margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation h1 { font-size: 20px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#interrupt { color: var(--paper); background: var(--surface); border-color: var(--line); }
#interrupt:hover { background: var(--hover); }
#archive, #switch-account, #artifacts, #mark-unread, #share { color: var(--muted); background: none; border-color: var(--line); }
#archive:hover, #switch-account:hover, #artifacts:hover, #mark-unread:hover, #share:hover { color: var(--paper); background: var(--hover); }
.search-row { display: flex; gap: 8px; }
.archived-filter { flex-shrink: 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer; }
.archived-filter input { margin: 0; }
.session[data-archived] { opacity: .6; }
/* Where a scheduled run or an offline task came from (native.js originTag): on its row and under the open session's title. */
.session-origin { display: inline-flex; max-width: 100%; box-sizing: border-box; margin-top: 3px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; vertical-align: top; }
.session-origin .origin-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.session-origin .origin-when { flex-shrink: 0; white-space: pre; }
.session-origin[data-kind="offline"] { border-color: var(--line); background: var(--surface); color: var(--muted); }
#session-origin { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 4px 0 0; font-size: 12px; }
#session-origin .session-origin { margin: 0; flex: 0 1 auto; min-width: 0; }
#session-origin a { flex-shrink: 0; color: var(--muted); white-space: nowrap; }
#session-origin a:hover { color: var(--paper); }
.origin-filter { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.origin-filter select { flex: 1; min-width: 0; height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--paper); font: 12px var(--sans); }
.origin-hidden { flex-shrink: 0; min-height: 0; padding: 2px 8px; border: 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font: 600 11px var(--sans); white-space: nowrap; }
.origin-hidden::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: var(--accent); vertical-align: middle; }

#messages { flex: 1; min-height: 0; overflow: auto; padding: 16px max(0px, calc((100% - 760px) / 2)); }
#messages > p { margin: 14vh auto 0; color: var(--muted); text-align: center; }
#activity { width: min(100%, 760px); margin: 0 auto 8px; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#activity::before { content: '✻'; display: inline-block; margin-right: 6px; color: var(--accent); animation: activity-spin 2s linear infinite; }
#activity[data-state="requires_action"]::before { content: '?'; animation: none; }
#activity[data-state="background"]::before { content: '◷'; animation: none; }
#goal-line { width: min(100%, 760px); margin: 0 auto 8px; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#goal-line::before { content: '◎'; margin-right: 6px; color: var(--accent); }
#goal-line[data-state="met"]::before { content: '✓'; }
@keyframes activity-spin { to { transform: rotate(360deg); } }
/* Turn rail: a mark per message the person typed at its place in the session, and the list of them
   that opens beside it on hover (native.js renderTurnRail, renderTurnPanel). */
#turn-rail { position: absolute; right: 10px; width: 18px; z-index: 4; padding: 6px 0; }
#turn-rail .turn-mark { position: absolute; right: 0; width: 14px; height: 9px; min-height: 0; margin-top: -4px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; }
#turn-rail .turn-mark::before { content: ''; position: absolute; right: 0; top: 4px; width: 10px; height: 2px; border-radius: 1px; background: var(--line); transition: width .12s, background .12s; }
#turn-rail .turn-mark[data-in-view="true"]::before { width: 14px; background: var(--muted); }
#turn-rail .turn-mark:hover::before, #turn-rail .turn-mark:focus-visible::before { width: 14px; background: var(--accent); }
#turn-panel { position: absolute; right: 34px; z-index: 6; width: min(360px, calc(100% - 80px)); overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 6px 20px rgb(0 0 0 / .14); }
#turn-panel ol { margin: 0; padding: 6px; list-style: none; }
#turn-panel button { display: flex; gap: 10px; width: 100%; min-height: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 13px/1.4 var(--sans); text-align: left; cursor: pointer; }
#turn-panel button:hover, #turn-panel button[data-pointed] { background: var(--hover); color: var(--paper); }
#turn-panel button[data-in-view="true"] { color: var(--paper); font-weight: 600; }
#turn-panel .turn-number { flex-shrink: 0; min-width: 20px; color: var(--muted); font: 12px/1.6 var(--mono); text-align: right; }
#turn-panel .turn-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#new-below { position: absolute; right: 44px; bottom: 140px; z-index: 5; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--paper); background: var(--surface); font-size: 13px; box-shadow: 0 2px 8px rgb(0 0 0 / .12); cursor: pointer; }
#messages article { margin: 0 0 18px; max-width: 100%; }
#messages article > span, #approval article > span { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
#messages article[data-role="user"] { width: fit-content; max-width: 90%; margin-left: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
#messages article[data-role="user"] > span { display: none; }
#messages article[data-role="error"] { padding-left: 12px; border-left: 3px solid var(--danger); }
#messages pre, #approval pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.55 var(--sans); }
#messages article[data-role="user"] pre { margin: 0; }
#messages article[data-delivery] .delivery { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); text-align: right; }
#messages article[data-delivery="sending"] { opacity: .7; }
#messages article[data-delivery="failed"] .delivery { color: var(--danger); }
#messages .delivery .withdraw { margin-left: 8px; padding: 0; border: 0; color: var(--muted); background: none; font: inherit; text-decoration: underline; cursor: pointer; }
#messages:is([data-kind="codex"]) .delivery .withdraw { display: none; }
/* Edit (editMessage) on what the person typed, in sessions CCS runs, while no reply is being written. */
#messages article[data-uuid] { position: relative; }
#messages .message-edit { display: none; position: absolute; right: 100%; bottom: 4px; margin-right: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--bg); font-size: 12px; cursor: pointer; }
#messages[data-kind="stdio"]:not([data-running]) article[data-uuid]:not([data-editing]):hover .message-edit { display: block; }
@media (hover: none) { #messages[data-kind="stdio"]:not([data-running]) article[data-uuid]:not([data-editing]) .message-edit { display: block; opacity: .7; } }
#messages article[data-editing] { width: min(640px, 90%); }
#messages article[data-editing] > pre { display: none; }
#messages .message-editor { display: flex; flex-direction: column; gap: 6px; }
#messages .message-editor textarea { width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 6px; color: inherit; background: var(--bg); font: 14px/1.55 var(--sans); resize: vertical; }
#messages .message-editor small { color: var(--muted); font-size: 12px; }
#messages .message-editor div { display: flex; justify-content: flex-end; gap: 8px; }
#slash-hint { flex-basis: 100%; display: flex; flex-direction: column; }
#slash-hint button { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border: 0; border-radius: 6px; color: var(--paper); background: none; text-align: left; cursor: pointer; }
#slash-hint button:hover, #slash-hint button:focus-visible { background: var(--hover); }
#slash-hint span { color: var(--muted); font-size: 13px; }
#approval pre { font: 12px/1.5 var(--mono); }

#messages .message-markdown { overflow-wrap: break-word; line-height: 1.6; }
#messages .message-markdown > * { margin: 0; }
#messages .message-markdown > * + * { margin-top: 10px; }
#messages .message-markdown :is(ul, ol) { padding-left: 24px; }
#messages .message-markdown :not(pre) > code { padding: 0 4px; border-radius: 4px; background: var(--hover); font: .9em var(--mono); }
#messages .message-markdown pre { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); overflow: auto; white-space: pre; font: 13px/1.5 var(--mono); }
#messages .message-markdown pre code { font: inherit; }
#messages .message-markdown :is(h1, h2, h3, h4, h5, h6) { font-size: 16px; font-weight: 600; }
#messages .message-markdown blockquote { padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); }
#messages .message-markdown img { max-width: 100%; height: auto; }
#messages .message-table { overflow: auto; }
#messages .message-table table { border-collapse: collapse; }
#messages .message-table :is(th, td) { padding: 4px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
#messages .message-table th { background: var(--bg); font-weight: 600; }

#messages article[data-role="tool"] { margin: 8px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow: hidden; }
#messages .tool-head { display: flex; align-items: center; }
#messages .tool-background { display: none; flex-shrink: 0; min-height: 0; margin-right: 8px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 12px; }
#messages .tool-background:hover { background: var(--hover); color: var(--paper); }
#messages[data-running] article[data-detachable]:not(:has(.tool-result)) .tool-background { display: block; }
#messages .tool-toggle { flex: 1; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 0; background: transparent; color: var(--paper); font-size: 13px; text-align: left; }
#messages .tool-toggle:hover { background: var(--bg); }
#messages .tool-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#messages .tool-icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; color: var(--muted); }
#messages .tool-chevron { display: inline-flex; flex-shrink: 0; color: var(--muted); }
#messages .tool-toggle[aria-expanded="true"] .tool-chevron { transform: rotate(180deg); }
#messages .tool-details { max-height: 240px; overflow: auto; padding: 0 10px 10px; }
#messages .tool-details > section { padding: 8px; border-radius: 4px; background: var(--bg); }
#messages .tool-details > section + section { margin-top: 8px; }
#messages .tool-section-label { margin-bottom: 6px; color: var(--muted); font: 11px var(--mono); }
#messages article[data-role="tool"] pre { margin: 0; font: 12px/1.5 var(--mono); }
#messages article[data-role="tool"][data-error="true"] .tool-title, #messages .tool-result[data-error="true"] .tool-section-label { color: var(--danger); }

#approval { flex-shrink: 0; width: 100%; max-width: 760px; align-self: center; max-height: 32%; overflow: auto; margin-bottom: 10px; padding: 12px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft); }
#approval article { margin-bottom: 10px; }
#approval button { margin: 0 8px 4px 0; }
#approval button[data-primary="false"] { color: var(--paper); background: var(--surface); border-color: var(--line); }
#approval button:disabled { opacity: .5; cursor: default; }
/* A question or a plan needs room to read; a permission stays compact. */
#approval:has(.approval-question), #approval:has(.message-markdown) { max-height: 60%; }
.approval-card + .approval-card { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.approval-question { margin: 0 0 10px; padding: 0; border: 0; }
.approval-question legend { padding: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.approval-question p { margin: 4px 0 8px; }
.approval-options { display: grid; gap: 6px; }
#approval .approval-option { display: block; width: 100%; margin: 0; padding: 8px 10px; text-align: left; color: var(--paper); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
#approval .approval-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.approval-option strong { display: block; font-weight: 600; }
.approval-option span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.approval-other { width: 100%; margin-top: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--paper); }
#send { width: 100%; max-width: 760px; align-self: center; display: flex; gap: 8px; align-items: end; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
#send:focus-within { border-color: var(--accent); }
#send textarea { flex: 1; min-width: 0; height: 64px; min-height: 40px; max-height: 160px; padding: 6px; border: 0; background: transparent; resize: none; outline: none; }
#send > button { flex-shrink: 0; }
#send { flex-wrap: wrap; }
.console #composer-files { flex: 1 0 100%; padding: 4px 0; }
.console #send #composer-attach { color: var(--paper); background: transparent; border: 1px solid var(--line); }
#new-session { flex-shrink: 0; margin: 0 8px 12px; }
#new-session-dialog, #share-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--paper); overflow: auto; }
#new-session-dialog::backdrop, #share-dialog::backdrop { background: rgb(0 0 0 / .4); }
#new-session-form { display: grid; gap: 16px; }
#new-session-form h2, #new-session-form p { margin: 0; }
#new-session-form label { display: grid; gap: 6px; font-size: 14px; }
#new-session-form label[hidden], #new-session-folder[hidden], #new-session-login[hidden] { display: none; }
#new-session-login { display: grid; gap: 16px; padding-left: 12px; border-left: 2px solid var(--line); }
#folder-list { max-height: 220px; margin: 6px 0 0; padding: 4px; overflow: auto; list-style: none; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
#folder-list[hidden] { display: none; }
#folder-list li { padding: 5px 8px; border-radius: 4px; font: 13px var(--mono); overflow-wrap: anywhere; cursor: pointer; }
#folder-list li:hover, #folder-list li[aria-selected="true"] { background: var(--hover); }
#new-session-form #folder-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
#new-session-form #folder-note:empty { display: none; }
#new-session-form select, #new-session-form input { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--paper); background: var(--bg); font: inherit; }
#new-session-status { overflow-wrap: anywhere; font-size: 14px; color: var(--muted); }
.new-session-actions { display: flex; justify-content: flex-end; gap: 8px; }
#new-session-close { color: var(--paper); background: var(--bg); }
.sessions-top, .conversation-back, .session-dot { display: none; }
#messages .tool-target { color: var(--muted); font-family: var(--mono); font-size: .92em; }
/* Context Claude Code adds as a user message: one muted line, expandable. */
#messages .message-note { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
#messages .command-reply { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
#messages .command-reply code { margin-right: 8px; font: 12px var(--mono); color: var(--paper); }
#messages .message-note summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#messages .message-note pre { max-height: 240px; overflow: auto; padding: 8px; border-radius: 6px; background: var(--surface); font: 12px/1.5 var(--mono); }

/* Usage limits: a pill on a session, the banner above the composer, each account's usage. */
.limit-pill { display: inline-block; flex-shrink: 0; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; color: var(--warn); background: var(--warn-soft); }
.limit-pill[data-level="blocked"] { color: var(--danger); background: var(--danger-soft); }
#limit-banner { flex-shrink: 0; width: 100%; max-width: 760px; align-self: center; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface); font-size: 14px; }
#limit-banner[data-level="warning"] { border-left-color: var(--warn); }
#limit-banner[data-level="blocked"] { border-left-color: var(--danger); }
#limit-banner p { margin: 0; overflow-wrap: anywhere; }
#limit-banner p + * { margin-top: 8px; }
#limit-banner .switch-status { color: var(--muted); }
#limit-banner .switch-status[data-state="failed"] { color: var(--danger); }
#limit-banner .switch-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.switch-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.switch-choices button, #limit-banner .switch-open { color: var(--paper); background: var(--bg); border-color: var(--line); font-size: 13px; }
.switch-choices button:hover, #limit-banner .switch-open:hover { background: var(--hover); }
.switch-choices button[data-full="true"] { color: var(--muted); }
#accounts { flex-shrink: 0; padding: 0 8px; margin-bottom: 4px; }
.accounts-heading { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.accounts-heading::before { content: '▾'; width: 10px; }
.accounts-heading[aria-expanded="false"]::before { content: '▸'; }
.accounts-heading:hover { background: transparent; color: var(--paper); }
.account-counts { margin-left: auto; font: 400 11px var(--sans); letter-spacing: 0; text-transform: none; }
#accounts-details { max-height: min(240px, 30dvh); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.account-provider { position: sticky; top: 0; padding: 5px 0; background: var(--bg); color: var(--muted); font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.account { display: grid; grid-template-columns: minmax(56px, .8fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 8px; padding: 4px 0; font-size: 12px; }
.account-who { min-width: 0; display: flex; flex-direction: column; }
.account-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account[data-switchable="false"] .account-name { color: var(--muted); }
.account-age { color: var(--muted); font-size: 11px; }
.account-note { grid-column: 2 / -1; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.account-note[data-level="blocked"] { color: var(--danger); }
.account-hosts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px 0; margin-top: 2px; font-size: 10px; line-height: 1.5; }
.account-window { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-bar { flex-basis: 100%; height: 4px; margin-top: 3px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--used), var(--line) var(--used)); }
.account-window[data-level="warning"] { color: var(--warn); }
.account-window[data-level="warning"] .account-bar { background: linear-gradient(to right, var(--warn) var(--used), var(--line) var(--used)); }
.account-window[data-level="blocked"] { color: var(--danger); }
.account-window[data-level="blocked"] .account-bar { background: var(--danger); }
.account-reset { margin-left: auto; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.account-resets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; color: var(--muted); font-size: 11px; }
.account-reset-advice[data-gain="up"] { color: var(--accent); }
.account-reset-advice[data-gain="down"] { color: var(--warn); }
.account-resets button { min-height: 0; padding: 1px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--paper); font: 500 11px var(--sans); }
.account-reset-outcome[data-state="failed"] { color: var(--danger); }
/* History pages are prepended with the offset kept by hand (native.js loadOlder); the
   browser's own scroll anchoring would shift it a second time. */
#messages { overflow-anchor: none; }

/* Desktop: the phone list's top bar shows only its search field, above the sessions. */
@media (min-width: 701px) {
  .console .sessions-top { display: block; margin: 0 8px 10px; }
  .console .sessions-top > :not(.search-row, .sessions-heading-row, .origin-filter) { display: none; }
  /* Desktop shows the arrangement toggle (Status / Projects) above the search, without the phone's heading. */
  .console .sessions-heading-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
  .console .sessions-heading-row .sessions-heading, .list-modes [data-mode="recent"] { display: none; }
  .list-modes { display: flex; padding: 2px; border-radius: 7px; background: var(--hover); }
  .list-modes button { min-height: 0; padding: 3px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: 500 12px var(--sans); }
  .list-modes button[aria-pressed="true"] { background: var(--surface); color: var(--paper); box-shadow: 0 1px 2px rgb(16 24 40 / .12); }
  #session-search { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--paper); outline: none; }
  #session-search:focus { border-color: var(--accent); }
}
@media (max-width: 700px) {
  .sidebar-toggle, .sidebar-divider { display: none; }
  .console[data-sidebar="hidden"] aside { display: block; }
  /* Pinned to the visible viewport, which iOS moves when the keyboard opens. */
  body:has(.console) { position: fixed; top: var(--viewport-top, 0px); left: 0; right: 0; height: var(--viewport-height, 100dvh); overflow: hidden; }
  .console { height: calc(var(--viewport-height, 100dvh) - 52px); display: block; }
  /* Two screens: the session list, or one session. */
  .console[data-view="list"] .conversation, .console[data-view="conversation"] aside { display: none; }
  /* A third screen: the artifact, closed by its own × or the back gesture. */
  .console[data-artifact="open"] .artifact-pane-divider, .console:not([data-view="artifact"]) .artifact-pane { display: none; }
  .console[data-view="artifact"] :is(aside, .conversation) { display: none; }
  .console[data-view="artifact"] .artifact-pane { display: block; height: 100%; border: 0; }
  body:has(.console[data-view="artifact"]) > header { display: none; }
  .console[data-view="artifact"] { height: var(--viewport-height, 100dvh); }
  body:has(.console[data-view="conversation"]) > header { display: none; }
  .console[data-view="conversation"] { height: var(--viewport-height, 100dvh); }

  .console aside { display: block; height: 100%; padding: 0 0 max(16px, env(safe-area-inset-bottom)); background: var(--bg); border: 0; overscroll-behavior: contain; }
  .console #new-session { display: block; margin: 12px 16px 0; min-height: 44px; }
  .console aside .sessions-eyebrow { display: none; }
  .console .sessions-top { display: block; position: sticky; top: 0; z-index: 1; padding: 14px 16px 10px; background: var(--bg); }
  .console .sessions-heading { margin: 0 0 10px; font-size: 26px; font-weight: 700; }
  #session-search { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); outline: none; -webkit-appearance: none; appearance: none; }
  #session-search:focus { border-color: var(--accent); }
  .console #sessions { overflow: visible; padding: 0 8px; }
  .console .session-group { margin: 18px 8px 4px; font: 600 12px var(--sans); letter-spacing: .02em; text-transform: none; }
  .console .session-group:first-child { margin-top: 4px; }
  .console .sessions-empty { margin: 24px 8px; color: var(--muted); text-align: center; }
  .console .session { min-height: 64px; margin: 0; padding: 10px 10px; border: 0; border-radius: 10px; font-size: 16px; line-height: 1.35; -webkit-tap-highlight-color: transparent; }
  .console .session:active { background: var(--hover); }
  .console .session.selected { background: var(--accent-soft); border: 0; }
  .console .session[data-connected="false"] .session-title { color: var(--paper); }
  .console .session-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; min-width: 0; }
  .console .session-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Never wider than the page: what does not fit (a limit pill, most often) goes on a second line. */
  .console .session-status { flex-wrap: wrap; row-gap: 4px; }
  .console .session-status > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .console .session-dot { display: block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
  .console .session[data-connected="false"] .session-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
  .console .session[data-activity] .session-status::before { content: none; }
  .console .session[data-activity="running"] .session-dot { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: var(--accent); animation: activity-spin 2s linear infinite; }
  .console .session[data-activity="running"] .session-dot::before { content: '✻'; }
  .console .session[data-activity="requires_action"] .session-dot { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: var(--accent); font-weight: 700; }
  .console .session[data-activity="requires_action"] .session-dot::before { content: '?'; }
  .console aside .lede { margin: 20px 16px 0; padding: 0; color: var(--muted); }

  .conversation { height: 100%; padding: 0 12px max(10px, env(safe-area-inset-bottom)); }
  .conversation-top { min-height: 56px; padding-top: env(safe-area-inset-top); gap: 4px; margin: 0 -12px; padding-right: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--line); background: var(--surface); }
  .conversation-top > div { flex: 1 1 180px; }
  .conversation-top .eyebrow { margin: 0; font-size: 11px; }
  .conversation h1 { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .conversation-back { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0 0 4px; background: transparent; color: var(--accent); font-size: 32px; line-height: 1; }
  .conversation-back:hover, .conversation-back:active { background: var(--hover); }
  #messages { padding: 12px 0; }
  #approval { max-height: 35%; }
  #limit-banner { max-height: 40%; overflow: auto; }
  .switch-choices button, #limit-banner .switch-open { min-height: 40px; }
  .console #accounts { padding: 4px 18px 8px; }
  .console .accounts-heading { font: 600 12px var(--sans); letter-spacing: .02em; text-transform: none; }
  .console .account { font-size: 14px; }
  .console .account-window { font-size: 13px; }

  /* Session list: arrangement toggle and project filter. */
  .console .sessions-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .console .sessions-heading-row .sessions-heading { margin: 0; }
  .console .archived-filter { font-size: 14px; }
  .origin-filter { margin-top: 10px; }
  .origin-filter select { height: 36px; padding: 0 10px; border-radius: 10px; font-size: 14px; }
  .origin-hidden { padding: 6px 10px; font-size: 13px; border-radius: 14px; }
  .console .session-origin { font-size: 12px; margin-top: 4px; }
  .list-modes { display: flex; flex-shrink: 0; padding: 2px; border-radius: 9px; background: var(--hover); }
  .list-modes button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; }
  .list-modes button:hover { background: transparent; }
  .list-modes button[aria-pressed="true"] { background: var(--surface); color: var(--paper); box-shadow: 0 1px 2px rgb(16 24 40 / .12); }
  .project-chips { display: flex; gap: 6px; margin: 10px -16px 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .project-chips::-webkit-scrollbar { display: none; }
  .project-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--paper); font-size: 14px; white-space: nowrap; }
  .project-chip:hover { background: var(--surface); }
  .project-chip span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  .project-chip[aria-pressed="true"] { border-color: var(--paper); background: var(--paper); color: var(--surface); }
  .project-chip[aria-pressed="true"] span { color: inherit; opacity: .7; }
  .console .project-heading { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin: 14px 0 0; padding: 0 10px; border: 0; background: transparent; color: var(--paper); text-align: left; font-size: 15px; font-weight: 600; }
  .console .project-heading:first-child { margin-top: 2px; }
  .console .project-heading:hover, .console .project-heading:active { background: transparent; }
  .console .project-heading .project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .console .project-heading .project-count { flex-shrink: 0; color: var(--muted); font-size: 13px; font-weight: 500; }
  .console .project-heading::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 20px; font-weight: 400; }
  .console .project-more { display: block; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--accent); text-align: left; font-size: 14px; font-weight: 500; }
  .console .project-more:hover, .console .project-more:active { background: var(--hover); }
  .console .project-back { min-height: 40px; margin: 0; padding: 0 8px; border: 0; background: transparent; color: var(--accent); font-size: 15px; }
  .console .project-back:hover { background: var(--hover); }
  .console .project-title { margin: 2px 10px 0; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
  .console .session { min-height: 60px; }
  .console[data-narrowed] #accounts { display: none; }

  /* Session view: a header with the title over one status line, quiet messages, a compact composer. */
  .conversation-top { min-height: 52px; }
  .conversation-top > div { display: flex; flex-direction: column; }
  .conversation-top h1 { order: -1; }
  .conversation-top .eyebrow { display: flex; align-items: center; gap: 6px; margin: 1px 0 0; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .conversation-top .eyebrow .session-dot { display: block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
  .conversation-top .eyebrow[data-connected="false"] .session-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
  .conversation h1 { font-size: 16px; -webkit-line-clamp: 1; }
  .conversation-back { width: 40px; }
  #interrupt { min-height: 32px; padding: 4px 12px; font-size: 14px; flex-shrink: 0; }
  #switch-account span { display: none; }
  #messages { padding: 14px 2px 8px; font-size: 16px; }
  #messages article { margin-bottom: 14px; }
  #messages article[data-role="assistant"] > span { display: none; }
  #messages article[data-role="user"] { max-width: 85%; padding: 9px 14px; border: 0; border-radius: 18px 18px 4px 18px; background: var(--accent-soft); }
  #messages article[data-role="user"] pre { font-size: 16px; line-height: 1.45; }
  #messages article[data-role="user"]:has(> img, > .message-image-open) { padding: 0; background: transparent; }
  #messages article img, #messages .message-image-open img { border-radius: 12px; }
  #messages .message-image-open { padding: 0; border: 0; background: transparent; }
  #messages .message-markdown { line-height: 1.6; }
  #messages .message-markdown :not(pre) > code { -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: .85em; }
  #messages .message-markdown pre { margin-left: -2px; margin-right: -2px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; -webkit-overflow-scrolling: touch; }
  #messages .message-markdown :is(ul, ol) { padding-left: 20px; }
  #messages .message-table { margin: 0 -2px; }
  #messages .message-table :is(th, td) { font-size: 14px; }
  #messages article[data-role="tool"] { margin: 4px 0; border: 0; border-radius: 10px; background: var(--hover); }
  #messages article[data-role="tool"] + article:not([data-role="tool"]) { margin-top: 14px; }
  #messages .tool-toggle { min-height: 36px; padding: 6px 10px; color: var(--muted); font-size: 13px; }
  #messages .tool-toggle:hover { background: transparent; }
  #messages .tool-toggle[aria-expanded="true"] { color: var(--paper); }
  #messages .tool-icon { width: 14px; height: 14px; }
  #messages .tool-details { max-height: 50vh; padding: 0 8px 8px; }
  #messages .tool-details > section { background: var(--surface); }
  #messages article[data-role="tool"] pre { font-size: 11.5px; }
  #messages .message-note { margin-bottom: 10px; padding: 0 4px; }

  #send { align-items: flex-end; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 22px; }
  #send textarea { height: 36px; min-height: 36px; max-height: 140px; padding: 7px 0; line-height: 22px; }
  #send > button { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; }
  .console #send { padding-left: 4px; }
  .console #send #composer-attach { border: 0; font-size: 24px; font-weight: 300; }
  /* One row that scrolls sideways: wrapped, nine files pushed the text box under the keyboard. */
  .console #composer-files { flex-wrap: nowrap; overflow-x: auto; padding: 10px 10px 2px 4px; gap: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .console .composer-file { flex-basis: 72px; width: 72px; height: 72px; border-radius: 12px; }
  .console #send .composer-file-remove { width: 24px; height: 24px; min-height: 24px; }
  #limit-banner { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
  #limit-banner[data-level="warning"] { display: flex; align-items: center; gap: 10px; }
  #limit-banner[data-level="warning"] p { flex: 1; color: var(--muted); }
  #limit-banner[data-level="warning"] p + * { margin-top: 0; }
  #limit-banner[data-level="warning"] .switch-open { min-height: 32px; padding: 0 10px; flex-shrink: 0; }
}

/* Images a tool returned, shown under its call. */
.tool-images { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px 10px; }
.tool-images .message-image-open { padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow: hidden; }
.tool-images img { display: block; max-width: min(100%, 360px); max-height: 260px; width: auto; height: auto; }

/* An artifact link in a message: a card with the page's title. */
a.artifact-card { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 2px 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--paper); text-decoration: none; vertical-align: middle; }
a.artifact-card:hover { border-color: var(--accent); }
.artifact-card-icon { color: var(--accent); }
.artifact-card-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-card-note { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Files Claude sent the person, under the call that sent them. */
.sent-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px 10px; }
.sent-files-caption { flex-basis: 100%; margin: 0; color: var(--paper); }
.sent-files .message-image-open { padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); overflow: hidden; }
.sent-files img { display: block; max-width: min(100%, 720px); max-height: 540px; width: auto; height: auto; }
.sent-files-video { display: block; max-width: min(100%, 720px); max-height: 540px; border: 1px solid var(--line); border-radius: 6px; background: #000; }
/* A delivered file reads as part of Claude's reply, not as a tool call (toolResult()). */
#messages article[data-role="tool"][data-sent-files] { border: 0; background: transparent; overflow: visible; }
#messages article[data-role="tool"][data-sent-files] > .tool-head, #messages article[data-role="tool"][data-sent-files] > .tool-details { display: none; }
#messages article[data-role="tool"][data-sent-files] .sent-files { padding: 0; }
.sent-files .message-file-open:disabled { opacity: .7; cursor: default; }

/* Continue in a terminal. */
#terminal { color: var(--paper); background: var(--surface); border-color: var(--line); }
#terminal-dialog { width: min(92vw, 640px); border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--surface); color: var(--paper); }
#terminal-dialog h2 { margin: 0 0 8px; font-size: 18px; }
#terminal-dialog pre { margin: 10px 0; padding: 10px; border-radius: 6px; background: var(--bg); font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* A search result's matching passage, under the session's name. */
.session-match { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 12px; color: var(--muted); }

/* Accounts page (static/accounts.js) */
.library-link + .library-link { margin-left: 0; }
.accounts-page { max-width: 1080px; margin: 0 auto; padding: 32px 16px 64px; display: grid; gap: 32px; }
.accounts-page h1 { font-size: 28px; margin: 0 0 8px; }
.accounts-page h2 { font-size: 16px; margin: 24px 0 8px; }
.acct-muted { color: var(--muted); font-size: 13px; }
.acct-message:empty { display: none; }
.acct-message { font-size: 14px; }
.acct-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(180px, 1.4fr) minmax(70px, .6fr) auto; gap: 8px 16px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin-bottom: 6px; }
.acct-name { display: grid; min-width: 0; }
.acct-name strong { overflow-wrap: anywhere; }
.acct-note { color: var(--warn); font-size: 12px; }
.acct-hosts { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; }
.acct-hosts .session-machine { --hue: 215; }
.acct-hosts .session-machine[data-signed="false"] { --hue: 0; opacity: .7; }
.acct-usage { display: grid; gap: 4px; font-size: 13px; }
.acct-check { justify-self: start; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: none; font-size: 12px; }
.acct-check:hover:not(:disabled) { color: var(--paper); background: var(--hover); }
.acct-window { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.acct-window .account-bar { flex-basis: 100%; }
.acct-window[data-level="warning"] .account-bar { background: linear-gradient(to right, var(--warn) var(--used), var(--line) var(--used)); }
.acct-window[data-level="blocked"] .account-bar { background: var(--danger); }
.acct-spare { font-weight: 600; cursor: help; }
.acct-spare.acct-muted { font-weight: 400; }
.acct-spare-calc { display: block; font-weight: 400; font-size: 11px; }
.acct-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.acct-switch input { width: 18px; height: 18px; margin: 0; }
.acct-add, .offline-form { display: grid; gap: 12px; max-width: 520px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.acct-add h2, .offline-form h2 { margin: 0; }
.acct-add p, .offline-form p { margin: 0; }
.acct-add label, .offline-form label { display: grid; gap: 6px; font-size: 14px; }
.acct-add select, .acct-add input, .offline-form select, .offline-form input, .offline-form textarea { width: 100%; min-width: 0; min-height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--paper); font: inherit; }
.offline-form textarea { min-height: 140px; resize: vertical; font: 13px/1.5 var(--mono); }
#session-title { cursor: text; }
#session-title .title-input { font-size: inherit; }
.acct-machines { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; border: 0; font-size: 14px; }
.acct-machines legend { padding: 0; margin-bottom: 6px; }
.acct-add .acct-machine { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.acct-add .acct-machine input { width: auto; min-height: 0; margin: 0; }
.acct-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.acct-status { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .acct-row { grid-template-columns: 1fr auto; }
  .acct-hosts, .acct-usage { grid-column: 1 / -1; }
}
.offline-queue { display: grid; gap: 6px; }
.offline-queue h2 { margin: 0; }
.offline-task { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) auto; gap: 6px 16px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; }
.offline-status { font-weight: 600; margin-right: 4px; }
.offline-task[data-status="running"] .offline-status, .offline-task[data-status="starting"] .offline-status { color: var(--accent); }
.offline-task[data-status="paused"] .offline-status { color: var(--warn); }
.offline-task[data-status="failed"] .offline-status { color: var(--danger); }
.offline-note { grid-column: 1 / -1; }
.offline-note pre { margin: 6px 0 0; padding: 8px; max-height: 240px; overflow: auto; border-radius: 6px; background: var(--bg); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
button.offline-action, .offline-form [data-save-preset], .offline-form [data-delete-preset] { min-height: 32px; padding: 4px 10px; color: var(--paper); background: var(--bg); border-color: var(--line); }
@media (max-width: 760px) { .offline-task { grid-template-columns: 1fr; } }
.offline-task[data-status="expired"] .offline-status, .schedule-run[data-status="expired"] .offline-status, .schedule-run[data-status="failed"] .offline-status { color: var(--danger); }
.schedule-run { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.schedule-run[data-status="skipped"] .offline-status { color: var(--warn); }
.schedule-unread { color: var(--accent); }
.offline-stall { color: var(--warn); font-weight: 600; }
/* A shared conversation (/s/<token>): the console's message styles on a page of its own. */
.shared-session { padding: 24px 16px 48px; }
.shared-session > :is(.eyebrow, h1, .lede) { max-width: 760px; margin-left: auto; margin-right: auto; }
.shared-session > h1 { margin-top: 6px; margin-bottom: 16px; font-size: 22px; overflow-wrap: anywhere; }
.shared-session #messages { overflow: visible; padding: 0 max(0px, calc((100% - 760px) / 2)); }
.shared-session #messages article[data-role="user"] pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
#share-dialog h2 { margin: 0 0 12px; font-size: 18px; }
#share-dialog p { margin: 0 0 12px; line-height: 1.5; }
#share-link { display: flex; gap: 8px; margin-bottom: 12px; }
#share-link input { flex: 1; min-width: 0; font: 13px var(--mono); }