/* What the cockpit alone owns. The system it is drawn from - the tokens, the type, the
   controls, the floating layer and the two dialogs - is ui/tokens.css, served at /__ui/. */
/* The cockpit is a fixed app shell: it fills the window and never scrolls as a whole. */
html, body { width:100%; height:100%; overflow:hidden }
/* Text, rows and cards are not bezelled controls: they get no button chrome of their own. */
.rail-row, .rail-add, .rail-filter, .lane-head, .row-menu, #breadcrumb button, .menu button, .menu a,
.model-option, .trait-option, .trait-toggle, .runtime-menu button, .interaction-menu button,
.composer-menu-button, .panel-tabs button, #filesModes button, #viewButtons button,
#fileTableHeader button, .teaching-cards button, .project-card, .new-project-card, .thread-card,
.file-row, #sortWrap { background:transparent; box-shadow:none }

#topbar { position:relative; z-index:20; height:var(--h-6); display:flex; align-items:center; justify-content:space-between; padding:0 var(--s-7) 0 var(--s-7); border-bottom:1px solid var(--line-2); background:var(--material); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--specular) }
.brand-button { height:var(--h-4); padding:0 var(--s-2); border:0; background:transparent }
.brand-button:hover:not(:disabled) { border:0; background:transparent }
.brand-rule { width:1px; height:var(--i-2); background:var(--line-2) }
.bot-name { color:var(--ink); font-size:var(--t-14); font-weight:600; letter-spacing:-.01em }
.bot-name:empty, .brand-button:has(.bot-name:empty) .brand-rule { display:none }
.chevron { width:var(--i-1); height:var(--i-1); color:var(--faint) }
.top-actions { display:flex; align-items:center; gap:var(--s-3) }
.top-toggle { height:var(--h-4); padding:0 var(--s-6); color:var(--muted) }
.top-toggle[aria-pressed="true"] { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent) }
.state-dot { width:var(--dot); height:var(--dot); border-radius:50%; background:var(--faint) }
.state-dot.live, .files-dot { background:var(--accent) }
.state-dot.asleep { background:var(--warn) }
.state-dot.starting { background:var(--accent); animation:pulse 1.5s ease-in-out infinite }
.badge { min-width:var(--i-3); height:var(--i-3); display:grid; place-items:center; padding:0 var(--s-2); border-radius:var(--r-pill); background:var(--accent); color:var(--accent-ink); font:600 var(--t-11) var(--sans) }


#workspace { position:relative; height:calc(100vh - var(--h-6)); display:flex; min-width:0; min-height:0 }
#chatPane:has(+ #grip:not([hidden])) #conversation { margin-right:0 }
#chatPane { position:relative; min-width:320px; min-height:0; flex:1; container-type:inline-size }
#chatApp { position:relative; width:100%; height:100%; min-width:0; min-height:0; display:flex; gap:var(--s-4); padding:0 0 0 0; overflow:hidden }
/* Every panel that holds content is a raised surface: solid to read from, rounded, with the
   specular top edge and the shadow that separates it from the rail behind. */

/* ---- left rail: projects, then that project's threads by lifecycle ---- */
#chatSidebar { width:var(--w-rail); flex:0 0 var(--w-rail); display:flex; flex-direction:column; overflow:hidden; background:var(--material-rail); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); transition:width 180ms var(--ease),flex-basis 180ms var(--ease) }
.sidebar-header { flex:0 0 auto; display:flex; align-items:center; gap:var(--s-3); padding:var(--s-4) var(--s-5) var(--s-3) }
.sidebar-search { min-width:0; height:var(--h-3); flex:1; display:flex; align-items:center; gap:var(--s-4); padding:0 var(--s-6); border:1px solid var(--edge); border-radius:var(--r-pill); background:var(--field); box-shadow:var(--field-edge); color:var(--faint) }
.sidebar-search svg { width:var(--i-2); height:var(--i-2); flex:0 0 var(--i-2) }
.sidebar-search input { min-width:0; flex:1; padding:0; border:0; outline:0; background:transparent; color:var(--body); font-size:var(--t-13) }
.sidebar-search input::placeholder { color:var(--faint) }
#sidebarScroll { min-height:0; flex:1; overflow:auto; padding:var(--s-1) var(--s-3) var(--s-5) }
.rail-heading { min-height:var(--h-1); display:flex; align-items:center; gap:var(--s-3); padding:0 var(--s-1) var(--s-2) }
.rail-heading>span { min-width:0; flex:1; overflow:hidden; color:var(--faint); font:600 var(--t-11) var(--sans); text-transform:uppercase; letter-spacing:.16em; text-overflow:ellipsis; white-space:nowrap }
.rail-filter { min-width:0; min-height:var(--h-2); flex:0 1 auto; justify-content:flex-start; gap:var(--s-2); padding:var(--s-1) var(--s-4); border-color:transparent; color:var(--muted); font-size:var(--t-12); font-weight:500 }
.rail-filter svg { width:var(--i-1); height:var(--i-1); color:var(--faint) }
.rail-heading>.spacer { flex:1 }
.rail-filter:hover:not(:disabled), .rail-filter[aria-expanded="true"] { border-color:transparent; background:var(--sheen); color:var(--muted) }
.rail-filter[data-filtered="true"] { color:var(--accent) }
.rail-add { min-height:var(--h-2); flex:0 0 auto; gap:var(--s-2); padding:var(--s-1) var(--s-4); border-color:transparent; color:var(--muted); font-size:var(--t-12) }
.rail-add svg { width:var(--i-1); height:var(--i-1) }
.rail-add:hover:not(:disabled) { border-color:transparent; background:var(--raised); color:var(--ink) }
.rail-empty { margin:var(--s-5) var(--s-4) var(--s-2); color:var(--faint); font-size:var(--t-13) }

.rail-row { position:relative; width:100%; min-height:var(--h-3); display:grid; grid-template-columns:var(--i-3) minmax(0,1fr) auto; align-items:center; gap:var(--s-4); margin-bottom:1px; padding:var(--s-2) var(--s-4); border-color:transparent; border-radius:var(--r-input); background:transparent; color:var(--body); font-size:var(--t-14); font-weight:400; text-align:left }
.rail-row:hover:not(:disabled) { border-color:transparent; color:var(--ink) }
.rail-row:hover:not(:disabled) { background:var(--sheen) }
.rail-row[aria-current="true"] { background:var(--raise); color:var(--ink); font-weight:500; box-shadow:var(--specular) }
.rail-row svg { width:var(--i-2); height:var(--i-2); color:var(--faint) }
.rail-row[aria-current="true"] svg { color:var(--muted) }
.rail-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rail-trail { display:flex; align-items:center; gap:var(--s-3) }
.rail-count { color:var(--faint); font:var(--t-12) var(--mono) }

/* One tree, not two lists: a project is a folder you open, and its threads live inside it. */
.project-block+.project-block { margin-top:1px }
.project-row { position:relative; display:flex; align-items:center; gap:0 }
.project-row .disclose { width:var(--h-1); height:var(--h-2); flex:0 0 var(--h-1); margin-right:1px; border-radius:var(--r-small); color:var(--faint) }
.project-row .disclose svg { width:var(--i-1); height:var(--i-1); transition:transform 140ms var(--ease) }
.project-row .disclose[aria-expanded="false"] svg { transform:rotate(-90deg) }
.project-row .rail-row { flex:1; min-width:0 }
.row-add { position:absolute; right:34px; width:var(--h-2); height:var(--h-2); flex-basis:var(--h-2); opacity:0 }
.project-row:hover .row-add, .row-add:focus-visible { opacity:1 }
.project-threads { margin:1px 0 var(--s-2) var(--s-4); padding-left:var(--s-4); border-left:1px solid var(--line) }
.project-threads .lane-head { margin:var(--s-2) 0 1px }
.project-threads .rail-empty { margin:var(--s-3) 0 var(--s-2) var(--s-4) }
.row-menu { position:absolute; right:6px; width:var(--h-2); height:var(--h-2); flex-basis:var(--h-2); opacity:0 }
.project-row:hover .row-menu, .thread-row:hover .row-menu, .row-menu:focus-visible, .row-menu[aria-expanded="true"] { opacity:1 }
.project-row:hover .rail-trail, .thread-row:hover .rail-trail { opacity:0 }
.project-dot { width:var(--dot); height:var(--dot); flex:0 0 var(--dot); border-radius:50%; background:transparent }
.project-dot.working { background:var(--accent); animation:pulse 1.4s ease-in-out infinite }
.project-dot.needs-you { background:var(--warn) }
.project-dot.error { background:var(--danger) }

