@font-face{font-family:Space;src:url('space-grotesk.woff2') format('woff2');font-display:swap}
@font-face{font-family:Plex;src:url('ibm-plex-mono.woff2') format('woff2');font-display:swap}
/* The Office studio paints its monitors and shirts with the desktop family names. */
@font-face{font-family:"Space Grotesk";src:url('space-grotesk.woff2') format('woff2');font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('ibm-plex-mono.woff2') format('woff2');font-display:swap}

/* Launchpad v5 tokens, dark first. app.js mirrors the resolved theme onto <html>; before it
   runs, the system preference decides. The --lp-* names are read by the Office studio. */
:root{color-scheme:dark;--bg:#0c0d0f;--panel:#141518;--control:#1f2125;--line:#26282c;--edge:#363940;--ink:#eceef1;--body:#c2c6cd;--muted:#979ca5;--accent:#7fd8a0;--accent-text:#7fd8a0;--focus:var(--ink);--brand-ink:#0c0d0f;--live:#b29cff;--review:#5dd3bf;--starred:#f4ce58;--today:#7fbcff;--error:#f2705f;--attention:#f0a65a;--terminal:#111214;--codex:#979ca5;--claude:#ff5570;--opencode:#58cfe0;--antigravity:#e08ff0;--action-ink:#0c0d0f;--font:Space,system-ui,sans-serif;--mono:Plex,ui-monospace,monospace;--lp-canvas:var(--bg);--lp-surface:var(--panel);--lp-line:var(--line);--lp-text:var(--ink);--lp-muted:var(--muted)}
:root[data-theme=light]{color-scheme:light;--bg:#e6e8eb;--panel:#f6f7f8;--control:#eceef1;--line:#dcdfe3;--edge:#c4c8ce;--ink:#15171a;--body:#33373e;--muted:#50565e;--accent:#7fd8a0;--accent-text:var(--ink);--focus:var(--ink);--brand-ink:#0c0d0f;--live:#6843cf;--review:#08705f;--starred:#8f6200;--today:#286ca6;--error:#b8372c;--attention:#a15406;--terminal:#ffffff;--codex:#50565e;--claude:#c01a42;--opencode:#056c7e;--antigravity:#9b2ea8;--action-ink:#ffffff}
@media(prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light;--bg:#e6e8eb;--panel:#f6f7f8;--control:#eceef1;--line:#dcdfe3;--edge:#c4c8ce;--ink:#15171a;--body:#33373e;--muted:#50565e;--accent:#7fd8a0;--accent-text:var(--ink);--focus:var(--ink);--brand-ink:#0c0d0f;--live:#6843cf;--review:#08705f;--starred:#8f6200;--today:#286ca6;--error:#b8372c;--attention:#a15406;--terminal:#ffffff;--codex:#50565e;--claude:#c01a42;--opencode:#056c7e;--antigravity:#9b2ea8;--action-ink:#ffffff}}
/* --accent is the VibeiDE logo green (#7fd8a0) in both themes, for fills, marks and outlines.
   Words in the accent use --accent-text (ink on light, where mint would not read), and focus
   rings --focus. Dark ink (--brand-ink) sits on the green. */
/* Below the last tray: its own 8px gutter plus what the home indicator needs beyond it. */
:root{--bottom-gap:max(0px,calc(env(safe-area-inset-bottom) - 12px))}
/* The selected project's dock colour, set by app.js for the resolved theme. */
:root{--project-accent:var(--project-accent-dark)}
/* The select chevron in each theme's muted ink. */
:root{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23979ca5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme=light]{--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2350565e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media(prefers-color-scheme:light){:root:not([data-theme]){--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2350565e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
:root[data-theme=light]{--project-accent:var(--project-accent-light)}
/* Keep nested scrollers pannable without browser pinch or double-tap zoom. */
*{box-sizing:border-box;touch-action:pan-x pan-y}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent}
a{color:var(--accent-text)}
button,input,select,textarea{font:inherit}
button,.button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--edge);background:transparent;color:var(--ink);padding:8px 12px;text-decoration:none;cursor:pointer;border-radius:0;touch-action:pan-x pan-y}
button:disabled{opacity:.5;cursor:default}
.primary{border-color:var(--accent);color:var(--accent)}
.quiet{border-color:transparent}
.danger{color:var(--error)}
button[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text)}
/* Touch focus must not fall back to the browser's blue ring. Keyboard focus stays neutral. */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* 16px keeps iOS from zooming into a focused field, so fields stay 16px while the rest of the
   phone text is 15px and smaller. */
input,select,textarea{max-width:100%;width:100%;background:var(--terminal);color:var(--ink);border:1px solid var(--edge);padding:9px 12px;min-height:40px;border-radius:0;font-size:16px;line-height:1.25}
textarea{resize:none;line-height:1.55}
/* iOS draws a native select at its own height and ignores its padding, which put the Model and
   Effort labels over the chosen value. The page draws selects itself, chevron included. */
select{-webkit-appearance:none;appearance:none;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px;padding-right:30px}
/* Native selects can retain focus after a phone picker closes. A surface tint marks focus
   for touch and keyboard users without adding a selection border. */
select:focus,.model-row select:focus,.row-select select:focus{outline:none;background-color:color-mix(in srgb,var(--ink) 8%,var(--panel));color:var(--ink)}
/* Flat settings rows keep focused selects transparent; the value uses neutral ink. */
.row-select select:focus{background-color:transparent}
input[type=checkbox]{accent-color:var(--accent);width:22px;min-width:22px;height:22px;min-height:22px;margin:1px 0}
label{display:block;color:var(--muted);font-size:13px}
label input,label select,label textarea{margin-top:6px}
small{display:block;color:var(--muted);font-size:12px}
h1,h2,p{margin:0}
h1{font-size:20px;line-height:1.3;font-weight:500}
h2{font-size:16px;font-weight:500}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.muted{font-size:13px;color:var(--muted)}

.shell{background:var(--bg);isolation:isolate;max-width:600px;min-height:100dvh;margin:auto;border-inline:1px solid var(--line);padding-top:env(safe-area-inset-top);padding-bottom:calc(152px + env(safe-area-inset-bottom))}
header.top{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;min-height:48px;background:var(--bg)}
/* The V mark, with the logo's own green tick. */
.brand{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel)}
.brand svg{display:block}
.identity{flex:1;min-width:0}
.identity strong{display:block;font-size:15px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#connection{font:11px/1.5 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#connection::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;background:var(--muted);vertical-align:1px}
body[data-online=true] #connection::before{background:var(--accent)}
.machine-switch{flex:0 1 132px;min-width:0}
.machine-switch select{margin:0;min-height:40px;padding:6px 28px 6px 8px;font:13px var(--mono);font-size:16px}
.icon-button{flex:0 0 auto;width:40px;min-height:40px;padding:0;color:var(--muted)}
.icon-button svg{display:block}
.icon-button:hover{color:var(--ink)}
.heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0}
.heading>span{font:11px/1.6 var(--mono);color:var(--muted)}
main{padding:0 16px}
section>p{margin:16px 0}
.intro{font-size:40px;line-height:1.15;padding-top:40px}
.stack{display:flex;flex-direction:column;gap:14px;margin-block:22px}

/* Queue | Office sits in the header row; projects live in the bottom tab bar. */
.workspace-bar{flex:0 0 auto}

/* Bottom project tabs: the desktop dock's order and colours, one or two letters each. The
   selected tab fills with its colour and a framed indicator springs across to it. */
.project-tabs{flex:0 0 auto;padding:4px 6px;background:var(--panel)}
.project-rail{position:relative;display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.project-rail::-webkit-scrollbar{display:none}
.project-tab{--chip-accent:var(--chip-dark);position:relative;z-index:1;flex:1 0 60px;max-width:88px;min-height:52px;padding:8px 2px 4px;display:grid;justify-items:center;align-content:center;gap:4px;border:0;background:transparent;color:var(--muted);scroll-snap-align:center;transition:transform .18s ease}
.project-tab:first-of-type{margin-left:auto}
.project-tab:last-of-type{margin-right:auto}
.project-tab:active{transform:scale(.92)}
:root[data-theme=light] :is(.project-tab,.project-card,.mosaic-cell,.overview-review){--chip-accent:var(--chip-light)}
[data-color="1"]{--chip-light:#2d63bb;--chip-dark:#3b82f6}
[data-color="2"]{--chip-light:#a33685;--chip-dark:#f04fc3}
[data-color="3"]{--chip-light:#0e7161;--chip-dark:#19c9ad}
[data-color="4"]{--chip-light:#745d18;--chip-dark:#f1c232}
[data-color="5"]{--chip-light:#ad3b4b;--chip-dark:#f05268}
[data-color="6"]{--chip-light:#4b6c1c;--chip-dark:#91cf35}
[data-color="7"]{--chip-light:#7052ae;--chip-dark:#9b72f2}
[data-color="8"]{--chip-light:#166b82;--chip-dark:#28bfe8}
[data-custom]{--chip-light:var(--custom-light);--chip-dark:var(--custom-dark)}
.tab-badge{position:relative;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--chip-accent);background:color-mix(in srgb,var(--chip-accent) 14%,transparent);color:var(--chip-accent);font:600 13px/1 var(--mono);transition:background-color .28s ease,color .28s ease,transform .42s cubic-bezier(.34,1.56,.64,1)}
/* The selected badge fills and pops slightly; it and its count stay inside the indicator frame. */
.project-tab[aria-pressed=true] .tab-badge{background:var(--chip-accent);color:var(--bg);transform:scale(1.06)}
.tab-count{position:absolute;top:-6px;right:-8px;min-width:15px;height:15px;padding:0 3px;display:grid;place-items:center;background:var(--live);color:var(--action-ink);font:600 9px/1 var(--mono);box-shadow:0 0 0 2px var(--tab-ground)}
.tab-count:empty{display:none}
/* Count top right, review mark bottom left; each ringed in the colour of the ground behind it. */
.project-tab{--tab-ground:var(--panel)}
.project-tab[aria-pressed=true]{--tab-ground:color-mix(in srgb,var(--project-accent,var(--accent)) 12%,var(--panel))}
.project-tab[data-review=true] .tab-badge::after{content:'';position:absolute;left:-4px;bottom:-3px;width:8px;height:8px;background:var(--review);box-shadow:0 0 0 2px var(--tab-ground)}
.tab-name{max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px/1.3 var(--mono);color:var(--muted);transition:color .28s ease}
.project-tab[aria-pressed=true] .tab-name{color:var(--ink)}
.tab-indicator{position:absolute;left:0;top:0;bottom:0;width:var(--w,62px);transform:translateX(var(--x,0px));border:1px solid var(--project-accent,var(--accent));background:color-mix(in srgb,var(--project-accent,var(--accent)) 12%,transparent);transition:transform .46s cubic-bezier(.34,1.3,.64,1),width .46s cubic-bezier(.34,1.3,.64,1),background-color .28s ease,border-color .28s ease;pointer-events:none}
.all-tab{--chip-dark:var(--accent);--chip-light:var(--accent)}
.all-tab .tab-badge{background:transparent;border-color:var(--edge)}
/* Add projects: a quiet framed plus; its count is how many pinned projects are not shared. */
.add-tab{--chip-dark:var(--edge);--chip-light:var(--edge)}
.add-tab .tab-badge{background:transparent;color:var(--body)}
.tab-plus{font:400 20px/1 var(--font);transform:translateY(-1px)}
.add-tab .tab-count{background:var(--control);color:var(--ink);box-shadow:0 0 0 1px var(--edge),0 0 0 3px var(--tab-ground)}
.projects-dialog .projects-count{margin-bottom:6px;color:var(--ink);font-weight:600}
.projects-steps{margin:0 0 14px;padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.45;color:var(--body)}
.projects-dialog .projects-older{font-size:13px;color:var(--muted)}
.all-tab[aria-pressed=true] .tab-badge{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent)}
.tab-mosaic{display:grid;grid-template-columns:repeat(2,8px);gap:3px}
.mosaic-cell{--chip-accent:var(--chip-dark);width:8px;height:8px;background:var(--chip-accent)}
@media(prefers-reduced-motion:reduce){.project-tab,.tab-badge,.tab-name,.tab-indicator{transition:none}.project-tab:active{transform:none}}
/* Five projects still fit a 320px phone without scrolling. */
@media(max-width:360px){.project-tabs{padding-inline:4px}.project-tab{flex-basis:56px}}
.view-switch{display:grid;grid-template-columns:auto auto;border:1px solid var(--edge)}
.view-switch button{min-height:34px;padding:0 10px;gap:5px;border:0;font:12px var(--mono);color:var(--muted)}
/* A narrow phone gives the switch its own full-width row under the name. */
@media(max-width:374px){header.top{flex-wrap:wrap;row-gap:6px}.workspace-bar{order:5;flex:1 0 100%}.view-switch{grid-template-columns:1fr 1fr}}
.view-switch button[aria-pressed=true]{background:var(--project-selection-bg,var(--accent));color:var(--project-selection-fg,var(--brand-ink))}
.view-count{font:11px var(--mono);opacity:.85}
.view-count:empty{display:none}

#error,#notice{border-radius:var(--radius-card);padding:10px 12px;background:var(--panel);border:1px solid var(--line);margin:0 12px 6px;font-size:14px}
#error,#capture-error{color:var(--error)}
#notice{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 12%,var(--panel))}

/* Queue and Office are app screens: the shell fills the visible viewport, the keyboard included. */
body[data-view=queue],body[data-view=office]{position:fixed;inset:0;overflow:hidden}
body[data-view=queue] .shell,body[data-view=office] .shell{height:var(--app-height,100dvh);min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--bottom-gap);transform:translateY(var(--app-top,0px))}
body[data-view=queue] main,body[data-view=office] main{flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
#queue:not([hidden]),#office:not([hidden]){flex:1;min-height:0}

.split{display:grid;grid-template-rows:minmax(0,1fr)}
.queue-pane{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;flex:0 0 auto;min-height:0;border-top:1px solid var(--line);padding-top:5px}
.queue-pane>.queue-head{grid-column:1/-1}

body[data-keyboard=true] .queue-pane{display:none}
.queue-head{display:flex;align-items:center;gap:8px;padding:2px 8px 6px 12px}
.tabs{display:flex;gap:0;border:1px solid var(--edge);min-width:0}
.tabs button{min-height:32px;border:0;padding:2px 10px;font:12px var(--mono);color:var(--muted);gap:6px}
.tabs button[aria-pressed=true]{background:var(--project-selection-bg,var(--accent));color:var(--project-selection-fg,var(--brand-ink))}
.task-list{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;scroll-padding-inline:12px;padding:0 12px 8px;display:flex;gap:8px}
.task-list>article{flex:0 0 min(86%,380px);min-width:0;scroll-snap-align:start;display:flex;flex-direction:column}
.task-list .task-open{min-height:72px;align-content:start}
.task-list .task-line{gap:5px}
.task-list .task-time{display:none}
.task-list .task-title{-webkit-line-clamp:1}
.task-list .empty{margin:0;padding:12px 0}
.task-list article:has(.task-open[aria-current=true]){outline:2px solid var(--project-accent,var(--accent));outline-offset:-2px}
body:not([data-view=queue]) .task-list .actions{display:none}
.queue-section{margin:4px 0 0;font:10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.queue-section[data-section=running]{color:var(--live)}
.queue-section[data-section=review]{color:var(--review)}
.queue-section[data-section=starred]{color:var(--starred)}
.queue-section[data-section=today]{color:var(--today)}
.task,.review-card{border:1px solid var(--line);background:transparent}
.task{display:flex;align-items:stretch}
.task-open{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:3px;justify-items:start;text-align:left;padding:7px 10px;border:0;min-height:48px}
.task-line{display:flex;align-items:center;gap:8px;width:100%;min-width:0;font:11px/1.5 var(--mono);color:var(--muted);white-space:nowrap;overflow-wrap:normal}
.task-line>*{flex:0 0 auto}
.task-line>.task-model{flex:0 1 auto}
.task-line .task-id{color:var(--ink)}
.task-provider[data-provider=claude]{color:var(--claude)}
.task-provider[data-provider=codex]{color:var(--codex)}
.task-provider[data-provider=opencode]{color:var(--opencode)}
.task-provider[data-provider=antigravity]{color:var(--antigravity)}
.task-model{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-status{margin-left:auto;flex:0 0 auto;padding:0 6px;border:1px solid currentColor;font:10px/17px var(--mono)}
.task-status[data-status=running]{color:var(--live)}
.task-status[data-status=queued]{color:var(--muted)}
.task-status[data-status=open]{color:var(--today)}
.task-status[data-status=complete]{color:var(--accent-text)}
.task-status[data-status=review]{color:var(--review)}
.task-status[data-status=failed],.task-status[data-status=interrupted]{color:var(--error)}
.task-status[data-status=cancelled]{color:var(--muted)}
.task-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.35;color:var(--ink)}
.task-time{flex:0 0 auto;font:11px var(--mono);color:var(--muted)}
.task-line .task-time{margin-left:auto}
.task-line .task-time+.task-status{margin-left:0}
.task[data-status=running]{border-color:color-mix(in srgb,var(--live) 45%,var(--line))}
.task[data-starred=true] .task-id::before{content:'★ ';color:var(--starred)}
.review-card{border-color:var(--review);background:color-mix(in srgb,var(--review) 7%,transparent);padding:0 0 8px}
.review-card .actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px}
.review-card .actions button{min-height:32px;font:12px var(--mono);padding-inline:8px}
.empty{padding:22px 4px;color:var(--muted)}

.composer{display:flex;flex-direction:column;gap:6px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 12px 8px}
/* The heading shares its row with the provider switch. */
.composer-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 8px;min-width:0}
.composer-head h2{min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#compose-project{margin-left:4px;color:var(--project-accent,var(--muted));font:11px var(--mono)}
@media(max-width:480px){#compose-project{display:none}}
.providers{padding:0;display:grid;grid-template-columns:repeat(3,auto);border:0;gap:4px;margin:0}
.providers label{position:relative;min-width:0}
.providers input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.providers span{border:1px solid var(--edge);min-height:32px;padding:0 10px;display:flex;align-items:center;justify-content:center;font:12px var(--mono);color:var(--muted)}
.providers input[value=codex]:checked+span{border-color:var(--codex);color:var(--ink);background:color-mix(in srgb,var(--codex) 12%,transparent)}
.providers input[value=claude]:checked+span{border-color:var(--claude);color:var(--ink);background:color-mix(in srgb,var(--claude) 10%,transparent)}
.providers input[value=opencode]:checked+span{border-color:var(--opencode);color:var(--ink);background:color-mix(in srgb,var(--opencode) 10%,transparent)}
.providers input[value=antigravity]:checked+span{border-color:var(--antigravity);color:var(--ink);background:color-mix(in srgb,var(--antigravity) 10%,transparent)}
.providers input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.model-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:8px}
.model-row label{position:relative;min-width:0}
.field-label{position:absolute;left:11px;top:4px;z-index:1;font:10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.model-row select{margin:0;min-height:44px;padding:17px 30px 3px 10px;line-height:1.3}
.prompt-box{display:flex;flex-direction:column;flex:1 1 auto;min-height:150px;border:1px solid var(--edge);background:var(--terminal)}
.prompt-box:focus-within{border-color:var(--project-accent,var(--accent))}
.prompt-box input,.prompt-box textarea{border:0;background:transparent}
.prompt-box input{min-height:34px;padding:8px 10px 0;font-family:var(--mono);font-size:16px;color:var(--body)}
.prompt-box input:focus-visible,.prompt-box textarea:focus-visible{outline:0}
#prompt{flex:1;min-height:80px;padding:6px 10px;font-size:16px}
/* Screenshots are the prompt frame's own toolbar, as on the desktop composer. */
.capture-setting{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 4px 2px 10px}
.capture-setting .check{flex:1;min-width:0}
.check{display:flex;gap:10px;align-items:center}
.check strong{font-size:13px;color:var(--body);font-weight:500}
.check small{margin-top:1px}
.capture-setting .check>span{display:flex;align-items:baseline;gap:6px;min-width:0}
.capture-setting .check strong,.capture-setting .check small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capture-setting .check strong{flex:0 1 auto}
.capture-setting .check small{flex:1 1 0;min-width:0}
@media(max-width:480px){.capture-setting .check small{display:none}}
#compose-capture{min-height:32px;padding:2px 6px;font:11px var(--mono);color:var(--muted);flex:0 0 auto}
.capture-setting input[type=checkbox]{width:18px;min-width:18px;height:18px;min-height:18px}
.send{min-height:46px;flex:0 0 auto;font-size:16px;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.draft-note{display:none;font-size:12px}
@media(min-height:900px){.draft-note{display:block}}
/* Typing: the prompt takes the screen, the send button rides on the keyboard. */
body[data-composing=true] header.top,body[data-composing=true] .workspace-bar,body[data-composing=true] .project-tabs,body[data-composing=true] .queue-pane,body[data-composing=true] .draft-note{display:none}
body[data-composing=true] .split{grid-template-rows:minmax(0,1fr)}
/* Answering a task with the keyboard up: the follow-up keeps the room, the task buttons wait. */
body[data-keyboard=true][data-view=detail] .task-actions{display:none}
body[data-keyboard=true][data-view=detail] #follow-up{margin-bottom:0}
body[data-keyboard=true][data-view=detail] #follow-up textarea{max-height:30dvh}
body[data-composing=true] .composer{padding-top:10px}

/* Office: the desktop studio above the desk cards, seats in desktop order. */
.office-view{display:grid;grid-template-rows:auto minmax(0,1fr)}
/* The stage keeps the flexible row while the usage card above it is hidden. */
.office-stage{grid-row:2;position:relative;min-height:0;overflow:hidden;background:var(--office-3d-background,var(--panel));touch-action:none}
.office-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.office-stage[data-mode=fallback] canvas,.office-stage[data-mode=fallback] .office-tags{display:none}
.office-tags{position:absolute;inset:0;pointer-events:none}
.office-tag{position:absolute;left:0;top:0;pointer-events:auto;display:grid;gap:1px;justify-items:start;align-content:start;width:max-content;max-width:min(168px,calc(50% - 9px));min-height:0;padding:4px 7px 5px;border:1px solid var(--edge);background:color-mix(in srgb,var(--bg) 90%,transparent);color:var(--ink);text-align:left;font:10px/1.35 var(--mono);will-change:transform}
.office-tag[data-status=running]{border-color:color-mix(in srgb,var(--live) 70%,var(--edge))}
.office-tag[data-review=true]{border-color:var(--review)}
.tag-head{display:flex;flex-wrap:wrap;align-items:center;gap:5px;width:100%;min-width:0;overflow:hidden;color:var(--muted);white-space:nowrap}
.tag-head::before{content:'';flex:0 0 6px;height:6px;background:var(--codex)}
.office-tag[data-provider=claude] .tag-head::before{background:var(--claude)}
.office-tag[data-provider=opencode] .tag-head::before{background:var(--opencode)}
.office-tag[data-provider=antigravity] .tag-head::before{background:var(--antigravity)}
.office-tag[data-status=running] .tag-state{color:var(--live)}
.office-tag[data-status=open] .tag-state{color:var(--today)}
.office-tag[data-review=true] .tag-state{color:var(--review)}
/* Nothing leaves the card: a state too long for it gives way before the running time does. */
.tag-state{flex:none;min-width:0;max-width:calc(100% - 11px);overflow:hidden;text-overflow:ellipsis}
.tag-time{flex:none;margin-left:auto;padding-left:6px}
.tag-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px/1.35 var(--font);color:var(--ink)}
.tag-id{margin-right:5px;font-family:var(--mono);font-size:10px;font-weight:400;color:var(--muted)}
/* A lead line drops from each card to its worker, however far the card was nudged up. */
.tag-lead{position:absolute;left:var(--lead-x,50%);top:100%;width:1px;height:var(--lead-h,6px);background:currentColor;color:var(--edge);pointer-events:none}
.office-tag[data-status=running] .tag-lead{color:color-mix(in srgb,var(--live) 70%,var(--edge))}
.office-tag[data-review=true] .tag-lead{color:var(--review)}
.office-summary{position:absolute;left:10px;top:10px;padding:4px 8px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 86%,transparent);font:11px/1.5 var(--mono);color:var(--body);pointer-events:none}
.office-summary:empty{display:none}
.office-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,calc(100% - 32px));padding:14px 16px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);text-align:center;font-size:14px;color:var(--body)}
.office-status:empty{display:none}
.office-overview{position:absolute;right:10px;top:10px;min-height:34px;padding:4px 10px;background:color-mix(in srgb,var(--bg) 88%,transparent);font:12px var(--mono)}
/* New prompt floats over the room instead of taking a row. */
.office-fab{position:absolute;right:10px;bottom:10px;z-index:2;min-height:40px;padding:6px 12px;font:13px var(--mono);background:color-mix(in srgb,var(--bg) 90%,transparent)}
.office-view[data-mode=fallback]{grid-template-rows:auto minmax(0,1fr)}
.office-view[data-mode=fallback] .office-fab{position:static;margin:8px 12px 0;width:calc(100% - 24px)}
.office-view[data-mode=fallback] .office-stage{min-height:0;background:transparent}
.office-view[data-mode=fallback] .office-status{position:static;transform:none;width:auto;margin:10px 12px 0}
/* A studio that failed offers one more attempt, above New prompt. */
.office-retry{display:block;width:calc(100% - 24px);min-height:40px;margin:8px 12px 0;font:13px var(--mono)}
.office-view[data-mode=fallback] .office-summary{position:static;display:inline-block;margin:10px 12px 0}

/* All projects: totals, reviews waiting everywhere, and one live card per project. */
body[data-view=overview]{position:fixed;inset:0;overflow:hidden}
body[data-view=overview] .shell{height:var(--app-height,100dvh);min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--bottom-gap);transform:translateY(var(--app-top,0px))}
body[data-view=overview] main{flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
#overview:not([hidden]){flex:1;min-height:0}
.overview{display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;padding:0 12px 12px}
.overview-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.overview-stat{display:grid;gap:3px;padding:8px 10px;border:1px solid var(--line);background:var(--panel);min-width:0}
.overview-stat strong{font:600 20px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink)}
.overview-stat span{font:10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);overflow-wrap:normal;hyphens:auto}
.overview-stat[data-kind=running] strong{color:var(--live)}
.overview-stat[data-kind=review] strong{color:var(--review)}
.overview-reviews,.overview-projects{display:grid;gap:6px}
.overview-section{margin:4px 0 0}
.overview-review{--chip-accent:var(--chip-dark);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--review);background:color-mix(in srgb,var(--review) 7%,transparent)}
.overview-review .primary{min-height:34px;padding:4px 10px;font:11px var(--mono)}
/* A long request stops at its own column instead of running under Mark reviewed. */
.overview-review-open{display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;justify-items:stretch;gap:2px;padding:0;border:0;min-height:36px;min-width:0;overflow:hidden;text-align:left}
.overview-review-open>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-badge{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;background:var(--chip-accent);color:var(--bg);font:600 13px/1 var(--mono)}
.project-card{--chip-accent:var(--chip-dark);display:grid;gap:8px;padding:10px;border:1px solid color-mix(in srgb,var(--chip-accent) 40%,var(--line));background:color-mix(in srgb,var(--chip-accent) 5%,var(--bg))}
.project-card[aria-current=true]{border-color:var(--chip-accent)}
.project-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;justify-content:stretch;align-items:center;gap:10px;padding:0;border:0;min-height:40px;text-align:left}
.card-title{display:grid;gap:2px;min-width:0}
.card-title strong{font-size:15px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-counts{font:11px/1.4 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.card-go{font-size:20px;line-height:1;color:var(--chip-accent)}
.desk-dots{display:flex;flex-wrap:wrap;gap:5px}
.desk-dot{width:12px;height:12px;background:var(--codex)}
.desk-dot[data-provider=claude]{background:var(--claude)}
.desk-dot[data-provider=opencode]{background:var(--opencode)}
.desk-dot[data-provider=antigravity]{background:var(--antigravity)}
.desk-dot[data-review=true]{background:transparent;box-shadow:inset 0 0 0 2px var(--review)}
.card-tasks{display:grid;gap:4px}
.card-task{display:grid;grid-template-columns:minmax(0,1fr) auto;justify-content:stretch;align-items:center;gap:10px;min-height:36px;padding:4px 8px;border:1px solid var(--line);background:var(--bg);text-align:left}
.card-task-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--ink)}
.card-task-meta{display:flex;gap:8px;align-items:baseline;font:11px var(--mono)}
.card-more{margin:0;font:11px var(--mono);color:var(--muted)}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.card-actions button{min-height:34px;padding:2px 10px;font:11px var(--mono)}
@keyframes desk-breathe{50%{opacity:.4}}
@media(prefers-reduced-motion:no-preference){.desk-dot[data-status=running]{animation:desk-breathe 2.4s ease-in-out infinite}}

/* Task view: one task over the whole screen, like a desktop pane taking all the space. */
body[data-view=detail]{position:fixed;inset:0;overflow:hidden}
body[data-view=detail] .shell{height:var(--app-height,100dvh);min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--bottom-gap);transform:translateY(var(--app-top,0px))}
body[data-view=detail] header.top{display:none}
body[data-view=detail] main{flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
#detail:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
.task-view-head{display:flex;align-items:center;gap:6px;padding:6px 8px 2px 4px}
.back-button{min-height:36px;padding:4px 8px;font:13px var(--mono);color:var(--muted)}
.task-view-switch{margin-left:auto;display:grid;grid-auto-flow:column;border:1px solid var(--edge)}
.task-view-switch button{min-height:32px;padding:0 9px;gap:5px;border:0;font:12px var(--mono);color:var(--muted)}
.task-view-switch button[aria-pressed=true]{background:var(--project-selection-bg,var(--accent));color:var(--project-selection-fg,var(--brand-ink))}
.task-view-title{display:grid;gap:4px;padding:2px 12px 8px}
.task-view-title h1{font-size:17px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.task-note{margin:0 12px 6px;padding:8px 10px;border:1px solid var(--line);background:var(--panel);font-size:13px;color:var(--body)}
.task-chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 12px 12px;display:flex;flex-direction:column;gap:8px}
.chat-block{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);background:var(--panel)}
.chat-label{font:10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chat-block p{white-space:pre-wrap;font-size:14px;line-height:1.5;color:var(--ink)}
.chat-request{border-color:color-mix(in srgb,var(--project-accent,var(--accent)) 45%,var(--line));background:color-mix(in srgb,var(--project-accent,var(--accent)) 6%,var(--panel))}
.chat-result{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.chat-result[data-kind=error]{border-color:var(--error);background:color-mix(in srgb,var(--error) 7%,var(--panel))}
.chat-block{min-width:0}
.markdown-document{min-width:0;font-size:14px;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
.markdown-document > *{margin:0 0 12px}
.markdown-document > :last-child{margin-bottom:0}
.markdown-document p{white-space:normal;line-height:inherit}
.markdown-document :is(h1,h2,h3,h4,h5,h6){margin:18px 0 8px;font-weight:600;line-height:1.3}
.markdown-document > :first-child{margin-top:0}
.markdown-document h3{font-size:21px}
.markdown-document h4{font-size:19px}
.markdown-document :is(h5,h6){font-size:16px}
.markdown-document :is(ul,ol){padding-left:24px}
.markdown-document li + li{margin-top:4px}
.markdown-document :is(blockquote,.markdown-callout){margin-inline:0;padding:8px 12px;border-left:3px solid var(--accent);color:var(--muted)}
.markdown-document code{font:12px/1.5 var(--mono);background:var(--terminal);padding:2px 4px;border-radius:4px}
.markdown-document pre{max-width:100%;overflow:auto;padding:12px;background:var(--terminal);border:1px solid var(--line);border-radius:8px;white-space:pre;overflow-wrap:normal}
.markdown-document pre code{padding:0;background:transparent}
.markdown-code{position:relative}.markdown-code-copy{position:absolute;top:6px;right:6px;padding:4px 9px;border:1px solid var(--line);border-radius:6px;background:var(--terminal);color:inherit;font:500 12px/1.3 inherit}.markdown-code-copy:focus-visible{outline:2px solid #7fd8a0;outline-offset:1px}
.markdown-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.markdown-document table{border-collapse:collapse;width:100%;font-size:13px}
.markdown-document :is(th,td){padding:7px 9px;border:1px solid var(--line);text-align:left;min-width:100px}
.markdown-document th{background:var(--terminal)}
.markdown-document .align-center{text-align:center}
.markdown-document .align-right{text-align:right}
.markdown-document hr{border:0;border-top:1px solid var(--line)}
.chat-result[data-kind=error] .markdown-document{white-space:pre-wrap}
.chat-events{display:flex;flex-direction:column;gap:1px}
.chat-event{display:grid;grid-template-columns:38px minmax(0,1fr);gap:8px;padding:5px 2px}
.chat-event time{font:10px/1.9 var(--mono);color:var(--muted)}
.chat-event p{font:12px/1.55 var(--mono);color:var(--body);white-space:pre-wrap}
.task-screen{flex:1;min-height:0;margin:0 8px;padding:10px;overflow:auto;overscroll-behavior:contain;background:var(--terminal);border:1px solid var(--line);color:var(--ink);font:11px/1.45 var(--mono);white-space:pre;tab-size:4}
.task-shots{flex:1;min-height:0;overflow-y:auto;padding:0 12px 12px}
.task-shots .heading{margin:4px 0 10px}
.task-shots .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;overflow:visible;padding:0}
.task-shots .shot{flex:none}
.task-shots .shot img{height:180px}
.task-dock{flex:0 0 auto;padding:8px 12px;background:var(--panel)}
.task-dock .task-actions button{min-height:40px;font-size:14px}
body[data-keyboard=true][data-view=detail] .task-view-title{display:none}

/* The Home Screen offer floats above the tab bar until installed or put off. */
.install-prompt{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;width:min(560px,calc(100% - 20px));display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:12px;max-height:calc(100dvh - 110px);overflow-y:auto;border:1px solid var(--accent);background:var(--panel);box-shadow:0 12px 32px rgb(0 0 0/.35)}
.install-mark{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--accent);color:var(--accent);font:14px var(--mono)}
.install-copy{display:grid;gap:4px;min-width:0}
.install-copy strong{font-size:15px;font-weight:500}
.install-copy p{font-size:13px;color:var(--body)}
.install-buttons{grid-column:1/-1;display:flex;gap:6px;justify-content:flex-end}
.install-buttons button{min-height:38px;padding:4px 12px;font:12px var(--mono)}
body[data-composing=true] .install-prompt,body[data-keyboard=true] .install-prompt{display:none}
@media(prefers-reduced-motion:no-preference){.install-prompt:not([hidden]){animation:install-rise .36s cubic-bezier(.2,.8,.2,1)}}
@keyframes install-rise{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

#follow-up{display:flex;gap:8px;margin-bottom:10px}
#follow-up textarea{max-height:112px;min-height:40px;min-width:0;flex:1;padding-block:7px}
#follow-up button{flex-shrink:0;min-width:66px;white-space:nowrap;font-size:14px}
.task-actions{display:flex;gap:8px}
.task-actions button{flex:1}
.shots{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x proximity;padding-bottom:10px}
.shot{flex:0 0 70%;padding:0;display:block;text-align:left;scroll-snap-align:start;border:1px solid var(--line)}
.shot img{width:100%;height:150px;object-fit:contain;background:var(--terminal);display:block}
.shot span{display:block;padding:8px;font:11px var(--mono)}
dialog{color:var(--ink);background:var(--bg);border:1px solid var(--line);width:min(560px,calc(100% - 20px));max-height:calc(100dvh - 32px);padding:16px}
dialog::backdrop{background:rgb(0 0 0/.7)}
dialog label{margin:16px 0}
dialog .heading{margin-top:0}
#capture-save{width:100%;margin-top:12px}
#image-dialog{width:min(1100px,100%);padding:12px}
#full-image{max-width:100%;height:auto;display:block;margin:auto}
.image-scroll{overflow:auto;max-height:70dvh}
#download{margin-top:12px}
#file-dialog{width:min(1100px,100%);padding:12px}
.file-status{display:grid;justify-items:start;gap:12px;padding:8px 2px 4px}
.file-status[hidden]{display:none}
.file-status p{margin:0;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.file-text{margin:0;max-height:70dvh;overflow:auto;padding:10px;background:var(--terminal);border:1px solid var(--line);color:var(--ink);font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4}
#code{display:block;font:17px var(--mono);user-select:all;padding:12px 0}
summary{min-height:44px;padding:11px 0;cursor:pointer}
.connection-card{border:1px solid var(--accent);background:var(--panel);padding:20px;margin:24px 0}
.connection-card p{margin:16px 0}
.connection-card h2{font-size:22px}
.connection-card button{width:100%}
#connect-account{font:13px/1.6 var(--mono);color:var(--muted)}
#connect-status:empty{display:none}
@media(max-width:360px){
  main{padding-inline:12px}
  header.top{padding-inline:10px}
  .providers span{font-size:12px}
  .intro{font-size:34px}
  .composer-head #compose-project{display:none}
}
/* Short screens (landscape, split screen, a keyboard over a tall page): tighter chrome, same order. */
@media(max-height:560px){
  header.top{min-height:44px;padding-block:3px}
  .brand{width:28px;height:28px;flex-basis:28px}
  .identity strong{font-size:15px}
  .view-switch button{min-height:32px}
  .project-tabs{padding-block:3px}
  .project-tab{min-height:42px;padding-block:8px 4px}
  .tab-name{display:none}
  .tab-badge{width:26px;height:26px;font-size:12px}
  .overview-stat{padding:6px 10px}
  .overview-stat strong{font-size:18px}
  .office-fab{min-height:36px}
}
/* Landscape keeps the tickets below the prompt or room. */
@media(max-height:560px) and (min-width:640px){
  body:is([data-view=queue],[data-view=office],[data-view=overview]) .shell{max-width:none}
  .queue-head{padding-bottom:2px}
  .task-list .task-open{min-height:62px}
  .task-list .queue-section{display:none}
  .task-list .actions{display:none}
  body[data-composing=true] .split{grid-template-columns:minmax(0,1fr)}
  .composer{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto minmax(44px,1fr) auto;padding-top:6px}
  .composer-head{grid-column:1;grid-row:1}
  .composer-head h2{display:none}
  .model-row{grid-column:1;grid-row:2;align-self:start}
  .send{grid-column:1;grid-row:3;min-height:36px}
  .prompt-box{grid-column:2;grid-row:1/4;min-height:0}
  #prompt{min-height:40px}
  .capture-setting .check small{display:none}
  .overview-projects{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .overview-projects .overview-section{grid-column:1/-1}

}

/* Install instructions use the same colors and sizing in both themes. */
.install-safari{display:flex;align-items:center;gap:8px;font:13px var(--mono);color:var(--ink)}
.install-safari svg{flex:none}
.install-help{display:grid;gap:8px}
.install-help:focus-visible{outline:2px solid var(--focus);outline-offset:4px}

/* V5 presentation: the same hierarchy as public/launchpad-v5.css, with phone touch sizes. */
:root{--radius-chip:5px;--radius-control:7px;--radius-card:10px;--radius-sheet:14px;--fill:var(--project-fill-bg,var(--accent));--fill-ink:var(--project-fill-fg,var(--brand-ink))}
button,.button,input,select,textarea,.brand,.tab-indicator,.card-badge{border-radius:var(--radius-control)}
.tab-badge,.tab-count,.mosaic-cell{border-radius:var(--radius-chip)}
#connection::before,.project-tab[data-review=true] .tab-badge::after{border-radius:50%}
button,.button{background:var(--control)}
.quiet,.project-tab,.task-open,.project-card-head,.overview-review-open,.back-button{background:transparent}
.primary{background:var(--fill);border-color:var(--fill);color:var(--fill-ink)}
/* Review is a positive acknowledgement, independent of the selected project colour. */
#review,.review-card .primary,.overview-review .primary{background:#7fd8a0;border-color:#7fd8a0;color:#0c0d0f;font-weight:600;gap:7px}
#review::before,.review-card .primary::before,.overview-review .primary::before{content:'';display:inline-block;flex-shrink:0;width:10px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
#review:enabled:hover,.review-card .primary:enabled:hover,.overview-review .primary:enabled:hover{background:#99e3b4;border-color:#99e3b4}
/* Fixed app screens own the visible viewport. The website's injected legal footer belongs
   to scrollable Account/sign-in pages, never behind a keyboard-shifted composer. */
body:is([data-view=queue],[data-view=office],[data-view=overview],[data-view=detail])>.consent-legal-footer{display:none}
body:is([data-view=queue],[data-view=office],[data-view=overview],[data-view=detail]) .shell{border:0}
body[data-keyboard=true] .shell{padding-top:0;padding-bottom:0}
.consent-legal-footer{color:var(--muted);background:var(--bg)}
.composer{margin:0 8px 8px;padding:10px;gap:8px;border:1px solid var(--line);border-radius:var(--radius-sheet);background:var(--panel)}
.composer-head h2{font-weight:600}
.composer-head,.model-row{flex-shrink:0}
/* Match the desktop switch.css soft well and raised neutral selection. */
:root{--sw-well:#1d2023;--sw-card:#2a2e33;--sw-ink:#e8eae8;--sw-muted:#8a9098;--sw-badge:#353a40;--sw-green:#7fd8a0;--sw-green-ink:#123a22;--sw-shadow:0 1px 3px rgb(0 0 0 / 45%)}
:root[data-theme=light]{--sw-well:#eceee9;--sw-card:#fff;--sw-ink:#16181a;--sw-muted:#6b7078;--sw-badge:#dfe2de;--sw-shadow:0 1px 3px rgb(0 0 0 / 16%)}
@media(prefers-color-scheme:light){:root:not([data-theme]){--sw-well:#eceee9;--sw-card:#fff;--sw-ink:#16181a;--sw-muted:#6b7078;--sw-badge:#dfe2de;--sw-shadow:0 1px 3px rgb(0 0 0 / 16%)}}
.view-switch,.tabs,.task-view-switch,.providers{align-items:center;align-self:center;min-height:var(--control-height);padding:4px;gap:2px;border:0;border-radius:10px;background:var(--sw-well)}
.view-switch button,.tabs button,.task-view-switch button,.providers span{border:0;border-radius:8px;background:transparent;color:var(--sw-muted);box-shadow:none;font-family:var(--font)}
.view-switch button,.tabs button,.task-view-switch button{height:var(--segment-height);min-height:var(--segment-height);padding-block:0;line-height:1.2}
.view-switch button:not([aria-pressed=true]):hover,.tabs button:not([aria-pressed=true]):hover,.task-view-switch button:not([aria-pressed=true]):hover,.providers label:hover input:not(:checked)+span{color:var(--sw-ink)}
.view-switch button:focus-visible,.tabs button:focus-visible,.task-view-switch button:focus-visible,.providers input:focus-visible+span{outline:2px solid var(--focus);outline-offset:1px}
.view-switch .view-count{opacity:1;min-width:18px;padding:1px 6px;border-radius:6px;background:var(--sw-badge);color:var(--sw-muted);font:500 11px/1.4 var(--mono);text-align:center}
.view-switch button[aria-pressed=true] .view-count{background:var(--sw-green);color:var(--sw-green-ink)}
@media(prefers-reduced-motion:no-preference){.view-switch button,.tabs button,.task-view-switch button,.providers span{transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease}}
/* 8px sides keep the heading and the three providers on one row on a 375px phone. */
.providers span{height:var(--segment-height);min-height:var(--segment-height);padding-inline:8px;font-size:13px}
.providers input[type=radio]:checked+span,.view-switch button[aria-pressed=true],.tabs button[aria-pressed=true],.task-view-switch button[aria-pressed=true]{background:var(--sw-card);color:var(--sw-ink);border-color:transparent;box-shadow:var(--sw-shadow)}
.field-label,.queue-section,.overview-stat span,.chat-label{letter-spacing:normal;text-transform:none;font-family:var(--font)}
.field-label{font-size:11px}
.model-row select{min-height:42px;padding-top:16px;background-color:var(--terminal)}
.prompt-box{border:0;gap:8px;background:transparent;min-height:150px}
.prompt-box input,.prompt-box textarea{border:1px solid var(--edge);background:var(--terminal)}
.prompt-box input{min-height:40px;padding:8px 10px;font-family:var(--font)}
.prompt-box input:focus-visible,.prompt-box textarea:focus-visible{outline:0}
#prompt{border-radius:var(--radius-card);padding:10px;min-height:80px}
.capture-setting{flex-shrink:0;padding:0;gap:4px}
.capture-setting .check{gap:7px;min-height:32px}
.capture-setting .check strong{font-size:12px}
#compose-capture{font:11px var(--font);padding-inline:4px}
/* A pill switch with native checkbox semantics and a full label tap target. */
.capture-setting input[type=checkbox]{appearance:none;position:relative;flex:none;width:30px;min-width:30px;height:18px;min-height:18px;border:1px solid var(--edge);border-radius:999px;background:var(--control);padding:0;margin:0}
.capture-setting input[type=checkbox]::before{content:'';position:absolute;left:3px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--muted)}
.capture-setting input[type=checkbox]:checked{background:var(--fill);border-color:var(--fill)}
.capture-setting input[type=checkbox]:checked::before{left:15px;background:var(--fill-ink)}
.send{min-height:42px;font-size:15px;font-weight:600}
.queue-pane{margin:0 8px 8px;border:1px solid var(--line);border-radius:var(--radius-sheet);background:var(--panel);padding-top:4px}
.queue-head{padding:2px 6px 6px}
.queue-pane .task-list{padding-bottom:6px}
.task-list{padding-inline:6px;scroll-padding-inline:6px}
.task,.review-card,.project-card,.overview-review,.overview-stat,.chat-block,.task-screen,.shot,.task-note{border-radius:var(--radius-card)}
.task,.review-card{background:var(--terminal)}
.task-status{padding:0;border:0;background:transparent}
.task[data-status=failed],.task[data-status=interrupted]{border-color:var(--error)}
.review-card{background:var(--terminal)}
.project-tabs{margin:0 8px 8px;border-radius:var(--radius-sheet)}
.office-stage{margin:0 8px 8px;border:1px solid var(--line);border-radius:var(--radius-sheet)}
.office-tag,.office-status,.office-summary{border-radius:var(--radius-card)}
.office-fab{border-radius:var(--radius-control)}
.task-dock{margin:0 8px 8px;border:1px solid var(--line);border-radius:var(--radius-sheet)}
.chat-request{border-color:transparent;background:var(--panel)}
.chat-result{background:var(--panel)}
dialog,.install-prompt,.connection-card{border-radius:var(--radius-sheet);background:var(--panel)}
.install-mark{border:0;border-radius:var(--radius-card)}
@media(max-width:374px){.composer-head h2{font-size:14px}.providers{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.providers span{padding-inline:6px}}
@media(max-height:560px) and (min-width:640px){
  .composer{padding:6px;gap:4px}
  .prompt-box{min-height:0;gap:4px}
  .providers{width:100%}
  .providers span{min-height:28px;padding-inline:4px}
  .model-row select{min-height:44px}
  .send{min-height:36px}
  .prompt-box input{min-height:34px;padding-block:4px}
  #prompt{min-height:40px;padding-block:6px}
  .capture-setting,.capture-setting .check{min-height:28px}
}
.capture-short{display:none}
/* Portrait phones. The name, prompt and screenshots rows belong to the composer itself, so on
   a short screen the prompt gives way and nothing is drawn over Add to queue. The switch's tap
   target is the switch and its words, never the whole row above the send button. */
@media(max-width:639px){
  .prompt-box{display:contents}
  #prompt{min-height:56px}
  .capture-setting .check{flex:0 1 auto}
  #compose-capture{margin-left:auto}
  /* Typing: the provider switch spans the top, the prompt takes what the keyboard leaves, and
     one bottom row holds Screenshots at the left and Add to queue at the right. */
  body[data-composing=true] .composer{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto 1fr auto;column-gap:16px;margin-top:8px}
  body[data-composing=true] :is(.composer-head,.model-row,#task-name,#prompt){grid-column:1/-1}
  body[data-composing=true] :is(.composer-head h2,#compose-capture,.capture-long){display:none}
  body[data-composing=true] .capture-short{display:block}
  body[data-composing=true] .providers{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-composing=true] #prompt{align-self:stretch}
  body[data-composing=true] .send{padding-inline:18px}
}

/* App shell: the launch screen, sign-in, Account, and the installed app's own behaviour.
   The mark is the logo: a paper V on dark, an ink V on light, and the logo green tick on both. */
:root{--mark-v:#f2efe8;--mark-i:#7fd8a0}
:root[data-theme=light]{--mark-v:var(--ink)}
@media(prefers-color-scheme:light){:root:not([data-theme]){--mark-v:var(--ink)}}
.mark-v{fill:var(--mark-v)}
.mark-i{fill:var(--mark-i)}
.waves{stroke:var(--mark-i)}
.wave:nth-child(1){opacity:.9}
.wave:nth-child(2){opacity:.55}
.wave:nth-child(3){opacity:.28}
@media(max-width:519px){
  header.top:has(#machine-switch:not([hidden])){flex-wrap:wrap;row-gap:6px}
  header.top:has(#machine-switch:not([hidden]))::after{content:'';order:4;flex-basis:100%;height:0}
  header.top:has(#machine-switch:not([hidden])) .avatar-button{order:3}
  header.top:has(#machine-switch:not([hidden])) .machine-switch{order:5;flex:1 1 0}
  header.top:has(#machine-switch:not([hidden])) .workspace-bar{order:6}
}
body:is(:not([data-view]),[data-view=launch],[data-view=auth]) header.top,
body:is(:not([data-view]),[data-view=launch],[data-view=auth]) :is(#error,#notice,#computer-help){display:none}
.avatar-button{flex:0 0 auto;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--edge));background:color-mix(in srgb,var(--accent) 16%,var(--control));color:var(--ink);font:600 15px/1 var(--font)}
.avatar-button:disabled{opacity:1}

/* Launch: the mark sends its signal while the phone finds its session. */
/* Only this release's script marks <html data-display>; an older cached script never hides the
   launch screen, so without the mark it stays out of the way. */
:root:not([data-display]) .launch{display:none}
.launch:not([hidden]){position:fixed;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px;background:var(--bg);text-align:center}
.launch .signal-mark{width:96px;height:96px}
.launch-status{max-width:30ch;font-size:14px;color:var(--muted)}
#launch-retry{min-width:150px;min-height:44px}
.launch[data-state=failed] .waves{opacity:.3}
@keyframes signal{0%,100%{opacity:.12}45%{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .launch:not([data-state=failed]) .wave{animation:signal 1.8s ease-in-out infinite}
  .launch .wave:nth-child(2){animation-delay:.18s}
  .launch .wave:nth-child(3){animation-delay:.36s}
}

/* Sign-in: the welcome fills the screen and the sheet sits where the thumb is. */
body[data-view=auth] .shell{display:flex;flex-direction:column;padding-bottom:0;border:0}
body[data-view=auth] main{flex:1;display:flex;flex-direction:column;padding:0}
.welcome:not([hidden]){flex:1;display:flex;flex-direction:column}
.welcome-hero{flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:32px 24px 24px}
.welcome-mark .signal-mark{display:block;width:76px;height:76px;margin-left:-6px}
.welcome .intro{margin:8px 0 0;padding:0;font-size:clamp(34px,11vw,46px);line-height:1.04;letter-spacing:-.03em;font-weight:500;color:var(--ink)}
.welcome-lead{max-width:30ch;font-size:16px;line-height:1.45;color:var(--body)}
.welcome-sheet{flex:none;display:grid;gap:12px;margin:0 8px max(8px,calc(env(safe-area-inset-bottom) - 4px));padding:18px 16px 14px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.auth-step{display:grid;gap:12px}
.auth-title{font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.auth-copy{font-size:15px;line-height:1.45;color:var(--body)}
.auth-copy strong{font-weight:500;color:var(--ink)}
.field{display:grid;gap:6px;color:var(--muted);font-size:13px}
.field input{margin:0;min-height:50px;padding:12px 14px;border-color:var(--edge);border-radius:10px;background:var(--terminal);font-size:17px}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.auth-primary{width:100%;min-height:50px;border-radius:10px;font-size:16px;font-weight:600}
.auth-hint{font-size:13px;line-height:1.45;color:var(--muted)}
.auth-alternatives{display:grid;gap:8px}
.auth-link,.auth-back{justify-self:start;min-height:36px;padding:4px 0;border:0;background:transparent;font-size:14px}
.auth-link{padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text);font-weight:600}
.auth-back{color:var(--muted);font-family:var(--mono);font-size:13px}
.auth-google{min-height:48px;gap:10px;border-radius:10px;font-weight:500}
.auth-status{padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent) 9%,var(--panel));font-size:14px;line-height:1.45;color:var(--ink)}
.auth-status[data-kind=error]{border-color:color-mix(in srgb,var(--error) 50%,var(--line));background:color-mix(in srgb,var(--error) 9%,var(--panel))}
/* Busy: the primary action keeps its size and spins where its words were. */
#auth[data-busy=true] .auth-primary:disabled{position:relative;opacity:1;color:transparent}
#auth[data-busy=true] .auth-step:not([hidden]) .auth-primary::after{content:'';position:absolute;inset:0;width:18px;height:18px;margin:auto;border:2px solid var(--fill-ink);border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Six cells over one field: the keyboard, paste and one-time-code autofill all land in it. */
.code-field{position:relative;display:block}
.code-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.code-cells i{display:grid;place-items:center;height:58px;border:1px solid var(--edge);border-radius:10px;background:var(--terminal);font:500 26px/1 var(--mono);font-style:normal;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
.code-cells i.is-filled{border-color:color-mix(in srgb,var(--accent) 45%,var(--edge))}
.code-field:focus-within .code-cells i.is-next{border:2px solid var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.code-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:16px;letter-spacing:0}
.code-input:focus-visible{outline:0}
.code-input::selection{background:transparent}
.code-input:-webkit-autofill{transition:background-color 600000s,color 600000s}
#auth[data-unverified=true] .auth-step{display:none}
#verify-email{display:grid;gap:10px}
#verify-email .stack{margin:4px 0 0;gap:8px}
.app-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
.app-legal a{min-height:32px;display:inline-flex;align-items:center;font-size:12px;color:var(--muted);text-decoration:none}
@media(prefers-reduced-motion:no-preference){
  .welcome:not([hidden]) .welcome-sheet{animation:sheet-in .5s cubic-bezier(.2,.8,.2,1) both}
  .welcome:not([hidden]) .welcome-mark .wave{animation:wave-in .6s cubic-bezier(.2,.8,.2,1) both}
  .welcome-mark .wave:nth-child(1){animation-delay:.15s}
  .welcome-mark .wave:nth-child(2){animation-delay:.3s}
  .welcome-mark .wave:nth-child(3){animation-delay:.45s}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(24px)}}
@keyframes wave-in{from{opacity:0}}
@media(min-width:640px){.welcome-hero{padding-inline:32px}.welcome-sheet{margin-inline:16px;padding:22px 24px 18px}}
/* Short screens keep the whole sheet in view: a smaller mark and headline, no lead line. */
@media(max-height:700px){.welcome-hero{gap:8px;padding:16px 24px 16px}.welcome-mark .signal-mark{width:56px;height:56px}.welcome .intro{font-size:clamp(28px,9vw,34px)}.welcome-lead{display:none}}
/* Typing: the sheet takes the screen above the keyboard; the welcome returns with it. */
body[data-view=auth][data-keyboard=true]{position:fixed;inset:0;overflow:hidden}
body[data-view=auth][data-keyboard=true] .shell{height:var(--app-height,100dvh);min-height:0;overflow:hidden;transform:translateY(var(--app-top,0px))}
body[data-view=auth][data-keyboard=true] main,
body[data-view=auth][data-keyboard=true] .welcome{min-height:0;overflow:hidden}
body[data-view=auth][data-keyboard=true] .welcome-hero{display:none}
body[data-view=auth][data-keyboard=true] .welcome-sheet{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scroll-padding-block:12px;align-content:start;margin-block:8px;padding:12px 16px;gap:10px;animation:none}
body[data-view=auth][data-keyboard=true] .auth-step{gap:10px}
body[data-view=auth][data-keyboard=true] .field input,
body[data-view=auth][data-keyboard=true] .auth-primary{min-height:44px;padding-block:9px}
body[data-view=auth][data-keyboard=true] .consent-legal-footer{display:none!important}

/* Account: the app's settings, grouped. Rows are separate tiles; nothing draws a divider. */
.account-view{padding-bottom:24px}
body[data-view=settings] .shell{padding-bottom:env(safe-area-inset-bottom)}
.account-head{flex-wrap:wrap;justify-content:flex-start;gap:2px;margin:6px 0 14px}
.account-head h1{flex-basis:100%;font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.profile-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sheet);background:var(--panel)}
.avatar{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,var(--control));color:var(--ink);font:600 20px/1 var(--font)}
.profile-text{min-width:0;display:grid;gap:2px}
.profile-text p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:500;color:var(--ink)}
.group-title{margin:24px 4px 8px;font-size:13px;font-weight:500;color:var(--muted)}
.group{display:grid;gap:2px;overflow:hidden;border-radius:var(--radius-sheet)}
.group>.computers{display:grid;gap:2px}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin:0;padding:10px 14px;border:0;border-radius:0;background:var(--panel);color:var(--ink);font-size:15px;text-align:left;text-decoration:none}
button.row,a.row{justify-content:flex-start}
button.row:active,a.row:active{background:color-mix(in srgb,var(--ink) 7%,var(--panel))}
.row-action{color:var(--ink);font-weight:500}
/* Actions carry the logo green in a tile, like app settings rows; their words stay ink. */
.row-icon{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--accent);color:var(--brand-ink)}
.row-icon svg{display:block}
.row-select{justify-content:space-between;cursor:pointer}
.row-select span{color:var(--ink);font-size:15px}
.row-select select{width:auto;min-height:36px;margin:0;padding:6px 30px 6px 10px;border:0;background-color:transparent;color:var(--muted);font-size:16px}
.row-link{justify-content:space-between}
.row-go{flex:none;margin-left:auto;color:var(--muted)}
.computer .computer-mark{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--control)}
.computer .computer-mark::before{content:'';width:16px;height:11px;margin-bottom:4px;border:1.6px solid var(--muted);border-radius:2px}
.computer .computer-mark::after{content:'';position:absolute;bottom:9px;width:22px;height:2px;border-radius:1px;background:var(--muted)}
.computer-text{flex:1;min-width:0;display:grid;gap:1px}
.computer-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.computer-text small{display:flex;align-items:center;gap:6px}
.computer-text small::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--muted)}
.computer[data-online=true] .computer-text small::before{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.computer .danger{flex:none;min-height:34px;padding:4px 12px;border-color:color-mix(in srgb,var(--error) 45%,var(--edge));border-radius:999px;background:transparent;font-size:13px}
.computers-empty{display:block;font-size:14px;line-height:1.5;color:var(--body)}
.computers-hint{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.computer{flex-wrap:wrap}
.computer-secure{display:flex;flex-wrap:wrap;gap:6px;width:100%;padding-left:46px}
.computer-secure button,.computer-update{min-height:34px;padding:4px 12px;border-radius:999px;font-size:13px}
.computer-update{width:100%;padding-left:46px;color:var(--muted)}
.add-computer{display:grid;gap:10px}
.add-computer input{font:500 16px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.add-computer button{justify-self:start}
.connect-code{display:grid;gap:4px;margin:14px 0 0;padding:14px;border:1px solid var(--edge);border-radius:var(--radius-card);background:var(--control);text-align:center}
.connect-code p{margin:0;font-size:13px;color:var(--muted)}
.connect-code strong{font:600 clamp(28px,9vw,40px)/1.1 var(--mono);letter-spacing:.12em;color:var(--ink)}
.unlock-status{min-height:1.5em;font-size:13px!important;color:var(--muted)!important}
.auth-forgot{justify-self:start;font-size:13px;color:var(--muted)}
.auth-forgot[hidden],.connect-code[hidden]{display:none}
.install-help.row{display:grid}
.group-note{margin:8px 4px 0;font-size:12px;line-height:1.5}
.group-note:empty{display:none}
.signout{width:100%;min-height:52px;margin-top:26px;border:1px solid color-mix(in srgb,var(--error) 40%,var(--line));border-radius:var(--radius-sheet);background:var(--panel);font-size:15px;font-weight:600}
/* Sign-out asks from a sheet at the bottom on a phone, a centred card elsewhere. */
.confirm-dialog{width:min(400px,calc(100% - 32px));padding:20px;border:1px solid var(--line)}
.confirm-dialog h2{margin:0 0 8px;font-size:18px;font-weight:600}
.confirm-dialog p{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--body)}
.confirm-actions{display:grid;gap:8px}
.confirm-actions button{min-height:48px;font-size:15px}
.danger-fill{border-color:var(--error);background:var(--error);color:var(--action-ink);font-weight:600}
@media(max-width:639px){.confirm-dialog{width:auto;max-width:none;margin:auto 8px calc(8px + env(safe-area-inset-bottom));border-radius:20px}}
@media(prefers-reduced-motion:no-preference){
  .confirm-dialog[open]{animation:sheet-in .28s cubic-bezier(.2,.8,.2,1)}
  body[data-view=detail] #detail:not([hidden]),body[data-view=settings] #settings:not([hidden]),body[data-view=connect] #connect:not([hidden]){animation:screen-in .3s cubic-bezier(.2,.8,.2,1)}
}
@keyframes screen-in{from{opacity:0;transform:translateX(18px)}}

/* Installed: an app, not a page. No website banner or footer, no link callouts, no bounce, and
   text selection only where there is something to copy. */
@media(display-mode:standalone){.cookie-banner,.consent-legal-footer{display:none!important}}
:root[data-display=app] :is(.cookie-banner,.consent-legal-footer){display:none!important}
:root:not([data-display=app]) .app-only,:root[data-display=app] #installed{display:none!important}
:root[data-display=app],:root[data-display=app] body{overscroll-behavior:none}
:root[data-display=app] body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:root[data-display=app] :is(input,textarea,select,.chat-block p,.markdown-document,.markdown-document *,.chat-event p,.task-screen,#task-title,#code,#email){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Company: a manager's live view of the team, on the phone. States use full frames and tints. */
.company-button{position:relative;flex:0 0 auto;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:1px solid var(--edge);background:var(--control);color:var(--ink)}
.company-button[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--control));color:var(--ink)}
.company-button svg{display:block}
.company-line{display:none;font:11px/1.5 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:is([data-view=company],[data-view=member]) #connection{display:none}
body:is([data-view=company],[data-view=member]) .company-line{display:block}
body:is([data-view=company],[data-view=member]) .shell{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.company-view{--co-running:var(--live);--co-review:var(--review);--co-done:var(--accent-text);padding-bottom:12px}
.co-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;margin:2px 0 6px}
.co-title{font-size:13px;font-weight:500;color:var(--muted)}
.co-beta{margin-right:auto;padding:2px 6px;border:1px solid currentColor;border-radius:4px;color:var(--muted);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:.8}
.co-body{display:grid;gap:10px}
.co-pulse{display:grid;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sheet);background:var(--panel)}
.co-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.co-stat{display:grid;gap:4px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg)}
.co-stat strong{font:600 26px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink)}
.co-stat span{font-size:12px;line-height:1.3;color:var(--muted)}
.co-stat[data-kind=running] strong{color:var(--co-running)}
.co-stat[data-kind=review] strong{color:var(--co-review)}
.co-stat[data-kind=done] strong{color:var(--co-done)}
.co-week-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.co-week-head strong{font:600 13px/1 var(--mono);color:var(--ink)}
.co-hint{font-size:11px}
.co-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;height:108px}
.co-bar{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:14px 1fr 16px;width:100%;justify-items:center;gap:3px;height:100%;min-height:0;padding:0;border:0;border-radius:var(--radius-chip);background:transparent;color:var(--muted)}
button.co-bar{padding:2px 0}
button.co-bar[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 16%,transparent);outline:1px solid var(--accent);outline-offset:0;color:var(--ink)}
.co-bar-count{font:600 10px/14px var(--mono);color:var(--body)}
.co-bar-track{position:relative;width:min(22px,70%);height:100%;border-radius:4px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}
.co-bar-fill{position:absolute;left:0;right:0;bottom:0;height:var(--h,0%);border-radius:4px;background:color-mix(in srgb,var(--accent) 70%,var(--panel));transition:height .45s cubic-bezier(.2,.8,.2,1)}
.co-bar[data-today=true] .co-bar-fill{background:var(--accent)}
.co-bar-day{font:11px/16px var(--mono)}
.co-bar[data-today=true] .co-bar-day{color:var(--ink);font-weight:600}
.co-section{display:flex;align-items:baseline;gap:8px;margin:6px 4px 0}
.co-section h2{font-size:15px;font-weight:600}
.co-section-count{font:12px var(--mono);color:var(--muted)}
.co-section[data-kind=running] h2{color:var(--co-running)}
.co-section[data-kind=review] h2{color:var(--co-review)}
.co-list,.co-people{display:grid;gap:6px}
.co-task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel)}
.co-task:not(:has(.co-avatar)){grid-template-columns:minmax(0,1fr) auto}
.co-task.co-tap{cursor:pointer}
.co-task.co-tap:active{background:color-mix(in srgb,var(--ink) 6%,var(--panel))}
.co-task[data-state=running]{border-color:color-mix(in srgb,var(--co-running) 45%,var(--line))}
.co-task-body{display:grid;gap:3px;min-width:0}
.co-task-name{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
.co-task-meta{display:flex;flex-wrap:wrap;gap:2px 8px;font:11px/1.4 var(--mono);color:var(--muted)}
.co-task-member{color:var(--body)}
.co-task-time{color:var(--body)}
.co-state{align-self:start;padding:2px 8px;border:1px solid var(--edge);border-radius:999px;font:11px/1.5 var(--mono);white-space:nowrap;color:var(--muted)}
.co-state[data-state=running]{border-color:var(--co-running);color:var(--co-running)}
.co-state[data-state=review]{border-color:var(--co-review);color:var(--co-review)}
.co-state[data-state=complete]{border-color:color-mix(in srgb,var(--accent) 60%,var(--edge));color:var(--co-done)}
.co-state[data-state=failed]{border-color:var(--error);color:var(--error)}
.co-avatar{--chip-accent:var(--chip-dark);position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--chip-accent);color:var(--bg);font:600 16px/1 var(--font)}
:root[data-theme=light] .co-avatar{--chip-accent:var(--chip-light)}
.co-avatar-sm{width:32px;height:32px;border-radius:10px;font-size:13px}
.co-avatar-lg{width:56px;height:56px;border-radius:16px;font-size:22px}
.co-avatar[data-private=true]{background:var(--control);color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge)}
.co-presence{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;background:var(--edge);box-shadow:0 0 0 2px var(--panel)}
.co-presence[data-online=true]{background:var(--accent)}
.co-avatar-sm .co-presence{display:none}
.co-person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;justify-content:stretch;gap:12px;width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel);text-align:left;color:var(--ink)}
.co-person:active:not(:disabled){background:color-mix(in srgb,var(--ink) 6%,var(--panel))}
.co-person:disabled{opacity:.6}
.co-person-text{display:grid;gap:2px;min-width:0}
.co-person-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600}
.co-person-line{font:11px/1.4 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-person-task{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--co-running)}
.co-person-side{display:grid;justify-items:end;gap:2px;min-width:56px}
.co-person-side strong{font:600 18px/1 var(--font);font-variant-numeric:tabular-nums}
.co-person-side small{font:10px/1 var(--mono)}
.co-mini{display:flex;align-items:flex-end;gap:2px;height:16px;margin-top:3px}
.co-mini i{width:5px;height:var(--h,8%);border-radius:1px;background:color-mix(in srgb,var(--accent) 75%,var(--panel))}
.co-mini i[data-empty=true]{background:var(--edge)}
.co-pages{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font:12px var(--mono);color:var(--muted);text-align:center}
.co-pages button{min-width:44px}
.co-empty{margin:0;padding:14px;border:1px dashed var(--edge);border-radius:var(--radius-card);color:var(--muted);font-size:13px;text-align:center}
.co-note{margin:4px 4px 0;font-size:12px;line-height:1.5;color:var(--muted)}
.co-note-framed{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel)}
.co-member-head{display:flex;align-items:center;gap:14px;padding:4px 2px 6px}
.co-member-title{min-width:0;display:grid;gap:2px}
.co-member-title h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:24px;font-weight:600;letter-spacing:-.02em}
.co-member-presence{font:12px var(--mono);color:var(--muted)}
#member .co-top{margin-left:-8px}
@media(min-width:520px){.co-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* A narrow phone gives the task name the full width; the state sits under it. */
@media(max-width:360px){.co-task{grid-template-columns:auto minmax(0,1fr)}.co-task:not(:has(.co-avatar)){grid-template-columns:minmax(0,1fr)}.co-state{grid-column:-2;justify-self:start}}
@media(prefers-reduced-motion:no-preference){
  body:is([data-view=company],[data-view=member]) :is(#company,#member):not([hidden]){animation:screen-in .3s cubic-bezier(.2,.8,.2,1)}
  .co-task[data-state=running] .co-state{animation:co-pulse 2.4s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){.co-bar-fill{transition:none}}
@keyframes co-pulse{50%{opacity:.55}}
:root[data-display=app] :is(.co-task-name,.co-person-task){-webkit-user-select:text;user-select:text}

/* Same subscription arc and window semantics as the desktop monitor. */
#usage-dialog { width:min(540px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:16px; background:var(--panel); color:var(--ink); }
#usage-dialog .heading { margin-bottom:4px; }
#usage-source { margin:0 0 14px; }
.mobile-usage-meters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px 5px; }
.mobile-usage-meters:not(:has([aria-label="Codex · 5 hours"])) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.mobile-usage-meter { min-width:0; text-align:center; }
.mobile-usage-gauge { position:relative; width:100%; max-width:52px; aspect-ratio:100/86; margin-inline:auto; }
.mobile-usage-gauge svg { display:block; width:100%; height:100%; overflow:visible; }
.mobile-usage-gauge strong { position:absolute; inset:0; display:grid; place-items:center; padding-top:6px; font:500 13px var(--font); }
.mobile-usage-gauge path { fill:none; stroke:var(--line); stroke-width:8; stroke-linecap:round; }
.mobile-usage-gauge .usage-arc-fill { stroke:var(--claude); stroke-dasharray:var(--usage-arc,0) 100; }
[data-provider="codex"] .mobile-usage-gauge .usage-arc-fill { stroke:#278253; }
.mobile-usage-meter[data-level="unavailable"] .usage-arc-fill,
.mobile-usage-meter[data-level="checking"] .usage-arc-fill,
.mobile-usage-gauge[aria-valuenow="0"] .usage-arc-fill { visibility:hidden; }
.mobile-usage-meter[data-level="critical"] strong { color:var(--error); }
.mobile-usage-meter[data-level="elevated"] strong { color:var(--attention); }
.mobile-usage-meter h3 { font:500 10px/1.4 var(--font); margin:4px 0; }
.mobile-usage-meter h3 span { display:block; }
.mobile-usage-meter p { font:400 9px/1.5 var(--font); margin:0; white-space:nowrap; }
.mobile-usage-meters > p { grid-column:1 / -1; }

:root[data-theme="dark"] [data-provider="codex"] .mobile-usage-gauge .usage-arc-fill { stroke:#7fd8a0; }
@media(prefers-color-scheme:dark) { :root:not([data-theme]) [data-provider="codex"] .mobile-usage-gauge .usage-arc-fill { stroke:#7fd8a0; } }
.mobile-usage-meter[data-level="warning"] strong { color:var(--starred); }

.mobile-usage-details { grid-column:1 / -1; border-top:1px solid var(--line); }
.mobile-usage-detail { display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.mobile-usage-detail:last-child { border-bottom:0; padding-bottom:0; }
.mobile-usage-detail > strong { font:500 11px/1.5 var(--font); }
.mobile-usage-detail small { font:400 10px/1.5 var(--font); overflow-wrap:anywhere; }
.mobile-usage-detail .usage-stale { color:var(--attention); }
.mobile-usage-detail .usage-checked { color:var(--muted); }

/* The update remains opt-in so drafts and command outcomes stay visible. */
.mobile-update { position: fixed; z-index: 1000; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; padding: 24px; text-align: center; background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-radius: 20px; box-shadow: 0 16px 64px #0005; }
.mobile-update-logo { height: 36px; margin: 0 auto 20px; }
.mobile-update-logo img { width: 146px; height: 36px; }
.update-logo-light { display: none; }
:root[data-theme=light] .update-logo-dark { display: none; }
:root[data-theme=light] .update-logo-light { display: inline; }
@media(prefers-color-scheme:light) { :root:not([data-theme]) .update-logo-dark { display: none; } :root:not([data-theme]) .update-logo-light { display: inline; } }
.mobile-update h2 { font-size: 20px; font-weight: 600; }
.mobile-update p { margin: 8px 0 20px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.mobile-update-actions { display: flex; gap: 12px; }
.mobile-update-actions button { flex: 1; min-height: 44px; border-radius: 10px; }
.mobile-update-actions .mobile-update-reload { background: var(--accent); color: var(--brand-ink); border-color: transparent; font-weight: 600; }

/* Completion sheets have no modal backdrop or focus changes. Workspace toasts float
   above the dock; inside a task they fold into an in-flow strip. Only the list scrolls,
   keeping individual cards and the count header at their full content height. */
.mobile-completions { position: fixed; z-index: 950; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(392px, 100vw); padding: 16px; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.mobile-completions-head { pointer-events: auto; flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: var(--panel); border: 1px solid var(--review); border-radius: 12px; box-shadow: 0 8px 32px #0004; }
.mobile-completions-summary { flex: 1; min-width: 0; color: var(--review); font-size: 13px; letter-spacing: .03em; }
.mobile-completions-head button { min-height: 36px; padding: 4px 12px; font-size: 13px; }
.mobile-completions-list { pointer-events: auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; border-radius: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mobile-completions-list::-webkit-scrollbar { display: none; }
.mobile-completion { flex: none; padding: 20px; background: var(--panel); color: var(--ink); border: 1px solid var(--review); border-radius: 16px; box-shadow: 0 16px 64px #0005; overflow-wrap: anywhere; }
.mobile-completion-label { display: block; color: var(--review); font-size: 13px; letter-spacing: .03em; }
.mobile-completion-context { color: var(--muted); font: 11px var(--mono); margin: 10px 0 6px; }
.mobile-completion-title { font-size: 18px; line-height: 1.35; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mobile-completion-actions { display: flex; gap: 8px; }
.mobile-completion-actions button { flex: 1; min-height: 44px; }
.mobile-completions[data-many=true] .mobile-completion { padding: 14px 16px; box-shadow: 0 8px 32px #0004; }
.mobile-completions[data-many=true] .mobile-completion-label { display: none; }
.mobile-completions[data-many=true] .mobile-completion-context { margin: 0 0 4px; }
.mobile-completions[data-many=true] .mobile-completion-title { font-size: 15px; margin-bottom: 12px; -webkit-line-clamp: 2; }
.mobile-completions:is([data-mode=strip],[data-mode=open]) { position: static; transform: none; width: auto; max-height: none; padding: 0; margin: 0 8px 6px; flex: 0 0 auto; }
.mobile-completions:is([data-mode=strip],[data-mode=open]) .mobile-completions-head { box-shadow: none; background: color-mix(in srgb, var(--review) 8%, var(--panel)); }
.mobile-completions[data-mode=open] .mobile-completions-list { max-height: min(46dvh, 420px); }
.mobile-completions[data-mode=open] .mobile-completion { box-shadow: none; }

.chat-live pre { max-height: min(22dvh, 180px); min-height: 80px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 var(--mono); color: var(--body); margin: 12px 0 0; }
.chat-live > strong { color: var(--live); font-size: 12px; }

/* Compact actions share the provider selector's 32px segment and 40px frame.
   Content cards and account rows keep their natural multi-line layout. */
:root{--segment-height:32px;--control-height:40px}
:is(.send,.back-button,.icon-button,.card-actions button,.review-card .actions button,.install-buttons button,.confirm-actions button,.mobile-completion-actions button,.task-dock .task-actions button,#follow-up button,#compose-capture,#capture-open,#capture-save,#usage-close,#capture-close,#image-close,#download,.office-fab,.office-overview,#usage-button){min-height:var(--control-height);padding-block:6px;line-height:1.2}
#follow-up{align-items:center}
@media(max-height:560px) and (min-width:640px){
  :root{--segment-height:28px;--control-height:36px}
}

/* Keep composer choices inside the page while the text keyboard is active. */
.composer-choice-picker { position: fixed; z-index: 1000; display: grid; gap: 4px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); box-shadow: 0 8px 24px #0004; }
.composer-choice-picker button { text-align: left; min-height: 40px; white-space: normal; overflow-wrap: anywhere; }
.composer-choice-picker button[aria-pressed="true"] { border-color: currentColor; font-weight: 700; }

/* Keep task categories reachable in Queue, Office and task detail. */
#ticket-dock .queue-head .tabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#ticket-dock .queue-head .tabs button{width:100%;min-width:0;padding:0;position:relative}
#ticket-dock .tabs svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#ticket-dock .queue-head{padding:2px 6px 6px}
/* An empty category keeps only its navigation, without an empty card or text. */
#ticket-dock .task-list[hidden]{display:none}
/* Errors float over the app and never consume a row in its viewport layout. */
#error{position:fixed;z-index:1100;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:560px;margin:0;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-color:color-mix(in srgb,var(--error) 35%,var(--line));background:var(--panel);box-shadow:0 8px 28px #0003}
#error-message{flex:1;min-width:0;overflow-wrap:anywhere;max-height:30dvh;overflow-y:auto;line-height:1.4}
#error svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
#error-dismiss{width:36px;height:36px;min-height:36px;flex:none;padding:0;border:0;border-radius:var(--radius-chip);background:var(--control);color:var(--body)}
#error-dismiss:hover{color:var(--ink);background:var(--edge)}

.mobile-images { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0; min-width:0; }
.mobile-images:empty { display:none; }
.mobile-images button { min-height:36px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.mobile-images .image-remove { flex-shrink:1; }

@media(max-width:639px) {
  body[data-composing=true] .composer { grid-template-rows:auto auto auto minmax(56px,1fr) auto; }
  body[data-composing=true] #task-name { grid-column:1;grid-row:3;min-width:0;width:100%; }
  body[data-composing=true] #prompt-images { grid-column:2;grid-row:3;max-width:110px;padding:0;max-height:40px;overflow:auto; }
  body[data-composing=true] .capture-setting { grid-column:1;grid-row:5; }
  body[data-composing=true] .send { grid-column:2;grid-row:5; }
}

/* Small, shared allowance summary in the room and focused agent, never in the dock. */
.usage-summary{display:block;flex:none;width:100%;min-height:44px;margin:0;padding:5px 12px;border:0;border-radius:0;background:var(--panel);text-align:left;color:var(--ink)}
/* In the room it is a framed card in line with the stage below, never a full-bleed band. */
#office-usage{width:calc(100% - 16px);min-height:40px;margin:0 8px 4px;padding-block:4px;border:1px solid var(--line);border-radius:var(--radius-card)}
.usage-summary-content{display:grid;gap:4px;width:100%;max-width:540px;margin-inline:auto}
.usage-summary-row{display:grid;grid-template-columns:48px repeat(3,minmax(0,1fr));gap:10px;align-items:center;font:10px/1.2 var(--font);font-variant-numeric:tabular-nums}
.usage-summary-row strong{font-weight:600}
.usage-summary-cell{display:grid;gap:2px;min-width:0;white-space:nowrap}
.usage-summary-track{display:block;height:2px;background:var(--line);overflow:hidden}
.usage-summary-track>span{display:block;height:100%;background:#db78a1}
.usage-summary-row[data-provider=codex] .usage-summary-track>span{background:#529f87}
#agent-usage{padding-inline:0;background:transparent;border-bottom:0}
#usage-button{justify-content:space-between}
/* Voice input: a microphone in the composers while the paired computer can transcribe, and a
   listening sheet with rising level bars. */
.voice-mic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;min-width:40px;height:40px;padding:0;border:1px solid var(--edge);border-radius:10px;background:var(--control);color:var(--body)}
.voice-mic[hidden]{display:none}
.voice-mic:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.voice-mic-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.prompt-box{position:relative}
.voice-mic-prompt{position:absolute;right:8px;bottom:8px}
.voice-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + var(--bottom-gap));background:rgb(0 0 0 / .45)}
.voice-sheet[hidden]{display:none}
.voice-sheet-card{width:min(440px,100%);display:grid;gap:10px;padding:18px 18px 16px;border:1px solid var(--edge);border-radius:18px;background:var(--panel);color:var(--ink);box-shadow:0 18px 48px rgb(0 0 0 / .35)}
.voice-sheet-state{display:flex;align-items:center;gap:8px;margin:0;font-size:16px}
.voice-live-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgb(127 216 160 / .6);animation:voice-live 1.4s ease-out infinite}
.voice-sheet[data-mode=busy] .voice-live-dot{animation:none;opacity:.5}
@keyframes voice-live{0%{box-shadow:0 0 0 0 rgb(127 216 160 / .55)}100%{box-shadow:0 0 0 10px rgb(127 216 160 / 0)}}
.voice-visual{width:100%;height:auto;max-height:120px}
.voice-sheet-meta{display:flex;justify-content:space-between;gap:12px;margin:0;font-family:var(--mono);font-size:13px;color:var(--muted)}
.voice-sheet-hint{margin:0;font-size:14px;color:var(--body)}
.voice-sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.voice-sheet-actions button{min-height:44px}
@media(prefers-reduced-motion:reduce){.voice-live-dot{animation:none}}
.prompt-box:has(.voice-mic:not([hidden])) textarea{padding-right:56px}
/* A microphone is a hold control. Keep the browser from converting the hold to scrolling. */
.voice-mic { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Controller: bounded route tiles above one large, voice-reactive hold surface. */
body[data-view=controller] .shell{height:var(--app-height,100dvh);min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--bottom-gap);transform:translateY(var(--app-top,0px));border:0}
.view-switch{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-view=controller] .identity{min-width:0}
.controller-view{display:flex;flex:1;min-height:0;flex-direction:column;gap:10px;padding:6px 12px 12px;overflow-y:auto;overscroll-behavior:contain}
.controller-routing{flex-shrink:0;display:grid;gap:8px}
.controller-heading{display:flex;align-items:baseline;gap:12px;justify-content:space-between}
.controller-heading h1{font-size:20px;margin:0;letter-spacing:-.6px}
.controller-heading>span{color:var(--muted);font:11px var(--mono)}
.controller-tiles{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px}
.controller-tile{flex:0 0 88px;min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;text-align:left;padding:8px;border-radius:10px;background:var(--panel);border-color:var(--line)}
.controller-tile strong{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.2}
.controller-tile small{font:10px var(--mono);color:var(--muted)}
.controller-tile[aria-pressed=true]{background:var(--control);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.controller-task-tiles .controller-tile{flex-basis:118px;min-height:56px}
.controller-task-tiles .controller-tile strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.controller-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.controller-options label{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px 10px;min-width:0}
.controller-options label>span{display:block;color:var(--muted);font-size:10px}
.controller-options select{border:0;background-color:transparent;margin:0;padding:0 22px 0 0;min-height:28px;width:100%;font-size:13px}
.controller-talk{flex:1 0 210px;min-height:210px;position:relative;flex-direction:column;gap:2px;justify-content:center;border-radius:26px;border:1px solid var(--edge);background:var(--panel);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding:10px;overflow:hidden}
.controller-talk svg{width:100%;max-width:340px;height:min(26vh,230px);min-height:140px;overflow:visible;pointer-events:none}
.controller-talk strong{font-size:25px;letter-spacing:-.6px;line-height:1.2}
.controller-talk>span{font-size:12px;color:var(--muted);padding:4px 12px 10px}
.controller-talk[data-phase=recording]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.controller-talk[data-phase=recording] strong{color:var(--accent-text)}
.controller-orbit{fill:none;stroke:var(--edge);stroke-width:1;stroke-dasharray:2 9}
.controller-orbit-inner{stroke-dasharray:none;opacity:.5}
.controller-waves path{fill:none;stroke:url(#controller-wave-color);stroke-width:2;stroke-linecap:round}
.controller-waves path:nth-child(2){opacity:.35;stroke-width:4}
.controller-waves path:nth-child(3){opacity:.15;stroke-width:7}
.controller-mic{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.controller-draft{flex-shrink:0;margin:0;display:grid;gap:6px}
.controller-draft>label{font-size:11px;color:var(--muted)}
.controller-draft textarea{width:100%;min-height:64px;max-height:120px;margin:0;padding:10px;font-size:14px;border-radius:10px;background:var(--panel);border-color:var(--line);resize:vertical}
.controller-send-row{display:flex;gap:8px;justify-content:space-between}
.controller-send-row .primary{min-width:65%;border-radius:10px;background:var(--accent);border-color:var(--accent);color:var(--brand-ink);font-weight:600}
.controller-draft>p{font-size:11px;color:var(--muted);margin:0;min-height:16px}
body[data-view=controller] header.top .identity small{max-width:95px}
@media(max-width:374px){.view-switch{grid-template-columns:repeat(3,minmax(0,1fr))}.controller-view{padding-inline:8px;gap:7px}.controller-heading h1{font-size:18px}.controller-talk{min-height:165px;flex-basis:165px}.controller-talk svg{min-height:95px;height:20vh}.controller-talk strong{font-size:21px}}
@media(max-height:700px){.controller-view{gap:6px}.controller-routing{gap:5px}.controller-tile{min-height:48px}.controller-talk{flex-basis:155px;min-height:155px}.controller-talk svg{min-height:95px;height:18vh}.controller-draft textarea{min-height:50px}}
@media(orientation:landscape) and (max-height:600px){.controller-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto}.controller-routing{grid-column:1;grid-row:1}.controller-talk{grid-column:2;grid-row:1/3;min-height:210px}.controller-draft{grid-column:1;grid-row:2}.controller-talk svg{height:30vh}}
body[data-view=controller]{position:fixed;inset:0;overflow:hidden}
body[data-view=controller] main{flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
header.top:has(#controller-view){flex-wrap:wrap;row-gap:4px}
header.top:has(#controller-view) .workspace-bar{order:5;flex:1 0 100%}
header.top:has(#controller-view) .view-switch{width:100%}
header.top:has(#controller-view) .identity{flex:1;min-width:0}
body[data-view=controller] header.top .identity small{max-width:none}
@media(max-height:700px) and (orientation:portrait){.controller-routing{gap:4px}.controller-heading h1{font-size:16px;line-height:24px}.controller-tiles .controller-tile{min-height:42px;padding:5px 7px;gap:2px}.controller-options label{padding-block:2px}.controller-options select{min-height:24px}.controller-talk{flex-basis:120px;min-height:120px;padding:4px}.controller-talk svg{height:70px;min-height:70px}.controller-talk strong{font-size:20px}.controller-talk>span{padding-bottom:4px}.controller-draft{gap:4px}.controller-draft textarea{height:48px;min-height:48px;padding:6px 8px}.controller-draft>p{font-size:10px;min-height:14px}}
.controller-spokes{stroke:var(--accent-text);stroke-width:2;stroke-linecap:round;opacity:.65}
.controller-talk:not([data-phase=recording]) .controller-spokes{opacity:.16}
/* An unreachable computer: a framed, tinted card with what happened and the steps that fix it. */
.computer-help{display:grid;gap:8px;margin:0 12px 8px}.computer-help[hidden]{display:none}
.help-card{border:1px solid color-mix(in srgb,var(--attention) 45%,var(--line));border-radius:var(--radius-card);background:color-mix(in srgb,var(--attention) 10%,var(--panel));padding:12px 14px;color:var(--body);font-size:14px}
.help-card:is([data-kind=offline],[data-kind=projects]){border-color:var(--edge);background:var(--panel)}
.help-card h2{margin:0 0 4px;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.help-card p{margin:0 0 6px}.help-card .help-seen{color:var(--muted);font-size:13px}
.help-card ol{margin:6px 0 10px;padding-left:20px;display:grid;gap:4px}
.help-card button{min-height:40px;padding:6px 14px}

/* Follow-up attachments and task actions share a compact footer row. */
.task-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.task-dock #follow-up{grid-column:1/-1;margin-bottom:0}
.task-dock #follow-images{grid-column:1;padding:0;align-items:center}
.task-dock .task-actions{grid-column:2;align-items:center}
.task-dock .task-actions button{padding-inline:10px;font-size:12px}

.help-card{display:flex;flex-direction:column;padding:10px 12px;font-size:13px;flex:none}
.help-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;order:1}
.help-actions button{min-height:36px;font-size:12px;padding:6px 10px;border-radius:var(--radius-chip);background:var(--control);border-color:var(--line)}
.help-actions button:first-child{background:var(--fill);color:var(--fill-ink);border-color:transparent}
.help-steps{margin-top:6px;order:2}
.help-steps summary{min-height:32px;width:fit-content;cursor:pointer;color:var(--ink);font-size:12px;padding:4px 0}
.help-steps summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.computer-help{flex:none;max-height:45%;overflow-y:auto;overscroll-behavior:contain;margin-inline:8px}
@media(max-height:560px) and (min-width:640px){
  header.top:has(#controller-view){flex-wrap:nowrap}
  header.top:has(#controller-view) .workspace-bar{order:0;flex:0 0 auto}
  header.top:has(#controller-view) .view-switch{width:auto}
}

.help-steps ol{max-height:min(18dvh,140px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}

/* Keep the phone conversation aligned with the desktop Chat in launchpad-v5.css. */
.task-chat{--chat-agent-bubble:#24262a;container-type:inline-size}
:root[data-theme=light] .task-chat{--chat-agent-bubble:#eceef1}
.chat-events{gap:22px;padding-block:12px}
.chat-message{min-width:0;display:flex;flex-direction:column;gap:7px;border:0;background:transparent;padding:0}
.chat-message-head{display:flex;align-items:baseline;gap:10px;color:var(--muted);font:11.5px/18px var(--mono)}
.chat-speaker{color:var(--ink);font:600 12px/18px var(--font)}
.chat-speaker[data-provider=codex]{color:var(--today)}
.chat-speaker[data-provider=claude]{color:var(--claude)}
.chat-speaker[data-provider=opencode]{color:var(--opencode)}
.chat-speaker[data-provider=antigravity]{color:var(--antigravity)}
.chat-request .chat-message-head{justify-content:flex-end}
.chat-bubble-stack{width:fit-content;min-width:0;max-width:min(78%,760px)}
.chat-request .chat-bubble-stack{margin-left:auto}
.chat-message-body{padding:9px 14px;border:0;border-radius:14px;font:400 13.5px/1.6 var(--font);background:var(--chat-agent-bubble);color:var(--body)}
.chat-request .chat-message-body{background:var(--project-fill-bg,var(--accent));color:var(--project-fill-fg,var(--brand-ink));font-size:14px;line-height:1.5}
.chat-message .markdown-document > :last-child{margin-bottom:0}
.chat-final .chat-bubble-stack{max-width:100%}
.chat-final .chat-message-body{position:relative;padding:0 0 0 36px;background:transparent;border-radius:0;font-size:13.5px;line-height:1.62}
.chat-final .chat-message-body::before{content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--review) 16%,transparent)}
.chat-final .chat-message-body::after{content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;background:var(--review);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.chat-final .markdown-document > p:first-child{font-size:16px;font-weight:500;line-height:1.45;color:var(--ink)}
.chat-harness-notice{margin-top:5px;padding-left:4px;color:var(--muted);font:11px/1.5 var(--mono)}
.chat-harness-notice summary{cursor:pointer;min-height:28px;display:flex;align-items:center;gap:6px}
.chat-harness-notice summary::before{content:'›'}
.chat-harness-notice[open] summary::before{transform:rotate(90deg)}
.chat-harness-body{white-space:pre-wrap;overflow-wrap:anywhere;padding-block:4px}
.task-dock #follow-up{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:10px 12px;border:0;border-radius:var(--radius-card);background:var(--control)}
.task-dock #follow-up:focus-within{background:color-mix(in srgb,var(--project-fill-bg,var(--accent)) 8%,var(--control))}
.task-dock #follow-up textarea{grid-column:1/-1;width:100%;min-height:40px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0}
.task-dock #follow-images{grid-column:1;grid-row:2;min-width:0;flex-wrap:wrap}
.task-dock #follow-up .follow-up-model{grid-column:1;grid-row:3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:11px/1.4 var(--font)}
.task-dock #follow-up button[type=submit]{grid-column:3;grid-row:2/4;background:var(--project-fill-bg,var(--accent));color:var(--project-fill-fg,var(--brand-ink));border:0;align-self:end}
.task-dock #follow-up .voice-mic{grid-column:2;grid-row:2/4;align-self:end}
@container (max-width:360px){.chat-request .chat-bubble-stack{max-width:88%}.chat-result .chat-bubble-stack{max-width:100%}.chat-final .chat-message-body{padding-left:32px}}
/* Keep attachment, model and Send on one footer line, as in the desktop card. */
.task-dock #follow-up{grid-template-columns:auto minmax(0,1fr) auto auto}
.task-dock #follow-up .follow-up-model{grid-column:2;grid-row:2;align-self:center}
.task-dock #follow-up button[type=submit]{grid-column:4;grid-row:2}
.task-dock #follow-up .voice-mic{grid-column:3;grid-row:2}
.task-dock #follow-images button{min-width:0;padding-inline:8px;font-size:12px}
/* Explicit Terminal keeps its compact input so terminal output retains the screen. */
.task-view:has(#task-screen:not([hidden])) #follow-up{padding:0;background:transparent;grid-template-columns:minmax(0,1fr) auto auto}
.task-view:has(#task-screen:not([hidden])) #follow-up textarea{grid-column:1;grid-row:1;padding:7px 10px;background:var(--control);border-radius:var(--radius-control)}
.task-view:has(#task-screen:not([hidden])) #follow-up button[type=submit]{grid-column:3;grid-row:1}
.task-view:has(#task-screen:not([hidden])) #follow-up .voice-mic{grid-column:2;grid-row:1}
.task-view:has(#task-screen:not([hidden])) #follow-up .follow-up-model{display:none}

/* Each project's Queue mirrors the desktop list; Office/detail retain their ticket rail. */
.filter-label{display:none}
body[data-view=queue] #ticket-dock{order:0;flex:1;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
body[data-view=queue] #queue:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
body[data-view=queue] .composer{flex:0 1 55%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
body[data-view=queue] #tasks{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-snap-type:none;gap:6px}
body[data-view=queue] #tasks>article{flex:0 0 auto;width:100%;scroll-snap-align:none}
body[data-view=queue] #tasks .task-title{-webkit-line-clamp:2}
body[data-view=queue] #tasks .task-time{display:inline}
body[data-view=queue] #ticket-dock .tabs svg{display:none}
body[data-view=queue] #ticket-dock .filter-label{display:inline;font:12px/1.25 var(--font)}
body[data-view=queue] #ticket-dock .tabs button{padding:5px 4px;min-height:38px}
body[data-view=queue] #ticket-dock .sr-only{position:static!important;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font:11px var(--mono)}
body[data-view=queue]:is([data-keyboard=true],[data-composing=true]) .composer{flex:1}
@media(min-width:640px) and (max-height:560px){
  body[data-view=queue] #queue:not([hidden]){flex-direction:row}
  body[data-view=queue] .composer{flex:1;min-width:0}
  body[data-view=queue] #ticket-dock{flex:1}
}
.queue-empty{display:none;margin:0;padding:24px 12px;color:var(--muted);text-align:center}
body[data-view=queue] .queue-empty{display:block}
body[data-view=queue] #ticket-dock:has(#tasks[hidden]){grid-template-rows:auto 1fr}

/* A real composer footer: attachments and voice share a row, capture gets its own space. */
.prompt-toolbar{display:flex;align-items:flex-start;gap:8px;min-width:0}
.prompt-toolbar #prompt-images{flex:1;min-width:0;margin:0;padding:0;gap:6px}
.prompt-toolbar #prompt-images>button:first-of-type{gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--control);color:var(--ink);font:500 12px/1.2 var(--font)}
.prompt-toolbar #prompt-images>button:first-of-type::before{content:'+';font-size:18px;font-weight:400;line-height:1}
.prompt-toolbar .image-remove{border:1px solid var(--line);background:var(--control);border-radius:var(--radius-control)}
.prompt-toolbar .voice-mic-prompt{position:static;align-self:flex-start;margin-left:auto;width:36px;min-width:36px;height:36px;min-height:36px;border-color:var(--line);border-radius:var(--radius-control)}
.prompt-box:has(.voice-mic:not([hidden])) textarea{padding-right:10px}
.capture-setting{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--radius-card);background:var(--control)}
.capture-setting .check{flex:1;min-width:0;min-height:36px;gap:8px}
.capture-setting .check>span{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.capture-setting .check strong{font:500 12px/1.3 var(--font);color:var(--ink);white-space:normal;overflow:visible}
.capture-setting .check small{display:block;flex:none;max-width:100%;margin:0;font:11px/1.35 var(--font);color:var(--muted);white-space:normal;overflow-wrap:anywhere}
#compose-capture{min-height:32px;max-width:35%;padding:5px 8px;margin:0;border:1px solid var(--edge);border-radius:var(--radius-control);color:var(--body);font:11px/1.3 var(--font);white-space:normal;text-align:center;flex:none}
.capture-setting .capture-short{display:none}
@media(max-width:639px){
  body[data-composing=true] .composer{grid-template-rows:auto auto auto minmax(56px,1fr) auto auto}
  body[data-composing=true] .prompt-toolbar{grid-column:1/-1;grid-row:5}
  body[data-composing=true] .prompt-toolbar #prompt-images{max-width:none;max-height:36px;grid-column:auto;grid-row:auto}
  body[data-composing=true] .capture-setting{grid-column:1;grid-row:6;min-height:36px;padding:0;background:transparent}
  body[data-composing=true] .capture-setting .check{flex:0 1 auto;min-height:36px}
  body[data-composing=true] .capture-setting :is(.capture-long,small){display:none}
  body[data-composing=true] .capture-setting .capture-short{display:block}
  body[data-composing=true] .send{grid-column:2;grid-row:6}
  body[data-composing=true] #task-name{grid-column:1/-1}
}
/* One provider summary in the header, shared by Queue, Office, Controller and task detail. */
.usage-header{padding:0;background:transparent}
.usage-header:has(#office-usage[hidden]){display:none}
.usage-header #office-usage{width:100%;min-height:32px;margin:0;padding:2px 0;border:0;border-radius:0;background:transparent}
.usage-header .usage-summary-content{max-width:360px;margin-inline:0}
.usage-header .usage-summary-row{grid-template-columns:34px repeat(3,minmax(0,1fr));gap:6px;font-size:9px}
.usage-header .usage-summary-row strong{font-size:9px;line-height:1.2}
header.top:has(#office-usage:not([hidden])) :is(.brand,#settings-button,#company-button){align-self:center;margin-top:0}
body[data-view=detail]:has(#view-chat[aria-pressed=true]):not([data-keyboard=true]):not([data-composing=true]) header.top:has(#office-usage:not([hidden])){display:flex}
#agent-usage{display:none}
body:is([data-composing=true],[data-keyboard=true]) .usage-header{display:none}
@media(max-height:560px) and (min-width:640px){.capture-setting{padding:5px 8px}.capture-setting .check{min-height:28px}.capture-setting .check small{display:none}.prompt-toolbar .voice-mic-prompt{height:32px;min-height:32px}}

/* Secondary screens replace the brand with a modal-style return control. */
header.top :is(#settings-back,#connect-back){display:none;flex:0 0 auto;min-height:44px;max-width:48%;padding:6px 8px 6px 0;font:500 15px/1.3 var(--font);color:var(--ink);text-align:left}
body[data-view=settings] #settings-back,body[data-view=connect] #connect-back{display:inline-flex}
body:is([data-view=settings],[data-view=connect]) header.top .brand{display:none}
body:is([data-view=settings],[data-view=connect]) #settings-button{display:none}

/* Native reading type for form values; display and code retain their existing faces. */
:root{--input-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
input,select,textarea,.prompt-box input,.prompt-box textarea,.machine-switch select{font-family:var(--input-font);font-weight:400;letter-spacing:normal}
.field-label{font-family:var(--input-font);font-weight:500;letter-spacing:normal}
input::placeholder,textarea::placeholder{font-family:var(--input-font);font-weight:400;color:var(--muted);opacity:1}
/* Grid rows keep the whole footer in the composer's scroll range. */
.prompt-toolbar{flex:none}
@media(min-height:561px),(max-width:639px){
  body:not([data-composing=true]) .prompt-box{display:contents}
  body:not([data-composing=true]) .composer{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content max-content minmax(80px,1fr) max-content max-content max-content;align-content:start}
}
@media(max-width:639px){
  body[data-composing=true] .composer{gap:6px;padding:8px}
  body[data-composing=true] .composer-head{min-height:32px}
  body[data-composing=true] #task-name{min-height:32px;padding-block:4px}
  body[data-composing=true] .prompt-toolbar :is(button,.voice-mic-prompt){min-height:32px;height:32px}
}

/* Landscape keeps Send visible while the full prompt and footer scroll above it. */
@media(max-height:560px) and (min-width:640px){
  .composer .prompt-box{min-height:max-content}
  .composer .send{position:sticky;bottom:0;z-index:1}
}

/* Workspace identity remains accessible while logo, usage and avatar share one row. */
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview],[data-view=detail]) header.top .identity>:is(#workspace-name,#connection,#company-line){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Queue is a full-height reading surface. The only prominent action opens its sheet. */
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--segment-height:30px;--control-height:36px}
:root[data-theme=dark]{--bg:#0b0b0d;--panel:#1c1c1e;--control:#2c2c2e;--line:#2c2c30;--edge:#3a3a3e;--ink:#f2f2f7;--body:#d1d1d6;--muted:#98989f;--terminal:#141416;--sw-well:#1c1c1e;--sw-card:#3a3a3c;--sw-ink:#f2f2f7;--sw-muted:#a1a1a8}
body[data-view=queue] .shell{position:relative}
body[data-view=queue] #queue:not([hidden]){position:relative;flex-direction:column}
body[data-view=queue] #ticket-dock{margin:0 10px 8px;border:0;border-radius:0;background:transparent;padding:0}
body[data-view=queue] #ticket-dock .queue-head{padding:0 0 10px}
.view-switch,.tabs,.task-view-switch,.providers{padding:3px}
.view-switch button{font-size:13px}
body[data-view=queue] #ticket-dock .tabs button{height:30px;min-height:30px;padding:0 3px;gap:4px}
body[data-view=queue] #ticket-dock .filter-label{font-size:11px;font-weight:500;white-space:nowrap}
body[data-view=queue] #ticket-dock .sr-only{font:500 10px var(--font);color:var(--muted)}
body[data-view=queue] #tasks{padding:0 0 12px;gap:6px;scroll-padding-block:8px 12px}
body[data-view=queue] #tasks>article{border:1px solid transparent;background:color-mix(in srgb,var(--panel) 72%,var(--bg));border-radius:17px}
body[data-view=queue] #tasks .task-open{min-height:64px;padding:10px 12px;gap:5px}
body[data-view=queue] #tasks .queue-section{display:none}
body[data-view=queue] #tasks .task-title{font-size:14px;line-height:1.4;font-weight:500;letter-spacing:-.15px}
body[data-view=queue] #tasks :is(.task-line,.task-time,.task-status){font-family:var(--font);font-size:10px}
body[data-view=queue] #tasks .task-line{gap:4px}
body[data-view=queue] #tasks .task-status{padding:0}
body[data-view=queue] #tasks .review-card{padding-bottom:10px}
body[data-view=queue] #tasks .actions{display:flex;gap:8px;padding:0 12px}
body[data-view=queue] #tasks .actions button{min-height:30px;padding:4px 10px;font:500 12px/1.3 var(--font);border-radius:8px;background:var(--control);border-color:transparent}
body[data-view=queue] #tasks .actions .primary{background:color-mix(in srgb,var(--review) 14%,var(--panel));color:var(--review)}
.project-tab{min-height:48px;padding:6px 2px 4px;gap:3px}
.project-tab .tab-name{font:10px/1.3 var(--font)}
.queue-add{display:none;position:absolute;z-index:2;right:10px;top:9px;width:40px;height:40px;min-height:40px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--bg);box-shadow:none}
body[data-view=queue] .queue-add{display:flex}
.queue-add svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
body[data-composer-open=true] #queue{position:static!important}
.compose-backdrop{position:absolute;inset:0;z-index:30;width:100%;height:100%;border:0;border-radius:0;background:#0008;cursor:default}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form{position:absolute;z-index:31;inset:auto 0 0;display:flex;flex-direction:column;gap:10px;width:100%;height:min(640px,calc(100% - 16px));max-height:calc(100% - 16px);margin:0;padding:12px 16px max(16px,env(safe-area-inset-bottom));border:1px solid var(--edge);border-bottom:0;border-radius:24px 24px 0 0;background:var(--panel);box-shadow:0 -12px 48px #0003;overflow-y:auto;overscroll-behavior:contain}
.compose-sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.compose-sheet-heading h2{font:600 17px/1.3 var(--font)}
#compose-close{width:32px;height:32px;min-height:32px;padding:7px;border:0;border-radius:50%;background:var(--control);color:var(--muted)}
#compose-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .composer-head{display:flex;flex:none;min-height:36px}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .providers{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .prompt-box{display:contents}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form :is(.model-row,#task-name,.prompt-toolbar,#send-prompt){flex:none}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #prompt{flex:1 0 100px;min-height:100px}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #send-prompt{position:static;min-height:40px;font-size:14px}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .draft-note{display:none}
body[data-composer-open=true] .queue-add{visibility:hidden}
body[data-keyboard=true]:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form{max-height:100%;height:100%;padding-bottom:8px;border-radius:18px 18px 0 0;gap:6px}
body[data-keyboard=true]:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #prompt{flex-basis:64px;min-height:64px}
@media(prefers-reduced-motion:no-preference){
  body[data-composer-open=true] #prompt-form{animation:compose-slide-up .28s cubic-bezier(.2,.8,.2,1)}
  body[data-composer-open=true] .compose-backdrop{animation:compose-dim .2s ease-out}
}
@keyframes compose-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes compose-dim{from{opacity:0}to{opacity:1}}

/* A compact project bar and a flat project sheet. */
.project-tabs{position:relative;isolation:isolate;z-index:10;flex:none;height:58px;padding:0;margin:0 12px 10px;border:0;border-radius:14px;background:var(--panel);overflow:visible}
.project-toggle{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-start;gap:10px;width:calc(100% - 60px);height:58px;min-height:58px;padding:8px 12px;border:0;border-radius:14px;background:transparent;box-shadow:none;color:var(--ink);text-align:left;touch-action:none}
body:not([data-view=queue]) .project-toggle{width:100%}
.project-toggle:hover{background:transparent}
.project-stack{flex:none;width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.5}
.current-project-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
#current-project-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px/1.2 var(--font)}
#current-project-activity{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:10px/1.3 var(--font)}
.project-toggle .project-chevron{flex:none;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.project-toggle[aria-expanded=true] .project-chevron{transform:rotate(180deg)}
.project-drawer{position:absolute;z-index:3;bottom:68px;left:0;right:0;padding:18px 16px 12px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 12px 40px #0004;overflow:hidden}
.project-drawer-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.project-drawer-head>div{display:flex;align-items:baseline;gap:8px}
.project-drawer-head h2{font-size:25px;font-weight:700;letter-spacing:-.8px}
#project-drawer-count{font-size:13px;color:var(--muted)}
#projects-close{width:28px;min-height:28px;height:28px;padding:6px;border:0;border-radius:50%;background:var(--control);color:var(--muted)}
#projects-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
/* The picker alone uses the operator's colorful folder-card reference. */
.project-tabs[data-expanded=true] .project-rail{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:1px;max-height:min(56dvh,420px,calc(var(--app-height,100dvh) - 200px));overflow-y:auto;overflow-x:hidden;scroll-snap-type:none}
.project-tabs .project-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;flex:none;width:100%;max-width:none;min-width:0;min-height:104px;margin:0;padding:12px 6px 10px;border:1px solid transparent;border-radius:17px;background:var(--control);transition:background-color .18s ease;text-align:center}
.project-tabs .project-tab[aria-pressed=true]{border-color:color-mix(in srgb,var(--chip-accent) 48%,transparent);background:color-mix(in srgb,var(--chip-accent) 9%,var(--control))}
.project-tabs .project-tab[aria-pressed=true]::after{content:'';position:absolute;right:9px;top:9px;width:4px;height:4px;border-radius:50%;background:var(--chip-accent)}
.project-tabs .tab-badge,.project-tabs .project-tab[aria-pressed=true] .tab-badge{position:relative;flex:none;width:46px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--ink);box-shadow:none;transform:none}
.project-folder{position:absolute;inset:0;width:46px;height:38px;fill:var(--chip-dark);pointer-events:none}
.folder-back{opacity:.55}.folder-paper{fill:#fff;opacity:.28}
.project-tabs .tab-letters{position:relative;z-index:1;align-self:end;margin-bottom:6px;font:700 12px/1 var(--font);color:#101113}
.project-tabs .tab-count{z-index:2;display:grid;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 3px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);font:600 9px/1 var(--font);box-shadow:none}
.project-tabs .tab-count:empty,.project-tabs .project-tab[data-review=true] .tab-badge::after{display:none}
.project-tabs .tab-name{width:100%;padding:0;font:600 11px/1.25 var(--font);color:var(--ink)}
.project-activity{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:9px/1.2 var(--font);color:var(--muted)}
.project-tabs :is(.all-tab,.add-tab) .tab-badge{width:38px;border:1px solid var(--line);background:transparent;color:var(--muted)}
.project-tabs .tab-mosaic{width:23px;height:23px;gap:4px;transform:rotate(-15deg)}
.project-tabs .mosaic-cell{border-radius:50%;background:var(--chip-dark)}
.project-tabs .tab-plus{font:300 24px var(--font)}
.project-tabs .tab-indicator{display:none}
/* The project sheet never fades: setProjectSheet() moves it opaquely between detents. */
@media(prefers-reduced-motion:no-preference){
  .queue-add:active{transform:scale(.94)}
}

/* Detail keeps input, send and task acknowledgement on a single quiet row. */
body[data-view=detail] .task-dock{display:flex;align-items:flex-start;gap:6px;padding:6px;margin:0 10px 8px;border-radius:14px;background:var(--panel)}
body[data-view=detail] .task-dock #follow-up{display:grid;flex:1;min-width:0;grid-template-columns:minmax(0,1fr) 32px;gap:6px;padding:0;background:transparent;border:0}
body[data-view=detail] .task-dock #follow-up textarea{grid-column:1;grid-row:1;min-height:32px;height:32px;max-height:96px;padding:5px 8px;background:var(--control);border-radius:9px;font-size:16px;line-height:22px;resize:none}
body[data-view=detail] .task-dock #follow-up textarea:focus{height:64px;outline:1px solid var(--focus);outline-offset:-1px}
body[data-view=detail] .task-dock #follow-up button[type=submit]{grid-column:2;grid-row:1;align-self:start;width:32px;min-width:32px;height:32px;min-height:32px;padding:6px;border-radius:50%}
body[data-view=detail] .task-dock .task-actions{display:flex;gap:4px;margin:0;padding:0}
body[data-view=detail] .task-dock .task-actions:has(>button:not([hidden])){flex:none}
body[data-view=detail] .task-dock :is(.task-actions button,#follow-options-toggle){flex:none;width:32px;height:32px;min-height:32px;padding:6px;border:0;border-radius:50%}
body[data-view=detail] .task-dock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-view=detail] .task-dock #review{background:color-mix(in srgb,var(--review) 16%,var(--panel));color:var(--review)}
body[data-view=detail] .task-dock:not([data-expanded=true]) :is(#follow-images,#follow-up-model,#follow-up-voice){display:none}
body[data-view=detail] .task-dock[data-expanded=true] #follow-images{grid-column:1;grid-row:2}
body[data-view=detail] .task-dock[data-expanded=true] #follow-up-model{grid-column:1;grid-row:3;font-size:10px}
body[data-view=detail] .task-dock[data-expanded=true] #follow-up-voice{grid-column:2;grid-row:2;width:32px;min-width:32px;min-height:32px;height:32px;padding:6px}
body[data-view=detail] #follow-options-toggle[aria-expanded=true] svg{transform:rotate(45deg)}
body[data-view=detail] .task-dock:has(#follow-up[hidden]) #follow-options-toggle{display:none}
body[data-view=detail] .task-view-title h1{font-size:16px;line-height:1.35}
body[data-view=detail] #ticket-dock{margin:0 10px 8px;border:0;background:transparent;padding:0}
body[data-view=detail] #ticket-dock .queue-head{padding:0 0 6px}
body[data-view=detail] #tasks{padding:0 0 3px}
body[data-view=detail] #tasks .queue-section{display:none}
body[data-view=detail] #tasks .task-open{min-height:54px;padding:8px 10px}
body[data-view=detail] #tasks :is(.task-line,.task-status){font:10px/1.4 var(--font)}
body[data-view=detail] #tasks .task-title{font-size:12px}
body[data-view=detail] #tasks>article{background:var(--panel);border-color:var(--line)}

/* Quiet navigation and task actions let the project dock carry the visual identity. */
body[data-view=queue] .view-switch{background:transparent;padding:3px 0;gap:8px}
body[data-view=queue] .view-switch button{border-radius:12px;font-size:12px}
body[data-view=queue] .view-switch button[aria-pressed=true]{background:var(--control);box-shadow:none}
body[data-view=queue] #ticket-dock .tabs{background:transparent;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 8px;gap:6px}
body[data-view=queue] #ticket-dock .tabs button{border-radius:10px}
body[data-view=queue] #ticket-dock .tabs button[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 8%,var(--bg));box-shadow:none}
body[data-view=queue] #tasks .actions button{background:transparent;color:var(--body);padding:3px 6px;min-height:28px;font-size:11px}
body[data-view=queue] #tasks .actions .primary{background:transparent;color:var(--review)}
body[data-view=queue] #tasks .review-card{background:color-mix(in srgb,var(--review) 4%,var(--panel))}
body[data-view=queue] #tasks .task-line{color:var(--muted)}
body[data-view=queue] #tasks .task-status{font-size:9px}
body[data-view=detail] .task-dock #follow-up button[type=submit]{background:var(--ink);color:var(--bg)}
body[data-view=detail] .task-dock{border-color:color-mix(in srgb,var(--ink) 10%,transparent);background:linear-gradient(130deg,color-mix(in srgb,var(--panel) 95%,#99a7cf),var(--panel))}

.project-running,.project-review{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.project-running{color:var(--live)}.project-review{color:var(--review)}
.project-running::before,.project-review::before{content:'';display:block;width:9px;height:9px;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center}
.project-running::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m4 2 6 4-6 4Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.project-review::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6 3 3 5-6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form{border-color:color-mix(in srgb,var(--ink) 12%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--panel) 96%,#a3b5da),var(--panel));border-radius:28px 28px 0 0}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #send-prompt{justify-content:space-between;min-height:42px;padding:10px 15px;border:0;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:600}
#send-prompt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .capture-setting{background:transparent;padding:6px 0;border:0}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form :is(input,select,textarea){border-color:color-mix(in srgb,var(--ink) 12%,transparent)}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #compose-capture{border:0;background:var(--control);border-radius:10px;font-size:11px}

/* Flat reading surfaces and a restrained hierarchy, following the chosen Music direction. */
:root[data-theme=dark]{--bg:#000;--panel:#19191b;--control:#29292c;--line:#27272a;--edge:#36363a;--ink:#f5f5f7;--body:#d6d6da;--muted:#929298;--terminal:#111113;--sw-well:#19191b;--sw-card:#303034}
:root[data-theme=light]{--bg:#fff;--panel:#f5f5f7;--control:#ebebee;--line:#e7e7eb;--edge:#d8d8de;--ink:#171719;--body:#37373c;--muted:#76767e;--terminal:#fff;--sw-well:#f5f5f7;--sw-card:#e9e9ed}
body:is([data-view=queue],[data-view=office],[data-view=overview]) header.top #office-usage{display:none}
body:is([data-view=queue],[data-view=office],[data-view=overview]) header.top .identity #workspace-name{position:static;width:auto;height:auto;margin:0;overflow:hidden;clip-path:none;font:600 13px/1.3 var(--font)}
header.top .brand{border:0;background:transparent;width:28px;height:28px;flex-basis:28px}
body[data-view=queue] header.top{padding:8px 16px 0;gap:8px}
body[data-view=queue] .view-switch{padding:5px 0;gap:6px}
body[data-view=queue] .view-switch button{height:30px;min-height:30px;border-radius:8px;font-size:12px}
.queue-heading{flex:none;margin:16px 18px 10px}
.queue-heading h1{font:700 29px/1.12 var(--font);letter-spacing:-1px}
body[data-composer-open=true] .queue-heading{visibility:hidden}
body[data-view=queue] #ticket-dock{margin:0 18px 8px}
body[data-view=queue] #ticket-dock .queue-head{padding-bottom:0}
body[data-view=queue] #ticket-dock .tabs{border-bottom:1px solid var(--line);padding-bottom:8px}
body[data-view=queue] #tasks{gap:0;padding-bottom:10px}
body[data-view=queue] #tasks>article{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
body[data-view=queue] #tasks .task-open{padding:14px 0 12px;min-height:72px;gap:6px}
body[data-view=queue] #tasks .task-title{font-size:14px;line-height:1.4;font-weight:500}
body[data-view=queue] #tasks .task-provider{color:var(--muted)}
body[data-view=queue] #tasks .task-id{color:var(--muted)}
body[data-view=queue] #tasks .actions{padding:0 0 6px;gap:18px}
body[data-view=queue] #tasks .actions button{padding:2px 0;min-height:26px}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form{border-color:var(--line);background:var(--panel)}
body[data-view=detail] header.top:has(#office-usage:not([hidden])){display:none!important}
body[data-view=detail] #ticket-dock{display:none}
body[data-view=detail] .task-view-head{padding:10px 14px 4px;gap:8px;min-height:48px}
body[data-view=detail] #back{font:500 13px/1.2 var(--font);padding:5px 0;border:0;color:var(--body)}
body[data-view=detail] .task-view-switch{background:transparent;padding:0;gap:4px;min-height:30px}
body[data-view=detail] .task-view-switch button{height:30px;min-height:30px;padding:0 8px;border-radius:8px;font:500 11px/1 var(--font)}
body[data-view=detail] .task-view-switch button[aria-pressed=true]{background:var(--panel);box-shadow:none;color:var(--ink)}
body[data-view=detail] .task-view-title{padding:14px 18px 18px;gap:9px;border-bottom:1px solid var(--line)}
body[data-view=detail] .task-view-title h1{font:650 23px/1.18 var(--font);letter-spacing:-.65px;-webkit-line-clamp:2}
body[data-view=detail] #task-meta{gap:6px;font:11px/1.4 var(--font)}
body[data-view=detail] #task-meta :is(.task-provider,.task-id){color:var(--muted)}
body[data-view=detail] #task-meta :is(.task-time,.task-status){font:11px/1.4 var(--font)}
body[data-view=detail] .task-chat{padding:20px 18px 22px;gap:14px}
body[data-view=detail] .chat-events{gap:28px;padding:0}
body[data-view=detail] .chat-message-head{font:11px/1.4 var(--font);gap:8px}
body[data-view=detail] .chat-speaker{color:var(--body);font:600 12px/1.4 var(--font)}
body[data-view=detail] .chat-bubble-stack{max-width:90%}
/* Both speakers use desktop project fill tokens; scoped ink also covers Markdown. */
body[data-view=detail] .chat-message-body{--ink:var(--project-fill-fg,var(--brand-ink));--body:var(--ink);--muted:var(--ink);--line:color-mix(in srgb,var(--ink) 28%,transparent);--terminal:color-mix(in srgb,var(--ink) 10%,var(--project-fill-bg,var(--accent)));--panel:var(--terminal);background:var(--project-fill-bg,var(--accent));color:var(--ink);padding:12px 15px;border-radius:18px;font:400 14px/1.5 var(--font)}
body[data-view=detail] .chat-final .chat-bubble-stack{max-width:100%;width:100%}
body[data-view=detail] .chat-final .chat-message-body{padding:12px 15px;background:var(--project-fill-bg,var(--accent));border-radius:18px;font:400 14px/1.65 var(--font);color:var(--ink)}
body[data-view=detail] .chat-final .chat-message-body::before,body[data-view=detail] .chat-final .chat-message-body::after{content:none}
body[data-view=detail] .chat-final .markdown-document>:first-child{margin-top:0}
body[data-view=detail] .markdown-document :is(h1,h2){font-size:20px;line-height:1.3;font-weight:650;letter-spacing:-.4px;color:var(--ink);margin:24px 0 12px}
body[data-view=detail] .markdown-document h3{font-size:16px;letter-spacing:-.2px;color:var(--ink)}
body[data-view=detail] .markdown-document p{margin:0 0 16px}
body[data-view=detail] .markdown-document a{color:var(--ink);text-decoration-color:var(--muted);text-underline-offset:3px}
body[data-view=detail] .markdown-document blockquote{border:0;border-radius:10px;padding:10px 14px;background:var(--panel);margin:16px 0;color:var(--muted)}
body[data-view=detail] .task-dock{margin:0 12px 10px;padding:6px;gap:6px;border:1px solid var(--line);border-radius:24px;background:var(--panel)}
body[data-view=detail] .task-dock #follow-up textarea{background:transparent;padding-inline:3px;border-radius:0;font-size:16px}
body[data-view=detail] .task-dock #review{background:transparent;color:var(--review)}
body[data-view=detail] .task-dock #follow-up textarea:focus{border-radius:8px}
@media(max-width:359px){body[data-view=detail] .task-view-head{padding-inline:12px;gap:6px}body[data-view=detail] .task-view-switch button{padding-inline:6px;font-size:10px}}
body[data-view=queue] #tasks .review-card{background:transparent}
@media(max-height:560px) and (min-width:640px){.queue-heading{display:none}}

/* One floating control row, shared by Queue and the real Office scene. */
body:is([data-view=queue],[data-view=office],[data-view=controller]) .shell{position:relative}
body:is([data-view=queue],[data-view=office]) #project-tabs{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));height:52px;margin:0;padding:3px;display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 6px 24px #0004}
body:is([data-view=queue],[data-view=office]) #project-toggle{flex:0 1 89px;width:89px;min-width:0;height:44px;min-height:44px;padding:0 3px;gap:6px;border-radius:9px}
body:is([data-view=queue],[data-view=office]) .project-stack{width:22px;height:23px;fill:var(--chip-dark,var(--accent));stroke:none}
body:is([data-view=queue],[data-view=office]) #current-project-name{font-size:10px;letter-spacing:-.15px}
body:is([data-view=queue],[data-view=office]) #current-project-activity{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body:is([data-view=queue],[data-view=office]) .project-chevron{display:none}
#task-filters{flex:1;min-width:0;display:flex;gap:2px;padding:0;border:0;border-radius:0;background:transparent}
#task-filters button{flex:1;min-width:0;height:44px;min-height:44px;padding:0 6px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:10px;font:500 10px/1 var(--font);letter-spacing:-.2px;white-space:nowrap;background:transparent;color:var(--muted)}
#task-filters button[aria-pressed=true]{background:var(--control);color:var(--ink);box-shadow:none}
#task-filters .filter-label{display:inline;font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}
#task-filters .sr-only{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;font:500 9px/1 var(--font);color:var(--muted)}
#task-filters svg{display:none;width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body:is([data-view=queue],[data-view=office]) .queue-add{position:static;display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:7px}
body:is([data-view=queue],[data-view=office]) .queue-add{background:transparent;position:relative;inset:auto;border-radius:8px;isolation:isolate}body:is([data-view=queue],[data-view=office]) .queue-add::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--ink);z-index:-1}body:is([data-view=queue],[data-view=office]) .queue-add svg{width:16px;height:16px}
body:is([data-view=queue],[data-view=office]) .project-drawer{bottom:62px}
body[data-view=queue] #ticket-dock,body[data-view=queue] #ticket-dock:has(#tasks[hidden]){grid-template-rows:minmax(0,1fr);margin-bottom:0}
body[data-view=queue] #tasks{padding-bottom:calc(82px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(82px + env(safe-area-inset-bottom))}
body[data-view=office] #project-tabs{left:20px;right:20px;bottom:calc(20px + var(--bottom-gap))}
body[data-view=office] #project-toggle{flex-basis:44px;width:44px;padding:0 2px}
body[data-view=office] .current-project-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body[data-view=office] #task-filters{flex:0 0 90px}
body[data-view=office] #task-filters button{padding:0 4px;gap:4px}
body[data-view=office] #task-filters .filter-label{display:none}
body[data-view=office] #task-filters svg{display:block}
body[data-view=office] #ticket-dock{flex:1;min-width:0;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:hidden;display:flex}
body[data-view=office] #tasks{width:100%;height:44px;padding:0;gap:5px;scroll-padding-inline:0;align-items:stretch}
body[data-view=office] #tasks>article{flex:0 0 100%;min-width:0;margin:0;padding:0;border:0;border-radius:9px;background:transparent;outline:0}
body[data-view=office] #tasks .task-open{display:flex;align-items:center;gap:6px;height:44px;min-height:44px;padding:0 3px;outline-offset:-2px}
body[data-view=office] #tasks .task-line{display:contents}
body[data-view=office] #tasks :is(.queue-section,.task-provider,.task-model,.task-time,.task-status){display:none}
body[data-view=office] #tasks .task-id{flex:none;font:8px/1 var(--font);color:var(--muted)}
body[data-view=office] #tasks .task-title{flex:1;min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 10px/1.2 var(--font)}
body[data-view=office] #tasks .task-open::after{content:'›';flex:none;color:var(--muted);font-size:14px}
body[data-view=office] .queue-empty{display:block;font-size:9px;text-align:left;align-self:center;padding:0 4px;line-height:1.2}
@media(max-width:374px){
  body:is([data-view=queue],[data-view=office]) #project-tabs{left:4px;right:4px;bottom:calc(4px + env(safe-area-inset-bottom));gap:0;padding:3px 0}
  body[data-view=queue] #project-toggle{flex-basis:68px;width:68px;gap:4px}
  body[data-view=queue] #current-project-name{font-size:9px}
  #task-filters button{font-size:9px;padding-inline:4px;gap:3px}
  body[data-view=office] .office-stage{margin-inline:0;margin-bottom:0}
  body[data-view=office] #project-tabs{bottom:calc(4px + var(--bottom-gap))}
  body[data-view=office] #task-filters{flex-basis:88px;gap:0}
  body[data-view=office] #tasks .task-id{display:none}
}
body[data-view=office] #new-prompt{display:none}
/* History belongs to Queue; Office keeps a directly operable task carousel. */
body[data-view=queue] #task-filters button{flex:1 1 0;width:0;min-width:44px}
body[data-view=queue] #project-toggle{flex-basis:76px;width:76px}
.office-step{display:none}
body[data-view=office] .office-step{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:3px;border:0;border-radius:8px;background:transparent;color:var(--ink)}
.office-step svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body[data-view=office] .office-step:disabled{opacity:.28}
body[data-view=office] #tasks{flex:1;min-width:0;width:0;scrollbar-width:none}
body[data-view=office] #tasks::-webkit-scrollbar{display:none;width:0;height:0}
body[data-view=office] #tasks .task-open::after{content:none}
body[data-view=office] #tasks .task-id{display:none}
@media(max-width:374px){body[data-view=queue] #project-toggle{flex:0 0 44px;width:44px}body[data-view=queue] .current-project-copy{display:none}body[data-view=queue] #task-filters button{padding-inline:3px}}

/* October 2026 task switcher reference. Native rails own scrolling; motion settles. */
@font-face{font-family:Geist;src:url('geist.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('geist-mono.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--font:Geist,system-ui,-apple-system,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;--bg:#000;--panel:#141416;--control:#26262b;--line:#222226;--edge:#2a2a2e;--ink:#f2f2f2;--body:#c9c9ce;--muted:#8a8a91;--terminal:#111113;--live:#b49cff;--review:#7ee2a8;--switch-well:#0b0b0c;--tile:#1c1c1f;--input:#18181b;--sw-well:#121214;--sw-card:#26262b;--sw-ink:var(--ink);--sw-muted:#9a9aa0;--sw-shadow:none}
:root[data-theme=dark]{--bg:#000;--panel:#141416;--control:#26262b;--line:#222226;--edge:#2a2a2e;--ink:#f2f2f2;--body:#c9c9ce;--muted:#8a8a91;--terminal:#111113;--live:#b49cff;--review:#7ee2a8;--switch-well:#0b0b0c;--tile:#1c1c1f;--input:#18181b;--sw-well:#121214;--sw-card:#26262b}
:root[data-theme=light]{--bg:#fff;--panel:#f5f5f7;--control:#e4e4e9;--line:#e5e5ea;--edge:#d5d5dc;--ink:#17171a;--body:#44444d;--muted:#6f6f79;--terminal:#fafafa;--live:#7047cf;--review:#14744a;--switch-well:#eaeaf0;--tile:#ededf2;--input:#ececf1;--sw-well:#f2f2f5;--sw-card:#dedee5}
@media(prefers-color-scheme:light){:root:not([data-theme]){--bg:#fff;--panel:#f5f5f7;--control:#e4e4e9;--line:#e5e5ea;--edge:#d5d5dc;--ink:#17171a;--body:#44444d;--muted:#6f6f79;--terminal:#fafafa;--live:#7047cf;--review:#14744a;--switch-well:#eaeaf0;--tile:#ededf2;--input:#ececf1;--sw-well:#f2f2f5;--sw-card:#dedee5}}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top{padding:12px 12px 0;min-height:116px;gap:8px 12px;align-content:flex-start;flex-wrap:wrap}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top>.brand{display:none}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top>.identity{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
header.top>#project-toggle{display:none}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top>#project-toggle{display:flex;position:relative;flex:1;min-width:0;width:auto;height:48px;min-height:48px;padding:0 6px;gap:10px;touch-action:pan-x pan-y}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top .project-stack{flex:none;width:24px;height:21px;fill:var(--chip-dark,var(--project-accent,var(--accent)));stroke:none}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top .current-project-copy{position:static!important;display:flex;flex:0 1 auto;width:auto;height:auto;margin:0;overflow:hidden;clip-path:none;gap:2px}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top #current-project-name{font:600 15px/1.3 var(--font);letter-spacing:0}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top #current-project-activity{position:static!important;width:auto;height:auto;overflow:hidden;clip-path:none;font:400 10px/1.3 var(--mono);color:var(--muted)}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top .project-chevron{display:block;width:12px;height:12px;transform:rotate(180deg)}
header.top #project-toggle[aria-expanded=true] .project-chevron{transform:none}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top #workspace-bar{order:5;flex:0 0 100%;width:100%;margin:0}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) .view-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:4px;gap:4px;height:48px;min-height:48px;border-radius:14px;background:var(--sw-well)}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) .view-switch button{min-width:0;height:40px;min-height:40px;padding:0 5px;border:0;border-radius:10px;font:500 14px/1 var(--font);gap:6px;background:transparent;color:var(--sw-muted)}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) .view-switch button[aria-pressed=true]{background:var(--control);color:var(--ink);box-shadow:none}
.view-switch .view-count{font:500 11px/1.3 var(--mono);padding:2px 6px;border-radius:6px;background:var(--control);color:var(--body)}
.view-switch [aria-pressed=true] .view-count{background:var(--review);color:var(--bg)}
body[data-online] #settings-button{position:relative;width:44px;height:44px;min-height:44px;border:0;border-radius:14px;background:transparent;box-shadow:none;overflow:visible}
body[data-online] #settings-button .avatar-initial{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--review) 15%,var(--bg));color:var(--review);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--review) 30%,var(--bg));font:600 13px var(--font)}
body[data-online] #settings-button::after{content:'';position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 2.5px var(--bg)}
body[data-online=true] #settings-button::after{background:var(--review)}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #company-button{width:30px;height:44px;min-height:44px;padding:4px;border:0;background:transparent}
body:is([data-view=queue],[data-view=office],[data-view=controller]) .machine-switch{flex-basis:110px}

/* Cards have measured spacing and a quiet full outline, never a left accent. */
body[data-view=queue] .queue-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:20px 16px 12px}
body[data-view=queue] .queue-heading h1{font:700 30px/1.2 var(--font);letter-spacing:-.6px}
body[data-view=queue] #ticket-dock{margin:4px 12px 0;padding:0;border:0;background:transparent;overflow:hidden}
body[data-view=queue] #tasks{gap:8px;padding:0 0 calc(104px + env(safe-area-inset-bottom));scroll-padding-block:8px calc(104px + env(safe-area-inset-bottom));overscroll-behavior-y:contain;touch-action:pan-y}
body[data-view=queue] #tasks>article{flex:none;border:1px solid var(--line);border-radius:16px;background:var(--terminal);overflow:hidden}
body[data-view=queue] #tasks .task-open{min-height:76px;padding:12px 14px;gap:6px}
body[data-view=queue] #tasks .task-title{font:600 15px/1.3 var(--font);letter-spacing:0}
body[data-view=queue] #tasks :is(.task-line,.task-time,.task-status){font:400 11px/1.4 var(--mono)}
body[data-view=queue] #tasks .task-line{gap:5px}
body[data-view=queue] #tasks .task-model{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-view=queue] #tasks .task-status{max-width:40%;overflow:hidden;text-overflow:ellipsis}
body[data-view=queue] #tasks .review-card{padding-bottom:0;background:var(--terminal)}
body[data-view=queue] #tasks .actions{gap:0;padding:0;border-top:1px solid var(--line)}
body[data-view=queue] #tasks .actions button{flex:1;min-height:44px;padding:8px;font:500 13px/1.2 var(--font);background:transparent;border:0;border-radius:0}
body[data-view=queue] #tasks .actions .primary{background:transparent;color:var(--review)}

/* A single 72px sheet base carries the Queue filters or Office task flipper. */
body:is([data-view=queue],[data-view=office]) #project-tabs{left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));height:72px;padding:8px 10px 0;gap:8px;border:1px solid var(--edge);border-radius:24px;background:var(--panel);box-shadow:0 -10px 30px #0006;overflow:visible}
.sheet-handle{position:absolute;z-index:3;top:-7px;left:50%;transform:translateX(-50%);width:64px;height:24px;min-height:24px;padding:0;border:0;background:transparent;touch-action:pan-x}
.sheet-handle>span{display:block;width:36px;height:4px;border-radius:3px;background:#3a3a40}
:root[data-theme=light] .sheet-handle>span{background:#b0b0b9}
#task-filters{position:relative;align-self:center;flex:1;display:flex;min-width:0;height:56px;min-height:56px;gap:2px;padding:4px;border:0;border-radius:16px;background:var(--switch-well);isolation:isolate}
body[data-view=queue] #task-filters button{position:relative;z-index:1;flex:1 1 0;width:0;min-width:0;height:48px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 2px;border:0;border-radius:12px;font:500 12px/1.25 var(--font);letter-spacing:0;background:transparent;color:var(--sw-muted)}
#task-filters button[aria-pressed=true]{background:var(--control);color:var(--ink);box-shadow:none}
#task-filters[data-motion-ready=true] button[aria-pressed=true]{background:transparent}
#task-filters .filter-label{font:inherit}
#task-filters .sr-only{position:static!important;width:auto;height:auto;overflow:visible;clip-path:none;white-space:nowrap;font:500 11px/1.3 var(--mono)}
#all-count{color:var(--ink)}#running-count{color:var(--live)!important}#review-count{color:var(--review)!important}#queued-count{color:var(--muted)}
.switch-fluid{display:block!important;position:absolute;pointer-events:none;left:0;top:4px;height:calc(100% - 8px)!important;width:var(--active-width,0px)!important;max-width:none;transform:translateX(var(--active-x,4px));overflow:visible;fill:var(--control)!important;stroke:none!important;z-index:0;transition:transform .42s cubic-bezier(.22,1.18,.36,1),width .32s cubic-bezier(.22,1,.36,1)}
.switch-fluid-body{transform-origin:center;transform-box:fill-box}
.switch-fluid-glint{fill:none;stroke:color-mix(in srgb,var(--ink) 12%,transparent);stroke-width:1;opacity:.6}
#task-filters.is-switching .switch-fluid-body{animation:switch-fluid-settle .42s cubic-bezier(.2,.8,.2,1)}
@keyframes switch-fluid-settle{0%{transform:scale(.94,.92)}45%{transform:scale(1.04,1.02)}100%{transform:scale(1)}}
body:is([data-view=queue],[data-view=office]) .queue-add{position:relative;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:14px;background:var(--ink);color:var(--bg)}
body:is([data-view=queue],[data-view=office]) .queue-add::before{content:none}
body:is([data-view=queue],[data-view=office]) .queue-add svg{width:18px;height:18px;stroke-width:2.4}
body[data-view=office] .office-stage{margin:10px 12px calc(104px + env(safe-area-inset-bottom));border:1px solid var(--line);border-radius:20px;background:var(--terminal)}
body[data-view=office] #task-filters{flex:0 0 112px;gap:4px;height:52px;min-height:52px;padding:4px}
body[data-view=office] #task-filters button{position:relative;z-index:1;flex:1;min-width:0;height:44px;min-height:44px;padding:0 5px;gap:6px;border-radius:12px;background:transparent}
body[data-view=office] #task-filters button[aria-pressed=true]{background:var(--control);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--live) 40%,transparent)}
body[data-view=office] #task-filters #review-tab[aria-pressed=true]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--review) 40%,transparent)}
body[data-view=office] #task-filters[data-motion-ready=true] button[aria-pressed=true]{background:transparent}
body[data-view=office] #task-filters svg:not(.switch-fluid){display:block;width:13px;height:13px}
body[data-view=office] #running-tab>svg{color:var(--live)}body[data-view=office] #review-tab>svg{color:var(--review)}
body[data-view=office] #ticket-dock{position:relative;flex:1;min-width:0;height:48px;min-height:48px;padding:0;gap:0;margin:0;overflow:hidden}
body[data-view=office] .office-step{flex:0 0 28px;width:28px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px}
body[data-view=office] .office-step svg{width:16px;height:16px;stroke-width:2}
body[data-view=office] #tasks{height:48px;gap:0;scroll-snap-type:x mandatory;scroll-behavior:smooth;touch-action:pan-x;overscroll-behavior-x:contain}
body[data-view=office] #tasks>article{scroll-snap-align:center;scroll-snap-stop:always;flex:0 0 100%;border-radius:0}
body[data-view=office] #tasks .task-open{height:48px;min-height:48px;display:flex;flex-direction:column-reverse;align-items:flex-start;justify-content:center;gap:4px;padding:0 2px}
body[data-view=office] #tasks .task-title{flex:none;width:100%;font:600 13px/1.25 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-view=office] #tasks .task-line{display:flex;gap:6px;width:100%;height:13px}
body[data-view=office] #tasks .task-id{display:block;flex:none;font:400 10px/1.3 var(--mono);color:var(--muted)}
.office-task-dots{display:none}
body[data-view=office] .office-task-dots{position:absolute;pointer-events:none;display:flex;gap:3px;align-items:center;height:5px;bottom:8px;left:calc(30px + var(--task-id-width,38px));max-width:calc(100% - 96px);overflow:hidden}
.office-task-dots span{display:block;flex:none;width:4px;height:4px;border-radius:2px;background:#3a3a40;transition:width .25s,background-color .25s}
.office-task-dots :is([aria-current=true],[data-active=true],.active){width:12px;background:var(--live)}
body[data-task-filter=review] .office-task-dots :is([aria-current=true],[data-active=true],.active){background:var(--review)}

/* Peek keeps horizontal momentum; expanded projects are a bounded, searchable list. */
#project-tabs[data-expanded=true]{z-index:24}
body:is([data-view=queue],[data-view=office]) .project-drawer{position:absolute;z-index:2;left:-1px;right:-1px;bottom:64px;padding:8px 0 0;border:1px solid var(--edge);border-bottom:1px solid var(--line);border-radius:24px 24px 0 0;background:var(--panel);box-shadow:0 -16px 40px #0006;overflow:hidden;transform:translateY(var(--gesture-y,0px));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.project-drawer::before{content:'';display:block;width:36px;height:4px;border-radius:3px;background:var(--muted);margin:0 auto}
.project-drawer-head{display:flex;gap:8px;margin:0;padding:10px 14px 8px;touch-action:pan-x}
.project-drawer-head h2{font:600 15px/1.3 var(--font);letter-spacing:0}
.project-drawer-head>div{gap:6px}
#project-drawer-count{font:500 11px/1.3 var(--mono)}
.project-expand{min-width:44px;min-height:32px;padding:0;border:0;background:transparent;color:var(--muted);font:400 11px/1.3 var(--mono);gap:6px}
.project-expand svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.project-search{display:none}
#project-drawer[data-stage=peek] #projects-close{display:none}
.project-tabs[data-expanded=true] #project-drawer[data-stage=peek] .project-rail{display:flex;gap:8px;max-height:none;padding:0 12px 12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}
.project-tabs #project-drawer .project-tab{flex:0 0 96px;width:96px;height:104px;min-height:104px;max-width:none;margin:0;padding:10px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:5px;border:1.5px solid transparent;border-radius:14px;background:var(--tile);text-align:left;scroll-snap-align:start}
.project-tabs #project-drawer .project-tab[aria-pressed=true]{border-color:var(--chip-accent);background:color-mix(in srgb,var(--chip-accent) 14%,var(--tile))}
.project-tabs #project-drawer .project-tab[aria-pressed=true]::after{content:none}
.project-tabs #project-drawer .tab-badge,.project-tabs #project-drawer .project-tab[aria-pressed=true] .tab-badge{width:32px;height:32px;min-width:32px;display:grid;place-items:center;border:0;border-radius:10px;background:var(--chip-accent);color:#0b0b0c;transform:none;box-shadow:none}
.project-tabs #project-drawer .tab-letters{align-self:center;margin:0;font:700 12px/1 var(--font);color:inherit}
.project-tabs #project-drawer :is(.project-folder,.tab-count){display:none}
.project-tabs #project-drawer .tab-name{font:600 13px/1.25 var(--font);padding:0;min-width:0;max-width:100%;color:var(--ink)}
.project-tabs #project-drawer .project-activity{justify-content:flex-start;gap:8px;font:500 10px/1.2 var(--mono)}
.project-tabs #project-drawer .tab-path{display:none;font:400 11px/1.3 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-tabs #project-drawer .all-tab .tab-badge{background:var(--control)}
.project-tabs #project-drawer .tab-mosaic{width:20px;height:20px;gap:3px;transform:none}
.project-tabs #project-drawer .mosaic-cell{border-radius:3px}
.project-tabs #project-drawer .add-tab{border-style:dashed;border-color:var(--edge);background:transparent}
.project-tabs #project-drawer .add-tab .tab-badge{background:transparent;color:var(--body)}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview],[data-view=detail]) #project-drawer[data-stage=expanded]{position:fixed;left:max(0px,calc((100% - 600px)/2));right:max(0px,calc((100% - 600px)/2));bottom:0;z-index:5;max-height:calc(var(--app-height,100dvh) - env(safe-area-inset-top) - 16px);padding:10px 14px max(20px,env(safe-area-inset-bottom));border-radius:26px 26px 0 0;display:flex;flex-direction:column;gap:14px}
#project-drawer[data-stage=expanded]::before{flex:none;width:40px;height:5px;background:#3a3a40}
#project-drawer[data-stage=expanded] .project-drawer-head{flex:none;padding:0 0 0 2px}
#project-drawer[data-stage=expanded] .project-drawer-head h2{font:700 22px/1.2 var(--font);letter-spacing:-.22px}
#project-drawer[data-stage=expanded] #project-drawer-count{font:500 13px var(--mono)}
#project-drawer[data-stage=expanded] #project-expand{display:none}
#project-drawer[data-stage=expanded] #projects-close{width:44px;height:44px;min-height:44px;border-radius:14px;background:var(--tile)}
#project-drawer[data-stage=expanded] .project-search{display:flex;align-items:center;gap:10px;flex:none;height:48px;padding:0 14px;border:1px solid var(--edge);border-radius:14px;background:var(--tile)}
.project-search svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round}
#project-search{min-width:0;height:44px;padding:0;margin:0;border:0;background:transparent;font-size:16px;outline-offset:0}
.project-tabs[data-expanded=true] #project-drawer[data-stage=expanded] .project-rail{flex:1;min-height:0;max-height:none;display:flex;flex-direction:column;gap:6px;padding:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:none;overscroll-behavior-y:contain;touch-action:pan-y}
.project-tabs #project-drawer[data-stage=expanded] .project-tab{flex:none;display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:1fr 1fr;column-gap:12px;row-gap:3px;width:100%;height:60px;min-height:60px;padding:8px 10px;border-radius:14px;align-content:center;align-items:center}
.project-tabs #project-drawer[data-stage=expanded] .tab-badge{grid-column:1;grid-row:1/3;width:40px;height:40px;border-radius:12px}
.project-tabs #project-drawer[data-stage=expanded] .tab-name{display:block;grid-column:2;grid-row:1;align-self:end;justify-self:stretch;min-width:0;font-size:15px}
.project-tabs #project-drawer[data-stage=expanded] .tab-path{display:block;grid-column:2;grid-row:2;align-self:start;justify-self:stretch;min-width:0;width:100%}
.project-tabs #project-drawer[data-stage=expanded] .project-activity{grid-column:3;grid-row:1/3;font-size:11px}
.project-tabs #project-drawer[data-stage=expanded] .project-activity span{padding:4px 6px;border-radius:7px;background:color-mix(in srgb,currentColor 10%,transparent)}
.project-tabs #project-drawer[data-stage=expanded] .add-tab{margin-top:8px;height:52px;min-height:52px;grid-template-columns:24px auto;grid-template-rows:1fr;justify-content:center}
.project-tabs #project-drawer[data-stage=expanded] .add-tab .tab-badge{width:24px;height:24px;min-width:24px;grid-row:1}
.project-tabs #project-drawer[data-stage=expanded] .add-tab .tab-name{grid-row:1;align-self:center}
.project-tabs #project-drawer[data-stage=expanded] .add-tab :is(.tab-path,.project-activity){display:none}

/* The prompt sheet keeps all three selector chips above the editable area. */
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form{height:var(--compose-height,auto);max-height:calc(100% - 16px);padding:8px 14px max(16px,env(safe-area-inset-bottom));gap:10px;background:var(--terminal);border:1px solid var(--edge);border-bottom:0;border-radius:26px 26px 0 0;transform:translateY(var(--gesture-y,0px));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.compose-grabber{flex:none;align-self:center;width:40px;height:5px;border-radius:3px;background:#3a3a40}
.compose-sheet-heading{order:0;min-height:54px;gap:10px;touch-action:pan-x}
.compose-title-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.compose-sheet-heading h2{font:700 22px/1.2 var(--font);letter-spacing:-.33px}
#compose-project{font:400 11px/1.3 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#compose-close{width:44px;height:44px;min-height:44px;padding:12px;border-radius:14px;background:var(--tile)}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .prompt-box{order:2;display:flex;flex:0 1 210px;min-height:186px;flex-direction:column;gap:0;border:1px solid #2f2f34;border-radius:18px;background:var(--input);overflow:hidden}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #task-name{height:46px;min-height:46px;flex:none;padding:0 14px;border:0;border-bottom:1px solid var(--edge);border-radius:0;background:transparent;font-size:16px;font-weight:600;outline-offset:-2px}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #prompt{flex:1 1 auto;min-height:82px;height:auto;margin:0;padding:12px 14px;border:0;border-radius:0;background:transparent;font:400 16px/1.5 var(--font);outline-offset:-2px}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .prompt-toolbar{min-height:48px;padding:4px 6px;background:transparent}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .capture-setting{padding:5px 12px;border-top:1px solid var(--edge)}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .capture-setting strong{font:500 12px var(--font)}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .capture-setting small{display:none}
.composer-settings{order:1;flex:none;display:grid;grid-template-columns:1fr 2.35fr;gap:6px;min-width:0}
.composer-settings .model-row{grid-column:auto;grid-row:auto;display:grid;grid-template-columns:1.35fr 1fr;gap:6px;min-width:0}
.composer-settings .selection-stepper{position:relative;height:54px;min-width:0;border:1px solid var(--edge);border-radius:12px;background:var(--input);overflow:hidden;touch-action:pan-x}
.composer-settings .field-label{position:absolute;z-index:1;left:11px;top:9px;padding:0;pointer-events:none;text-transform:uppercase;letter-spacing:.45px;font:500 9px/1 var(--mono);color:var(--muted)}
.composer-settings .selection-stepper::after{content:'';position:absolute;pointer-events:none;right:8px;top:17px;width:10px;height:20px;background:var(--muted);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Cpath d='m2 6 3-3 3 3m-6 8 3 3 3-3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.composer-settings .selection-stepper select{height:52px;min-height:52px;margin:0;padding:22px 22px 6px 11px;border:0;border-radius:12px;background:transparent;background-image:none;font:600 13px/1.3 var(--font);text-overflow:ellipsis;touch-action:pan-x}
.composer-settings .provider-stepper{display:flex;align-items:center;padding:19px 20px 0 11px}
.provider-selection{display:flex;align-items:center;gap:5px;min-width:0}
#provider-value{font:600 13px/1.3 var(--font);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#provider-mark{display:grid;place-items:center;flex:none;width:16px;height:16px}
#provider-select{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.provider-stepper .providers{position:absolute!important;width:1px!important;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}
.composer-settings .selection-stepper:has(select:focus){background:color-mix(in srgb,var(--ink) 8%,var(--panel))}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #send-prompt{order:3;flex:none;min-height:58px;padding:0 8px 0 18px;border-radius:16px;font:600 16px/1.3 var(--font)}
#send-prompt>svg{box-sizing:content-box;width:16px;height:16px;padding:13px;border-radius:12px;background:var(--bg);color:var(--ink);stroke-width:2}
#prompt-form.is-dragging,.project-drawer.is-dragging{transition:none!important;animation:none!important}
body[data-keyboard=true]:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form{height:100%;max-height:100%;padding:6px 12px 8px;gap:6px}
body[data-keyboard=true]:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .prompt-box{flex:1;min-height:144px}
body[data-keyboard=true]:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #prompt{min-height:40px;flex-basis:40px}
body[data-keyboard=true] #prompt-form .compose-sheet-heading{min-height:44px}
body[data-keyboard=true] #prompt-form .compose-grabber{display:none}
body[data-keyboard=true]:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #send-prompt{min-height:44px}
body[data-keyboard=true] #send-prompt>svg{padding:8px}

/* Conversation and account use the same quiet reference palette. */
body[data-view=detail] .task-view-head{min-height:60px;padding:12px 16px 0;gap:8px}
body[data-view=detail] #back{height:44px;min-height:44px;font:400 15px/1.3 var(--font)}
body[data-view=detail] .task-view-switch{height:44px;min-height:44px;padding:3px;gap:2px;border-radius:12px;background:var(--sw-well)}
body[data-view=detail] .task-view-switch button{height:38px;min-height:38px;padding:0 10px;font:500 13px/1 var(--font);border-radius:9px}
body[data-view=detail] .task-view-switch button[aria-pressed=true]{background:var(--control)}
body[data-view=detail] .task-view-title{padding:14px 16px;gap:8px}
body[data-view=detail] .task-view-title h1{font:600 19px/1.3 var(--font);letter-spacing:-.19px}
body[data-view=detail] #task-meta,body[data-view=detail] #task-meta :is(.task-time,.task-status){font:400 11px/1.4 var(--mono)}
body[data-view=detail] .task-chat{padding:16px 16px 20px;gap:14px;overscroll-behavior-y:contain;touch-action:pan-y}
body[data-view=detail] .chat-events{gap:14px}
body[data-view=detail] .chat-message-head{font:400 11px/1.4 var(--mono);gap:8px}
body[data-view=detail] .chat-bubble-stack{max-width:88%}
body[data-view=detail] .chat-request .chat-bubble-stack{max-width:78%}
body[data-view=detail] :is(.chat-message-body,.chat-final .chat-message-body){--ink:var(--chat-reference-ink,#f2f2f2);--body:var(--chat-reference-body,#dcdce0);--muted:var(--chat-reference-muted,#8a8a91);--line:var(--chat-reference-line,#303034);--terminal:var(--chat-reference-code,#222226);--panel:var(--chat-reference-panel,#1c1c1f);background:var(--input);color:var(--body);padding:11px 13px;border-radius:6px 16px 16px 16px;font:400 14px/1.5 var(--font)}
:root[data-theme=light]{--chat-reference-ink:#17171a;--chat-reference-body:#373740;--chat-reference-muted:#696974;--chat-reference-line:#d8d8de;--chat-reference-code:#e2e2e8;--chat-reference-panel:#eaeaf0}
body[data-view=detail] .chat-request .chat-message-body{background:var(--control);color:var(--ink);border-radius:18px 18px 6px 18px;padding:11px 14px;line-height:1.4}
body[data-view=detail] .chat-final .chat-bubble-stack{max-width:100%}
body[data-view=detail] .task-dock{min-height:56px;margin:0 12px calc(16px + env(safe-area-inset-bottom));padding:5px 6px;gap:6px;border:1px solid var(--edge);border-radius:20px;background:var(--panel)}
body[data-view=detail] .task-dock :is(.task-actions button,#follow-options-toggle){width:44px;height:44px;min-height:44px;padding:12px;border-radius:14px}
body[data-view=detail] .task-dock #follow-up{grid-template-columns:minmax(0,1fr) 44px}
body[data-view=detail] .task-dock #follow-up textarea{height:44px;min-height:44px;padding:11px 2px;font:400 16px/22px var(--font)}
body[data-view=detail] .task-dock #follow-up button[type=submit]{width:44px;min-width:44px;height:44px;min-height:44px;padding:12px;border-radius:14px}
body[data-view=detail] .task-dock #review{color:var(--review)}
body[data-view=settings] header.top{padding:12px 16px 0;min-height:60px}
body[data-view=settings] .account-head{margin:14px 0}
body[data-view=settings] .account-head h1{font:700 22px/1.3 var(--font)}
.profile-card{padding:0;border:0;background:transparent;gap:14px}
.profile-card .avatar{width:60px;height:60px;border-radius:18px;background:color-mix(in srgb,var(--review) 15%,var(--bg));color:var(--review);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--review) 30%,var(--bg))}
.profile-text p{font:600 17px/1.3 var(--font)}
.profile-text small{font:400 13px/1.3 var(--font)}
.group-title{margin:24px 2px 8px;font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.2px}
.account-view .group{border:1px solid var(--line);border-radius:16px;background:var(--terminal);gap:1px}
.account-view .row{min-height:56px;background:var(--terminal);padding:10px 14px;font:500 15px/1.35 var(--font)}
.account-view .row-icon{width:24px;height:24px;background:transparent;color:var(--review)}
.account-view .computer{min-height:64px}
.account-view .computer .computer-mark{width:40px;height:40px;border-radius:12px;background:var(--tile)}
.account-view .computer .danger{min-height:40px;padding:0 14px;border-radius:12px}
.account-view .signout{width:100%;height:52px;margin-top:24px;border:1px solid color-mix(in srgb,var(--error) 20%,var(--bg));border-radius:14px;background:color-mix(in srgb,var(--error) 7%,var(--bg));color:var(--error);font:500 15px/1.3 var(--font)}

/* Controller preserves the live waveform while adopting the reference's calm targets. */
body[data-view=controller] .controller-view{padding:12px 12px calc(16px + env(safe-area-inset-bottom));gap:10px}
.controller-heading h1{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.controller-tiles{gap:8px;padding:0;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x}
.controller-tile{flex-basis:120px;min-height:56px;border-radius:14px;padding:8px 12px;gap:3px;scroll-snap-align:start}
.controller-tile strong{font:600 13px/1.3 var(--font)}
.controller-tile[aria-pressed=true]{background:color-mix(in srgb,var(--review) 10%,var(--panel));border-color:var(--review);box-shadow:none}
.controller-tile[aria-pressed=true] strong{color:var(--review)}
.controller-task-tiles .controller-tile{flex-basis:150px}
.controller-task-tiles .controller-tile strong{display:block;white-space:nowrap}
.controller-options label{height:54px;border-radius:14px;padding:7px 12px;background:var(--panel)}
.controller-options label>span{font:400 10px/1.3 var(--mono);text-transform:uppercase}
.controller-options select{font:500 14px/1.3 var(--font);min-height:27px}
.controller-talk{flex-basis:200px;min-height:200px;border-radius:24px;background:color-mix(in srgb,var(--panel) 45%,var(--bg));border-color:var(--edge);gap:8px}
.controller-talk strong{font:700 20px/1.3 var(--font);letter-spacing:-.2px}
.controller-talk>span{font:400 13px/1.3 var(--font)}
.controller-talk svg{height:140px;min-height:120px}
.controller-draft>label{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.3px}
.controller-draft textarea{min-height:64px;border-radius:14px;font:400 16px/1.4 var(--font);padding:12px 14px}
.controller-send-row button{min-height:52px;border-radius:14px;font:500 14px/1.3 var(--font)}
.controller-send-row .primary{border-radius:14px;font-weight:600}

/* Completion stays above the dock, preserving the exact-task actions. */
body:is([data-view=queue],[data-view=office]) .mobile-completion{padding:12px;border:1px solid var(--edge);border-radius:18px;background:var(--panel);box-shadow:0 14px 34px #0007}
body:is([data-view=queue],[data-view=office]) .mobile-completion-label{font:500 10px/1.4 var(--mono);letter-spacing:.2px}
body:is([data-view=queue],[data-view=office]) .mobile-completion-title{font:600 14px/1.3 var(--font);margin:4px 0 12px}
body:is([data-view=queue],[data-view=office]) .mobile-completion-context{font:400 10px/1.4 var(--mono);margin:4px 0}
.mobile-completion-actions button{min-height:44px;border-radius:12px;font:500 13px/1.3 var(--font)}
.mobile-completion-actions button:first-child{background:var(--ink);color:var(--bg);border:0}

@media(max-width:359px){
  body:is([data-view=queue],[data-view=office]) #project-tabs{left:8px;right:8px;padding-inline:7px;gap:5px}
  body[data-view=office] #task-filters{flex-basis:90px;gap:2px;padding:3px}
  body[data-view=office] #task-filters button{gap:4px;padding:0 3px}
  body[data-view=office] .office-step{flex-basis:24px;width:24px}
  body[data-view=office] #tasks .task-title{font-size:12px}
  body[data-view=queue] #task-filters button{font-size:10px}
  body[data-view=detail] .task-view-head{padding-inline:12px;gap:6px}
  body[data-view=detail] .task-view-switch button{font-size:11px;padding-inline:7px}
  body[data-view=detail] #back{font-size:13px}
  .composer-settings{grid-template-columns:.95fr 2.15fr;gap:5px}
  .composer-settings .model-row{gap:5px;grid-template-columns:1.25fr 1fr}
  .composer-settings .field-label{left:8px;font-size:8px}
  .composer-settings .selection-stepper select{padding-left:8px;font-size:12px}
  .composer-settings .provider-stepper{padding-left:8px}
  #provider-value{font-size:12px}
  #provider-mark{display:none}
  .project-tabs #project-drawer[data-stage=expanded] .project-tab{column-gap:8px;padding-inline:8px}
  .project-tabs #project-drawer[data-stage=expanded] .project-activity{gap:3px;font-size:10px}
}
@media(max-height:680px){
  body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top{padding-top:6px;min-height:110px}
  body[data-view=queue] .queue-heading{margin-block:12px 8px}
  .controller-talk{min-height:145px;flex-basis:145px;gap:2px}
  .controller-talk svg{height:90px;min-height:90px}
}
@media(orientation:landscape) and (max-height:560px){
  body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top{min-height:58px;padding:6px 12px 0;flex-wrap:nowrap}
  body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top #workspace-bar{order:0;flex:1 1 300px;width:auto}
  body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top>#project-toggle{flex:0 1 145px}
  body[data-view=queue] .queue-heading{display:none}
  body:is([data-view=queue],[data-view=office]) #project-tabs{bottom:calc(8px + env(safe-area-inset-bottom))}
  body[data-view=office] .office-stage{margin-bottom:calc(88px + env(safe-area-inset-bottom))}
  body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .prompt-box{min-height:186px;flex-basis:186px}
  body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form{gap:6px}
  .compose-grabber{display:none}
  body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #send-prompt{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .switch-fluid,.office-task-dots span,#prompt-form,.project-drawer{transition:none!important}
  #task-filters.is-switching .switch-fluid-body{animation:none}
  body[data-view=office] #tasks{scroll-behavior:auto}
}
/* Axis locks reserve only the custom gesture surfaces; reading rails stay native. */
#task-filters,#workspace-bar{touch-action:none}
#project-tabs,.compose-grabber,.compose-sheet-heading,.project-drawer-head,.selection-stepper{touch-action:pan-x}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top>#project-toggle{touch-action:pan-x}
#project-drawer[data-stage=peek] :is(.all-tab,.add-tab){display:none}
.office-task-dots i{display:block;flex:none;width:4px;height:4px;border-radius:2px;background:#3a3a40;transition:width .25s,background-color .25s}
.office-task-dots i[data-active=true]{width:12px;background:var(--live)}
#project-tabs:has(#review-tab[aria-pressed=true]) .office-task-dots i[data-active=true]{background:var(--review)}
.composer-settings .selection-stepper:has(#effort)::before{content:'';position:absolute;z-index:1;left:11px;bottom:13px;width:7px;height:7px;border-radius:2px;background:var(--live);pointer-events:none}
.composer-settings .selection-stepper:has(#effort) select{padding-left:24px}
.composer-settings .selection-stepper[data-effort=low]::before{background:var(--muted)}
.composer-settings .selection-stepper[data-effort=medium]::before{background:var(--body)}
.composer-settings .selection-stepper:is([data-effort=xhigh],[data-effort=max],[data-effort=ultra])::before{background:#ff9b8a}
#task-filters:has(#all-tab[aria-pressed=true]) .switch-fluid{--active-x:4px}
@media(prefers-reduced-motion:reduce){.office-task-dots i{transition:none}}
/* The revised peek pairs compact project cards with that project's live task list. */
.project-tabs[data-expanded=true] #project-drawer[data-stage=peek]{display:flex;flex-direction:column;max-height:calc(var(--app-height,100dvh) - 132px)}
#project-drawer[data-stage=peek]::before{flex:none}
#project-drawer[data-stage=peek] .project-drawer-head{flex:none}
.project-tabs[data-expanded=true] #project-drawer[data-stage=peek] .project-rail{flex:none;padding-bottom:10px;scroll-padding-inline:12px}
.project-tabs #project-drawer[data-stage=peek] .project-tab{flex:0 0 132px;width:132px;height:56px;min-height:56px;padding:8px 10px;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:9px;row-gap:2px;align-content:center;justify-content:initial}
.project-tabs #project-drawer[data-stage=peek] .tab-badge{grid-column:1;grid-row:1/3;width:30px;height:30px;min-width:30px;border-radius:9px}
.project-tabs #project-drawer[data-stage=peek] .tab-letters{font-size:11px}
.project-tabs #project-drawer[data-stage=peek] .tab-name{grid-column:2;grid-row:1;align-self:end;font-size:13px}
.project-tabs #project-drawer[data-stage=peek] .project-activity{grid-column:2;grid-row:2;align-self:start;font-size:10px;gap:5px}
.project-tabs #project-drawer[data-stage=peek] :is(.all-tab,.add-tab){display:none}
.project-sheet-tasks{display:flex;flex:0 1 auto;min-height:0;flex-direction:column;padding:0 10px 10px;overflow:hidden}
.project-sheet-task-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 6px;flex:none}
.project-sheet-task-heading h3{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 10px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
#project-sheet-task-count{flex:none;font:400 10px/1.3 var(--mono);color:var(--muted)}
.project-sheet-task-list{display:flex;flex-direction:column;gap:4px;min-height:0;max-height:204px;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:none}
.sheet-task{width:100%;flex:none;height:48px;min-height:48px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 12px;border:0;border-radius:12px;background:var(--tile);color:var(--ink);text-align:left;touch-action:pan-y}
.sheet-task-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.sheet-task[data-status=running] .sheet-task-dot{background:var(--live)}
.sheet-task[data-status=review] .sheet-task-dot{background:var(--review)}
.sheet-task-id{flex:none;font:500 11px/1.3 var(--mono);color:var(--muted)}
.sheet-task-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 14px/1.3 var(--font)}
.sheet-task-time{flex:none;font:400 11px/1.3 var(--mono);color:var(--muted)}
.sheet-task[data-status=running] .sheet-task-time{color:var(--live)}
.sheet-task[data-status=review] .sheet-task-time{color:var(--review)}
.project-sheet-task-list>.muted{display:grid;place-items:center;min-height:48px;border:1px dashed var(--edge);border-radius:12px;font:400 13px/1.3 var(--font)}
.project-sheet-projects{display:contents}
/* Expanded task-bearing drawers split their height evenly between projects and scoped
   tasks while both overflow. Either section's unused height goes to the other, so a short
   project list or a short task list never leaves an empty band. */
#project-drawer[data-stage=expanded]:has(#project-sheet-tasks:not([hidden])){display:grid;grid-template-rows:minmax(0,auto) minmax(0,auto);align-content:start;height:calc(var(--app-height,100dvh) - env(safe-area-inset-top) - 16px)}
#project-drawer[data-stage=expanded]:has(#project-sheet-tasks:not([hidden])) .project-sheet-projects{display:flex;min-height:0;flex-direction:column;gap:14px}
.project-tabs[data-expanded=true] #project-drawer[data-stage=expanded]:has(#project-sheet-tasks:not([hidden])) .project-rail{flex:0 1 auto;max-height:none}
#project-drawer[data-stage=expanded] #project-sheet-tasks{flex:1;min-height:0;padding:0}
#project-drawer[data-stage=expanded] .project-sheet-task-list{flex:1;max-height:none}
@media(max-height:640px){
  #project-drawer[data-stage=expanded]:has(#project-sheet-tasks:not([hidden])){gap:6px}
  #project-drawer[data-stage=expanded]:has(#project-sheet-tasks:not([hidden])) .project-search{height:36px}
  #project-drawer[data-stage=expanded]:has(#project-sheet-tasks:not([hidden])) #project-search{height:32px;min-height:32px}
  #project-drawer[data-stage=expanded]:has(#project-sheet-tasks:not([hidden])) .project-sheet-projects{gap:6px}
}
#project-tabs:has(#project-drawer:not([hidden]))>#project-handle{visibility:hidden}
#compose-project{display:block;margin:0}
.account-usage{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--terminal);margin-bottom:8px}
.account-usage-meter{display:grid;gap:5px}
.account-usage-line{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 13px/1.3 var(--font)}
.account-usage-value{font:500 11px/1.3 var(--mono);color:var(--muted);text-align:right}
.account-usage-track{height:4px;border-radius:2px;background:var(--control);overflow:hidden}
.account-usage-track>span{display:block;height:100%;border-radius:inherit;background:var(--review)}
.account-usage-meter[data-level=warning] .account-usage-value,.account-usage-meter[data-level=critical] .account-usage-value{color:var(--error)}
.account-usage-meter[data-level=warning] .account-usage-track>span,.account-usage-meter[data-level=critical] .account-usage-track>span{background:var(--error)}
/* The native checkbox remains the single screenshot setting and focus owner. */
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .compose-sheet-heading .capture-setting{position:relative;flex:none;padding:0;border:0;background:transparent}
.compose-sheet-heading .capture-setting .check{min-height:44px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--edge);border-radius:14px;background:var(--tile);color:var(--muted)}
.compose-sheet-heading .capture-setting .check:has(input:checked){background:color-mix(in srgb,var(--review) 10%,var(--panel));border-color:color-mix(in srgb,var(--review) 32%,var(--panel));color:var(--review)}
.compose-sheet-heading .capture-setting .check:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.compose-sheet-heading .capture-setting input{position:absolute;width:1px;height:1px;min-width:1px;min-height:1px;opacity:0;padding:0;margin:0}
.compose-sheet-heading .capture-setting .capture-long{display:none}
.compose-sheet-heading .capture-setting .capture-short{display:block;font:500 13px/1.3 var(--font)}
.compose-sheet-heading .capture-setting svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.provider-stepper .providers{display:none!important}
.controller-talk[data-phase=idle] .controller-orbit{opacity:0}
.controller-mic-halo{fill:var(--terminal);stroke:var(--edge);stroke-width:1.5}
.controller-mic-pad{fill:var(--panel);stroke:var(--edge);stroke-width:1.5}
.controller-talk .controller-mic-pad{display:none}
.controller-talk[data-phase=recording] :is(.controller-mic-halo,.controller-mic-pad){opacity:0}
@media(max-height:680px){.controller-mic-halo{opacity:.6}}
/* Controller and overview expose the same project sheet without an empty dock. */
body:is([data-view=controller],[data-view=overview]) #project-tabs{position:absolute;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body:is([data-view=controller],[data-view=overview]) #project-tabs>:is(#project-handle,#task-filters,#queue-add,#ticket-dock){display:none}
body:is([data-view=controller],[data-view=overview]) #project-drawer[data-stage=peek]{position:absolute;bottom:0;left:0;right:0;padding:8px 0 0;border:1px solid var(--edge);border-radius:24px;background:var(--panel);box-shadow:0 -16px 40px #0006}
#project-tabs[data-expanded=true]::before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#0002 10%,#0009 70%);pointer-events:none}
#project-tabs:has(#project-drawer[data-stage=expanded]:not([hidden]))::before{background:#0009}
:root[data-theme=light] #project-tabs[data-expanded=true]::before{background:linear-gradient(180deg,#17171a0a 10%,#17171a40 70%)}
:root[data-theme=light] .project-tabs #project-drawer .tab-badge,:root[data-theme=light] .project-tabs #project-drawer .project-tab[aria-pressed=true] .tab-badge{color:#fff}
:root[data-theme=light] .project-tabs #project-drawer .add-tab .tab-badge{color:var(--body)}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .prompt-box{border-color:var(--edge)}
@media(max-width:359px){.composer-settings .selection-stepper:has(#effort) select{padding-left:20px;padding-right:16px;font-size:11.5px}.composer-settings .selection-stepper:has(#effort)::before{left:8px}.composer-settings .selection-stepper:has(#effort)::after{right:5px;width:8px}}
/* An unselected Office filter means the complete room; no extra All button. */
#task-filters .switch-fluid{transition:transform .42s cubic-bezier(.22,1.18,.36,1),width .32s cubic-bezier(.22,1,.36,1),opacity .2s ease}
#task-filters[data-empty=true] .switch-fluid{opacity:0}
@media(prefers-reduced-motion:reduce){#task-filters .switch-fluid{transition:none}}
/* Controller projects the same three draft selectors as the new-task sheet. */
.controller-options.composer-settings{order:initial;grid-template-columns:1fr 2.35fr;gap:6px;margin:2px 0 0}
.controller-options.composer-settings .selection-stepper{height:54px;padding:0;border-radius:12px;background:var(--input);touch-action:pan-x}
.controller-options.composer-settings .provider-stepper{padding:19px 20px 0 11px}
.provider-value{font:600 13px/1.3 var(--font);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Provider tiles carry their own colors (providerIconSvg in app.js), the same in both themes. */
.provider-mark{display:grid;place-items:center;flex:none;width:16px;height:16px}
.provider-tile{display:block}
.provider-stepper>select{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.composer-settings .selection-stepper:has(#controller-effort)::before{content:'';position:absolute;z-index:1;left:11px;bottom:13px;width:7px;height:7px;border-radius:2px;background:var(--live);pointer-events:none}
.composer-settings .selection-stepper:has(#controller-effort) select{padding-left:24px}
.controller-options .selection-stepper:has(select:disabled){opacity:.55}
.selection-stepper.is-rolling>select,.provider-stepper.is-rolling .provider-value{opacity:0}
.choice-reel{position:absolute;inset:18px 22px 2px 11px;overflow:hidden;pointer-events:none;font:600 13px/34px var(--font);color:var(--ink);mask-image:linear-gradient(transparent,#000 5px,#000 calc(100% - 5px),transparent)}
.provider-stepper .choice-reel{left:32px}
.choice-reel-track{position:absolute;inset:0}
.choice-reel-row{position:absolute;inset:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selection-stepper:has(:is(#effort,#controller-effort)) .choice-reel{left:24px}
@media(max-width:359px){.choice-reel{left:8px;font-size:12px}.provider-stepper .choice-reel{left:8px}.selection-stepper:has(:is(#effort,#controller-effort)) .choice-reel{left:20px;right:16px;font-size:11.5px}}
.controller-options .selection-stepper[data-effort=low]::before{background:var(--muted)}
.controller-options .selection-stepper[data-effort=medium]::before{background:var(--body)}
.controller-options .selection-stepper:is([data-effort=xhigh],[data-effort=max],[data-effort=ultra])::before{background:#ff9b8a}
@media(max-width:359px){
  .controller-options.composer-settings{grid-template-columns:.95fr 2.15fr;gap:5px}
  .controller-options.composer-settings .provider-stepper{padding-left:8px}
  .controller-options .provider-value{font-size:12px}
  .controller-options .provider-mark{display:none}
  .composer-settings .selection-stepper:has(#controller-effort) select{padding-left:20px;padding-right:16px;font-size:11.5px}
  .composer-settings .selection-stepper:has(#controller-effort)::before{left:8px}
  .composer-settings .selection-stepper:has(#controller-effort)::after{right:5px;width:8px}
}
/* Recovery and secondary surfaces share the reference's rounded status language. */
:root{--feedback-amber:#f2bb4b;--feedback-amber-ink:#f5d68f;--feedback-amber-muted:#af9b6b;--feedback-amber-ground:#211c12;--feedback-amber-line:#514120;--feedback-red:#ff9b8a;--feedback-red-ink:#ffd0c7;--feedback-red-muted:#c9968d;--feedback-red-ground:#271715;--feedback-red-line:#59332d}
:root[data-theme=light]{--feedback-amber:#e9ac32;--feedback-amber-ink:#624612;--feedback-amber-muted:#897044;--feedback-amber-ground:#fff7e6;--feedback-amber-line:#ead3a5;--feedback-red:#c74b3c;--feedback-red-ink:#83291e;--feedback-red-muted:#985e56;--feedback-red-ground:#fff0ed;--feedback-red-line:#ebc5bc}
@media(prefers-color-scheme:light){:root:not([data-theme]){--feedback-amber:#e9ac32;--feedback-amber-ink:#624612;--feedback-amber-muted:#897044;--feedback-amber-ground:#fff7e6;--feedback-amber-line:#ead3a5;--feedback-red:#c74b3c;--feedback-red-ink:#83291e;--feedback-red-muted:#985e56;--feedback-red-ground:#fff0ed;--feedback-red-line:#ebc5bc}}
.computer-help{flex:none;max-height:45%;margin:10px 12px 0;gap:8px;border-radius:20px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.help-card{--help-tone:var(--feedback-amber);--help-ink:var(--feedback-amber-ink);--help-muted:var(--feedback-amber-muted);--help-ground:var(--feedback-amber-ground);--help-line:var(--feedback-amber-line);display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:8px;flex:none;margin:0;padding:10px 10px 10px 14px;border:1px solid var(--help-line);border-radius:20px;background:var(--help-ground);color:var(--help-ink);box-shadow:none}
.help-card[data-kind=reconnect]{--help-tone:var(--feedback-red);--help-ink:var(--feedback-red-ink);--help-muted:var(--feedback-red-muted);--help-ground:var(--feedback-red-ground);--help-line:var(--feedback-red-line)}
.help-card:is([data-kind=setup],[data-kind=projects]){--help-tone:var(--body);--help-ink:var(--ink);--help-muted:var(--muted);--help-ground:var(--panel);--help-line:var(--edge);border-color:var(--help-line);background:var(--help-ground)}
.help-card[data-kind=offline]{border-color:var(--help-line);background:var(--help-ground)}
.help-card::before{content:'';grid-column:1;grid-row:1;display:block;width:8px;height:8px;border-radius:50%;background:var(--help-tone);box-shadow:0 0 0 4px color-mix(in srgb,var(--help-tone) 17%,transparent);justify-self:center;align-self:center}
.help-copy{grid-column:2;grid-row:1;min-width:0;display:grid;gap:4px}
.help-card h2{margin:0;font:650 14px/1.3 var(--font);letter-spacing:-.14px;color:var(--help-ink);overflow-wrap:anywhere}
.help-card p{margin:0;font:400 10px/1.5 var(--mono);color:var(--help-muted);overflow-wrap:anywhere}
.help-card .help-seen{font:400 10px/1.5 var(--mono);color:var(--help-muted)}
.help-actions{grid-column:3;grid-row:1;display:flex;align-items:center;flex-wrap:wrap;gap:6px;order:initial;margin:0;max-width:100%}
.help-actions button{min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--help-line);border-radius:14px;background:transparent;color:var(--help-ink);font:600 12px/1.25 var(--font);box-shadow:none;white-space:nowrap}
.help-actions button:first-child{min-height:44px;border:0;background:var(--help-tone);color:#19140a}
.help-card[data-kind=reconnect] .help-actions button:first-child{color:#20100d}
.help-card:is([data-kind=setup],[data-kind=projects]) .help-actions button:first-child{background:var(--ink);color:var(--bg)}
.help-actions button:disabled{opacity:.65}
.help-card:has(.help-actions>button:nth-child(2)) .help-copy{grid-column:2/-1}
.help-card:has(.help-actions>button:nth-child(2)) .help-actions{grid-column:2/-1;grid-row:2}
.help-steps{grid-column:2/-1;grid-row:auto;order:initial;margin:0;min-width:0}
.help-steps summary{width:fit-content;min-height:36px;padding:8px 0;font:500 11px/1.5 var(--font);color:var(--help-ink)}
.help-steps ol{margin:2px 0 8px;padding-left:18px;gap:8px;color:var(--help-muted);font:400 11px/1.5 var(--font)}
/* Success feedback borrows the Ready for review card's surface, badge and type. */
#notice{position:fixed;z-index:1100;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:392px;display:flex;align-items:center;gap:10px;margin:0;padding:12px;min-height:64px;max-height:30dvh;overflow:hidden;pointer-events:auto;touch-action:none;border:1px solid var(--edge);border-radius:18px;background:var(--panel);color:var(--ink);box-shadow:0 14px 34px #0007;font:600 14px/1.3 var(--font)}
#notice-message{flex:1;min-width:0;overflow-wrap:anywhere;max-height:30dvh;overflow-y:auto;touch-action:none}
#notice-dismiss{flex:none;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:14px;background:var(--control);color:var(--muted);pointer-events:auto}
#notice-dismiss:hover{background:var(--edge);color:var(--ink)}
#notice-dismiss:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#notice-dismiss svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#notice::before{content:'';flex:none;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--review) 14%,var(--panel))}
#notice::after{content:'';position:absolute;left:22px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:var(--review);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#error{padding:8px 8px 8px 14px;min-height:60px;gap:10px;border:1px solid var(--feedback-red-line);border-radius:20px;background:var(--feedback-red-ground);color:var(--feedback-red-ink);box-shadow:0 12px 32px #0003;font:500 13px/1.4 var(--font)}
#error .feedback-icon{color:var(--feedback-red)}
#error-message{max-height:30dvh;font:500 13px/1.45 var(--font);color:var(--feedback-red-ink);overscroll-behavior-y:contain}
#error-dismiss{width:44px;height:44px;min-height:44px;border-radius:14px;background:color-mix(in srgb,var(--feedback-red) 10%,transparent);color:var(--feedback-red-ink)}
#error-dismiss:hover{background:color-mix(in srgb,var(--feedback-red) 16%,transparent);color:var(--feedback-red-ink)}
.auth-status{padding:12px 14px;border:1px solid color-mix(in srgb,var(--review) 28%,var(--panel));border-radius:20px;background:color-mix(in srgb,var(--review) 8%,var(--panel));font:400 13px/1.45 var(--font);color:var(--ink)}
.auth-status[data-kind=error]{border-color:var(--feedback-red-line);background:var(--feedback-red-ground);color:var(--feedback-red-ink)}
.auth-step .field input,.auth-step .auth-primary,.auth-google,.verify-email button{min-height:48px;border-radius:14px}
.auth-primary,.verify-email .primary{background:var(--ink);border-color:transparent;color:var(--bg)}
.launch-status{font:400 14px/1.5 var(--font)}
.launch[data-state=failed] .launch-status{padding:14px 16px;border:1px solid var(--feedback-amber-line);border-radius:20px;background:var(--feedback-amber-ground);color:var(--feedback-amber-ink)}
#launch-retry{min-height:48px;padding:0 22px;border:0;border-radius:14px;background:var(--feedback-amber);color:#19140a;font:600 14px/1.3 var(--font)}
.connection-card{margin:20px 0;padding:18px;border:1px solid var(--edge);border-radius:24px;background:var(--panel)}
.connection-card h2{font:650 22px/1.25 var(--font);letter-spacing:-.35px}
.connection-card p{font:400 13px/1.5 var(--font);color:var(--body)}
.connection-card #connect-account{font:400 11px/1.5 var(--mono);color:var(--muted)}
.connection-card button{min-height:48px;padding:10px 14px;border:0;border-radius:14px;background:var(--ink);color:var(--bg);font:600 14px/1.3 var(--font)}
#connect-status:not(:empty){padding:10px 12px;border:1px solid var(--feedback-amber-line);border-radius:14px;background:var(--feedback-amber-ground);color:var(--feedback-amber-ink)}
.task-note{padding:11px 14px;border:1px solid var(--edge);border-radius:16px;background:var(--panel);font:400 12px/1.45 var(--font)}
dialog{padding:18px;border:1px solid var(--edge);border-radius:24px;background:var(--panel)}
dialog .heading h2{font:650 20px/1.3 var(--font);letter-spacing:-.2px}
dialog button,dialog .button{min-height:44px;border-radius:14px;background:var(--control);color:var(--ink);border-color:var(--edge)}
dialog .primary{background:var(--ink);color:var(--bg);border-color:transparent}
dialog .danger{color:var(--feedback-red);border-color:var(--feedback-red-line);background:var(--feedback-red-ground)}
dialog :is(input,select,textarea){border-radius:14px;background:var(--input)}
.install-prompt{border:1px solid var(--edge);border-radius:24px;background:var(--panel)}
.install-buttons button{min-height:44px;padding:8px 14px;border-radius:14px;font:500 13px/1.3 var(--font)}
.install-buttons .primary{background:var(--ink);color:var(--bg);border-color:transparent}
@media(max-width:359px){.help-card{column-gap:8px;padding-left:12px}.help-card h2{font-size:13px}.help-card p{font-size:9px}.help-actions button{padding-inline:10px;font-size:11px}}
:root[data-theme=light] .help-card[data-kind=reconnect] .help-actions button:first-child{color:#fff}
.composer-choice-picker{padding:6px;border:1px solid var(--edge);border-radius:20px;background:var(--panel);box-shadow:0 12px 32px #0004}
.composer-choice-picker button{min-height:44px;padding:10px 12px;border:0;border-radius:14px;background:transparent;color:var(--body);font:500 14px/1.3 var(--font)}
.composer-choice-picker button[aria-pressed=true]{background:var(--control);color:var(--ink);border:0;font-weight:600}

/* A close-up retains a readable, tappable task bubble above the worker. */
.office-tag .tag-preview,.office-tag .tag-preview-open{display:none}
.office-tag[aria-pressed=true]{width:calc(100% - 24px);max-width:420px;height:calc(75% - 44px);max-height:520px;overflow:hidden;padding:12px;gap:8px;align-items:stretch;grid-template-rows:auto auto minmax(0,1fr) auto;background:var(--panel)}
.office-tag[aria-pressed=true] .tag-title{white-space:normal;overflow-wrap:anywhere;font-size:14px}
.office-tag[aria-pressed=true] .tag-preview{display:grid;grid-auto-rows:minmax(0,1fr);gap:12px;min-height:0;height:100%;overflow:hidden;width:100%;font:13px/1.5 var(--font);color:var(--ink)}
.tag-message{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;gap:4px;width:100%}
.tag-message-role{font:600 10px/1.3 var(--mono);color:var(--muted)}
.tag-message-text{display:block;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
.office-tag[aria-pressed=true] .tag-lead{display:none}

/* Desktop queue categories with compact phone rows and inline review controls. */
body[data-view=queue] .queue-heading{display:none}
body[data-view=queue] #ticket-dock{margin-top:10px}
body[data-view=queue] #tasks{gap:4px}
body[data-view=queue] #tasks>article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:0;border-radius:0;background:transparent;overflow:visible}
body[data-view=queue] #tasks .queue-section{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 2px;padding:3px 8px;border-radius:3px;background:var(--panel);font:500 11px/1.4 var(--mono);letter-spacing:0;text-transform:none}
body[data-view=queue] #tasks .queue-section[hidden]{display:none}
body[data-view=queue] #tasks>article:first-child .queue-section{margin-top:0}
.queue-section-window{color:var(--muted);font-weight:400}
body[data-view=queue] #tasks .task-open{min-height:56px;padding:7px 8px;gap:3px}
body[data-view=queue] #tasks .task-title{grid-row:1;-webkit-line-clamp:1;font:500 13px/1.35 var(--font)}
body[data-view=queue] #tasks .task-line{grid-row:2;gap:4px;font-size:10px}
body[data-view=queue] #tasks .task-model{flex:1 1 auto;min-width:0}
body[data-view=queue] #tasks .task-time{display:none}
body[data-view=queue] #tasks .task-status{flex:0 0 auto;max-width:none;font-size:10px}
body[data-view=queue] #tasks .actions{align-self:center;display:flex;gap:2px;padding:0;border:0}
body[data-view=queue] #tasks .actions button{flex:none;width:44px;height:44px;min-height:44px;padding:0;border-radius:8px;font:500 18px/1 var(--font)}
body[data-view=queue] #tasks .actions .primary{background:var(--panel)}
body[data-view=queue] #tasks [data-starred=true] .task-id::before{content:'★ ';color:var(--starred)}

/* Complete the mobile reference details with shared geometry in both themes. */
body[data-view=queue] .queue-heading{display:block;margin:12px 16px 2px}
.queue-status-summary{display:flex;flex-wrap:wrap;gap:6px}
.queue-status-summary>span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--edge);border-radius:8px;font:500 11px/1.3 var(--mono);color:var(--live)}
.queue-status-summary>span::before{content:'▶';font-size:9px}
.queue-status-summary #queue-review-summary{color:var(--review)}
.queue-status-summary #queue-review-summary::before{content:'✓';font-size:12px}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .prompt-box{border-color:var(--edge)}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .prompt-toolbar{padding:6px;min-height:56px;align-items:center}
.prompt-toolbar #prompt-images>button:first-of-type,.prompt-toolbar .voice-mic-prompt{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:11px;border:0;border-radius:12px;background:var(--control);color:var(--body)}
.prompt-toolbar #prompt-images>button:first-of-type::before{content:none}
.prompt-toolbar #prompt-images>button:first-of-type svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#send-prompt .send-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;text-align:left}
#send-selection{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11px/1.35 var(--mono);color:inherit;opacity:.7}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #send-prompt{gap:12px}
#send-prompt>svg{flex:none}
@media(max-height:560px){body[data-view=queue] .queue-heading{display:none}}
body[data-keyboard=true] #send-selection{display:none}

/* Retire the legacy full-width model row inside the new selector grid. */
body[data-composing=true] #prompt-form .composer-settings .model-row{grid-column:auto;grid-row:auto}
/* Minimum card heights include the name, textarea and padded 56px toolbar. */
/* Keep the 44px photo and voice targets inset while the keyboard is open. */
body[data-keyboard=true] #prompt-form .prompt-toolbar{padding:6px;min-height:56px}
.prompt-toolbar .mobile-plan-council-toggle{display:flex;align-items:center;justify-content:center;gap:5px;flex:none;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:12px;background:var(--control);color:var(--body);font:600 12px/1 var(--font)}
.prompt-toolbar .mobile-plan-council-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.prompt-toolbar .mobile-plan-council-toggle[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 12%,var(--control));color:var(--ink)}
.mobile-plan-council{order:1;flex:none;display:grid;gap:6px;min-width:0;padding:8px;border-radius:14px;background:var(--tile)}
.mobile-plan-council-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;font:600 12px/1 var(--font);color:var(--muted)}
.mobile-plan-council-head select{width:auto;min-width:112px;min-height:36px;padding:6px 10px;border:1px solid var(--edge);border-radius:9px;background:var(--input);color:var(--ink);font:600 13px/1 var(--font)}
.mobile-plan-council-row{display:grid;grid-template-columns:52px minmax(0,1.2fr) minmax(0,.85fr);align-items:center;gap:6px;min-width:0}
.mobile-plan-council-row strong{overflow:hidden;text-overflow:ellipsis;font:600 11px/1 var(--font)}
.mobile-plan-council-row label{display:flex;flex-direction:column;gap:3px;min-width:0;font:500 9px/1 var(--mono);color:var(--muted)}
.mobile-plan-council-row select{width:100%;min-width:0;min-height:38px;padding:5px 6px;border:1px solid var(--edge);border-radius:9px;background:var(--input);color:var(--ink);font:600 12px/1 var(--font)}
.mobile-plan-council select:focus-visible,.mobile-plan-council-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
body[data-composing=true] #prompt-form .prompt-toolbar #prompt-images{max-height:none}
@media(max-height:360px){
  body[data-keyboard=true]:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #task-name{height:32px;min-height:32px}
}

body[data-composing=true] #prompt-form .prompt-toolbar :is(#prompt-images>button:first-of-type,.voice-mic-prompt){height:44px;min-height:44px}

/* Latest v2 reference: shared 48px header rows and 64px bottom shells. */
:root,:root[data-theme=dark]{--muted:#9a9aa0;--v2-scene:#08080a;--v2-voice:#0c0c0e;--v2-usage:#0e0e10;--v2-card-line:#1f1f22}
:root[data-theme=light]{--bg:#f4f2ee;--panel:#fff;--control:#fff;--line:#e2dfd8;--edge:#e2dfd8;--ink:#17171a;--body:#44444d;--muted:#6b6b72;--terminal:#fff;--live:#6b4fe0;--review:#1f8a55;--switch-well:#ebe8e2;--tile:#eeebe5;--input:#eeebe5;--sw-well:#e9e6df;--sw-card:#fff;--sw-muted:#6b6b72;--v2-scene:#ebe7df;--v2-voice:#f8f6f2;--v2-usage:#f8f6f2;--v2-card-line:#e2dfd8}
@media(prefers-color-scheme:light){:root:not([data-theme]){--bg:#f4f2ee;--panel:#fff;--control:#fff;--line:#e2dfd8;--edge:#e2dfd8;--ink:#17171a;--body:#44444d;--muted:#6b6b72;--terminal:#fff;--live:#6b4fe0;--review:#1f8a55;--switch-well:#ebe8e2;--tile:#eeebe5;--input:#eeebe5;--sw-well:#e9e6df;--sw-card:#fff;--sw-muted:#6b6b72;--v2-scene:#ebe7df;--v2-voice:#f8f6f2;--v2-usage:#f8f6f2;--v2-card-line:#e2dfd8}}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top{flex:none;height:118px;min-height:118px;padding:12px 12px 0;gap:10px 12px;align-content:flex-start;align-items:center;flex-wrap:wrap}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top>#project-toggle{height:44px;min-height:44px;margin:2px 0;padding:0 12px 0 6px;border-radius:14px;gap:10px}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top .project-stack{width:24px;height:19px}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top .current-project-copy{gap:1px}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top #current-project-activity{font:400 11px/1.3 var(--mono)}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top #workspace-bar{flex:0 0 100%;height:48px;min-height:48px;margin:0}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) .view-switch{height:48px;min-height:48px;padding:4px;gap:4px;border:0;border-radius:14px}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) .view-switch button{height:40px;min-height:40px;border-radius:10px;font:500 14px/1 var(--font)}
.view-switch .view-count{background:var(--edge)}
body[data-online] #settings-button .avatar-initial{background:#1a2b22;color:#a6f0c5;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px #2f4a3a;letter-spacing:.04em}
:root[data-theme=light] body[data-online] #settings-button .avatar-initial{background:#dff2e7;color:#1f6b45;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px #b9dcc8}
:root[data-theme=light] .view-switch button[aria-pressed=true]{box-shadow:0 1px 2px #00000014}
/* Reuse the compact home-indicator allowance; stage/list clearance follows this dock. */
body:is([data-view=queue],[data-view=office]) #project-tabs{left:12px;right:12px;height:64px;padding:0 8px;gap:6px;bottom:calc(8px + var(--bottom-gap));border-radius:20px;border:1px solid var(--edge);background:var(--panel);box-shadow:none}
/* The grip stays inside the top edge; context controls own overlapping touches. */
.mobile-dock{position:relative;overflow:visible}
body .mobile-dock>.dock-pull-tab{top:0;width:96px;height:44px;min-height:44px;padding:0;border:0;border-radius:14px;background:transparent;opacity:1;touch-action:pan-x}
body .mobile-dock>.dock-pull-tab>.dock-tab-shape{position:absolute;top:0;left:32px;width:40px;height:8px;overflow:visible}
body .mobile-dock>:is(#task-filters,#ticket-dock,#queue-add,#follow-up,#stop,#follow-options-toggle,#detail-new-task,#controller-choices,#controller-options-panel,#controller-transcript,#controller-send){position:relative;z-index:4}
body .dock-tab-shape .dock-tab-grip{fill:var(--accent);stroke:none}
body:is([data-project-sheet=peek],[data-project-sheet=expanded]) .dock-pull-tab{visibility:hidden}
body[data-keyboard=true] .dock-pull-tab{display:none}
body:is([data-view=detail],[data-view=controller]) #project-tabs{position:absolute;left:var(--sheet-left,12px);right:var(--sheet-right,12px);bottom:var(--sheet-bottom,80px);height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body:is([data-view=detail],[data-view=controller]) #project-tabs>:is(#project-handle,#task-filters,#queue-add,#ticket-dock){display:none}
body:is([data-view=detail],[data-view=controller]) #project-drawer[data-stage=peek]{position:absolute;bottom:0;left:0;right:0;padding:8px 0 0;border:1px solid var(--edge);border-radius:24px 24px 0 0;background:var(--panel);box-shadow:0 -16px 40px #0006;transform:translateY(var(--gesture-y,0px));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
body[data-project-sheet=peek] :is(#detail-dock,#controller-form){z-index:25}
body:is([data-view=queue],[data-view=office]) .queue-add{flex-basis:48px;width:48px;height:48px;min-height:48px;border-radius:14px}
body:is([data-view=queue],[data-view=office]) .queue-add svg{width:18px;height:18px}
#task-filters{height:50px;min-height:50px;padding:3px;gap:2px;border-radius:14px;background:var(--switch-well)}
body[data-view=queue] #task-filters button{height:44px;min-height:44px;min-width:44px;flex-direction:row;gap:5px;padding:0 5px;border-radius:11px;font:500 12px/1 var(--font)}
#task-filters .switch-fluid{top:3px;height:calc(100% - 6px)!important}
#task-filters:has(#all-tab[aria-pressed=true]) .switch-fluid{--active-x:3px}
body[data-view=office] #task-filters{flex:0 0 108px;height:50px;min-height:50px;gap:2px;padding:3px;border-radius:14px}
body[data-view=office] #task-filters button{height:44px;min-height:44px;min-width:50px;padding:0 9px;gap:6px;border-radius:11px;font:500 12px/1 var(--mono)}
body[data-view=office] #ticket-dock{height:44px;min-height:44px;gap:0}
body[data-view=office] .office-step{flex:0 0 36px;width:36px;height:44px;min-height:44px;border-radius:12px}
body[data-view=office] .office-step svg{width:16px;height:16px}
body[data-view=office] #tasks{height:44px}
body[data-view=office] #tasks .task-open{height:44px;min-height:44px;gap:3px;padding:0 2px}
body[data-view=office] #tasks .task-title{font:600 13px/1.25 var(--font)}
body[data-view=office] #tasks .task-id{display:block;font:400 11px/1.3 var(--mono)}
body[data-view=office] .office-task-dots{display:none}
body[data-view=office] .office-view{flex:1;min-height:0;display:flex;flex-direction:column}
body[data-view=office] .office-stage{flex:1;min-height:0;margin:10px 12px calc(82px + var(--bottom-gap));border:1px solid var(--edge);border-radius:20px;background:var(--v2-scene)}
body[data-view=office] .office-summary{position:absolute;z-index:6;left:12px;right:12px;top:12px;margin:0;padding:0;border:0;border-radius:0;display:flex;align-items:center;gap:6px;background:transparent;pointer-events:none}
.office-summary>button{position:relative;pointer-events:auto;min-height:28px;height:28px;padding:0 9px;gap:5px;border:1px solid color-mix(in srgb,var(--live) 27%,var(--panel));border-radius:8px;background:var(--panel);color:var(--live);font:500 11px/1 var(--mono);white-space:nowrap}
.office-summary>button::after{content:'';position:absolute;inset:-8px 0}
.office-summary>button svg{width:10px;height:10px;flex:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.office-summary>#office-working svg{fill:currentColor;stroke:none}
.office-summary>#office-ready{color:var(--review);border-color:color-mix(in srgb,var(--review) 27%,var(--panel))}
.office-summary>button[aria-pressed=true]{background:color-mix(in srgb,currentColor 12%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 26%,transparent)}
body:is([data-view=queue],[data-view=office]) .project-drawer{bottom:64px}
:root[data-theme=light] body:is([data-view=queue],[data-view=office]) #project-tabs{box-shadow:0 6px 20px #0000000f}

/* Preserve desktop queue membership while matching the reference card geometry. */
body[data-view=queue] .queue-heading{display:none}
body[data-view=queue] #ticket-dock{margin:10px 12px 0}
body[data-view=queue] #tasks{gap:8px;padding-top:6px;padding-bottom:calc(82px + var(--bottom-gap));scroll-padding-bottom:calc(82px + var(--bottom-gap))}
body[data-view=queue] #tasks>article{display:flex;flex-direction:column;align-items:stretch;gap:0;border:0;background:transparent;border-radius:0;overflow:visible}
body[data-view=queue] #tasks .queue-section{margin:6px 0 8px;padding:6px 4px 0;border:0;border-radius:0;background:transparent;font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em}
body[data-view=queue] #tasks .task-open{min-height:72px;padding:12px 14px;gap:6px;border:1px solid var(--v2-card-line);border-radius:16px;background:var(--terminal)}
body[data-view=queue] #tasks .task-title{font:600 15px/1.3 var(--font)}
body[data-view=queue] #tasks .task-line{gap:5px;font:400 11px/1.4 var(--mono)}
body[data-view=queue] #tasks .task-status{font:400 11px/1.4 var(--mono)}
body[data-view=queue] #tasks>article:has(.actions>button:not([hidden])) .task-open{border-bottom:0;border-radius:16px 16px 0 0}
body[data-view=queue] #tasks .actions{align-self:stretch;display:flex;gap:6px;padding:0 8px 8px;border:1px solid var(--v2-card-line);border-top:0;border-radius:0 0 16px 16px;background:var(--terminal)}
body[data-view=queue] #tasks .actions:empty{display:none}
body[data-view=queue] #tasks .actions button{flex:1;width:auto;min-width:44px;height:44px;min-height:44px;border:0;border-radius:12px;background:var(--panel);font:500 13px/1 var(--font)}
body[data-view=queue] #tasks .actions .primary{background:color-mix(in srgb,var(--review) 10%,var(--panel));color:var(--review);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--review) 27%,transparent)}
body[data-view=queue] #queue-empty{align-self:stretch;min-height:240px;margin:6px 0 calc(82px + var(--bottom-gap));padding:24px;border:1px dashed var(--edge);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;font:400 14px/1.45 var(--font);color:var(--muted)}
body[data-view=queue] #queue-empty::before{content:'✓';display:grid;place-items:center;flex:none;width:56px;height:56px;border:1px solid var(--edge);border-radius:18px;background:var(--panel);color:var(--review);font:500 26px/1 var(--font)}

/* Task chrome never overlaps the native terminal or conversation scroller. */
body[data-view=detail] .shell{max-width:none}
body[data-view=detail] #detail{gap:6px;padding:6px 6px calc(8px + env(safe-area-inset-bottom));overflow:hidden}
body[data-view=detail] .task-view-head{flex:none;min-height:44px;height:44px;padding:0;gap:6px}
body[data-view=detail] #back{flex:none;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
body[data-view=detail] #back>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-view=detail] .task-view-switch{height:44px;min-height:44px;padding:0;gap:2px;border:0;border-radius:12px;background:var(--sw-well)}
body[data-view=detail] .task-view-switch button{height:44px;min-height:44px;padding:0 12px;border-radius:10px;font:500 12px/1 var(--font)}
body[data-view=detail] .task-view-title{flex:none;min-height:0;margin:0;padding:2px 0 6px;gap:4px;border-bottom:1px solid var(--line)}
body[data-view=detail] .task-view-title h1{order:1;display:block;min-width:0;margin:0;max-height:2.6em;font:600 14px/1.3 var(--font);letter-spacing:0;-webkit-line-clamp:unset;white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
body[data-view=detail] #task-meta{order:0;min-height:19px;gap:6px;font:500 11px/1.4 var(--mono)}
body[data-view=detail] #task-meta .task-status[data-status=review]{padding:3px 7px;border:1px solid color-mix(in srgb,var(--review) 27%,transparent);border-radius:7px;background:color-mix(in srgb,var(--review) 10%,transparent);color:var(--review)}
body[data-view=detail] #agent-usage{order:2}
body[data-view=detail] .task-note{flex:none;max-height:15vh;margin:0;overflow:auto}
body[data-view=detail] .task-chat{flex:1;min-height:0;min-width:0;padding:0;gap:8px;overflow-y:auto;overflow-x:hidden}
body[data-view=detail] :is(.chat-bubble-stack,.chat-request .chat-bubble-stack,.chat-final .chat-bubble-stack){width:100%;max-width:100%}
body[data-view=detail] .chat-events{gap:10px}
body[data-view=detail] :is(.chat-message-body,.chat-final .chat-message-body){padding:8px 10px;background:var(--panel);border:1px solid var(--v2-card-line);border-radius:6px 12px 12px 12px;font:400 13px/1.45 var(--font)}
body[data-view=detail] .chat-request .chat-message-body{padding:8px 10px;border:0;border-radius:12px 12px 6px 12px;background:var(--control);font:400 13px/1.45 var(--font)}
body[data-view=detail] .markdown-document{font-size:13px;line-height:1.45}
body[data-view=detail] .chat-final .markdown-document > p:first-child{font-size:inherit;line-height:inherit}
body[data-view=detail] .markdown-document p{margin-bottom:10px}
body[data-view=detail] .markdown-document :is(h1,h2){font-size:16px;margin:14px 0 8px}
body[data-view=detail] .markdown-document :is(h3,h4,h5,h6){font-size:14px;margin:12px 0 6px}
body[data-view=detail] .task-screen{position:relative;flex:1 1 0;min-height:0;min-width:0;width:100%;max-width:100%;margin:0;padding:12px;border:1px solid var(--line);border-radius:16px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;white-space:pre;overflow-wrap:normal;word-break:normal;font:400 11px/1.5 var(--mono)}
body[data-view=detail] .task-shots{min-height:0;flex:1;overflow:auto;padding:0 4px}
body[data-view=detail] #task-review-actions{flex:none;display:flex;align-items:center;gap:6px;margin:0;padding:0}
body[data-view=detail] #task-review-actions:not(:has(>button:not([hidden]))){display:none}
body[data-view=detail] #task-review-actions button{flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:12px;border:1px solid var(--edge);border-radius:12px;background:var(--panel)}
body[data-view=detail] #task-review-actions #review{border-color:color-mix(in srgb,var(--review) 27%,var(--panel));background:color-mix(in srgb,var(--review) 10%,var(--panel));color:var(--review)}
#task-review-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-view=detail] .task-dock{flex:none;min-height:64px;margin:0;padding:7px 8px;gap:6px;align-items:center;border:1px solid var(--edge);border-radius:20px;background:var(--panel)}
body[data-view=detail] .task-dock #follow-options-toggle{width:44px;height:44px;min-height:44px;border-radius:12px;background:var(--switch-well)}
body[data-view=detail] .task-dock #follow-up{grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:6px;min-width:0;margin:0}
body[data-view=detail] .task-dock #follow-up textarea{height:44px;min-height:44px;max-height:96px;padding:11px 4px;border:0;border-radius:8px;background:transparent;font:400 16px/22px var(--font);overflow-y:auto}
body[data-view=detail] .task-dock #follow-up button[type=submit]{width:48px;min-width:48px;height:48px;min-height:48px;padding:14px;align-self:center;border-radius:14px}
body[data-view=detail] .task-dock[data-expanded=true] #follow-up-voice{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:12px;background:var(--switch-well)}

/* Controller keeps the same draft selectors in an accessible options popover. */
body[data-view=controller] .controller-view{display:flex;padding:10px 12px calc(16px + env(safe-area-inset-bottom));gap:10px;overflow:visible}
.controller-routing{display:flex;flex:none;min-width:0;gap:0}
.controller-routing .controller-heading,#controller-projects{display:none}
#controller-tasks{width:100%;gap:8px;padding:0;flex:none}
#controller-tasks .controller-tile{flex:0 0 148px;height:52px;min-height:52px;padding:0 12px;border:1px solid var(--line);border-radius:14px;gap:2px}
#controller-tasks .controller-tile strong{font:600 13px/1.3 var(--font)}
#controller-tasks .controller-tile small{font:400 11px/1.3 var(--mono)}
#controller-tasks .controller-tile:first-child{flex-basis:auto;padding:0 14px}
#controller-tasks .controller-tile:first-child strong{font-size:14px}
#controller-tasks .controller-tile:first-child small{display:none}
.controller-usage{flex:none;height:44px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--v2-card-line);border-radius:12px;background:var(--v2-usage)}
.controller-usage .account-usage-meter{min-width:0;padding:0;border:0;background:transparent;gap:5px}
.controller-usage .account-usage-line{gap:2px;font:500 11px/1.3 var(--mono)}
.controller-usage .account-usage-track{height:3px;background:var(--edge)}
.controller-usage .account-usage-reset{display:none}
body[data-view=controller] .controller-talk{flex:1 1 0;min-height:180px;margin:0;padding:10px;border:1px solid var(--line);border-radius:24px;background:var(--v2-voice);gap:4px}
body[data-view=controller] .controller-talk>svg{flex:none;width:240px;height:154px;min-height:154px;max-width:100%;margin-bottom:3px}
body[data-view=controller] .controller-talk strong{font:700 20px/1.3 var(--font);letter-spacing:0}
body[data-view=controller] .controller-talk>span{padding:0 12px;font:400 13px/1.3 var(--font)}
body[data-view=controller] .controller-draft{position:relative;display:flex;flex:none;align-items:center;min-height:64px;gap:6px;margin:0;padding:7px 8px;border:1px solid var(--edge);border-radius:20px;background:var(--panel)}
body[data-view=controller] .controller-draft textarea{flex:1;min-width:0;height:44px;min-height:44px;max-height:96px;margin:0;padding:11px 4px;border:0;border-radius:8px;background:transparent;font:400 16px/22px var(--font);resize:none;overflow-y:auto}
#controller-send{flex:none;width:48px;height:48px;min-height:48px;padding:0;border:0;border-radius:14px;background:var(--accent);color:var(--brand-ink);font-size:0;gap:0}
#controller-send::after{content:'';width:20px;height:20px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 16V4m-5 5 5-5 5 5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.controller-options-footer{display:flex;align-items:center;gap:10px;margin-top:8px}
#controller-help{flex:1;min-width:0;margin:0;font:400 11px/1.4 var(--font);color:var(--muted)}
#controller-clear{flex:none;min-height:44px;padding:0 12px;border-radius:12px;background:var(--switch-well);font:500 12px/1 var(--font)}

/* Grow above the dock to the safe top of the visible viewport. Only the list shrinks;
   cards keep their content height and native touch scrolling supplies momentum. */
body .mobile-completions[data-mode=toast]{--completion-dock-gap:calc(90px + env(safe-area-inset-bottom));inset:auto max(12px,calc((100vw - 576px)/2)) calc(100dvh - var(--app-height,100dvh) - var(--app-top,0px) + var(--completion-dock-gap));width:auto;max-height:calc(var(--app-height,100dvh) - env(safe-area-inset-top) - 12px - var(--completion-dock-gap));transform:none;padding:0;gap:8px}
body:is([data-view=queue],[data-view=office]) .mobile-completions[data-mode=toast]{--completion-dock-gap:calc(82px + var(--bottom-gap))}
body .mobile-completions .mobile-completion{position:relative;margin:0;padding:12px;border:1px solid var(--edge);border-radius:18px;background:var(--panel);box-shadow:0 14px 34px #0007;overflow:hidden}
.mobile-completion-heading{display:flex;align-items:center;gap:10px;padding-right:30px}
.mobile-completion-badge{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--review) 14%,var(--panel));color:var(--review)}
.mobile-completion-badge svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mobile-completion-copy{flex:1;min-width:0}
body .mobile-completions .mobile-completion-label{display:block;margin:0;font:500 10px/1.4 var(--mono);letter-spacing:.2px;color:var(--review)}
body .mobile-completions .mobile-completion-title{margin:4px 0 0;font:600 14px/1.3 var(--font);-webkit-line-clamp:2}
body .mobile-completions .mobile-completion-context{margin:0 0 4px;color:var(--ink);font:600 12px/1.35 var(--font);overflow-wrap:anywhere}
.mobile-completion-dismiss{position:absolute;top:4px;right:4px;width:44px;height:44px;min-height:44px;padding:13px;border:0;border-radius:12px;background:transparent;color:var(--muted)}
.mobile-completion-dismiss svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.mobile-completion-actions{gap:8px;margin-top:12px}
.mobile-completion-actions button{height:44px;min-height:44px;padding:0 10px;border:0;border-radius:12px;font:500 13px/1 var(--font)}
.mobile-completion-actions .mobile-completion-open{background:var(--ink);color:var(--bg)}
.mobile-completion-actions .mobile-completion-review{background:color-mix(in srgb,var(--review) 10%,var(--panel));color:var(--review);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--review) 27%,transparent)}
.mobile-completion-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:color-mix(in srgb,var(--review) 20%,transparent)}
.mobile-completion-progress::after{content:'';display:block;width:100%;height:100%;background:var(--review);transform:scaleX(var(--completion-progress,1));transform-origin:left}
.mobile-completions:is([data-mode=strip],[data-mode=open]) .mobile-completions-head{border-radius:16px}
.mobile-completions-head button{min-height:44px;border-radius:12px}
@media(max-width:359px){
  body[data-view=queue] #task-filters button{font-size:10px;gap:3px;padding-inline:2px}
  body[data-view=office] #task-filters{flex-basis:96px}
  body[data-view=office] #task-filters button{min-width:44px;padding-inline:5px;gap:4px}
  body[data-view=office] .office-step{width:28px;flex-basis:28px}
  body[data-view=office] #tasks .task-title{font-size:12px}
  body[data-view=office] #tasks .task-id{font-size:10px}
  body[data-view=detail] .task-view-switch button{padding-inline:9px;font-size:12px}
  .controller-usage{gap:7px;padding-inline:9px}
  .controller-usage .account-usage-line{font-size:9px}
}
@media(max-height:680px){
  body[data-view=controller] .controller-talk{min-height:120px}
  body[data-view=controller] .controller-talk>svg{width:140px;height:89px;min-height:89px;margin-bottom:0}
  body[data-view=controller] .controller-talk strong{font-size:18px}
  body[data-view=controller] .controller-talk>span{font-size:11px}
}
@media(orientation:landscape) and (max-height:560px){
  body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top{height:58px;min-height:58px;padding-top:6px;flex-wrap:nowrap;gap:8px}
  body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top #workspace-bar{order:0;flex:1 1 300px;width:auto}
  body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top>#project-toggle{flex:0 1 145px}
  body[data-view=controller] .controller-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(44px,1fr) 52px auto;gap:8px}
  #controller-usage{grid-column:1;grid-row:1;align-self:start}.controller-routing{grid-column:1;grid-row:2}
  body[data-view=controller] .controller-talk{grid-column:2;grid-row:1/4;min-height:0}
  body[data-view=controller] .controller-draft{grid-column:1;grid-row:3;align-self:end}
}
body[data-keyboard=true][data-view=detail] #detail{padding-bottom:8px}
body[data-keyboard=true][data-view=detail] .task-view-title{display:none}
body[data-keyboard=true][data-view=controller] .controller-view{display:flex;padding-bottom:8px}
body[data-keyboard=true][data-view=controller] .controller-routing{margin-top:auto}
body[data-keyboard=true][data-view=controller] .controller-talk{display:none}
body[data-keyboard=true][data-view=controller] .controller-talk>svg{display:none}

/* Account uses the supplied 390px profile, usage and settings geometry. */
body[data-view=settings]{background:var(--bg)}
body[data-view=settings] .shell{display:flex;flex-direction:column;min-height:var(--app-height,100dvh);padding-bottom:calc(20px + env(safe-area-inset-bottom));border:0}
body[data-view=settings] header.top{flex:none;height:60px;min-height:60px;flex-wrap:nowrap;gap:10px;padding:12px 16px 0}
body[data-view=settings] header.top .identity{flex:1;display:flex;justify-content:flex-end;min-width:0;overflow:visible}
body[data-view=settings] header.top .identity>:not(#connection){display:none}
body[data-view=settings] #connection{display:flex;align-items:center;gap:6px;color:var(--muted);font:400 11px/1.3 var(--mono)}
body[data-view=settings][data-online=true] #connection{color:var(--review)}
body[data-view=settings] #connection::before{flex:none;width:7px;height:7px;margin:0;border-radius:50%;background:currentColor}
body[data-view=settings] header.top>:is(#company-button,#machine-switch){display:none}
body[data-view=settings] #settings-back{flex:none;display:flex;height:44px;min-height:44px;padding:0 8px 0 0;gap:6px;font:400 15px/1.3 var(--font);color:var(--body)}
#settings-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-view=settings] main{display:flex;flex:1;padding:18px 16px 0}
body[data-view=settings] .account-view{display:flex;flex:1;min-width:0;flex-direction:column;padding:0}
body[data-view=settings] .account-head{display:none}
body[data-view=settings] .profile-card{flex:none;min-height:60px;gap:14px;margin:0;padding:0}
body[data-view=settings] .profile-card .avatar{flex:none;width:60px;height:60px;border-radius:18px;background:#1a2b22;color:#a6f0c5;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px #2f4a3a;font:600 20px/1 var(--font);letter-spacing:.04em}
:root[data-theme=light] body[data-view=settings] .profile-card .avatar{background:#dff2e7;color:#1f6b45;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px #b9dcc8}
body[data-view=settings] .profile-text{gap:3px;min-width:0}
#profile-name{display:block;font:700 22px/1.2 var(--font);letter-spacing:-.22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-view=settings] .profile-text #email{font:400 13px/1.3 var(--font);color:var(--muted)}
body[data-view=settings] .group-title{margin:18px 2px 8px;padding:0;font:500 11px/1.3 var(--mono);letter-spacing:0;color:var(--muted)}
body[data-view=settings] .account-usage{padding:12px 14px;gap:10px;border:1px solid var(--v2-card-line);border-radius:16px;background:var(--terminal);cursor:pointer}
body[data-view=settings] .account-usage-meter{gap:5px;padding:0;border:0}
body[data-view=settings] .account-usage-line{align-items:baseline;gap:6px;font:500 13px/1.2 var(--font)}
body[data-view=settings] .account-usage-value{font:500 11px/1.3 var(--mono);color:var(--muted)}
body[data-view=settings] .account-usage-meter:is([data-level=warning],[data-level=critical]) .account-usage-value{color:var(--feedback-red)}
body[data-view=settings] .account-usage-track{height:4px;background:var(--edge)}
body[data-view=settings] .account-usage-meter:is([data-level=warning],[data-level=critical]) .account-usage-track>span{background:var(--feedback-red)}
body[data-view=settings] .usage-detail-link{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-view=settings] .usage-detail-link:focus-within{position:static;width:auto;height:auto;clip-path:none;white-space:normal}
body[data-view=settings] .group{flex:none;margin:0;gap:0;border:1px solid var(--v2-card-line);border-radius:16px;background:var(--terminal);overflow:hidden}
body[data-view=settings] .group .row{height:56px;min-height:56px;padding:0 14px;border:0;border-top:1px solid var(--v2-card-line);background:transparent;font:500 15px/1.3 var(--font)}
body[data-view=settings] .group>.row:first-child{border-top:0}
body[data-view=settings] .computer{display:flex;min-height:64px;gap:12px;margin:0;padding:10px 10px 10px 14px;border:0;border-top:1px solid var(--v2-card-line)}
body[data-view=settings] .computer:first-child{border-top:0}
body[data-view=settings] .computer-text{gap:3px}
body[data-view=settings] .computer-text strong{font:600 15px/1.3 var(--font)}
body[data-view=settings] .computer-text small{font:400 11px/1.3 var(--mono);gap:5px}
body[data-view=settings] .computer[data-online=true] .computer-text small{color:var(--review)}
body[data-view=settings] .computer-text small::before{width:5px;height:5px;box-shadow:none;background:currentColor}
body[data-view=settings] .computer .danger{height:40px;min-height:40px;padding:0 14px;border:1px solid var(--feedback-red-line);border-radius:12px;color:var(--feedback-red);font:500 13px/1 var(--font)}
/* Computer rows grow to hold the v2 Unlock, Lock now and Forget actions; the typed-code form too. */
body[data-view=settings] .group .row.computer,body[data-view=settings] .group .add-computer{height:auto}
body[data-view=settings] .group .add-computer{padding:14px;border-top:1px solid var(--v2-card-line);font:400 14px/1.4 var(--font)}
body[data-view=settings] .computer-secure button{height:36px;min-height:36px;padding:0 12px;border:1px solid var(--edge);border-radius:12px;background:transparent;color:var(--ink);font:500 13px/1 var(--font)}
body[data-view=settings] .computer-secure .danger{color:var(--feedback-red);border-color:var(--feedback-red-line)}
body[data-view=settings] #notifications{justify-content:space-between}
#notifications-switch{position:relative;display:block;flex:none;width:52px;height:32px;border-radius:10px;background:var(--edge);transition:background-color .2s}
#notifications-switch::after{content:'';position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:8px;background:var(--muted);transition:transform .2s,background-color .2s}
#notifications[aria-checked=true] #notifications-switch{background:var(--review)}
#notifications[aria-checked=true] #notifications-switch::after{transform:translateX(20px);background:#0b1a12}
body[data-view=settings] .row-select select{height:44px;min-height:44px;font-size:16px;padding-right:20px;background-position:right 0 center}
body[data-view=settings] #install{justify-content:space-between}
.install-how{display:inline-flex;align-items:center;gap:6px;font:400 14px/1.3 var(--font);color:var(--muted)}
.install-how svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body[data-view=settings] .group-note:empty{display:none}
body[data-view=settings] .install-help.row{height:auto;padding:12px 14px}
body[data-view=settings] #logout{flex:none;margin-top:auto;min-height:52px;height:52px;border:1px solid var(--feedback-red-line);border-radius:14px;background:color-mix(in srgb,var(--feedback-red) 7%,var(--bg));color:var(--feedback-red);font:500 15px/1 var(--font)}
body[data-view=settings] .group:has(#install){margin-bottom:18px}
.mobile-completion-progress{transform-origin:left}
@media(max-width:359px){body[data-view=settings] #connection{font-size:9px}#profile-name{font-size:20px}body[data-view=settings] .account-usage-line{font-size:12px}body[data-view=settings] .account-usage-value{font-size:9px}}
@media(prefers-reduced-motion:reduce){#notifications-switch,#notifications-switch::after{transition:none}}
.controller-usage-meter{display:flex;flex-direction:column;min-width:0;gap:5px}
.controller-usage-meta{display:flex;align-items:center;justify-content:space-between;gap:2px;font:500 11px/1.3 var(--mono);color:var(--muted);white-space:nowrap}
.controller-usage-meta>span:last-child{color:var(--ink)}
.controller-usage-track{display:block;width:100%;height:3px;border-radius:2px;background:var(--edge);overflow:hidden}
.controller-usage-fill{display:block;height:100%;border-radius:inherit;background:var(--review)}
.controller-usage-meter:is([data-level=warning],[data-level=critical]) .controller-usage-meta>span:last-child{color:var(--feedback-red)}
.controller-usage-meter:is([data-level=warning],[data-level=critical]) .controller-usage-fill{background:var(--feedback-red)}
#controller-tasks .controller-tile[data-status=running] small{color:var(--live)}
#controller-tasks .controller-tile[data-status=review] small{color:var(--review)}
@media(max-width:359px){.controller-usage-meta{font-size:9px}}
body[data-view=queue] #queue-empty .queue-empty-title{font:700 19px/1.3 var(--font);letter-spacing:-.19px;color:var(--ink)}
body[data-view=queue] #queue-empty .queue-empty-copy{max-width:260px;font:400 14px/1.45 var(--font);color:var(--muted)}
.queue-empty-actions{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
.queue-empty-actions button{min-height:48px;padding:0 16px;border:1px solid var(--edge);border-radius:14px;background:var(--panel);color:var(--ink);font:500 14px/1 var(--font)}
.queue-empty-actions button:first-child{border:0;background:var(--ink);color:var(--bg);font-weight:600}
body[data-view=queue] #queue-empty[data-mode=loading]{justify-content:flex-start;min-height:0;border:0;border-radius:0;padding:0;background:transparent}
body[data-view=queue] #queue-empty[data-mode=loading]::before{content:none}
.queue-skeletons{display:flex;flex-direction:column;gap:8px;width:100%}
.queue-skeleton{display:flex;flex-direction:column;gap:10px;flex:none;height:72px;padding:14px;border:1px solid var(--v2-card-line);border-radius:16px;background:var(--terminal)}
.queue-skeleton>span{display:block;width:70%;height:12px;border-radius:6px;background:var(--line)}
.queue-skeleton>span+span{width:40%;height:10px;border-radius:5px;background:var(--tile)}
.queue-skeleton:nth-child(2){opacity:.7}.queue-skeleton:nth-child(2)>span{width:55%}.queue-skeleton:nth-child(2)>span+span{width:32%}
.queue-skeleton:nth-child(3){opacity:.4}.queue-skeleton:nth-child(3)>span{width:62%}.queue-skeleton:nth-child(3)>span+span{width:36%}
body[data-view=detail] .chat-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-self:flex-start;width:90%;max-width:90%;flex:none}
body[data-view=detail] .chat-shots .shot{height:96px;min-height:96px;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
body[data-view=detail] .chat-shots .shot img{display:block;width:100%;height:100%;object-fit:cover}
body[data-view=detail] .chat-shots .shot>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.office-tag:not([aria-pressed=true]){max-width:min(150px,calc(50% - 9px));min-height:44px;padding:6px 10px;gap:3px;border:1px solid var(--edge);border-radius:12px;background:var(--panel);font:400 11px/1.3 var(--mono)}
.office-tag:not([aria-pressed=true]) .tag-head{gap:4px}
.office-tag:not([aria-pressed=true]) .tag-head::before{display:none}
.office-tag:not([aria-pressed=true]) .tag-title{font:600 12px/1.3 var(--font)}
.office-tag:not([aria-pressed=true]) .tag-id{font:400 11px/1.3 var(--mono)}
.office-tag:not([aria-pressed=true]) .tag-time{margin-left:0;padding-left:0}
.office-tag:not([aria-pressed=true]) .tag-time::before{content:'· ';color:var(--muted)}

.office-tag[aria-pressed=true] .tag-preview-open{display:block;justify-self:end;font:600 11px/1.4 var(--font);color:var(--ink)}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=detail]) .shell{padding-bottom:0}
.office-focus-controls{position:absolute;z-index:4;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;padding:4px;border:1px solid var(--edge);border-radius:16px;background:var(--panel)}
.office-focus-controls[hidden]{display:none}
.office-focus-controls button{display:grid;place-items:center;min-width:52px;min-height:52px;width:52px;height:52px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink);touch-action:manipulation}
.office-focus-controls button:enabled:active{background:var(--control)}
.office-focus-controls button:disabled{opacity:.35}
.office-focus-controls button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.office-focus-controls svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.office-tag[aria-pressed=true]{height:calc(100% - 126px);max-height:none}
body[data-view=queue] #tasks .task-open{position:relative;min-height:64px;padding-right:58px;gap:5px}
body[data-view=queue] #tasks .task-line{font:400 11px/1.2 var(--mono)}
body[data-view=queue] #tasks .task-time{position:absolute;display:block;right:14px;top:50%;margin:0;transform:translateY(-50%);font:500 11px/1.3 var(--mono);color:var(--muted)}
body[data-view=queue] #tasks [data-status=running] .task-time{color:var(--live)}
body[data-view=queue] #tasks .review-card .task-time{color:var(--review)}
body[data-view=queue] #tasks .task-status:is([data-status=running],[data-status=review],[data-status=queued]){display:none}
body[data-view=queue] #tasks .task-provider{color:var(--muted)}
body[data-view=queue] #tasks .task-provider::before,body[data-view=queue] #tasks .task-model:not(:empty)::before{content:'· ';color:var(--muted)}
@media(orientation:landscape) and (max-height:560px){
  .office-tag[aria-pressed=true]{max-width:720px;padding:8px;gap:4px;grid-template-rows:auto minmax(0,1fr) auto}
  .office-tag[aria-pressed=true] .tag-head{display:none}
  .office-tag[aria-pressed=true] .tag-title{white-space:nowrap;font-size:12px}
  .office-tag[aria-pressed=true] .tag-preview{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;font-size:12px}
}
@media(orientation:portrait) and (max-height:680px){
  .office-tag[aria-pressed=true]{padding:10px;gap:6px;grid-template-rows:auto minmax(0,1fr) auto}
  .office-tag[aria-pressed=true] .tag-head{display:none}
  .office-tag[aria-pressed=true] .tag-title{font-size:12px;line-height:1.3}
  .office-tag[aria-pressed=true] .tag-preview{gap:8px;font-size:12px;line-height:1.4}
}
/* Both menus share one finite SVG selection motion, including direct taps. */
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top:has(#controller-view){row-gap:10px}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) .view-switch{position:relative;isolation:isolate}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) .view-switch button{position:relative;z-index:1}
.workspace-switch-fluid{display:block;position:absolute;z-index:0;pointer-events:none;left:0;top:4px;width:var(--active-width,0px);height:40px;max-width:none;overflow:visible;transform:translateX(var(--active-x,4px));fill:var(--control);stroke:none;transition:transform .42s cubic-bezier(.22,1.18,.36,1),width .32s cubic-bezier(.22,1,.36,1),opacity .2s ease}
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) .view-switch[data-motion-ready=true] button[aria-pressed=true]{background:transparent;box-shadow:none}
.view-switch.is-switching .switch-fluid-body{animation:switch-fluid-settle .42s cubic-bezier(.2,.8,.2,1)}
body[data-view=settings] .account-usage-line{line-height:1.3}
.office-tag[aria-pressed=true]{align-content:stretch;max-width:none}
.office-tag[aria-pressed=true] .tag-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.office-tag[aria-pressed=true] .tag-preview{grid-auto-rows:minmax(0,max-content);align-content:start;height:auto;align-self:stretch;overflow:hidden}
.office-tag[aria-pressed=true] .tag-message{overflow:hidden}
@media(orientation:landscape) and (max-height:560px){.office-tag[aria-pressed=true] .tag-preview{display:grid;grid-auto-rows:minmax(0,1fr)}body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=overview]) header.top:has(#controller-view){row-gap:0}}
@media(prefers-reduced-motion:reduce){.workspace-switch-fluid{transition:none}.view-switch.is-switching .switch-fluid-body{animation:none}}
body[data-view=settings] .account-usage{margin-bottom:0}
body[data-view=settings] .group .computer{height:64px;min-height:64px;padding:10px 10px 10px 14px}
body[data-view=settings] .computer .computer-mark::before{width:20px;height:20px;margin:0;border:0;border-radius:0;background:var(--body);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='9' rx='1.5'/%3E%3Cpath d='M1.5 16h17'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
body[data-view=settings] .computer .computer-mark::after{content:none}
body[data-view=settings] .computer[data-online=true] .computer-text small::before{box-shadow:none;background:var(--review)}
body[data-view=controller] .controller-talk:disabled{opacity:1}
body[data-view=controller] .controller-talk[data-phase=idle] .controller-spokes{display:none}
body[data-view=controller] .controller-talk:disabled .controller-mic{opacity:.7}
body .mobile-completions[data-many=true] .mobile-completion{padding:12px;border-radius:18px}
body .mobile-completions[data-many=true] .mobile-completion-label{display:block;font:500 10px/1.4 var(--mono)}
body .mobile-completions[data-many=true] .mobile-completion-title{margin:4px 0 0;font:600 14px/1.3 var(--font)}
body .mobile-completions[data-many=true] .mobile-completion-context{margin:0 0 4px}
/* Keep SVG corner radii in CSS pixels at every measured menu width. */
.workspace-switch-fluid{border-radius:10px;overflow:hidden}
.workspace-switch-fluid .switch-fluid-body{rx:0;ry:0}
#task-filters .switch-fluid{border-radius:11px;overflow:hidden}
#task-filters .switch-fluid-body{rx:0;ry:0}
body[data-view=queue] #tasks .review-card{padding-bottom:0;border:0;border-radius:0;background:transparent}
body[data-view=detail] #task-review-actions #review::before{content:none}
body[data-view=detail] #follow-options-toggle[aria-expanded=true] svg{transform:none}
body[data-view=detail] #follow-options-toggle[aria-expanded=true]{color:var(--review)}
body[data-view=detail] .task-view:has(#task-screen:not([hidden])) #detail-dock #follow-up{grid-template-columns:minmax(0,1fr) 48px;gap:6px;padding:0;background:transparent}
body[data-view=detail] .task-view:has(#task-screen:not([hidden])) #detail-dock #follow-up textarea{grid-column:1;grid-row:1;padding:11px 4px;background:transparent;border:0;border-radius:8px}
body[data-view=detail] .task-view:has(#task-screen:not([hidden])) #detail-dock #follow-up button[type=submit]{grid-column:2;grid-row:1}
body[data-view=detail] .task-view:has(#task-screen:not([hidden])) #detail-dock[data-expanded=true] #follow-up-voice{grid-column:2;grid-row:2}
body[data-view=detail] .task-screen{scrollbar-width:thin;scrollbar-color:var(--edge) transparent}
body[data-view=detail] #task-meta .task-status[data-status=review]{order:-1;margin-left:0}
.mobile-completion-review>svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.office-tag:not([aria-pressed=true]) .tag-head{flex-wrap:nowrap}
.office-tag:not([aria-pressed=true]) .tag-state{flex:0 1 auto;min-width:0;max-width:none}
.office-tag:not([aria-pressed=true]) .tag-time{flex:0 0 auto;white-space:nowrap}

/* Keep task cancellation inside the follow-up shell without submitting its draft. */
body[data-view=detail] .task-dock #stop{flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:12px;border:0;border-radius:12px;background:var(--switch-well);align-self:center}
body[data-view=detail] .task-dock:has(#follow-up[hidden]){justify-content:flex-end}

/* The desktop's five saved shortcuts occupy the former deployment row. */
#task-quick-actions{display:flex;flex:none;gap:4px;align-items:center}
#task-quick-actions button{flex:none;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:8px;background:var(--switch-well);color:var(--ink);font:500 12px/1 var(--font)}
#task-quick-actions button[data-empty=true]{color:var(--muted);background:color-mix(in srgb,var(--switch-well) 50%,transparent)}

/* Language controls use the shared light/dark palette and remain native keyboard controls. */
.voice-language-details{padding:12px}
.voice-language-details summary{cursor:pointer;font-weight:600;min-height:32px}
.voice-language-details p{font-size:13px;line-height:1.5;margin:8px 0 12px}
.voice-language-favorites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.voice-language-favorite{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px;border-radius:10px;background:var(--control);color:var(--ink);font-size:13px}
.voice-language-favorite input{width:18px;height:18px;flex:none;margin:0}
.voice-language-favorite span{min-width:0;overflow-wrap:anywhere}
.voice-language-current{color:var(--accent-text)}
.voice-mic *, .controller-talk *{touch-action:none}
.voice-cancel-target{position:fixed;z-index:65;display:flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:8px 16px;border:1px solid var(--edge);border-radius:28px;background:var(--panel);color:var(--muted);font:500 13px/1.3 var(--font);text-align:center;pointer-events:none;user-select:none;box-shadow:0 4px 16px rgb(0 0 0 / .1);transition:background-color .16s ease,border-color .16s ease,color .16s ease;animation:voice-cancel-appear .18s ease-out}
.voice-cancel-target::before{content:'';flex:none;width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 16V4m-5 5 5-5 5 5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.voice-cancel-target[data-armed=true]{border-color:color-mix(in srgb,var(--error) 45%,var(--edge));background:color-mix(in srgb,var(--error) 12%,var(--panel));color:var(--error)}
.voice-cancel-target[data-armed=true]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 5 10 10M15 5 5 15' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E")}
@keyframes voice-cancel-appear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.voice-cancel-target{animation:none;transition:none}}
body[data-view=controller] .controller-talk[data-cancel-armed=true]{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
body[data-view=controller] .controller-talk[data-cancel-armed=true] strong{color:var(--error)}

/* A full touch target around the task sheet resize grip. */
.compose-grabber{display:block;position:relative;width:64px;height:44px;min-height:44px;margin:-8px 0 -16px;padding:0;border:0;border-radius:0;background:transparent;cursor:ns-resize;touch-action:none}
.compose-grabber::after{content:"";position:absolute;width:40px;height:5px;left:12px;top:16px;border-radius:3px;background:var(--muted)}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form[data-resized=true] .prompt-box{flex:1 1 210px}
body[data-keyboard=true] #prompt-form .compose-grabber{display:none}
#voice-language{min-width:0;max-width:50%;text-overflow:ellipsis}

/* Draft photos share the toolbar's square touch targets. */
.mobile-images{flex-wrap:nowrap;gap:6px}
:is(#prompt-images,#follow-images) :is(.mobile-photo-add,.mobile-photo-tile,.mobile-photo-more){display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;padding:0;border:0;border-radius:12px;background:var(--control);color:var(--body);overflow:hidden;touch-action:pan-y;-webkit-touch-callout:none;user-select:none}
.mobile-images .mobile-photo-add{padding:11px}
.mobile-photo-add svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mobile-photo-tile img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mobile-images .mobile-photo-more{font:600 14px/1 var(--font)}
.mobile-photo-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:12px;border:1px solid var(--edge);border-radius:20px;background:var(--panel);color:var(--ink);overflow:auto}
.mobile-photo-dialog .heading{gap:8px;margin-bottom:12px}
.mobile-photo-dialog h2{flex:1;min-width:0;margin:0;font:600 16px/1.4 var(--font);overflow-wrap:anywhere}
.mobile-photo-dialog .heading button{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:var(--control);color:var(--ink);font-size:24px}
.mobile-photo-content>img{display:block;width:100%;max-height:65dvh;object-fit:contain;border-radius:12px}
.mobile-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px}
.mobile-photo-grid .mobile-photo-tile{width:100%;aspect-ratio:1;min-height:64px;padding:0;border:0;border-radius:12px;overflow:hidden;touch-action:pan-y;-webkit-touch-callout:none}
.mobile-photo-remove{width:100%;min-height:44px;padding:10px;border:0;border-radius:12px;background:var(--control);color:var(--error);font:600 15px/1.4 var(--font)}

/* The dock's context actions retain touch space, with the primary action at the right. */
body[data-view=office] #project-tabs .office-step{width:44px;flex-basis:44px;min-width:44px}
body[data-view=detail] #detail-dock #stop{order:0}
body[data-view=detail] #detail-dock #follow-options-toggle{order:1}
body[data-view=detail] #detail-dock #follow-up{order:2;grid-template-columns:minmax(0,1fr) 44px 48px}
body[data-view=detail] #detail-dock #follow-up button[type=submit]{grid-column:3;grid-row:1}
body[data-view=detail] #detail-dock #follow-up #follow-up-voice{display:flex;grid-column:2;grid-row:1;width:44px;height:44px;min-width:44px;min-height:44px;padding:12px;border-radius:12px;background:var(--switch-well)}
body[data-view=detail] #detail-dock #follow-up:has(#follow-up-voice[hidden]){grid-template-columns:minmax(0,1fr) 48px}
body[data-view=detail] #detail-dock #follow-up:has(#follow-up-voice[hidden]) button[type=submit]{grid-column:2}
body[data-view=detail] #detail-dock #detail-new-task{display:none;order:2;margin-left:auto;flex:none;width:48px;height:48px;min-height:48px;padding:14px;border:0;border-radius:14px;background:var(--ink);color:var(--bg)}
body[data-view=detail] #detail-dock:has(#follow-up[hidden]) #detail-new-task{display:flex}

/* A persistent, static perimeter glow while an agent needs an answer. No input capture. */
.operator-attention-glow{position:fixed;inset:0;z-index:10000;pointer-events:none;background:radial-gradient(ellipse at 0 0,#ed8b2940,transparent 36%),radial-gradient(ellipse at 100% 0,#ed8b2940,transparent 36%),linear-gradient(to bottom,#ed8b291c,transparent 90px,transparent calc(100% - 70px),#ed8b2929)}
.operator-attention-glow[hidden]{display:none}

/* A floating popup on the visible dock's top edge. It never takes a layout row. */
.mobile-input-alert{position:fixed;z-index:20;right:max(12px,calc((100vw - 600px)/2 + 12px));bottom:calc(16px + env(safe-area-inset-bottom));display:flex;max-width:calc(100% - 24px);margin:0;pointer-events:none}
.mobile-input-alert[data-placement=dock]{position:absolute;z-index:5;right:10px;bottom:calc(100% + 10px);max-width:calc(100% - 20px)}
#task-quick-actions:not([hidden])+#detail-dock>.mobile-input-alert{bottom:calc(100% + 16px + var(--mobile-dock-action))}
.mobile-input-alert button{pointer-events:auto;max-width:100%;min-height:40px;padding:0 14px 0 12px;gap:8px;border:1px solid color-mix(in srgb,var(--attention) 65%,var(--edge));border-radius:999px;background:color-mix(in srgb,var(--attention) 14%,var(--panel));color:var(--attention);box-shadow:0 8px 24px rgb(0 0 0/.28),0 0 18px #ed8b2933;font:600 13px/1.2 var(--font)}
.mobile-input-alert button::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--attention);box-shadow:0 0 0 3px color-mix(in srgb,var(--attention) 25%,transparent)}
.mobile-input-alert span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Let the last Queue row scroll clear of the popup. */
:root[data-operator-attention=true] body[data-view=queue] #tasks{padding-bottom:calc(var(--mobile-dock-height) + 70px + var(--bottom-gap))}
body:is([data-keyboard=true],[data-composing=true],[data-project-sheet=peek]) .mobile-input-alert,#project-tabs[data-expanded=true] .mobile-input-alert{display:none}
.task-status[data-status=attention]{color:var(--attention)}

/* The sheet grows out of the dock as one continuous surface at every height. The dock's
   top edge hands over to the sheet across the last strip (--sheet-seam 0 to 1), so a
   sheet sliding into the seam never leaves a dock without a top. */
body:is([data-project-sheet=peek],[data-project-sheet=expanded]):is([data-view=queue],[data-view=office]) #project-tabs,
body:is([data-project-sheet=peek],[data-project-sheet=expanded]):is([data-view=controller],[data-view=detail]) :is(#controller-form,#detail-dock){border-top-color:color-mix(in srgb,var(--edge) calc(100% - var(--sheet-seam,1) * 100%),transparent);border-top-left-radius:calc(var(--mobile-dock-height) * .273632 * (1 - var(--sheet-seam,1)));border-top-right-radius:calc(var(--mobile-dock-height) * .273632 * (1 - var(--sheet-seam,1)));box-shadow:none}
body[data-project-sheet=expanded] :is(#detail-dock,#controller-form){z-index:25}
body:is([data-view=queue],[data-view=office]) #project-drawer[data-stage=peek]{bottom:100%;border-bottom:0;box-shadow:none}
body:is([data-view=controller],[data-view=detail]) #project-drawer[data-stage=peek]{bottom:-1px;border-bottom:0;box-shadow:none}
.project-tabs[data-expanded=true] #project-drawer[data-stage=peek]{animation:none;clip-path:inset(0 0 var(--gesture-clip,0px) 0);transition:transform .28s cubic-bezier(.2,.8,.2,1),clip-path .28s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){.project-tabs[data-expanded=true] #project-drawer[data-stage=peek]{transition:none}}
/* Expanded is the same joined surface, only taller: it keeps the dock's edges and seam. */
body:is([data-view=queue],[data-view=office],[data-view=controller],[data-view=detail]) #project-tabs #project-drawer[data-stage=expanded]{position:absolute;top:auto;left:0;right:0;bottom:-1px;height:calc(var(--sheet-room,100dvh) - env(safe-area-inset-top) - 16px);max-height:none;padding:0 14px 14px;border:1px solid var(--edge);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:none;animation:none;transform:translateY(var(--gesture-y,0px));clip-path:inset(0 0 var(--gesture-clip,0px) 0);transition:none}
body:is([data-view=queue],[data-view=office]) #project-tabs #project-drawer[data-stage=expanded]{left:-1px;right:-1px;bottom:100%}
body[data-project-sheet=expanded] #project-tabs[data-expanded=true]::before{position:absolute;inset:auto;bottom:100%;left:calc((100% - 100vw)/2);width:100vw;height:var(--app-height,100dvh)}

/* Reserve the bottom action while the editable text yields to short viewports. */
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form{min-height:min(360px,calc(100% - 16px))}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form .prompt-box{min-height:94px}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #prompt{min-height:0;overflow-y:auto}
body:is([data-view=queue],[data-view=office],[data-view=controller]) #prompt-form #send-prompt{position:sticky;bottom:0;z-index:2;margin-top:auto}

/* Keep the transcription target mounted for voice and project-owned drafts. */
body[data-view=controller] #controller-form[hidden]{display:none}

/* A full-width touch surface gives the project grip breathing room. */
body #project-tabs #project-drawer[data-stage]{padding-top:0;background:var(--bg)}
#project-drawer[data-stage]::before{content:none}
.project-drawer-grip{display:flex;align-items:center;justify-content:center;flex:none;width:100%;height:44px;touch-action:pan-x}
.project-drawer-grip::before{content:'';width:36px;height:4px;border-radius:3px;background:var(--muted)}
body[data-project-sheet=peek]:is([data-view=queue],[data-view=office]) #project-tabs,
body[data-project-sheet=peek]:is([data-view=controller],[data-view=detail]) :is(#controller-form,#detail-dock){background:var(--bg)}

#controller{position:relative}
#controller-task-preview{position:absolute;z-index:2;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:14px;border:1px solid var(--line);border-radius:24px;background:var(--v2-voice);pointer-events:none;overflow:hidden;text-align:left}
#controller-task-preview[hidden]{display:none}
#controller-task-preview section{min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:var(--panel);overflow:hidden}
#controller-task-preview section>strong{flex:none;font:600 12px/1.3 var(--font);color:var(--muted)}
#controller-task-preview .controller-preview-message{min-height:0;overflow:hidden;font:400 14px/1.5 var(--font);color:var(--ink)}
#controller-task-preview .markdown-document :is(blockquote,.markdown-callout){border-left:0;border-radius:8px;background:var(--switch-well)}
#controller-task-preview .markdown-code-copy{display:none}
.controller-task-tiles .controller-tile{-webkit-touch-callout:none}

/* Dim the workspace above peek, leaving the joined dock outline unobscured. */
body[data-project-sheet=peek] #project-tabs[data-expanded=true]::before{position:absolute;inset:auto;bottom:100%;left:calc((100% - 100vw)/2);width:100vw;height:var(--app-height,100dvh)}
#project-drawer[data-stage=peek] .project-drawer-head{padding-top:0}
#project-drawer[data-stage=expanded] .project-drawer-grip{margin-bottom:-10px}

/* Reference dock: 402px high, grip at 39px, content at 96px, action at 88px.
   Normalize to 74px; retain native 44px targets and a dedicated grip lane. */
:root{--mobile-dock-height:74px;--mobile-dock-action:calc(var(--mobile-dock-height) * .676617);--mobile-dock-context:calc(var(--mobile-dock-height) * .639303);--mobile-dock-inset:calc(var(--mobile-dock-height) * .129353 - 1px);--mobile-dock-right:calc(var(--mobile-dock-height) * .124378 - 1px);--mobile-dock-top:calc(var(--mobile-dock-height) * .218905);--mobile-dock-bottom:calc(var(--mobile-dock-height) * .104478)}
body:is([data-view=queue],[data-view=office]) #project-tabs,
body[data-view=detail] #detail-dock,
body[data-view=controller] #controller-form{min-height:var(--mobile-dock-height);height:var(--mobile-dock-height);padding:var(--mobile-dock-top) var(--mobile-dock-right) var(--mobile-dock-bottom) var(--mobile-dock-inset);gap:calc(var(--mobile-dock-height) * .097015);border-radius:calc(var(--mobile-dock-height) * .273632);align-items:center}
body .mobile-dock>.dock-pull-tab{top:0;left:50%;transform:translateX(-50%);width:96px;height:44px}
body .mobile-dock>.dock-pull-tab>.dock-tab-shape{top:calc(var(--mobile-dock-height) * .097015 - 1px);left:50%;transform:translateX(-50%);width:calc(var(--mobile-dock-height) * .447761);height:calc(var(--mobile-dock-height) * .054726)}
body:is([data-view=queue],[data-view=office]) #queue-add,
body[data-view=controller] #controller-send,
body[data-view=detail] #detail-dock #follow-up button[type=submit],
body[data-view=detail] #detail-dock #detail-new-task{flex-basis:var(--mobile-dock-action);width:var(--mobile-dock-action);min-width:var(--mobile-dock-action);height:var(--mobile-dock-action);min-height:var(--mobile-dock-action);border-radius:calc(var(--mobile-dock-height) * .19403)}
body:is([data-view=queue],[data-view=office]) #task-filters{height:var(--mobile-dock-context);min-height:var(--mobile-dock-context);padding:calc((var(--mobile-dock-context) - 44px)/2) 3px}
body[data-view=office] #ticket-dock,
body[data-view=office] #tasks,
body[data-view=office] #tasks .task-open{height:var(--mobile-dock-context);min-height:var(--mobile-dock-context)}
body[data-view=office] .office-stage{margin-bottom:calc(var(--mobile-dock-height) + 18px + var(--bottom-gap))}
body[data-view=queue] #tasks{padding-bottom:calc(var(--mobile-dock-height) + 18px + var(--bottom-gap));scroll-padding-bottom:calc(var(--mobile-dock-height) + 18px + var(--bottom-gap))}
body[data-view=queue] #queue-empty{margin-bottom:calc(var(--mobile-dock-height) + 18px + var(--bottom-gap))}
body:is([data-view=queue],[data-view=office]) .project-drawer{bottom:var(--mobile-dock-height)}
body:is([data-view=queue],[data-view=office]) .mobile-completions[data-mode=toast]{--completion-dock-gap:calc(var(--mobile-dock-height) + 18px + var(--bottom-gap))}
/* Extra input rows can expand the dock; the keyboard has no project grip lane. */
body[data-view=detail] #detail-dock[data-expanded=true]{height:auto}
body[data-keyboard=true]:is([data-view=detail],[data-view=controller]) :is(#detail-dock,#controller-form){height:auto;min-height:64px;padding-top:7px;padding-bottom:7px}
body[data-view=detail] .task-dock#detail-dock #follow-up{grid-template-columns:minmax(0,1fr) 44px var(--mobile-dock-action)}
body[data-view=detail] .task-dock#detail-dock #follow-up:has(#follow-up-voice[hidden]),
body[data-view=detail] .task-view:has(#task-screen:not([hidden])) .task-dock#detail-dock #follow-up{grid-template-columns:minmax(0,1fr) var(--mobile-dock-action)}
body:is([data-view=queue],[data-view=office]) #queue-add svg,
body[data-view=detail] #detail-dock #detail-new-task svg{width:calc(var(--mobile-dock-action) * .592593);height:calc(var(--mobile-dock-action) * .592593)}

/* Controller keeps a New task opener visible for both listening routes. */
body .mobile-dock>#controller-add{position:relative;z-index:4;flex:none;margin-left:auto;width:var(--mobile-dock-action);min-width:var(--mobile-dock-action);height:var(--mobile-dock-action);min-height:var(--mobile-dock-action);padding:0;border:0;border-radius:calc(var(--mobile-dock-height) * .19403);background:var(--ink);color:var(--bg)}
#controller-add svg{width:calc(var(--mobile-dock-action) * .592593);height:calc(var(--mobile-dock-action) * .592593);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}

/* Choose execution settings directly beside + before opening the shared card. */
body[data-view=controller] #controller-form{display:grid;grid-template-columns:minmax(0,1fr) var(--mobile-dock-action);height:auto}
#controller-choices.composer-settings{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:5px;margin:0}
#controller-choices .model-row{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:5px}
#controller-choices .selection-stepper{height:var(--mobile-dock-context);border:0;border-radius:10px;background:var(--switch-well)}
#controller-choices .field-label{top:7px;left:8px;font-size:8px;letter-spacing:0}
#controller-choices .selection-stepper::after{right:5px;top:17px;width:8px;height:16px}
#controller-choices .selection-stepper select{height:var(--mobile-dock-context);min-height:44px;padding:20px 16px 5px 8px;font-size:12px}
#controller-choices .provider-stepper{padding:17px 16px 0 8px}
#controller-choices .provider-value{font-size:12px}
#controller-choices .provider-mark{display:none}
#controller-choices .selection-stepper:has(#controller-effort)::before{content:none}
#controller-choices .choice-reel{inset:16px 16px 0 8px;font-size:12px}
#controller-choices .selection-stepper:has(select:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.controller-follow-up{grid-column:1/-1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 44px var(--mobile-dock-action);align-items:center;gap:6px}
body[data-view=controller] .controller-follow-up #controller-transcript{display:block;width:100%;height:60px;min-height:44px;padding:10px;background:var(--switch-well)}
.controller-follow-up .controller-options-footer{display:contents}
.controller-follow-up #controller-clear{padding:0}

/* Task follow-ups own a resizable input and one stable action row. */
body[data-view=detail] .task-dock#detail-dock{display:block;height:auto;min-height:74px;padding:20px 10px 10px;overflow:visible}
body[data-view=detail] .task-dock#detail-dock>#detail-project-handle{top:0;display:block;visibility:visible;touch-action:none}
body[data-view=detail] .task-dock#detail-dock #follow-up{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;margin:0;padding:0;border:0;background:transparent}
body[data-view=detail] .task-dock#detail-dock #follow-up textarea,
body[data-view=detail] .task-dock#detail-dock #follow-up textarea:focus{flex:none;width:100%;height:min(var(--follow-up-height,44px),45dvh);min-height:44px;max-height:min(320px,45dvh);margin:0;padding:10px 12px;border:0;border-radius:12px;background:var(--control);color:var(--ink);font:400 16px/22px var(--font);resize:none;overflow-y:auto}
body[data-view=detail] .task-dock#detail-dock #follow-up textarea:focus:not(:focus-visible){outline:none}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-up-toolbar{display:flex;align-items:center;gap:8px;min-width:0;width:100%}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-up-toolbar button{flex:0 0 var(--mobile-dock-action);width:var(--mobile-dock-action);min-width:var(--mobile-dock-action);max-width:var(--mobile-dock-action);height:var(--mobile-dock-action);min-height:var(--mobile-dock-action);margin:0;padding:12px;align-self:center;border:1px solid var(--edge);border-radius:14px;background:var(--control);color:var(--ink)}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-up-toolbar #follow-options-toggle{order:0}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-up-toolbar #follow-up-model{display:block;order:1;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 10px/1.4 var(--font);color:var(--muted)}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-up-toolbar #stop{order:2;color:var(--error)}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-up-toolbar #follow-up-voice{order:3;display:flex}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-up-toolbar button[type=submit]{order:4;background:var(--ink);color:var(--bg);border-color:transparent}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-up-toolbar svg{width:22px;height:22px}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-images{display:none;min-width:0;padding:0;gap:6px;flex-wrap:wrap}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-images:has(.mobile-photo-tile,.mobile-photo-more){display:flex}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-images>.mobile-photo-add{display:none}
body[data-view=detail] .task-dock#detail-dock:has(#follow-up[hidden]){height:var(--mobile-dock-height);padding:var(--mobile-dock-top) var(--mobile-dock-right) var(--mobile-dock-bottom) var(--mobile-dock-inset)}
body[data-view=detail] .task-dock#detail-dock:has(#follow-up[hidden])>#detail-project-handle{display:none}
/* Speaker identity uses side, fill and the existing You/provider labels. */
body[data-view=detail] .chat-request .chat-bubble-stack{width:fit-content;max-width:85%;margin-left:auto;margin-right:0}
body[data-view=detail] .chat-result .chat-bubble-stack{width:fit-content;max-width:92%;margin-left:0;margin-right:auto}
body[data-view=detail] .chat-request .chat-message-body{--ink:var(--project-fill-fg,var(--brand-ink));color:var(--ink);background:var(--project-fill-bg,var(--accent));border:0;border-radius:14px 14px 4px 14px;padding:10px 12px}
body[data-view=detail] .chat-result .chat-message-body{--ink:inherit;--body:inherit;--muted:inherit;--line:inherit;--terminal:inherit;--panel:inherit;color:var(--body);background:var(--control);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:10px 12px}
@media(max-width:374px){body[data-view=detail] .task-dock#detail-dock #follow-up #follow-up-toolbar #follow-up-model{font-size:9px}}

body[data-view=detail] #task-quick-actions button{width:var(--mobile-dock-action);min-width:var(--mobile-dock-action);height:var(--mobile-dock-action);min-height:var(--mobile-dock-action);border-radius:14px}

/* Upward peek drags grow an opaque surface while its bottom stays at the dock. */
.project-tabs[data-expanded=true] #project-drawer.is-growing{height:var(--gesture-height);max-height:var(--gesture-height)}
/* Tasks fill the growing sheet, so no empty band opens above the dock. */
#project-drawer[data-stage=peek].is-growing #project-sheet-tasks{flex:1 1 auto}
#project-drawer[data-stage=peek].is-growing .project-sheet-task-list{flex:1;max-height:none}
body[data-view=detail] .task-dock#detail-dock #follow-up #follow-images :is(.mobile-photo-tile,.mobile-photo-more){flex-basis:var(--mobile-dock-action);width:var(--mobile-dock-action);min-width:var(--mobile-dock-action);max-width:var(--mobile-dock-action);height:var(--mobile-dock-action);min-height:var(--mobile-dock-action)}

/* Compact execution context for the shared New task sheet. */
#prompt-form .compose-checkout{order:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none;min-width:0;font-size:11px;color:var(--muted)}
.compose-checkout>span{display:flex;align-items:baseline;gap:6px;min-width:0}
.compose-checkout small{flex:none;font-size:10px}
.compose-checkout strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--ink)}

/* Task data comes from the computer over the peer link: three dots hold its place until it lands. */
.peer-loader{display:inline-flex;align-items:center;gap:10px;min-height:24px;font:500 13px/1.4 var(--font);color:var(--muted)}
.peer-loader-dots{display:inline-flex;gap:4px}
.peer-loader-dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.35}
@keyframes peer-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:no-preference){
  .peer-loader-dots i{animation:peer-dot 1.1s ease-in-out infinite}
  .peer-loader-dots i:nth-child(2){animation-delay:.15s}
  .peer-loader-dots i:nth-child(3){animation-delay:.3s}
}
.tag-message-loading{grid-template-rows:auto auto;align-content:start}
.chat-result[data-kind=loading] .chat-label{display:none}
/* Menu answers: the question an agent waits on, above the detail dock in every task view. */
.task-question{flex:none;display:grid;gap:8px;max-height:min(62dvh,540px);overflow-y:auto;overscroll-behavior:contain;margin:0 10px 8px;padding:10px 12px 12px;border:1px solid color-mix(in srgb,var(--attention) 50%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--attention) 9%,var(--panel));color:var(--body)}
.task-question[hidden]{display:none}
.task-question-head{display:flex;align-items:baseline;gap:10px;min-width:0}
.task-question-head strong{flex:none;color:var(--attention);font:600 12px/1.3 var(--font)}
.task-question-steps{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:11px/1.3 var(--mono)}
.task-question-text,.task-question-note{margin:0;color:var(--ink);font:14px/1.45 var(--font);white-space:pre-wrap;overflow-wrap:anywhere}
.task-question-text{max-height:min(26dvh,220px);overflow-y:auto;overscroll-behavior:contain}
.task-question-text:empty{display:none}
.task-question-note{color:var(--body)}
.task-question-options{display:grid;gap:6px}
.task-question-option{justify-content:flex-start;align-items:flex-start;gap:10px;width:100%;min-height:44px;padding:9px 10px;border:1px solid var(--edge);border-radius:10px;background:var(--control);color:var(--ink);text-align:left}
.task-question-number{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--panel);color:var(--muted);font:600 12px/1 var(--mono)}
.task-question-label{display:grid;gap:2px;min-width:0}
.task-question-label strong{font:500 14px/1.35 var(--font);overflow-wrap:anywhere}
.task-question-label small{color:var(--muted);font:12px/1.35 var(--font);white-space:pre-wrap;overflow-wrap:anywhere}
.task-question-option[aria-pressed=true]{border-color:color-mix(in srgb,var(--attention) 65%,var(--edge));background:color-mix(in srgb,var(--attention) 12%,var(--control))}
.task-question-option[aria-pressed=true] .task-question-number{background:var(--attention);color:var(--action-ink)}
.task-question-free{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.task-question-free input{min-height:40px;padding:7px 10px;border-radius:10px;background:var(--control)}
.task-question-send,.task-question-continue{min-height:40px;padding:0 14px;border:0;border-radius:10px;background:var(--attention);color:var(--action-ink);font:600 13px/1 var(--font)}
.task-question :is(button,input)[aria-disabled=true]{opacity:.55;cursor:default}
body:is([data-keyboard=true],[data-composing=true]) .task-question:not(:focus-within){display:none}
/* The open task's own question takes the place of the waiting pill until it is answered. */
#detail:has(#task-question:not([hidden])) .mobile-input-alert[data-placement=dock]{display:none}