/* Every colour is a variable, so the page has two looks: dark (the default) and light, chosen by theme.js before
   the first paint. The dark values are the originals. */
:root{--bg:#101a21;--surface:#15232d;--raised:#1b2a34;--hover:#1e2f3a;--raised-2:#22313a;--tip-bg:#243641;--line-strong:#31424c;--line:#354853;--line-soft:#2b3b44;--line-faint:#3c5260;--text:#e9efef;--text-strong:#fff;--text-2:#d6e0e4;--text-3:#c9d4dc;--muted:#a6b8c3;--muted-2:#8da5b2;--muted-3:#8ca3ae;--muted-4:#8299a5;--muted-5:#7f939e;--muted-6:#78929f;--faint:#6b8494;--fainter:#5b7380;--accent:#b3efd5;--accent-bg:#244137;--accent-bg-2:#224137;--on-accent:#102c22;--warn:#e5c76b;--warn-strong:#ffd493;--warn-bg:#2b2415;--on-warn:#241c0c;--danger:#ffb4a8;--on-danger:#3a0f09;--tmux-bg:#4e9a06;--tmux-text:#172317;--shadow:#0008;--shade:#0009;--shadow-strong:#000a;--muted-rgb:166,184,195;--accent-rgb:179,239,213;--tip-text:#e9efef}
:root[data-theme=light]{color-scheme:light;--bg:#ffffff;--surface:#ffffff;--raised:#eef1f3;--hover:#e9edf0;--raised-2:#e6eaed;--tip-bg:#26333b;--line-strong:#cfd7dc;--line:#d5dce1;--line-soft:#e3e8eb;--line-faint:#b8c4cb;--text:#17212a;--text-strong:#0d151b;--text-2:#25323b;--text-3:#33424c;--muted:#51626d;--muted-2:#5f717c;--muted-3:#6a7b86;--muted-4:#6a7b86;--muted-5:#6f808a;--muted-6:#6f808a;--faint:#7c8c96;--fainter:#8a99a3;--accent:#0b7a55;--accent-bg:#d9f2e7;--accent-bg-2:#d9f2e7;--on-accent:#ffffff;--warn:#8f6400;--warn-strong:#7a4d00;--warn-bg:#fff1cf;--on-warn:#ffffff;--danger:#b3261e;--on-danger:#ffffff;--tmux-bg:#4e9a06;--tmux-text:#172317;--shadow:#0f1d2626;--shade:#0f1d2640;--shadow-strong:#0f1d2633;--muted-rgb:81,98,109;--accent-rgb:11,122,85;--tip-text:#f2f5f6}
:root{color-scheme:dark;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line-strong);border-radius:12px;background:var(--raised);color:var(--text);padding:12px}button:disabled{opacity:.4;cursor:wait}.primary{background:var(--accent);color:var(--on-accent);border:0;font-weight:700}.quiet{padding:8px 12px;background:transparent;color:var(--muted);font-size:13px}.eyebrow{font-size:12px;letter-spacing:3px;color:var(--accent);font-weight:700;margin:0 0 12px}h1{font-size:27px;letter-spacing:-1px;margin:0}.login{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at top right,var(--accent-bg-2) 0,transparent 55%),var(--bg)}.card{width:100%;max-width:430px}.card h1{font-size:44px;line-height:1.12;margin:24px 0}.mark{font-size:40px;color:var(--accent);margin-bottom:35px}.muted{color:var(--muted);line-height:1.6}.card form{margin-top:36px;display:grid;gap:12px}label{font-size:13px;color:var(--text-3)}input,textarea{background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text-strong);padding:14px;font-size:16px;min-width:0}input:focus,textarea:focus{outline:2px solid var(--accent)}.fine{font-size:12px;color:var(--muted-4);margin-top:32px}.workspace{max-width:1150px;margin:auto;height:100dvh;display:flex;flex-direction:column;padding:24px 24px max(12px,env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.session{display:flex;align-items:center;gap:10px;padding:14px 0;border-top:1px solid var(--line-soft)}.dot{width:8px;height:8px;border-radius:50%;background:var(--muted-3)}.connected .dot{background:var(--accent)}#status{margin-left:auto;font-size:12px;color:var(--muted)}.hint{font-size:12px;color:var(--muted-2);margin-bottom:16px;line-height:1.5}#terminal{flex:1;min-height:180px;background:var(--bg);overflow:hidden}.keys{display:flex;gap:6px;margin:12px 0}.keys button{flex:1;padding:10px 3px;font-size:13px}#compose{display:flex;gap:10px}textarea{resize:none;flex:1}#send{align-self:stretch}footer{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted-6);margin-top:8px}@media(max-width:600px){.workspace{padding:18px 12px max(8px,env(safe-area-inset-bottom))}h1{font-size:23px}.eyebrow{font-size:10px;margin-bottom:8px}.hint{margin-bottom:8px}header{margin-bottom:10px}.card h1{font-size:39px}}

[hidden]{display:none!important}.divider{text-align:center;color:var(--muted-4);margin:20px 0}.card #email-form{margin-top:0}.card #code-form{margin-top:12px}#email-feedback:empty,#feedback:empty{display:none}

.lifecycle{padding:14px;border:1px solid var(--line-strong);border-radius:12px;margin-bottom:12px}.lifecycle p{margin:0 0 10px;font-size:13px;line-height:1.5}.lifecycle button{width:100%}.shutdown{color:var(--muted)}.shutdown.soon{color:var(--warn-strong)}.session{flex-wrap:wrap}#status{max-width:100%}button:disabled,textarea:disabled{cursor:default}.hint{margin-bottom:10px}@media(max-width:600px){.session strong{font-size:14px}#status{font-size:11px}.lifecycle{padding:10px}.lifecycle p{font-size:12px}.workspace{min-height:100dvh;height:auto}#terminal{height:35dvh;min-height:200px}}

.vm-heading,.vm-actions,.workspace-row,.session-row{display:flex;align-items:center;gap:10px}.vm-heading{justify-content:space-between;margin-bottom:10px}.vm-heading span{font-size:12px;color:var(--muted)}.lifecycle .vm-actions button{width:auto}.lifecycle{margin-bottom:14px}.workspace-row{flex-wrap:wrap}.workspace-row select{flex:1;min-width:120px}.session-row{justify-content:space-between;margin:12px 0 8px}select{font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface);color:var(--text)}#session-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}.session-tab{white-space:nowrap;font-size:12px;padding:10px 12px}.session-tab.selected{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}.session{margin-top:8px}#agent-label{overflow-wrap:anywhere}dialog{color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:18px;width:min(440px,calc(100% - 32px));padding:24px}dialog::backdrop{background:var(--shade)}dialog form{display:grid;gap:12px}dialog h2{margin:0}dialog p{font-size:13px;margin:0;line-height:1.5}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}.workspace{height:auto;min-height:100dvh}#terminal{height:45dvh;min-height:240px;flex:auto}#feedback-session{min-height:18px}.session #status{margin-left:auto}footer{gap:12px;flex-wrap:wrap}@media(max-width:600px){.workspace-row label{width:100%}#agent-label{font-size:13px;max-width:65%}.session{gap:8px}#terminal{height:40dvh}.lifecycle p{font-size:11px}.vm-heading{font-size:14px}header{margin-bottom:12px}.workspace-row button{font-size:12px}}

.terminal-line{display:flex;align-items:flex-start;gap:10px;border-top:1px solid var(--line);padding:10px 0 0;font:14px Menlo,monospace}.terminal-line>span{color:var(--accent);padding-top:4px}.terminal-line #terminal-input{font:inherit;line-height:1.5;border:0;border-radius:0;background:transparent;padding:0 4px;resize:none;min-height:26px;max-height:180px;outline:none}.terminal-line:focus-within{border-color:var(--accent)}.terminal-help{font-size:11px;color:var(--muted-6);margin:4px 0 0}.terminal-line #terminal-input:disabled{opacity:.5}@media(max-width:600px){.terminal-line #terminal-input{font-size:16px}}

#terminal-viewport{overflow:hidden;flex:none}#terminal-viewport #terminal{flex:none}#agent-footer{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.5 Menlo,monospace;color:var(--warn);padding:6px 0 2px}.keys button{min-width:0}

#agent-footer .tmux-status{background:var(--tmux-bg);color:var(--tmux-text);width:100%;margin-top:2px;white-space:pre-wrap;overflow-wrap:anywhere}

#terminal-viewport{position:relative}#back-live{position:absolute;right:22px;bottom:10px;z-index:5;background:var(--raised);color:var(--accent);border-color:var(--accent);box-shadow:0 2px 10px var(--shadow)}#back-live[hidden]{display:none}#terminal .xterm-viewport{overscroll-behavior:contain}

/* xterm measures one glyph snapped to 1/64px, so full-width rows run a few px long; let the last glyph paint into the scrollbar gutter instead of clipping it. */
#terminal .xterm-rows>div{overflow:visible!important;clip-path:inset(0 -12px 0 0)}
#selection-bar{position:absolute;left:8px;bottom:10px;z-index:6;display:flex;gap:6px}#selection-bar[hidden]{display:none}#selection-bar button{padding:8px 12px;font-size:13px;background:var(--raised);color:var(--accent);border-color:var(--accent);box-shadow:0 2px 10px var(--shadow)}#terminal{-webkit-touch-callout:none}
#attach-image{flex:none}
/* The on-screen key row exists for touch devices with no physical Esc, Tab or arrows. A precise hovering
   pointer means a real keyboard is present, so hide it there; anything the browser cannot confirm keeps it. */
@media (pointer:fine) and (hover:hover){.keys{display:none}}
/* While a file is over the window, show that the page will take it rather than navigate to it. */
body.dropping .workspace{outline:2px dashed var(--accent);outline-offset:-6px;border-radius:12px}
#workspace-path{margin:2px 0 4px}
/* Session tabs: a dot carries the state, so the word does not have to. Ended is dim rather than red;
   a finished session is a normal outcome, not a failure. */
.session-tab{display:inline-flex;align-items:center;gap:8px}
.session-tab .dot{flex:none;background:var(--faint)}
.session-tab .dot.live{background:var(--accent)}
.row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* The VM card is reference, not a control surface, once things are running: on a phone it costs more
   screen than the terminal can spare, so it collapses to one line. */
#vm-panel>summary{cursor:pointer;list-style:none;font-size:13px;color:var(--muted);padding:2px 0}
#vm-panel>summary::-webkit-details-marker{display:none}
#vm-panel>summary::after{content:' ▾';color:var(--faint)}
#vm-panel[open]>summary{margin-bottom:10px}
#vm-panel[open]>summary::after{content:' ▴'}
@media(max-width:600px){
 #workspace-path{display:none}
 #feedback-session.idle{display:none}
 #terminal{height:56dvh}
}
#terminal-input.secret{-webkit-text-security:disc;text-security:disc}
/* The two lines under the input are reference, not content: small enough to ignore while reading output. */
.terminal-help{font-size:10px;margin-top:3px}
footer{font-size:10px;margin-top:4px}
/* The VM line lives in the header bar: left of Sign out, and out of the way of the terminal. */
header{flex-wrap:wrap;gap:10px}
#vm-panel{margin:0 0 0 auto}
#vm-panel[open]{flex-basis:100%;margin-left:0}
@media(max-width:600px){#vm-panel{margin-left:0;flex-basis:100%}}
/* Everything that was a header is now one menu at the end of the session row: a dot for the machine's
   state, and a panel that floats rather than pushing the terminal down. */
.session-row{margin-top:max(8px,env(safe-area-inset-top))}
#menu{position:relative}
#menu>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:12px;color:var(--muted);font-size:13px}
#menu>summary::-webkit-details-marker{display:none}
#menu>summary .dot{background:var(--faint)}
#menu>summary .dot.live{background:var(--accent)}
#menu>summary .dot.busy{background:var(--warn)}
.menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:240px;display:grid;gap:10px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px var(--shade)}
.menu-panel p{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.menu-panel p:empty{display:none}
.menu-panel .vm-actions,.menu-panel form{display:flex;gap:8px}
.menu-panel .vm-actions button,.menu-panel form button{width:100%}
/* The session heading leads the page: name on the left, every control on the right, tabs beneath it. */
.session{border-top:none;flex-wrap:wrap;padding-top:max(10px,env(safe-area-inset-top));margin-top:0}
#session-tabs{padding-top:2px}
/* The terminal cannot be a flex item that grows: syncTerminalFooter crops the agent's own prompt out of
   view by setting an inline height on the viewport, and flex distribution ignores that height, which left
   the prompt drawn twice. So the height stays definite, just a much larger share than the 45dvh it was
   before the chrome above it was removed. */
#terminal{height:62dvh;min-height:200px}
/* The session name is a control now, but it is still the page's heading and should read as one. */
.rename-label{font:inherit;font-weight:700;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.rename-label:disabled{cursor:default;opacity:1}
/* The help line is the status line: silent until an upload or an error has something to report. */
.terminal-help:empty{display:none}
/* The heading is the first thing on the page, so it starts near the top of it. The safe-area inset is
   what keeps it clear of a phone's status bar; on a desktop that resolves to nothing. */
.workspace{padding-top:max(6px,env(safe-area-inset-top))}
.session{padding:2px 0 6px}
.menu-panel>button{width:100%}

/* The terminal fills whatever the rest of the page leaves. Its own height is set in pixels from the
   slot, and the slot is cropped with max-height, so hiding the agent's prompt never resizes the pane. */
.workspace{height:100dvh;min-height:0}
#terminal-viewport{flex:1;min-height:0}
#terminal{position:absolute;top:0;left:0;right:0;height:100%}
/* The session chevron sits with the name it belongs to, and opens under it rather than to the right. */
#sessions{position:relative}
#sessions>summary{cursor:pointer;list-style:none;padding:2px 6px;color:var(--muted-2);font-size:12px;border-radius:8px}
#sessions>summary::-webkit-details-marker{display:none}
#sessions[open]>summary{color:var(--accent)}
#sessions .menu-panel{left:0;right:auto;min-width:220px;gap:6px}
#sessions .session-tab{width:100%;justify-content:flex-start}
#sessions .session-tab.selected{border-color:var(--accent)}
/* Who is signed in and the way out, as one row: the address needs no label beside its own Sign out. */
.menu-panel form.account-row{align-items:center;gap:10px;border-top:1px solid var(--line-soft);padding-top:10px}
.menu-panel .account{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
.menu-panel form.account-row button{width:auto;flex:none;border:0;padding:4px 2px;font-size:12px;color:var(--accent)}
/* The mark is the app icon's own arrow. It costs the top row one glyph; the wordmark joins it only where there is width to spare. */
.brand{display:inline-flex;align-items:center;flex:none;color:var(--accent)}
.brand svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}
.session.idle>.agent-icon,.session.idle>#agent-label{display:none}
/* The row's controls are icons: the machine (amber when it needs attention), the account. Each is a
   40px target; their names live in aria-label and title, and the menus they open are in words. */
.icon-button,#menu>summary.icon-button,#account-menu>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line-strong);border-radius:12px;background:transparent;color:var(--faint);font-size:12px;font-weight:600}
.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-button .led{stroke-width:2.6}
#new-session.icon-button{color:var(--muted)}
#account-menu{position:relative}#account-menu>summary::-webkit-details-marker{display:none}
/* A running VM is the ordinary case, and the chip only shows while it runs: it is as quiet as the account beside
   it. Colour is kept for when it wants looking at: time nearly up, or a restart under way. */
#menu>summary.live{color:var(--muted)}#menu>summary.busy{color:var(--warn)}
#vm-clock:empty{display:none}
.icon-button.avatar{border-radius:50%;padding:0;width:40px;color:var(--accent);font-size:14px}
.menu-panel .vm-actions{flex-wrap:wrap}.menu-panel .vm-actions .primary{flex-basis:100%}
#status:empty{display:none}
/* The status words used to push the controls to the right edge; with no words to show, the controls do it themselves. */
#status:empty+.row-actions{margin-left:auto}
@media(max-width:600px){.icon-button,#menu>summary.icon-button,#account-menu>summary{min-width:36px;height:36px}.icon-button.avatar{width:36px}}
/* Both menus share one shape: a header that says what this is and how it is, then plain rows to act on it.
   Rows are left-aligned with a small icon, as in any menu; nothing in a menu is a stretched button. */
.menu-panel{min-width:230px;gap:6px;padding:8px}
.menu-head{display:grid;gap:2px;padding:8px 10px 10px;border-bottom:1px solid var(--line-soft)}
.menu-title{font-size:13px;font-weight:600;color:var(--text)}
.menu-state{font-size:12px;color:var(--muted-2);line-height:1.45}
.menu-panel>p{padding:0 10px}
.menu-items{display:grid;gap:2px;margin:0}
.menu-panel .menu-items .menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font-size:13px;font-weight:500;text-align:left}
.menu-item:hover:not(:disabled),.menu-item:focus-visible{background:var(--hover)}
.menu-item[hidden]{display:none!important}
.menu-item svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted-2)}
.menu-items:not(:has(.menu-item:not([hidden]))){display:none}
.menu-head:has(+p:empty+p:empty+.menu-items:not(:has(.menu-item:not([hidden])))),.menu-head:last-child{border-bottom:0}
.account-head{grid-template-columns:auto 1fr;align-items:center;gap:10px}
.avatar-lg{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-bg);color:var(--accent);font-size:13px;font-weight:700}
.menu-panel .account{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--text-2)}
.menu-state{white-space:pre-line}
.menu-head:has(.menu-state:empty){display:none}
#new-session[hidden]{display:none}
#workspace-action{display:inline-flex;align-items:center;gap:9px}
#workspace-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#workspace-action:not(.power) svg{display:none}
/* The empty page borrows the shape of the agent's welcome that will replace it: a small block at the top
   left, in the terminal's own type, rather than a card floating in the middle. */