.lane { margin-bottom:var(--s-1) }
.lane-head { width:100%; min-height:var(--h-1); justify-content:flex-start; gap:var(--s-3); margin:var(--s-2) 0 1px; padding:var(--s-1) var(--s-3); border-color:transparent; background:transparent; color:var(--faint); font-size:var(--t-12); font-weight:500 }
.lane-head:hover:not(:disabled) { border-color:transparent; background:transparent; color:var(--muted) }
.lane-head svg { width:var(--i-1); height:var(--i-1); transition:transform 150ms var(--ease) }
.lane-head[aria-expanded="false"] svg { transform:rotate(-90deg) }
.lane-head .lane-count { margin-left:auto; color:var(--faint); font:var(--t-12) var(--mono) }
.lane[data-lane="needs-you"] .lane-head { color:var(--warn) }
.lane[data-lane="problem"] .lane-head { color:var(--danger) }

.thread-row { position:relative; display:flex; align-items:center }
.thread-row .rail-row { flex:1; grid-template-columns:var(--s-4) minmax(0,1fr) auto }
.thread-dot { width:var(--dot); height:var(--dot); justify-self:center; border-radius:50%; background:transparent }
.thread-dot.working { background:var(--accent); animation:pulse 1.3s ease-in-out infinite }
.thread-dot.needs-you { background:var(--warn) }
.thread-dot.error { background:var(--danger) }
.thread-dot.pinned { background:var(--muted) }
.thread-when { color:var(--faint); font:var(--t-12) var(--mono) }
#sidebarFooter { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-3) var(--s-6); border-top:1px solid var(--line); color:var(--faint); font-size:var(--t-12) }
body.sidebar-collapsed #chatSidebar { display:none }
body.sidebar-collapsed #conversation { margin-left:var(--s-4) }

/* ---- centre: breadcrumb over one of three surfaces ---- */
#conversation { position:relative; min-width:0; min-height:0; flex:1; display:flex; flex-direction:column; overflow:hidden; margin:0 var(--s-4) var(--s-4) 0; border:1px solid var(--line); border-radius:var(--r-window); background:var(--panel); box-shadow:var(--lift-2),var(--specular-strong) }
#deskHeader { position:relative; z-index:2; min-height:var(--h-6); flex:0 0 auto; display:flex; align-items:center; gap:var(--s-4); padding:var(--s-3) var(--s-7); border-bottom:1px solid var(--line); background:var(--sheen) }
#breadcrumb { min-width:0; flex:1; display:flex; align-items:center; gap:var(--s-2); overflow:hidden }
/* Block, not the kit's centred flex: text-overflow needs a block container, and a centred flex item
   is cut at BOTH ends instead - which is what a squashed crumb used to read like. */
#breadcrumb button { min-height:var(--h-2); max-width:var(--w-label); display:block; padding:var(--s-1) var(--s-4); overflow:hidden; border-color:transparent; color:var(--muted); font-size:var(--t-14); font-weight:400; line-height:var(--h-2); text-align:left; text-overflow:ellipsis; white-space:nowrap }
#breadcrumb button:hover:not(:disabled) { border-color:transparent; background:var(--raised); color:var(--ink) }
#breadcrumb strong { min-width:0; padding:var(--s-1) var(--s-2); overflow:hidden; color:var(--ink); font-size:var(--t-15); font-weight:600; letter-spacing:-.014em; text-overflow:ellipsis; white-space:nowrap }
.crumb-sep { flex:0 0 auto; color:var(--faint) }
#threadStatus { flex:0 0 auto; padding:var(--s-2) var(--s-5); border-radius:var(--r-pill); background:var(--raised); color:var(--muted); font-size:var(--t-12); white-space:nowrap }
#threadStatus.working { background:var(--accent-soft); color:var(--accent) }
#threadStatus.needs-you { background:var(--warn-soft); color:var(--warn) }
#threadStatus.error { background:var(--danger-soft); color:var(--danger) }
#mobileSidebar { display:none }

#chatNotice { flex:0 0 auto; display:flex; align-items:center; gap:var(--s-6); padding:var(--s-6) var(--s-8); border-bottom:1px solid var(--warn-line); background:var(--warn-soft) }
#chatNotice>div { min-width:0; flex:1 }
#chatNotice strong { color:var(--ink); font-size:var(--t-14); font-weight:600 }
#chatNotice p { margin:var(--s-1) 0 0; color:var(--muted); font-size:var(--t-13) }
#chatNoticeAction { min-height:var(--h-3); flex:0 0 auto }
#chatNoticeClose { flex:0 0 var(--h-3); width:var(--h-3); height:var(--h-3) }

/* ---- the workspace surfaces (all projects, one project) ---- */
#projectsView, #projectHome { min-height:0; flex:1; overflow:auto }
.surface { width:min(1040px,100%); margin:0 auto; padding:var(--s-8) max(20px,3%) var(--s-10) }
.surface h1 { font-size:clamp(24px,2.5vw,31px); letter-spacing:-.032em }
.surface .lede { max-width:660px; margin:var(--s-3) 0 0; color:var(--muted); font-size:var(--t-14); line-height:1.55 }
.surface-meta { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-3) var(--s-6); margin:var(--s-6) 0 0; color:var(--muted); font-size:var(--t-14) }
.surface-meta .path { padding:var(--s-1) var(--s-5); border:1px solid var(--line); border-radius:var(--r-pill); color:var(--body); font:var(--t-12) var(--mono) }
.action-row { display:flex; flex-wrap:wrap; gap:var(--s-4); margin:var(--s-7) 0 0 }
.surface-note { display:flex; align-items:center; gap:var(--s-4); margin:var(--s-7) 0 0; padding:var(--s-5) var(--s-6); border:1px solid var(--accent-line); border-radius:var(--r-card); background:var(--accent-soft); color:var(--ink); font-size:var(--t-13) }
.surface-note svg { width:var(--i-2); height:var(--i-2); flex:0 0 var(--i-2); color:var(--accent) }
.section-rule { display:flex; align-items:center; gap:var(--s-5); margin:var(--s-8) 0 var(--s-5) }
.section-rule>span { color:var(--faint); font:600 var(--t-11) var(--sans); text-transform:uppercase; letter-spacing:.16em }
.section-rule>i { flex:1; height:1px; background:var(--line) }
.section-rule>b { color:var(--faint); font:var(--t-12) var(--mono); font-weight:400 }

.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--s-5); margin-top:var(--s-7) }
.project-card { position:relative; min-height:var(--h-card); display:flex; flex-direction:column; align-items:stretch; gap:var(--s-3); padding:var(--s-6) var(--s-7) var(--s-6); border:1px solid var(--edge); border-radius:var(--r-card); background:var(--card-face),var(--panel); box-shadow:var(--lift-1),var(--specular); text-align:left }
.project-card:hover:not(:disabled) { background:var(--raise-soft),var(--panel); box-shadow:var(--lift-2),var(--specular-strong) }
.project-card>header { display:flex; align-items:center; gap:var(--s-4) }
.project-card>header svg { width:var(--i-2); height:var(--i-2); flex:0 0 var(--i-2); color:var(--faint) }
.project-card>header strong { min-width:0; overflow:hidden; color:var(--ink); font-size:var(--t-18); font-weight:600; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap }
.project-card .path { align-self:flex-start; max-width:100%; padding:var(--s-1) var(--s-4); overflow:hidden; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted); font:var(--t-12) var(--mono); text-overflow:ellipsis; white-space:nowrap }
.card-facts { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-1) }
.fact { padding:var(--s-1) var(--s-5); border-radius:var(--r-pill); background:var(--raised); color:var(--muted); font-size:var(--t-12) }
.project-card:hover .fact { background:var(--hover) }
.fact.working { background:var(--accent-soft); color:var(--accent) }
.fact.needs-you { background:var(--warn-soft); color:var(--warn) }
.fact.error { background:var(--danger-soft); color:var(--danger) }
.card-when { margin-top:auto; padding-top:var(--s-4); color:var(--faint); font-size:var(--t-12) }
.new-project-card { min-height:var(--h-card); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--s-4); padding:var(--s-7); border:1px dashed var(--line-2); border-radius:var(--r-card); background:transparent; color:var(--muted); text-align:left }
.new-project-card:hover:not(:disabled) { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent) }
.new-project-card svg { width:var(--i-4); height:var(--i-4) }
.new-project-card strong { font-size:var(--t-15); font-weight:600 }
.new-project-card small { color:var(--faint); font-size:var(--t-12); line-height:1.45 }

.thread-card { position:relative; width:100%; min-height:54px; display:grid; grid-template-columns:var(--dot-lg) minmax(0,1fr) auto; align-items:center; gap:var(--s-6); padding:var(--s-5) var(--s-7); border:1px solid var(--card-edge); border-radius:var(--r-card); background:var(--card-face),var(--panel); box-shadow:var(--lift-1),var(--specular); text-align:left }
.thread-card+.thread-card { margin-top:var(--s-3) }
.thread-card:hover:not(:disabled) { background:var(--raise-soft),var(--panel); box-shadow:var(--lift-2),var(--specular-strong) }
.thread-card .thread-dot { width:var(--dot-lg); height:var(--dot-lg) }
.thread-card-text { min-width:0; display:flex; flex-direction:column; gap:var(--s-1) }
.thread-card-text strong { overflow:hidden; color:var(--ink); font-size:var(--t-15); font-weight:500; text-overflow:ellipsis; white-space:nowrap }
.thread-card-text span { overflow:hidden; color:var(--muted); font-size:var(--t-13); text-overflow:ellipsis; white-space:nowrap }
.thread-card-when { color:var(--faint); font:var(--t-12) var(--mono) }
.empty-card { margin-top:var(--s-7); padding:var(--s-10) var(--s-9); border:1px dashed var(--line-2); border-radius:var(--r-card); text-align:center }
.empty-card h2 { margin-bottom:var(--s-4) }
.empty-card p { max-width:420px; margin:0 auto var(--s-8); color:var(--muted); font-size:var(--t-15); line-height:1.6 }

/* ---- the thread ---- */
#timeline { min-height:0; flex:1; overflow:auto; padding:var(--s-7) max(18px,calc((100% - 940px)/2)) calc(var(--composer-height,150px) + 18px); scroll-behavior:smooth }
#chatLoading { min-height:100%; display:flex; align-items:center; justify-content:center; gap:var(--s-5); color:var(--muted); font-size:var(--t-14) }
.loading-dot { width:var(--dot); height:var(--dot); border-radius:50%; background:var(--accent); animation:pulse 1.15s ease-in-out infinite }
#onboarding { max-width:820px; margin:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center }
.onboarding-mark { color:var(--accent); font:600 var(--t-16) var(--mono); letter-spacing:-.06em }
#onboarding h2 { margin:var(--s-6) 0 var(--s-8); font-size:clamp(28px,3.4vw,40px); letter-spacing:-.036em }
.teaching-cards { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5) }
.teaching-cards button { min-height:104px; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:var(--s-7); border-color:var(--card-edge); border-radius:var(--r-card); background:var(--card-face),var(--panel); box-shadow:var(--lift-1),var(--specular); text-align:left }
.teaching-cards button:hover { background:var(--raise-soft),var(--panel); box-shadow:var(--lift-2),var(--specular-strong) }
.teaching-cards svg { width:var(--i-4); height:var(--i-4); margin-bottom:var(--s-6); color:var(--muted) }
.teaching-cards strong { color:var(--ink); font-size:var(--t-14); font-weight:500; line-height:1.4 }
.teaching-cards small { margin-top:var(--s-3); color:var(--muted); font-size:var(--t-12); line-height:1.45 }
#onboarding>p { max-width:var(--w-read); margin:var(--s-8) var(--s-8) 0; color:var(--faint); font-size:var(--t-13); line-height:1.6 }
#messages { max-width:940px; margin:0 auto; display:flex; flex-direction:column; gap:var(--s-7) }
.chat-message { position:relative; min-width:0; display:flex; flex-direction:column; gap:var(--s-2) }
/* Out of flow on purpose: hidden it costs nothing, and on hover it sits in the gap below. */
/* Out of flow, and sized to sit inside the gap between messages rather than lean on the next one.
   The action leads and the time trails it, both at the message's own edge, so the strip plainly
   belongs to the message above it rather than floating between two of them. */
.message-meta { position:absolute; z-index:2; top:calc(100% - 4px); right:0; left:0; display:flex; align-items:center; gap:var(--s-3); height:var(--h-1); color:var(--faint); font:var(--t-12) var(--sans); opacity:0; pointer-events:none; transition:opacity 120ms }
.message-meta time { flex:0 0 auto }
.message-meta .copy-button { min-height:var(--h-1); padding:0 var(--s-4); font-size:var(--t-12) }
.chat-message:hover .message-meta, .message-meta:focus-within, .chat-message.streaming .message-meta { opacity:1; pointer-events:auto }
/* Your own words sit on the right, so their strip ends where the bubble ends. */
.chat-message.user .message-meta { justify-content:flex-end }
.chat-message.user { max-width:min(700px,86%); align-self:flex-end; padding:var(--s-5) var(--s-7); border:1px solid var(--line); border-radius:var(--r-bubble) var(--r-bubble) var(--r-small) var(--r-bubble); background:var(--raised) }
.chat-message.user .message-copy { font-size:var(--t-15); line-height:1.55; color:var(--ink) }
.chat-message.assistant { width:100% }
.chat-message.system { padding:var(--s-6) var(--s-7); border-left:2px solid var(--warn); background:var(--warn-soft) }
.message-copy { color:var(--body); font:var(--t-16)/1.68 var(--sans); letter-spacing:-.003em; overflow-wrap:anywhere }
.message-copy p { margin:0 0 var(--s-6) }
.message-copy p:last-child { margin-bottom:0 }
.message-copy h2 { margin:var(--s-8) 0 var(--s-4); font-size:var(--t-20); letter-spacing:-.018em }
.message-copy h3 { margin:var(--s-8) 0 var(--s-4); font-size:var(--t-18); letter-spacing:-.012em }
.message-copy h4, .message-copy h5, .message-copy h6 { margin:var(--s-7) 0 var(--s-3); font-size:var(--t-16) }
.message-copy>*:first-child { margin-top:0 }
.message-copy>*:last-child { margin-bottom:0 }
.message-copy a { color:var(--accent); text-underline-offset:3px }
.message-copy code { padding:var(--s-1) var(--s-3); border:1px solid var(--line); border-radius:var(--r-small); background:var(--panel); color:var(--ink); font:var(--t-13) var(--mono) }
.message-code { margin:var(--s-6) 0; padding:var(--s-6) var(--s-7); overflow:auto; border:1px solid var(--line); border-radius:var(--r-card); background:var(--sunk); color:var(--body); white-space:pre; font:var(--t-13)/1.6 var(--mono) }
.streaming-label { color:var(--accent); animation:pulse 1.3s ease-in-out infinite }
.typing-dots { color:var(--accent); letter-spacing:.2em; animation:pulse 1s ease-in-out infinite }
.message-attachments { display:flex; flex-wrap:wrap; gap:var(--s-3) }
.attachment-chip { max-width:var(--w-label); padding:var(--s-2) var(--s-5); overflow:hidden; border:1px solid var(--line); border-radius:var(--r-pill); color:var(--muted); font-size:var(--t-12); text-overflow:ellipsis; white-space:nowrap }

/* What the bot did on the way is a footnote, not a panel. It sits in the prose with no border and
   no ground of its own, dimmer than the answer, and opens into its steps when you want them. */