#empty-state{position:absolute;inset:0;z-index:4;padding:6px 0 0;background:var(--bg);font:13px/1.45 Menlo,monospace}
#empty-state[hidden]{display:none}
#empty-state button{width:auto}
#empty-state button[hidden]{display:none}
.welcome{display:flex;align-items:flex-start;gap:14px}
.welcome-mark{flex:none;width:46px;height:46px}
.welcome-mark rect{fill:var(--raised)}.welcome-mark path{fill:none;stroke:var(--accent);stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.welcome-text p{margin:0;color:var(--muted-2)}
.welcome-text .welcome-name{color:var(--text);font-weight:700}
.welcome-text p:empty{display:none}
.welcome-actions{margin:14px 0 0 60px}
#empty-state.waiting #workspace-action,#empty-state.waiting #empty-new-session{display:none}
.session.idle .brand,.session.idle .crumb-sep{display:none}
#menu[hidden]{display:none}
/* Quieter, and closer to the terminal it stands in for: the mark is the height of its two lines, the state and
   the account share one dim line, and the step is an outlined control in the page's accent rather than a
   filled pill. Enter takes it on a keyboard, which the hint shows only where there is one. */
.welcome{gap:12px;align-items:center}
.welcome-mark{width:38px;height:38px}
.welcome-actions{margin:12px 0 0 50px}
/* The step is an outlined button. Its border is the accent itself at partial strength: an earlier flat
   grey-green line read as muddy, which was the border's fault and not the button's. */
#empty-state .welcome-actions button{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;background:transparent;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.38);border-radius:9px;font:500 13px/1.2 Menlo,monospace;transition:background-color .12s,border-color .12s}
@media(hover:hover){#empty-state .welcome-actions button:hover:not(:disabled){background:rgba(var(--accent-rgb),.09);border-color:rgba(var(--accent-rgb),.8)}}
#empty-state .welcome-actions button:active:not(:disabled){background:rgba(var(--accent-rgb),.16)}
#empty-state .welcome-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#empty-state .welcome-actions button svg{stroke-width:2}
#empty-state .welcome-actions #cancel-start{color:var(--muted);border-color:rgba(var(--muted-rgb),.32)}
@media(hover:hover){#empty-state .welcome-actions #cancel-start:hover{background:rgba(var(--muted-rgb),.1);border-color:rgba(var(--muted-rgb),.6)}}
.welcome-actions:not(:has(button:not([hidden]))){display:none}
/* Instant tooltips for the row's controls. The browser's own title tooltip waits about a second; these show at
   once, only where there is a pointer to hover with, and step aside while that control's menu is open. */
[data-tip]{position:relative}
@media(hover:hover) and (pointer:fine){
 [data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;z-index:30;padding:6px 10px;border-radius:8px;background:var(--tip-bg);border:0;box-shadow:0 6px 18px var(--shadow-strong);color:var(--tip-text);font:500 12px/1.35 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;white-space:pre;pointer-events:none}
 details[open]>summary[data-tip]::after{display:none}
}
#empty-state.settling button:disabled{opacity:1}
/* Attach is an icon like the row's controls: a picture with a plus. Its tooltip opens upward, being at the foot of the page. */
#attach-image.icon-button{min-width:36px;height:34px;padding:0 8px;color:var(--muted);border-radius:10px}
#attach-image.icon-button svg{width:20px;height:20px}
#attach-image[data-tip]:hover::after,#attach-image[data-tip]:focus-visible::after{top:auto;bottom:calc(100% + 8px)}
/* opacity on a disabled button would fade its tooltip with it, so only the icon and border are dimmed */
#attach-image:disabled{opacity:1;border-color:var(--raised-2)}#attach-image:disabled svg{opacity:.4}
/* The account is a person, drawn like the row's other icons; the initial lives beside the address inside its menu. */
#account-menu>summary.icon-button{color:var(--muted)}
/* The row's icons stand without boxes: a border on every control was weight that said nothing. They are still
   40px targets, and they answer the pointer, an open menu and keyboard focus with a soft fill or a ring. */
.icon-button,#menu>summary.icon-button,#account-menu>summary,#attach-image.icon-button{border-color:transparent;transition:background-color .12s}
@media(hover:hover){.icon-button:hover:not(:disabled),#menu>summary.icon-button:hover,#account-menu>summary:hover{background:var(--raised)}}
#menu[open]>summary.icon-button,#account-menu[open]>summary{background:var(--raised)}
.icon-button:focus-visible,#menu>summary.icon-button:focus-visible,#account-menu>summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#attach-image:disabled{border-color:transparent}
/* With the icons unboxed, a bordered End session would be the loudest thing in the row, and it is the destructive one. */
.row-actions>#end-session,.row-actions>#reconnect-session{border-color:transparent;transition:background-color .12s}
@media(hover:hover){.row-actions>#end-session:hover:not(:disabled),.row-actions>#reconnect-session:hover:not(:disabled){background:var(--raised)}}
/* The welcome block's signs of life: a dot for the machine's state, the boot as a log while it starts, and the
   sessions a start will bring back. All of it in the terminal's type and none of it decoration. */
.state-dot{display:inline-block;width:7px;height:7px;margin:0 9px 1px 1px;border-radius:50%;background:var(--fainter);vertical-align:middle}
.state-dot.busy{background:var(--warn);animation:ps-pulse 1.3s ease-in-out infinite}.state-dot.live{background:var(--accent)}
@keyframes ps-pulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.state-dot.busy{animation:none}}
#boot-log,#resume-items{list-style:none;margin:0;padding:0}
#boot-log{margin:10px 0 0 50px;color:var(--fainter)}#boot-log[hidden]{display:none}
#boot-log li{display:flex;gap:9px}#boot-log .step-mark{flex:none;width:1.1em;text-align:center}
#boot-log .done{color:var(--muted-2)}#boot-log .done .step-mark{color:var(--accent)}
#boot-log .active{color:var(--text)}#boot-log .active .step-mark{color:var(--warn)}
#resume-list{margin:22px 0 0 50px;color:var(--muted-2)}#resume-list[hidden]{display:none}
.resume-head{margin:0 0 4px;color:var(--fainter);font-size:12px}
#resume-items li{display:flex;align-items:center;gap:8px;width:fit-content;max-width:300px;padding:1px 0}
/* Only the mark explains itself, as in the top row: a tip on the whole row read as a label beside the name. */
.resume-agent[data-tip]:hover::after{top:calc(100% + 6px)}
.resume-name{color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The agent's mark leads the row, as it leads the top row; greyed, because nothing is running yet. */
.resume-agent{width:16px;height:16px;margin-left:-1px}.resume-agent svg,.resume-agent img{width:15px;height:15px}
#feedback-session:empty{display:none}
#session-shared[hidden]{display:none}
/* Things that arrive late must not push the input around. (A global [hidden] rule is !important, so these
   two exceptions to it have to be as well.) The attach icon keeps its slot while hidden (it is
   taller than the text row), and a Claude session's footer line is held from the first paint. */
#attach-image[hidden]{display:inline-flex!important;visibility:hidden}
.reserve-footer #agent-footer[hidden]{display:block!important;visibility:hidden}
.reserve-footer #agent-footer[hidden]:empty::before{content:"\00a0"}
#terminal-viewport::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--ps-mask,0px);background:var(--bg);z-index:3;pointer-events:none}
.agent-icon{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;color:var(--faint)}
.agent-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.connected .agent-icon{color:var(--accent)}
.agent-icon img{display:block;width:18px;height:18px;filter:grayscale(1) opacity(.55)}.connected .agent-icon img{filter:none}
.agent-icon[data-tip]:hover::after{right:auto;left:0}
/* The session name, edited in place. Negative margins cancel the field's padding so the row keeps its height and
   the text stays where the label was. 16px on small screens because iOS zooms into anything smaller on focus. */
#rename-inline{font:inherit;font-weight:700;color:inherit;background:var(--surface);border:0;border-radius:8px;padding:4px 8px;margin:-4px 0 -4px -8px;outline:2px solid var(--accent);outline-offset:0;min-width:140px;max-width:min(60vw,520px)}
@media(max-width:600px){#rename-inline{font-size:16px}}
/* The row reads as a path: the app's mark, a separator, then the session (and, once an account can have several,
   the VM between them). The wordmark is left to the welcome block, the tab and the home-screen icon. */
.crumb-sep{flex:none;color:var(--line-faint);font-size:17px;font-weight:400;line-height:1;margin:0 1px;user-select:none}
.brand[data-tip]:hover::after{right:auto;left:0}
/* More time: a quiet note at the end of the row when the limit is reached, and a pill over the terminal when time is short. */
.menu-note{margin-left:auto;padding-left:14px;color:var(--muted-5);font-size:12px;font-weight:400}
.menu-item:disabled{opacity:1;color:var(--muted-5);cursor:default}
#time-up{position:absolute;top:10px;right:22px;z-index:6;display:flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:999px;background:var(--warn-bg);color:var(--warn-strong);font-size:13px;box-shadow:0 2px 10px var(--shadow)}
#time-up[hidden]{display:none}
#time-up button{min-height:0;padding:5px 11px;border:0;border-radius:999px;background:var(--warn-strong);color:var(--on-warn);font-size:13px;font-weight:600}
#time-up #time-up-dismiss{padding:5px 9px;background:transparent;color:var(--warn-strong);font-weight:400;font-size:15px;line-height:1}
/* One menu for sessions, opened from the chevron beside the name: the list to switch between, then what can be done. */
#sessions>summary{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border-radius:8px}
#sessions>summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){#sessions>summary:hover{background:var(--raised);color:var(--text-2)}}
#sessions .menu-panel{padding:6px;gap:0;min-width:230px}
#sessions .session-actions{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:4px}
#sessions #session-list:empty+.session-actions,#sessions #session-list:not(:has(.menu-item))+.session-actions{border-top:0;margin-top:0;padding-top:0}
.session-choice .agent-icon{width:16px;height:16px}.session-choice .agent-icon svg,.session-choice .agent-icon img{width:15px;height:15px}
.session-choice-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-choice.selected::after{content:"";margin-left:auto;flex:none;width:9px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-2px) rotate(-45deg)}
.session-choice.selected .agent-icon{color:var(--accent)}.session-choice.selected .agent-icon img{filter:none}
.menu-item.danger:hover:not(:disabled),.menu-item.danger:focus-visible{color:var(--danger)}.menu-item.danger:hover:not(:disabled) svg{color:var(--danger)}
/* While a command is typed into the agent's own prompt, its box ends in a rule of its own, right above the input's. */
.slash-mode .terminal-line{border-top-color:transparent}
/* The VM menu's header: a dot and a word for the state, and under it when the run ends. */
.menu-state-line{display:flex;align-items:center;color:var(--text-2);font-size:13px;font-weight:500}.menu-state-line .state-dot{margin:0 8px 0 1px}
.menu-state-time{display:block}
/* The page's own confirmation. */
#confirm-dialog{width:min(400px,calc(100% - 32px));padding:22px}
#confirm-dialog h2{font-size:17px;line-height:1.35;overflow-wrap:anywhere}
#confirm-dialog p{color:var(--muted);font-size:14px}
#confirm-dialog button{padding:10px 16px;border-radius:10px;font-size:14px}
#confirm-cancel{background:transparent}
#confirm-ok.danger-action{background:var(--danger);color:var(--on-danger)}
/* The new-workspace field: the fixed root in front, the name typed after it, and a line saying what is asked for. */
dialog form>*{min-width:0;max-width:100%}dialog{max-width:calc(100vw - 32px)}dialog select{width:100%}
.path-field{display:grid;grid-template-columns:minmax(0,auto) minmax(140px,1fr);align-items:stretch;gap:0}
.path-field[hidden]{display:none}
.path-prefix{min-width:0;padding:0 4px 0 14px;border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;background:var(--raised);color:var(--muted);font:14px/1 Menlo,monospace;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.path-field input{border-radius:0 12px 12px 0;font-family:Menlo,monospace;font-size:16px}
.field-hint{grid-column:1/-1;margin:6px 0 0;font-size:12px;color:var(--muted)}
.path-field input:invalid:not(:placeholder-shown){border-color:var(--danger)}
/* Send, for touch screens, next to the attach button. Pointers with a keyboard press Enter. */
#send-line{flex:none;min-width:36px;height:34px;padding:0 8px;border-radius:10px;color:var(--accent);background:var(--accent-bg)}
#send-line svg{width:20px;height:20px}
#send-line[hidden]{display:none}
@media (pointer:fine) and (hover:hover){#send-line{display:none}}
/* The New session dialog's choices, drawn by the page instead of the browser's own menus. */
dialog select[hidden]{display:none}
.field-popover{position:relative}
.field-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font-size:15px}
.field-summary::-webkit-details-marker{display:none}
.field-summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
.field-popover[open] .field-summary{border-color:var(--accent)}
.field-popover .menu-panel{left:0;right:0;top:calc(100% + 6px);min-width:0;padding:6px;gap:0;max-height:260px;overflow:auto}
.field-popover .menu-item.selected{color:var(--accent)}
.segmented{display:flex;gap:6px}
.segmented [role=radio]{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:10px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font-size:14px;font-weight:500}
/* The chosen segment is outlined, not tinted: each mark keeps its own colour (OpenAI's is monochrome, Claude's orange). */
.segmented [role=radio][aria-checked=true]{border-color:var(--accent);background:var(--raised);color:var(--text)}
.segmented [role=radio][aria-checked=true] .agent-icon{color:var(--text)}.segmented [role=radio][aria-checked=true] .agent-icon img{filter:none}
.segmented [role=radio]:disabled{opacity:.35;cursor:not-allowed}
.segmented .agent-icon{width:16px;height:16px}.segmented .agent-icon svg,.segmented .agent-icon img{width:15px;height:15px}
/* A filled mark (OpenAI's) among stroked glyphs: no stroke, and a touch smaller so it weighs the same. */
.agent-icon svg.mark-fill{stroke:none;fill:currentColor;width:15px;height:15px}
/* A logo is not recoloured by the connection: connected it takes the text colour, otherwise the usual grey. */
.connected .agent-icon:has(svg.mark-fill),.session-choice.selected .agent-icon:has(svg.mark-fill){color:var(--text)}
/* Paints over rows of the agent's screen that the page stands in for (Codex's composer before it reaches the bottom). */
#row-cover{position:absolute;left:0;right:0;background:var(--bg);z-index:3;pointer-events:none}#row-cover[hidden]{display:none}