.work-card { width:100%; margin:0; border:0; border-radius:0; background:transparent }
.work-card>summary { min-height:var(--h-1); display:flex; align-items:center; gap:var(--s-4); padding:1px 0; color:var(--faint); font-size:var(--t-13); cursor:pointer; list-style:none; transition:color 120ms }
.work-card>summary:hover, .work-card[open]>summary { color:var(--muted) }
.work-card>summary::-webkit-details-marker { display:none }
.work-icon { width:var(--i-2); height:var(--i-2); flex:0 0 var(--i-2); color:var(--faint) }
.work-card.error>summary, .work-card.error .work-icon { color:var(--danger) }
.work-spinner { width:var(--i-2); height:var(--i-2); flex:0 0 var(--i-2); border:2px solid var(--line-2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite }
/* The gap between pressing send and the engine answering belongs to us, not to nothing. */
.pending-turn { display:flex; align-items:center; gap:var(--s-4); padding:var(--s-2) 0; color:var(--faint); font-size:var(--t-13) }
.work-said { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.work-count { flex:0 0 auto; margin-left:auto; color:var(--faint); font:var(--t-12) var(--mono); opacity:0; transition:opacity 120ms }
.work-card>summary:hover .work-count, .work-card[open] .work-count { opacity:1 }
/* Long work is a list you can read, not a flood: it keeps its own scroll, under a guide line. */
.work-list { max-height:250px; margin:1px 0 var(--s-2); padding:var(--s-1) 0 var(--s-1) var(--s-8); overflow:auto; border-left:1px solid var(--line); list-style:none }
.work-list li { display:grid; grid-template-columns:var(--s-4) minmax(0,1fr); gap:var(--s-5); align-items:baseline; padding:var(--s-2) 0; font-size:var(--t-13) }
.step-mark { width:var(--dot); height:var(--dot); align-self:center; justify-self:center; border-radius:50%; background:var(--line-2) }
.step-mark.running { background:var(--accent); animation:pulse 1.3s ease-in-out infinite }
/* Did not succeed is not the same as went wrong: a hollow ring says "this one came back empty"
   without claiming the turn failed. */
.step-mark.failed { background:transparent; box-shadow:inset 0 0 0 1.5px var(--faint) }
.step-said { min-width:0; display:flex; align-items:baseline; gap:var(--s-5) }
.step-said strong { flex:0 0 auto; color:var(--body); font-size:var(--t-13); font-weight:500 }
.step-detail { min-width:0; overflow:hidden; color:var(--faint); font:var(--t-12) var(--mono); text-overflow:ellipsis; white-space:nowrap }
.work-list li.error strong { color:var(--danger) }

.request-card, .conversation-error { width:100%; display:flex; flex-direction:column; gap:var(--s-5); padding:var(--s-7) var(--s-7); border:1px solid var(--warn-line); border-radius:var(--r-card); background:var(--warn-soft) }
.request-card>strong, .conversation-error>strong { color:var(--ink); font-size:var(--t-15); font-weight:600 }
.request-card>p, .conversation-error>p { margin:0; color:var(--muted); white-space:pre-wrap }
.request-actions { display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-2) }
.question-field { min-width:0; margin:var(--s-2) 0; padding:var(--s-6) var(--s-6); border:1px solid var(--line); border-radius:var(--r-input) }
.question-field legend { padding:0 var(--s-2); color:var(--body); font-size:var(--t-13) }
.question-option { display:flex; align-items:flex-start; gap:var(--s-4); margin:var(--s-4) 0; color:var(--muted) }
.question-option input { accent-color:var(--accent) }
.question-field textarea { width:100%; resize:vertical; padding:var(--s-4) var(--s-5); border:1px solid var(--line-2); border-radius:var(--r-input); background:var(--panel); color:var(--body) }
.conversation-error { border-color:var(--danger-line); background:var(--danger-soft) }

#composer { position:absolute; z-index:3; right:max(18px,calc((100% - 940px)/2)); bottom:16px; left:max(18px,calc((100% - 940px)/2)); display:flex; flex-direction:column; overflow:visible; border:1px solid var(--line-2); border-radius:20px; background:var(--material-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--lift-3),var(--specular-strong) }
#composer:focus-within { border-color:var(--accent-line) }
#prompt { width:100%; min-height:var(--h-6); max-height:220px; padding:var(--s-6) var(--s-7) var(--s-3); resize:none; overflow:auto; border:0; outline:0; background:transparent; color:var(--ink); font:var(--t-16)/1.5 var(--sans) }
#prompt::placeholder { color:var(--faint) }
#composer>.composer-controls { min-height:var(--h-5); display:flex; align-items:center; gap:var(--s-1); padding:var(--s-1) var(--s-4) var(--s-3) }
/* Attach and send are pinned to the two ends; the pickers between them take what is left. */
.composer-menus { min-width:0; flex:1; display:flex; align-items:center; justify-content:flex-end; gap:var(--s-1) }
.composer-menu-button { min-width:0; max-width:var(--w-label); height:var(--h-3); gap:var(--s-3); padding:var(--s-2) var(--s-5); overflow:hidden; border-color:transparent; background:transparent; color:var(--muted); font-size:var(--t-12); white-space:nowrap }
.composer-menu-button>span { overflow:hidden; text-overflow:ellipsis }
.composer-menu-button svg { width:var(--i-1); height:var(--i-1); flex:0 0 var(--i-1) }
.composer-menu-button:hover:not(:disabled), .composer-menu-button[aria-expanded="true"] { border-color:var(--line-2); background:var(--raised); color:var(--ink) }
.model-choice { color:var(--body) }
.send { width:var(--h-4); height:var(--h-4); flex:0 0 var(--h-4); padding:0; border-radius:50%; border-color:transparent; background:var(--accent-fill); color:var(--accent-ink) }
.send:hover:not(:disabled) { border-color:transparent; background:var(--accent-fill-lift); color:var(--accent-ink) }
#composerAttachments { display:flex; flex-wrap:wrap; gap:var(--s-3); padding:var(--s-6) var(--s-6) 0 }
.composer-attachment { max-width:var(--w-label); height:var(--h-6); display:grid; grid-template-columns:var(--h-4) minmax(0,1fr) var(--h-2); align-items:center; gap:var(--s-4); padding:var(--s-2); border:1px solid var(--line); border-radius:var(--r-input); background:var(--sunk) }
.composer-attachment img { width:var(--h-4); height:var(--h-4); border-radius:var(--r-small); object-fit:cover }
.composer-attachment>span { overflow:hidden; color:var(--muted); font-size:var(--t-12); text-overflow:ellipsis; white-space:nowrap }
.composer-attachment button { width:var(--h-2); height:var(--h-2); min-height:var(--h-2); flex-basis:var(--h-2); border:0 }
#composerBlocker { margin:var(--s-5) var(--s-5) 0; display:flex; align-items:center; gap:var(--s-6); padding:var(--s-5) var(--s-6); border:1px solid var(--warn-line); border-radius:var(--r-input); background:var(--warn-soft) }
#composerBlocker>span { min-width:0; flex:1; display:flex; flex-direction:column; gap:var(--s-1) }
#composerBlocker strong { color:var(--ink); font-size:var(--t-13); font-weight:600 }
#composerBlocker small { color:var(--muted); font-size:var(--t-12); line-height:1.4 }
#composerBlocker button { min-height:var(--h-3); flex:0 0 auto; border-color:var(--warn-line); color:var(--warn) }
.composer-context { min-height:var(--h-1); display:flex; align-items:center; gap:var(--s-6); padding:0 var(--s-7) var(--s-4); color:var(--faint); font-size:var(--t-12) }
.composer-context span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.composer-context span:first-child { color:var(--muted) }
.composer-context #branchContext { margin-left:auto; font-family:var(--mono) }
.composer-popover { position:fixed; z-index:80; top:0; left:0; max-height:min(440px,calc(100vh - 24px)); overflow:hidden; border:1px solid var(--edge); border-radius:var(--r-card); background:var(--menu-solid); box-shadow:var(--lift-3),var(--specular-strong) }
.menu-search { flex:0 0 auto; height:var(--h-5); display:flex; align-items:center; gap:var(--s-4); padding:var(--s-3) var(--s-6); border-bottom:1px solid var(--line); color:var(--faint) }
.menu-search svg { width:var(--i-2); height:var(--i-2) }
.menu-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:var(--t-13) }
.model-menu { width:min(392px,calc(100vw - 20px)); display:flex }
.model-families { flex:0 0 var(--h-6); display:flex; flex-direction:column; align-items:center; gap:var(--s-1); padding:var(--s-3) 0; overflow:auto; border-right:1px solid var(--line); background:var(--press) }
.family-tab { position:relative; width:var(--h-3); height:var(--h-3); min-height:var(--h-3); flex:0 0 var(--h-3); padding:0; border-color:transparent; border-radius:var(--r-chip); background:transparent; color:var(--muted); box-shadow:none }
.family-tab:hover:not(:disabled) { border-color:transparent; background:var(--sheen); color:var(--ink) }
.family-tab[aria-selected="true"] { background:var(--bezel); color:var(--ink); box-shadow:var(--lift-1),var(--specular) }
.family-mark { font:600 var(--t-14)/1 var(--mono) }
.family-rule { width:var(--i-3); height:1px; margin:var(--s-2) 0; background:var(--line) }
.family-dot { position:absolute; right:4px; bottom:4px; width:var(--dot); height:var(--dot); border-radius:50%; background:var(--accent) }
[data-provider="claude"] .family-mark { color:#df8050 }
[data-provider="opencode"] .family-mark { font-size:var(--t-11) }
.model-side { min-width:0; flex:1; display:flex; flex-direction:column }
#modelMenuList { min-height:0; flex:1; overflow:auto; padding:var(--s-2) }
.family-head { display:flex; align-items:baseline; gap:var(--s-4); padding:var(--s-3) var(--s-4) var(--s-2) }
.family-head strong { min-width:0; flex:1; color:var(--faint); font:600 var(--t-11) var(--sans); text-transform:uppercase; letter-spacing:.14em }
.family-head span { color:var(--faint); font-size:var(--t-12) }
.family-head span.connected { color:var(--accent) }
.model-option { width:100%; min-height:var(--h-4); justify-content:flex-start; gap:var(--s-4); padding:var(--s-2) var(--s-4); border-color:transparent; border-radius:var(--r-chip); background:transparent; text-align:left }
.model-option:hover, .model-option[data-selected="true"] { border-color:transparent; background:var(--sheen) }
.model-option[data-selected="true"] strong { color:var(--accent) }
.model-option>span { min-width:0; flex:1; display:grid }
.model-option strong { overflow:hidden; color:var(--ink); font-size:var(--t-13); font-weight:500; text-overflow:ellipsis; white-space:nowrap }
.model-option small { overflow:hidden; color:var(--faint); font-size:var(--t-12); text-overflow:ellipsis; white-space:nowrap }
.model-option kbd { flex:0 0 auto; padding:var(--s-1) var(--s-3); border-radius:var(--r-small); background:var(--press); color:var(--faint); font:var(--t-12) var(--mono) }
.model-star { flex:0 0 var(--i-2); color:var(--faint); font-size:var(--t-13); opacity:0; cursor:pointer }
.model-star.on { color:var(--accent); opacity:1 }
.model-option:hover .model-star, .model-star:focus-visible { opacity:1 }
.model-chevron { color:var(--faint) }
.menu-empty { margin:var(--s-7) var(--s-6); color:var(--muted); font-size:var(--t-13); text-align:center }
.traits-menu { width:248px; padding:var(--s-2); overflow:auto }
.trait-section { padding:var(--s-2) var(--s-2) }
.trait-section+.trait-section { border-top:1px solid var(--line) }
.trait-section>header { display:flex; flex-direction:column; margin:var(--s-1) 0 var(--s-1); padding:0 var(--s-4) }
.trait-section>header strong { color:var(--faint); font:600 var(--t-11) var(--sans); text-transform:uppercase; letter-spacing:.14em }
.trait-section>header small { display:none }
.trait-options { display:flex; flex-direction:column; gap:var(--s-1) }
.trait-option { width:100%; min-height:var(--h-3); justify-content:flex-start; gap:var(--s-3); padding:var(--s-2) var(--s-4); border-color:transparent; border-radius:var(--r-small); background:transparent; font-size:var(--t-13); text-align:left }
.trait-option:hover, .trait-option[data-selected="true"] { background:var(--sheen) }
.trait-option[data-selected="true"] { color:var(--accent) }
.trait-option small { margin-left:auto; color:var(--faint); font-size:var(--t-12) }
.trait-toggle { min-height:var(--h-3); display:flex; flex-direction:row; align-items:center; gap:var(--s-5); padding:0 var(--s-4); color:var(--body); font-size:var(--t-13) }
.trait-toggle span { flex:1 }
.runtime-menu, .interaction-menu { width:296px; padding:var(--s-2); overflow:auto }
.runtime-menu button, .interaction-menu button { width:100%; min-height:var(--h-6); flex-direction:column; align-items:flex-start; gap:1px; padding:var(--s-3) var(--s-4); border-color:transparent; border-radius:var(--r-chip); background:transparent; box-shadow:none; text-align:left }
.runtime-menu button:hover, .runtime-menu button[data-selected="true"], .interaction-menu button:hover, .interaction-menu button[data-selected="true"] { background:var(--sheen) }
.runtime-menu button[data-selected="true"] strong, .interaction-menu button[data-selected="true"] strong { color:var(--accent) }
.runtime-menu strong, .interaction-menu strong { color:var(--ink); font-size:var(--t-13); font-weight:500 }
.runtime-menu small, .interaction-menu small { color:var(--faint); font-size:var(--t-12); line-height:1.35 }

/* one floating action menu, reused by every project and thread row */

#grip { position:relative; z-index:5; width:var(--s-5); flex:0 0 var(--s-5); cursor:col-resize }
#grip::after { content:""; position:absolute; inset:calc(50% - 20px) 3.5px auto; height:var(--h-5); border-radius:2px; background:var(--line-2) }
#grip:hover::after, body.split-resize #grip::after { inset:0 3.5px; height:auto; background:var(--accent) }
body.split-resize { cursor:col-resize; user-select:none }
#pane { position:relative; z-index:4; min-width:360px; flex:0 0 48%; container-type:inline-size; display:flex; flex-direction:column; overflow:hidden; margin:0 var(--s-4) var(--s-4) 0; border:1px solid var(--line); border-radius:var(--r-window); background:var(--panel); box-shadow:var(--lift-2),var(--specular-strong) }
body.panel-fill #chatPane, body.panel-fill #grip { display:none }
body.panel-fill #pane { min-width:0; flex:1; margin-left:var(--s-4) }
#panelHeader { height:var(--h-6); flex:0 0 var(--h-6); display:flex; align-items:center; gap:var(--s-5); padding:var(--s-3) var(--s-6); border-bottom:1px solid var(--line) }
/* The tab group is the one part of this bar that can give way, so it is the one that does. */
.panel-tabs { min-width:0; height:var(--h-4); display:flex; gap:var(--s-1); padding:var(--s-1); overflow:hidden; border-radius:var(--r-pill); background:var(--inset); box-shadow:var(--inset-edge) }
.panel-tabs button { min-width:0; min-height:var(--h-2); padding:0 var(--s-6); overflow:hidden; border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted); font-size:var(--t-13); text-overflow:ellipsis; white-space:nowrap }
.panel-tabs button[aria-selected="true"] { background:var(--bezel); color:var(--ink); box-shadow:var(--lift-1),var(--specular) }
.panel-sizes { display:flex; gap:var(--s-1); margin-left:auto }

#screenPanel, #filesPanel, #terminalPanel { min-height:0; flex:1 }
#screenPanel { display:flex; flex-direction:column }
#screenMeta { height:var(--h-6); flex:0 0 var(--h-6); display:flex; align-items:center; gap:var(--s-4); padding:var(--s-3) var(--s-6); border-bottom:1px solid var(--line) }
#screenMeta strong { color:var(--ink); font-size:var(--t-15); font-weight:600 }
#screenNote { max-width:42%; overflow:hidden; color:var(--warn); font-size:var(--t-13); text-overflow:ellipsis; white-space:nowrap }
.power { color:var(--danger) }
#screenBody { position:relative; min-height:0; flex:1; display:grid; place-items:center; overflow:hidden; background:var(--sunk) }
.state-card { max-width:440px; display:flex; flex-direction:column; align-items:center; padding:var(--s-10); text-align:center }
.state-card svg { width:var(--i-hero); height:var(--i-hero); color:var(--faint) }
.state-card h2 { margin:var(--s-8) 0 var(--s-4) }
.state-card p { max-width:380px; margin:0 0 var(--s-8); color:var(--muted); font-size:var(--t-14); line-height:1.55 }
.state-card.overlay { position:absolute; z-index:3; padding:var(--s-9) var(--s-9); border:1px solid var(--edge); border-radius:var(--r-card); background:var(--material-strong); box-shadow:var(--lift-3),var(--specular-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur) }
#screenBox { position:absolute; inset:0; display:grid; place-items:center }
#screenBox.asleep::after { content:""; position:absolute; inset:0; background:var(--scrim) }
#view { display:block; max-width:100%; max-height:100%; background:var(--screen-off); object-fit:contain }
#pad { position:absolute; inset:0; width:100%; height:100%; resize:none; border:0; outline:0; background:transparent; color:transparent; caret-color:transparent; opacity:.001 }
#screenPanel.control { box-shadow:inset 0 0 0 2px var(--accent) }

#filesPanel { display:flex; flex-direction:column }
/* The toolbar is as tall as its contents need, and wraps when the panel is too narrow for one
   row. It used to be one fixed-height row that scrolled sideways with its scrollbar hidden, so at
   a narrow panel the last button was simply off the right edge with nothing to say so. */
#filesHeader { min-height:var(--h-6); flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); padding:var(--s-3) var(--s-5); border-bottom:1px solid var(--line) }
.file-location-controls { min-width:0; flex:1 1 var(--w-name); display:flex; align-items:center; gap:var(--s-1) }
/* The end of the path is the part you are standing in, so that is the end that stays on screen. */
#filesBreadcrumb { min-width:0; flex:1; display:flex; align-items:center; overflow-x:auto; scrollbar-width:none }
#filesBreadcrumb::-webkit-scrollbar { display:none }
.crumb { min-width:0; min-height:var(--h-3); gap:var(--s-1); padding:var(--s-1) var(--s-2) var(--s-1) var(--s-4); overflow:hidden; border-color:transparent; background:transparent; color:var(--ink); font-size:var(--t-13); font-weight:500; box-shadow:none }
.crumb:hover:not(:disabled), .crumb[aria-expanded="true"] { border-color:transparent; background:var(--sheen) }
.crumb>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.crumb svg { width:var(--i-1); height:var(--i-1); flex:0 0 var(--i-1); color:var(--faint); border-radius:var(--r-small) }
.crumb svg:hover { background:var(--press); color:var(--ink) }
.crumb-separator { color:var(--faint) }
#filesModes, #viewButtons { display:flex; flex:0 0 auto; gap:var(--s-1); padding:var(--s-1); border-radius:var(--r-pill); background:var(--inset); box-shadow:var(--inset-edge) }
#filesModes button, #viewButtons button { min-height:var(--h-2); padding:var(--s-1) var(--s-6); border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted); font-size:var(--t-13) }
#viewButtons button { width:var(--h-3); flex-basis:var(--h-3); padding:0 }
#filesModes button[aria-pressed="true"], #viewButtons button[aria-pressed="true"] { background:var(--bezel); color:var(--ink); box-shadow:var(--lift-1),var(--specular) }
#filesSearch { display:none; min-width:0; height:var(--h-4); flex:1 1 var(--w-name); padding:var(--s-3) var(--s-6); border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--panel); color:var(--body) }
#filesPanel.search-open #filesSearch { display:block }
#filesPanel.search-open .file-location-controls, #filesPanel.search-open #filesModes, #filesPanel.search-open #sortWrap, #filesPanel.search-open #viewButtons, #filesPanel.search-open #filesTools { display:none }
#filesSearchToggle[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent) }
#sortWrap { position:relative; width:var(--h-4); height:var(--h-4); flex:0 0 var(--h-4); display:grid; place-items:center; overflow:hidden; border-radius:var(--r-pill); color:var(--muted); cursor:pointer }
#sortWrap:hover { background:var(--raised); color:var(--ink) }
#sortWrap select { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer }
#filesTools { display:flex; align-items:center; gap:var(--s-1); flex:0 0 auto }
#filesTools .primary { border-color:transparent; background:transparent; color:var(--muted) }
#filesTools .primary:hover { background:var(--accent-soft); color:var(--accent) }
#selectionCount { padding:0 var(--s-3); color:var(--muted); font-size:var(--t-12); white-space:nowrap }
#filesTools .selection-action:disabled { display:none }
#filesTools.has-selection #addFiles, #filesTools.has-selection #filesNewFolder { display:none }
#filesMessage { flex:0 0 auto; padding:var(--s-3) var(--s-7); border-bottom:1px solid var(--line); color:var(--muted); font-size:var(--t-13) }
#filesMessage:empty { display:none }
#filesMessage.error { color:var(--danger); background:var(--danger-soft) }
#fileManagerBody { position:relative; min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden }
#fileCollection { min-width:0; min-height:0; display:flex; flex-direction:column; container-type:inline-size }
#fileTableHeader, .file-row { display:grid; grid-template-columns:var(--h-1) var(--h-4) minmax(120px,1fr) 76px 78px 132px; gap:var(--s-4); align-items:center }
#fileTableHeader { height:var(--h-4); flex:0 0 var(--h-4); padding:0 var(--s-6); border-bottom:1px solid var(--line); color:var(--faint); font-size:var(--t-11); font-weight:600; text-transform:uppercase; letter-spacing:.14em }
#fileTableHeader button { min-height:var(--h-2); justify-content:flex-start; padding:0; border:0; background:transparent; color:inherit; font-size:var(--t-11); font-weight:600; text-transform:uppercase; letter-spacing:.14em }
#fileTableHeader button[data-direction]::after { content:attr(data-direction); margin-left:var(--s-2); color:var(--accent) }
#fileList { min-height:0; flex:1; overflow:auto; padding:var(--s-3) var(--s-4) var(--s-5) }
.file-row { min-height:var(--h-6); padding:var(--s-2) var(--s-4); border:1px solid transparent; border-radius:var(--r-input); cursor:default }
.file-row:hover { background:var(--raised) }
.file-row:focus-visible { outline:2px solid var(--accent-line); outline-offset:-2px }
.file-row[aria-selected="true"] { border-color:var(--accent-line); background:var(--accent-soft) }
.file-check { accent-color:var(--accent) }
.file-visual { width:var(--h-3); height:var(--h-3); display:grid; place-items:center; overflow:hidden; color:var(--muted) }
.file-visual svg { width:var(--i-4); height:var(--i-4) }
.file-thumbnail { width:100%; height:100%; object-fit:cover; border-radius:var(--r-small) }
.file-name, .file-size, .file-kind, .file-date { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.file-name { color:var(--body); font-size:var(--t-13) }
.file-size, .file-kind, .file-date, .file-location { color:var(--faint); font:var(--t-12) var(--mono) }
.file-size { text-align:right }
.file-location { grid-column:3/-1; margin-top:-6px }
.empty-folder { margin:var(--s-11) var(--s-6); color:var(--muted); font-size:var(--t-14); text-align:center }
#fileCollection.grid #fileTableHeader { display:none }
#fileCollection.grid #fileList { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); align-content:start; gap:var(--s-4); padding:var(--s-5) }
#fileCollection.grid .file-row { position:relative; min-height:var(--h-preview); display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-5); text-align:center }
#fileCollection.grid .file-check { position:absolute; z-index:2; top:9px; left:9px }
#fileCollection.grid .file-visual { width:100%; height:var(--h-thumb) }
#fileCollection.grid .file-size, #fileCollection.grid .file-kind, #fileCollection.grid .file-date { display:none }

#fileSide { display:none; min-width:0; min-height:0; flex-direction:column; background:var(--panel) }
#fileManagerBody.preview-open #fileSide, #fileManagerBody.transfers-open #fileSide { position:absolute; z-index:4; inset:0 0 0 auto; width:min(400px,88%); display:flex; border-left:1px solid var(--line-2); box-shadow:-22px 0 60px rgba(0,0,0,.45) }
#previewClose { position:absolute; z-index:2; top:10px; right:10px; background:var(--material-strong) }
#filePreview { min-height:var(--h-preview); flex:1; overflow:auto; display:flex; flex-direction:column; gap:var(--s-6); padding:var(--s-11) var(--s-7) var(--s-7) }
.preview-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s-2) var(--s-6); padding-right:var(--s-9) }
.preview-heading strong { overflow-wrap:anywhere; color:var(--ink); font-size:var(--t-15); font-weight:600 }
.preview-heading span, .preview-empty { color:var(--muted); font-size:var(--t-13) }
#filePreview pre { flex:1; margin:0; padding:var(--s-6); overflow:auto; border:1px solid var(--line); border-radius:var(--r-input); background:var(--sunk); white-space:pre-wrap; font:var(--t-13)/1.6 var(--mono) }
#filePreview img, #filePreview video { width:100%; min-height:160px; flex:1; display:block; margin:auto; object-fit:contain }
#filePreview audio { width:100% }
#filesRecent { flex:0 0 auto; max-height:190px; border-top:1px solid var(--line) }
#filesRecent header { display:flex; align-items:center; height:var(--h-5); padding:var(--s-3) var(--s-7); border-bottom:1px solid var(--line) }
#filesRecent header strong { color:var(--ink); font-size:var(--t-13); font-weight:600 }
#filesRecentNote { margin-left:auto; color:var(--faint); font-size:var(--t-12) }
#transfers { max-height:148px; overflow:auto; padding:var(--s-3) var(--s-4) }
.transfer { min-height:var(--h-4); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); font-size:var(--t-12) }
.transfer+.transfer { border-top:1px solid var(--line) }
.transfer-main { min-width:0; display:flex; gap:var(--s-3) }
.transfer-main>* { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.transfer progress { width:100%; height:var(--s-3); grid-column:1/-1; accent-color:var(--accent) }
.recent-empty { margin:var(--s-5); color:var(--faint); font-size:var(--t-12) }
#pane[data-size="fill"] #fileManagerBody { grid-template-columns:minmax(360px,3fr) minmax(300px,2fr) }
#pane[data-size="fill"] #fileSide { position:static; width:auto; display:flex; border-left:1px solid var(--line); box-shadow:none }
#pane[data-size="fill"] #previewClose { display:none }
#pane[data-size="fill"] #filePreview { padding-top:var(--s-8) }

#terminalPanel { display:flex; flex-direction:column; background:var(--sunk) }
#terminalHeader { height:var(--h-6); flex:0 0 var(--h-6); display:flex; align-items:center; gap:var(--s-4); padding:var(--s-3) var(--s-6); border-bottom:1px solid var(--line) }
#terminalHeader strong { color:var(--ink); font-size:var(--t-15); font-weight:600 }
#terminalStatus { color:var(--faint); font-size:var(--t-12) }
#terminalStatus.ready { color:var(--accent) }
#terminalStatus.closed { color:var(--danger) }
#terminalHost { min-width:0; min-height:0; flex:1; padding:var(--s-5) var(--s-3) var(--s-3) var(--s-6); overflow:hidden; background:var(--sunk) }
#terminalHost .terminal.xterm { height:100% }
#terminalHost .xterm-viewport { scrollbar-color:var(--line-2) transparent }

/* Settings is a page of this app, so it stands on the same ground the app does: a surface of its
   own here is a theme this page decides for itself, and one of them is unreadable. */
#settingsView { position:fixed; z-index:30; inset:0; overflow:auto; background:var(--wash) }
.settings-header { position:sticky; z-index:2; top:0; height:var(--h-6); display:flex; align-items:center; justify-content:space-between; padding:0 var(--s-9); border-bottom:1px solid var(--line-2); background:var(--material); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--specular) }
.settings-title { display:flex; align-items:center; gap:var(--s-6) }
.settings-header h1 { font-size:var(--t-20) }
.settings-content { width:min(860px,calc(100% - 56px)); margin:var(--s-9) auto var(--s-11); display:flex; flex-direction:column; gap:var(--s-10) }
.settings-section>h2 { margin-bottom:var(--s-3) }
.section-lede { max-width:62ch; margin:0 0 var(--s-6); color:var(--muted); font-size:var(--t-13); line-height:1.6 }
.section-lede em { color:var(--body); font-style:normal; font-weight:600 }
.rows { display:flex; flex-direction:column }
/* Which AI these two lists belong to, and a way through a long one. */
.catalog-head { display:flex; align-items:center; gap:var(--s-5); margin-bottom:var(--s-5); flex-wrap:wrap }
.catalog-head .sidebar-search { min-width:180px; max-width:260px; flex:1 }
.catalog-head .segment { flex:0 0 auto }
/* The vendor's own logo, at the size of the mark it stands in for. */
.row-logo { width:var(--i-4); height:var(--i-4); flex:0 0 var(--i-4); border-radius:var(--r-input); object-fit:contain }
#linkMore, #pluginMore { align-self:flex-start; margin-top:var(--s-5); padding-left:0; color:var(--muted) }
#linkSource { margin-top:var(--s-5) }
#deleteBot { display:inline-flex; align-items:center; text-decoration:none }
.setting-row { min-height:58px; display:flex; align-items:center; gap:var(--s-6); border-bottom:1px solid var(--line) }
.setting-row>div { min-width:0; flex:1 }
.setting-row strong { color:var(--ink); font-size:var(--t-14); font-weight:500 }
.setting-row p, .section-note { margin:var(--s-1) 0 0; overflow:hidden; color:var(--muted); font-size:var(--t-13); text-overflow:ellipsis; white-space:nowrap }
.section-note { padding-top:var(--s-6); color:var(--faint); white-space:normal }
.provider-mark { width:var(--i-4); color:var(--muted); font:600 var(--t-16)/1 var(--mono); text-align:center }
[data-provider="claude"] .provider-mark { color:#df8050 }
[data-provider="codex"] .provider-mark { color:var(--body) }
[data-provider="cursor"] .provider-mark, [data-provider="grok"] .provider-mark { color:var(--ink) }
[data-provider="opencode"] .provider-mark { color:var(--accent); font-size:var(--t-12) }
.status-pill { color:var(--muted); font-size:var(--t-13); white-space:nowrap }
.status-pill.signed-in { color:var(--accent) }
.status-pill.needs-you { color:var(--warn) }
/* Not a state, a wait: the shelf is up and this row's health check has not landed. */
.status-pill.checking { color:var(--muted); opacity:.7 }
.setting-action { min-width:84px }
.setting-action.quiet { min-width:74px }
.setting-action.danger { color:var(--danger) }
select, input[type="number"], #authInput { height:var(--h-4); padding:var(--s-3) var(--s-6); border:1px solid var(--line-2); border-radius:var(--r-input); background:var(--panel); color:var(--body) }
input[type="checkbox"][role="switch"] { position:relative; width:var(--h-5); height:var(--h-1); flex:0 0 var(--h-5); margin:0; appearance:none; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--raised); cursor:pointer; transition:background 130ms,border-color 130ms }
input[type="checkbox"][role="switch"]::after { content:""; position:absolute; top:3px; left:3px; width:var(--i-2); height:var(--i-2); border-radius:50%; background:var(--muted); transition:transform 150ms var(--ease),background 130ms }
input[type="checkbox"][role="switch"]:checked { border-color:var(--accent); background:var(--accent) }
input[type="checkbox"][role="switch"]:checked::after { transform:translateX(16px); background:var(--accent-ink) }
#developerControls { border-top:1px solid var(--line-2) }
.developer-value { color:var(--accent); font:var(--t-12) var(--mono); white-space:nowrap }
#settingsMessage { color:var(--accent) }

#dropOverlay { position:fixed; z-index:100; inset:var(--h-6) 0 0; display:grid; place-content:center; gap:var(--s-5); border:2px solid var(--accent); background:var(--veil); color:var(--ink); font:600 clamp(26px,4vw,44px)/1.15 var(--sans); letter-spacing:-.03em; text-align:center; backdrop-filter:blur(6px) }
#dropOverlay small { color:var(--muted); font-size:var(--t-14); font-weight:400; letter-spacing:0 }

/* One way to show a file the bot made, whatever it is. The card is the default and always works;
   a picture, a player, a page or a table sits above it when the relay says there is one. A kind
   this client has never met still gets a name, a size and the two things every file can do. */
.artifacts { display:flex; flex-direction:column; gap:var(--s-3); margin:var(--s-5) 0 var(--s-2); max-width:var(--w-read) }
.artifacts.many { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--w-tile),1fr)); max-width:none }
/* In a grid the cards are as tall as the tallest one, so the caption sits at the foot of each and
   the names line up instead of floating at different heights. */
.artifacts.many .artifact { justify-content:flex-end }
.artifacts.many .artifact-more { grid-column:1/-1 }
.artifact { display:flex; flex-direction:column; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-card); background:var(--sunk) }
.artifact-view { display:grid; grid-template-columns:minmax(0,1fr); place-items:center; max-height:var(--h-view); overflow:hidden; border-bottom:1px solid var(--line); background:var(--ground) }
.artifact-view img, .artifact-view video { display:block; max-width:100%; max-height:var(--h-view); object-fit:contain }
.artifact-view audio { width:calc(100% - var(--s-7)); margin:var(--s-4) 0 }
.artifact-view .artifact-page { width:100%; height:var(--h-view); border:0; background:var(--paper) }
/* A picture sits in the middle of its frame; words and rows start at the left edge, because
   centring something wider than its frame scrolls the beginning of it out of sight. */
.artifact-view .table-scroll { width:100%; max-height:var(--h-view); overflow:auto; margin:0; border:0; border-radius:0; justify-self:stretch }
.artifact-view .message-code { width:100%; max-height:var(--h-view); margin:0; overflow:auto; border:0; border-radius:0; justify-self:stretch }
.artifact.compact .artifact-view { max-height:var(--h-tile) }
.artifact.compact .artifact-view img, .artifact.compact .artifact-view video { max-height:var(--h-tile) }
.artifact.compact .artifact-view .artifact-page, .artifact.compact .artifact-view .table-scroll, .artifact.compact .artifact-view .message-code { height:var(--h-tile); max-height:var(--h-tile) }
.artifact-note { margin:0; color:var(--muted); font-size:var(--t-12) }
.artifact-ask { margin:var(--s-4) 0 }
.artifact-view:has(.artifact-ask) { gap:var(--s-4); padding:var(--s-8) var(--s-6) }
.artifact-row { display:flex; align-items:center; gap:var(--s-4); min-height:var(--h-3); padding:var(--s-3) var(--s-4) }
.artifact-row>svg { width:var(--i-4); height:var(--i-4); flex:0 0 var(--i-4); color:var(--faint) }
.artifact-text { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px }
.artifact-text strong { overflow:hidden; color:var(--ink); font-size:var(--t-14); font-weight:500; text-overflow:ellipsis; white-space:nowrap }
.artifact-text span { color:var(--faint); font-size:var(--t-12) }
.artifact-row .button, .artifact-row button { min-height:var(--h-1); flex:0 0 auto; padding:var(--s-1) var(--s-4); font-size:var(--t-12) }
.artifact.gone .artifact-text strong, .artifact.loading .artifact-text strong { color:var(--muted); font-weight:400 }
.artifact.loading { opacity:.7 }
.artifact-more { align-self:start; min-height:var(--h-2); color:var(--muted); font-size:var(--t-12) }

.segment { display:flex; gap:var(--s-1); padding:var(--s-1); border-radius:var(--r-pill); background:var(--inset); box-shadow:var(--inset-edge) }
.segment button { min-height:var(--h-2); padding:var(--s-1) var(--s-6); border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted); font-size:var(--t-12); font-weight:500; box-shadow:none }
.segment button:hover:not(:disabled) { background:transparent; color:var(--ink) }
.segment button[aria-pressed="true"] { background:var(--bezel); color:var(--ink); box-shadow:var(--lift-1),var(--specular) }

/* ── what a reply can contain ──────────────────────────────
   Headings, lists, quotes, tables and code, on the same type scale as the prose
   around them. Anything the bot makes is a file and is shown as one. */
.message-copy strong { color:var(--ink); font-weight:600 }
.message-copy em { font-style:italic }
.message-copy del { color:var(--faint) }
.message-copy hr { height:1px; margin:var(--s-7) 0; border:0; background:var(--line) }
.message-copy blockquote { margin:var(--s-6) 0; padding:var(--s-1) 0 var(--s-1) var(--s-7); border-left:2px solid var(--line-2); color:var(--muted) }
.message-copy blockquote>*:last-child { margin-bottom:0 }
.message-list { margin:var(--s-4) 0; padding-left:var(--s-9) }
.message-list li { margin:var(--s-2) 0 }
.message-list li::marker { color:var(--faint) }
.message-list .message-list { margin:var(--s-2) 0 }
.message-list li:has(>input[type="checkbox"]) { list-style:none; margin-left:calc(var(--s-8) * -1) }
.message-list input[type="checkbox"] { width:var(--i-2); height:var(--i-2); margin:0 var(--s-3) 0 0; accent-color:var(--accent) }
.table-scroll { margin:var(--s-6) 0; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card) }
.message-table { width:100%; border-collapse:collapse; font-size:var(--t-14) }
.message-table th, .message-table td { padding:var(--s-4) var(--s-6); text-align:left; vertical-align:top }
.message-table thead th { position:sticky; top:0; border-bottom:1px solid var(--line-2); background:var(--sunk); color:var(--ink); font-weight:600; white-space:nowrap }
.message-table tbody tr+tr td { border-top:1px solid var(--line) }
.message-table tbody tr:hover td { background:var(--sheen) }

.code-block { margin:var(--s-6) 0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-card); background:var(--sunk) }
.block-actions { display:flex; align-items:center; gap:var(--s-4); min-height:var(--h-4); padding:var(--s-2) var(--s-4) var(--s-2) var(--s-6); border-bottom:1px solid var(--line) }
.code-language { flex:1; color:var(--faint); font:600 var(--t-11) var(--sans); text-transform:uppercase; letter-spacing:.14em }
.copy-button { min-height:var(--h-2); padding:var(--s-1) var(--s-5); border-color:transparent; background:transparent; color:var(--muted); font-size:var(--t-12); box-shadow:none }
.copy-button:hover:not(:disabled) { border-color:transparent; background:var(--sheen); color:var(--ink) }
.code-block .message-code { margin:0; border:0; border-radius:0; background:transparent }
/* Inside a block, code is already code: the chip that marks it out mid-sentence would be a box
   around every line. */
.message-code code { padding:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit }
#scrollBottom { position:absolute; z-index:4; left:50%; right:auto; transform:translateX(-50%); bottom:calc(var(--composer-height,150px) + 10px); width:var(--h-3); height:var(--h-3); padding:0; border-color:var(--edge); border-radius:50%; background:var(--material-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:var(--ink); box-shadow:var(--lift-2),var(--specular) }
#scrollBottom svg { width:var(--i-2); height:var(--i-2) }



.take-control { min-height:var(--h-3); gap:var(--s-3); padding:var(--s-2) var(--s-6); font-size:var(--t-13) }
.take-control svg { width:var(--i-2); height:var(--i-2) }
.take-control[aria-pressed="true"] { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent) }
.power-menu { width:auto; min-height:var(--h-3); gap:1px; padding:var(--s-2) var(--s-4); border-color:transparent; background:transparent; color:var(--muted); box-shadow:none }
.power-menu:hover:not(:disabled), .power-menu[aria-expanded="true"] { border-color:transparent; background:var(--sheen); color:var(--ink) }
.power-menu svg { width:var(--i-2); height:var(--i-2) }
.power-menu svg:last-child { width:var(--i-1); height:var(--i-1); color:var(--faint) }
#screenHint { position:absolute; z-index:4; bottom:16px; left:50%; min-height:var(--h-4); gap:var(--s-4); padding:var(--s-3) var(--s-7); border-color:var(--edge); border-radius:var(--r-pill); background:var(--material-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:var(--ink); font-size:var(--t-13); box-shadow:var(--lift-2),var(--specular); transform:translateX(-50%); animation:hint-in 400ms var(--ease) both }
#screenHint svg { width:var(--i-2); height:var(--i-2); color:var(--accent) }
#screenBox:hover #screenHint { border-color:var(--accent-line) }
@keyframes hint-in { from { opacity:0; transform:translate(-50%,10px) } }
@container (max-width:760px) {
  #fileTableHeader, .file-row { grid-template-columns:var(--h-1) var(--h-4) minmax(var(--w-name),1fr) 72px 118px }
  #fileTableHeader>*:nth-child(5), .file-row>*:nth-child(5) { display:none }
}
@container (max-width:540px) {
  #fileTableHeader, .file-row { grid-template-columns:var(--h-1) var(--h-4) minmax(var(--w-name),1fr) var(--w-meta) }
  #fileTableHeader>*:nth-child(4), .file-row>*:nth-child(4) { display:none }
}
/* The panel is its own container, so what it shows depends on how wide it has been DRAGGED and not
   on how wide the window is. Side by side or filling it, it is the same measurement. */
@container (max-width:700px) {
  #panelHeader { padding-inline:var(--s-4) }
  #pane[data-size="fill"] #fileManagerBody { grid-template-columns:minmax(0,1fr) }
  #pane[data-size="fill"] #fileSide { display:none }
  #pane[data-size="fill"] #fileManagerBody.preview-open #fileSide,
  #pane[data-size="fill"] #fileManagerBody.transfers-open #fileSide { position:absolute; inset:0 0 0 auto; width:min(390px,92%); display:flex; border-left:1px solid var(--line-2); box-shadow:-22px 0 60px rgba(0,0,0,.45) }
  #pane[data-size="fill"] #previewClose { display:flex }
}
@container (max-width:460px) {
  /* Below this the pills and the path cannot share a line, so the toolbar takes two, and the
     panel's own bar tightens rather than pushing its last control off the end. */
  .file-location-controls { flex:1 0 100% }
  #panelHeader, #screenMeta, #terminalHeader { gap:var(--s-3) }
  .panel-tabs button { padding:0 var(--s-4) }
}

@container (max-width:900px) {
  #chatSidebar { width:236px; flex-basis:236px }
  .card-grid { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) }
  .surface { padding-top:var(--s-10) }
}
@container (max-width:720px) {
  #chatSidebar { position:absolute; z-index:12; inset:0 auto 0 0; width:284px; flex-basis:284px; display:none; box-shadow:20px 0 60px rgba(0,0,0,.6) }
  body.mobile-sidebar-open #chatSidebar { display:flex }
  body.sidebar-collapsed #chatSidebar { display:none }
  body.mobile-sidebar-open #chatSidebar { display:flex }
  #mobileSidebar { display:flex }
  #sidebarExpand { display:none }
  #timeline { padding-inline:var(--s-7) }
  #composer { right:12px; bottom:12px; left:12px }
  .composer-menu-button { max-width:170px }
  h1 { font-size:var(--t-26) }
}
@container (max-width:800px) { #onboarding>p { display:none } }
@container (max-width:500px) {
  #deskHeader { padding-inline:var(--s-6) }
  #threadStatus { display:none }
  /* Clearance for the composer is whatever the composer is, here as everywhere. */
  #timeline { padding:var(--s-7) var(--s-6) calc(var(--composer-height,150px) + var(--s-6)) }
  .surface { padding:var(--s-9) var(--s-7) var(--s-11) }
  .teaching-cards { grid-template-columns:1fr }
  .teaching-cards button { min-height:88px; display:grid; grid-template-columns:var(--h-2) 1fr; grid-template-rows:auto auto; align-content:center; column-gap:var(--s-4) }
  .teaching-cards svg { grid-row:1/3; margin:0 }
  .chat-message.user { max-width:94% }
  /* The send is never scrolled away from a thumb: only the pickers move. */
  .composer-menus { justify-content:flex-start; overflow-x:auto; scrollbar-width:none }
  .composer-menu-button { max-width:130px; flex:0 0 auto }
  /* Where you are, not how you got here. Three squashed crumbs say less than one whole one, and
     the thread list is one tap away. */
  #breadcrumb button, #breadcrumb .crumb-sep { display:none }
  .composer-context { gap:var(--s-4) }
}
@media (max-width:760px) {
  #topbar { padding-inline:var(--s-6) }
  .top-toggle { width:38px; padding:0 }
  .top-toggle>span:not(.state-dot):not(.badge) { display:none }
  #pane { position:absolute; inset:0; min-width:0; border-left:0 }
  #chatPane { min-width:0 }
  #grip { display:none }
  .settings-header { padding-inline:var(--s-7) }
  .settings-content { width:calc(100% - 32px); margin-top:var(--s-9) }
  .setting-row { flex-wrap:wrap; padding:var(--s-6) 0 }
  .setting-row>div { flex-basis:calc(100% - 44px) }
  /* Narrow enough that truncating loses the sentence: let it wrap, but never past two lines. */
  .setting-row p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal }
}
@media (prefers-reduced-motion:no-preference) { .wrkr-inline-card.is-new { animation:media-land 650ms var(--ease) both } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important } }
@keyframes pulse { 50% { opacity:.28 } }
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes media-land { from { opacity:0; transform:scale(1.04); filter:blur(12px) } }