styles.css

/* mwcode desktop — styles.
   Frameless but opaque: Windows draws the rounded corners and shadow, so
   the window is edge to edge and native resize/maximize keep working. The
   sidebar and chat header are the drag handles; min/max/close end the chat header. */
:root{
  /* One height for every button, field, menu button, choice and badge. */
  --control-h:28px;

  /* Corners: nearly square everywhere. Three sizes, small to large; dots stay round. */
  --r-sm:2px;
  --r:3px;
  --r-lg:4px;

  --ground-a:#080A09;
  --ground-b:#050606;

  --glass:#111413;
  --glass-2:#171B19;
  --glass-3:#202523;
  --line:rgba(220,240,232,.11);
  --line-2:rgba(220,240,232,.17);

  --text:#EEF2EF;
  --muted:#B4BEB9;
  --dim:#87928D;

  --accent:#3DA37A;
  --dot-white:#E6EEEA;
  --accent-hi:#52BF92;
  /* The accent as numbers, for its rings at any strength: rgba(var(--accent-rgb), .45). */
  --accent-rgb:61,163,122;
  --accent-hi-rgb:82,191,146;
  --accent-fill:rgba(61,163,122,.16);

  --good:#A3CF6E;
  --good-fill:rgba(163,207,110,.13);
  --warn:#EAB767;
  --warn-fill:rgba(234,183,103,.14);
  --bad:#EC7C72;
  --bad-fill:rgba(236,124,114,.14);

  --syn-kw:#F0A36B;
  --syn-str:#A9CF8C;
  --syn-type:#8FC0B8;
  --syn-num:#E8C070;
  --syn-fn:#F2CF7A;
  --syn-prop:#E3CFA8;
  --syn-cm:#87928D;

  /* Surfaces and text that used to be written as raw colours. */
  --prose:#D6DDD9;          /* the agent's words */
  --code-text:#D4DBD7;      /* code, command output */
  --code-bg:#060707;        /* an output well, an image backdrop */
  --card-hover:#191D1B;     /* a card under the pointer */
  --tint:rgba(220,240,232,.05);    /* a row under the pointer */
  --tint-2:rgba(220,240,232,.1);  /* a chip, a track */
  --tint-3:rgba(220,240,232,.14);  /* a stronger chip */
  --tint-line:rgba(220,240,232,.25);
  --scroll-thumb:rgba(220,240,232,.14);
  --scroll-thumb-hi:rgba(220,240,232,.22);
  --shadow:rgba(0,0,0,.55);
  --scrim:rgba(4,5,5,.65);
  --diff-add:#E0E8E4;
  --diff-del:#858F8A;
  --knob:#fff;

  /* Fonts (bundled, assets/fonts): a warm serif for headings, a clean sans for everything else, a soft mono. */
  --display:'Fraunces',Georgia,serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
  color-scheme: dark;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;background:var(--glass)}
/* Linux: the window is see-through and the page is cut to its rounded shape (Windows' small corners).
   A clip, not border-radius, so overlays that cover the whole window are rounded too; the body stays
   see-through because its colour would otherwise paint the whole window, corners included (.app has it). */
html.round-window,html.round-window body{background:transparent}
html.round-window body{clip-path:inset(0 round var(--r-lg))}
html.round-window.window-square body{clip-path:none}
/* macOS: the system's red, yellow and green buttons sit top left (x 16–68, centred 22px down, main.js).
   The logo gives them its place, the sidebar header and a hidden sidebar's header start past them, and
   our own window buttons go. The same in full screen: macOS hides the buttons there but slides them back
   in with the menu bar, so their place stays free, and nothing jumps going in or out of full screen. */
html.mac .tb-winctl,html.mac .tb-div:has(+ .tb-winctl){display:none}
html.mac .rail-logo{visibility:hidden}
/* The buttons are wider than the rail: its dividing line starts below the header row, not between them. */
html.mac .rail{
  border-right-color:transparent;
  background:linear-gradient(var(--line),var(--line)) right bottom / 1px calc(100% - 44px) no-repeat;
}
html.mac .side-head{padding-left:27px}
html.mac .app.side-closed .chat-head{padding-left:84px}
body{
  font-family:var(--body);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  display:flex;flex-direction:column;
  overflow:hidden;
  cursor:default;
}
::selection{background:var(--accent-fill);color:var(--accent-hi)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea{font-family:inherit;color:inherit}
.tnum{font-variant-numeric:tabular-nums}
svg{display:block}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-button{width:0;height:0;display:none}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border:2px solid transparent;background-clip:padding-box;border-radius:var(--r)}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hi);border:2px solid transparent;background-clip:padding-box}

/* ── The window ─────────────────────────────────────────────────────── */
.app{
  flex:1;min-height:0;position:relative;
  display:flex;flex-direction:row;
  background:var(--glass);
  overflow:hidden;
}

/* The one-colour logo, painted in the text colour through its own shape: white on the dark
   titlebar, and it follows the theme instead of being a second, separately coloured file. */
.brand-mark{
  display:block;flex:none;height:17px;width:14.2px; /* the mark's own proportions (1152 x 1376) */
  background:var(--text);
  -webkit-mask:url(assets/logo-mono.png) center / contain no-repeat;
  mask:url(assets/logo-mono.png) center / contain no-repeat;
}
.proj-dot{width:6px;height:6px;border-radius:50%;flex:none}

/* ── Sidebar ─────────────────────────────────────────────────────────────
   A rail (logo, sections, the app's own buttons) and a panel (the project, then its
   sessions). It hides only when you hide it. A window too narrow for a column opens
   it over the chat instead, with a scrim to click away. */
.side{flex:none;width:296px;display:flex;background:var(--ground-a);border-right:1px solid var(--line);z-index:30}
.app.side-closed .side{display:none}
.app.side-float .side{position:absolute;top:0;bottom:0;left:0;box-shadow:24px 0 60px var(--shadow)}
.side-scrim{display:none}
.app.side-float .side-scrim{display:block;position:absolute;inset:0;z-index:29;background:rgba(0,0,0,.35)}
.rail{
  /* 53 = 52 inside + the 1px border, so the 34px buttons sit on whole pixels. */
  width:53px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  /* 6px on top puts the logo on the same centre line as the header row (22px down). */
  padding:6px 0 12px;border-right:1px solid var(--line);-webkit-app-region:drag;
}
.rail > *{-webkit-app-region:no-drag}
.rail-logo{width:32px;height:32px;display:grid;place-items:center;margin-bottom:8px;-webkit-app-region:drag}
.rail-logo .brand-mark{height:20px;width:16.75px}
.rail-grow{flex:1;align-self:stretch;-webkit-app-region:drag}
.rbtn{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;color:var(--dim);flex:none}
.rbtn:hover,.rbtn.open{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.rbtn.active{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.rbtn svg{width:16px;height:16px}
.rbtn svg [stroke]{stroke-width:1.4px;vector-effect:non-scaling-stroke}
.side-panel{flex:1;min-width:0;display:flex;flex-direction:column}
.side-head{
  height:44px;flex:none;display:flex;align-items:center;gap:6px;padding:0 8px 0 10px;
  -webkit-app-region:drag;
}
.side-head > *{-webkit-app-region:no-drag}
.proj-pick{
  display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;
  height:28px;padding:0 8px;border-radius:var(--r);font-size:13.5px;font-weight:700;color:var(--text);
  cursor:pointer;user-select:none;
}
.proj-pick:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.proj-pick .lbl{position:relative;top:-1px;line-height:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-pick .chev{width:10px;height:10px;color:var(--dim);flex:none;transition:transform .15s}
.side:has(.side-projects:not([hidden])) .proj-pick .chev{transform:rotate(180deg)}
.side-head .side-pin{margin-left:auto}
.side-pin.on{color:var(--text)}
.side-pin[hidden]{display:none}
.side-pin[hidden] + .side-ibtn{margin-left:auto}
.side-ibtn,.side-open{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--dim);flex:none}
.side-ibtn:hover,.side-open:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.side-ibtn svg,.side-open svg{width:14px;height:14px}
.side-projects{display:flex;flex-direction:column;gap:1px;padding:0 8px 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.side-projects .qtab-menu-item{font-size:12.5px;padding:7px 10px}
.side-projects .proj-dot{background:var(--dim)}
/* Past six projects the list scrolls, so it never pushes the sessions off the sidebar. */
.proj-recent-list{display:flex;flex-direction:column;gap:1px;max-height:190px;overflow-y:auto}
.proj-recent-list:empty{display:none}
.side-projects-sep{height:1px;background:var(--line);margin:4px 2px}
.side-top{display:flex;flex-direction:column;gap:6px;padding:4px 10px 8px}
.side .sm-list{flex:1;min-height:0;max-height:none;padding:0 8px 10px}
.side .session-item{padding:7px 8px 7px 12px}
.side .si-name{font-size:12.5px}
.session-item.pinned .si-pin{display:grid}
.si-pin{display:none;flex:none;color:var(--dim);margin-left:-4px}
.si-pin svg{width:12px;height:12px}
/* Renaming (a session or a project): the row itself becomes the field. The text box has no box of its
   own (no box inside a box, §3); the row it sits in gets the accent ring while you type, since it is in use,
   and keeps its size, so nothing moves. */
.si-rename{
  flex:1;min-width:0;height:16px;font:inherit;font-size:inherit;line-height:16px;color:var(--text);
  background:transparent;border:0;border-radius:0;padding:0;margin:0;outline:none;box-shadow:none;
}
.session-item:has(.si-rename),.qtab-menu-item:has(.si-rename),.proj-pick:has(.si-rename){
  background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45);cursor:text;
}
.session-item:has(.si-rename):hover,.qtab-menu-item:has(.si-rename):hover,.proj-pick:has(.si-rename):hover{
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.85);
}
.qtab-menu.session-ctx{position:fixed;top:0;left:0;right:auto;z-index:60;min-width:150px;width:max-content}
.session-ctx svg{width:12px;height:12px;color:var(--dim);flex:none}
/* The session the agent is working in: its time becomes a pulsing dot. */
.side.working .session-item.active .si-time{font-size:0;width:7px;height:7px;border-radius:50%;background:var(--accent-hi);animation:pulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.side.working .session-item.active .si-time{animation:none}}
/* Seven buttons, one size and one rhythm: every button is 28x28 with the same corners, buttons inside a
   group are 4px apart, and the divider between the two groups has the same room on both sides. */
.tb-actions{-webkit-app-region:no-drag;display:flex;align-items:center;gap:6px}
.tb-group,.tb-winctl{display:flex;align-items:center;gap:4px}
.tb-actions button{
  width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--dim);
}
.tb-actions button.tb-update{width:124px;display:inline-flex;justify-content:center;padding:0;margin-right:6px;line-height:16px;color:var(--text);font-size:11.5px;font-weight:600;white-space:nowrap}
.tb-actions button.tb-update[hidden]{display:none}
.tb-actions button:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
/* Run: grey when the project has nothing obvious to run, green play when it
   does, and a filled green tile with a stop square while it's running. The
   running state reads without motion; the ring pulse is only extra. */
.tb-actions button.run{position:relative;color:var(--good);transition:background .15s,color .15s,box-shadow .15s}
.tb-actions button.run:hover{background:transparent;color:var(--good);box-shadow:inset 0 0 0 1px rgba(111,191,134,.7)}
.tb-actions button.run .i-play{width:14px;height:14px}
.tb-actions button.run .i-stop{display:none}
.tb-actions button.run.off{color:var(--dim);opacity:.45;cursor:pointer}
.tb-actions button.run.off:hover{background:none;color:var(--dim)}
.tb-actions button.run.busy{opacity:.6;cursor:progress}
.tb-actions button.run.live{background:transparent;box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
.tb-actions button.run.live .i-play{display:none}
.tb-actions button.run.live .i-stop{display:block;width:14px;height:14px}
.tb-actions button.run.live::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(111,191,134,.45);animation:run-pulse 1.8s ease-out infinite;
}
.tb-actions button.run.live:hover{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}
.tb-actions button.run.live:hover::after{animation:none}
@keyframes run-pulse{0%{box-shadow:0 0 0 0 rgba(111,191,134,.45)}100%{box-shadow:0 0 0 7px rgba(111,191,134,0)}}
@media (prefers-reduced-motion: reduce){.tb-actions button.run.live::after{animation:none}}
.tb-div{width:1px;height:16px;background:var(--line);margin:0 4px}
.tb-winctl button{color:var(--dim)}
.tb-winctl button.win-close:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}
.tb-actions svg{width:14px;height:14px}
/* The three outline icons are drawn on differently sized canvases, so their stroke would scale unevenly:
   pin it to screen pixels so every line is the same thickness. */
.tb-group svg [stroke],.tb-winctl svg [stroke]{stroke-width:1.3px;vector-effect:non-scaling-stroke}
.tb-winctl button svg{width:14px;height:14px}

/* ── Split body ──────────────────────────────────────────────────────── */
.split{flex:1;display:flex;min-height:0;min-width:0}
.split.chat-mode .pane-chat{flex:1 1 100%}
.split.chat-mode .tool,.tool.sys{display:flex}
.pane-chat{flex:1 1 47%;display:flex;flex-direction:column;min-width:0;min-height:0}

/* ── Tabs (shared by the mode picker and the chip rows) ───────────────── */
.tab{
  /* One height for every tab, whatever its font (the mode tab is in the serif, the rest in mono). */
  display:flex;align-items:center;gap:7px;height:var(--control-h);padding:0 11px;
  border-radius:var(--r);
  font-family:var(--mono);font-size:12px;color:var(--dim);
  white-space:nowrap;
  cursor:pointer;user-select:none;
}
.tab:hover{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.tab .dot{width:6px;height:6px;border-radius:50%;flex:none}
.tab.active{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.tab .x{margin-left:2px;opacity:0;width:11px;text-align:center}
.tab:hover .x{opacity:.55}
.tab .x:hover{opacity:1}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Working = the dot fades out and back in; finished = it stops and stays lit. */
@keyframes dotblink{0%,100%{opacity:1}50%{opacity:.2}}
/* Not gated behind prefers-reduced-motion: Windows with animations off reports it, and these dots are
   the one sign that a step is running. */
.k{color:var(--syn-kw)}.s{color:var(--syn-str)}.t{color:var(--syn-type)}.n{color:var(--syn-num)}.f{color:var(--syn-fn)}.p{color:var(--syn-prop)}.c{color:var(--syn-cm)}
.err-l{color:var(--bad)}
.ok-l{color:var(--good)}
.dim-l{color:var(--dim)}
.hit-l{color:var(--text)}

/* ── Receipts (split view): one-line markers in the chat marking what the
   agent did, in narrative order. NOT clickable — the chat here is a reading
   column, which is what separates it from the Chat view. ───────────────── */
.receipt{
  display:none;align-items:center;gap:8px;width:100%;
  padding:6px 9px;margin:-2px 0;border-radius:var(--r);
  font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:left;
  cursor:default;
}
.receipt:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.receipt .bullet{color:var(--dim);font-size:8px;line-height:1;flex:none}
.receipt .rt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipt .rmeta{font-size:10.5px;color:var(--dim);flex:none}
.receipt .tag{
  font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:var(--r);
  letter-spacing:.03em;text-transform:uppercase;flex:none;
}
.receipt .tag.ok{color:var(--good);background:transparent;box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
.receipt .tag.err{color:var(--bad);background:transparent;box-shadow:inset 0 0 0 1px rgba(236,124,114,.45)}

/* ── Inline tool calls (Chat-only view) ───────────────────────────────── */
/* Collapsed by default — a tool call is a compact line, clicking it reveals
   the result. Chat view is one continuous stream; if every tool dumped its
   full output permanently, a session with more than a couple of calls would
   just be a wall of text. Collapsed-by-default keeps it scannable, same
   spirit as the receipts + click-to-open pattern in Split view. */
/* A "read files" rollup — Chat view only. Reading is the single most
   frequent, least individually interesting thing the agent does; one full
   block per file would bury the two or three things that actually matter.
   Instead every read in a run folds into one live line: pulsing + present
   tense while it's happening, settling to a static dot + past tense once
   done, with the actual files listed live underneath as each one lands. */
.readroll{display:none;flex-direction:column;gap:2px}
.split.chat-mode .readroll{display:flex}
.readroll-head{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.readroll-head .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.readroll-head .dot.pulsing{animation:pulse 1.2s ease-in-out infinite}
.readroll-body{margin-top:2px;padding-left:17px;border-left:1px solid var(--line);font-family:var(--mono);font-size:12px;line-height:1.7;display:flex;flex-direction:column;gap:1px}
.readroll-body .file{color:var(--text);opacity:0;animation:file-land .2s ease forwards}
@keyframes file-land{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.readroll-body .file{animation:none;opacity:1}}

.tool{display:none;flex-direction:column;gap:2px}
.tool-head{
  display:flex;align-items:center;gap:7px;padding:4px 6px;margin:-4px -6px;
  border-radius:var(--r);cursor:pointer;user-select:none;
  font-family:var(--mono);font-size:12.5px;color:var(--text);
}
.tool-head:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.tool-head svg{width:12px;height:12px;color:var(--dim);flex:none}
/* The head is a TITLE, one line, never a wall of wrapped text — a long
   command/path clips with an ellipsis (JS truncates it too, this is the
   backstop) and the full value is still there on hover as a tooltip. */
.tool-head-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-arg{color:var(--muted);font-weight:400}
.tool-head .tag{margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--r);letter-spacing:.03em;text-transform:uppercase}
.tool-head .tag.ok{color:var(--good);background:transparent;box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
.tool-head .chev{margin-left:auto;width:8px;height:8px;color:var(--dim);flex:none;transition:transform .18s ease;transform:rotate(90deg)}
.tool-head .tag ~ .chev{margin-left:0}
.tool.collapsed .tool-head .chev{transform:rotate(0deg)}
.tool-head .tag.err{color:var(--bad);background:transparent;box-shadow:inset 0 0 0 1px rgba(236,124,114,.45)}
/* Open by default — a tool call reads as "here's what happened," not a
   question you have to click to answer. The grid-rows trick animates height
   smoothly (a plain display toggle can't be animated), collapsing is the
   opt-out for when a turn gets long and you want to skim past one. */
.tool-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s ease}
.tool.collapsed .tool-collapse{grid-template-rows:0fr}
/* The body sits a full step down from the head — smaller, dimmer, and now a
   deliberately DIFFERENT font (prose is sans, everything else stays mono) so
   the two are never confusable at a glance, the core complaint this fixes. */
.tool-body{overflow:hidden;min-height:0;margin-top:5px;padding-left:17px;border-left:1px solid var(--line);font-family:var(--mono);font-size:11.5px;line-height:19px;color:var(--dim);display:flex;flex-direction:column;gap:6px}
.tool-body .dim-l.prose{font-family:var(--body);font-size:12.5px;line-height:19px;color:var(--muted);white-space:normal;word-break:break-word}
.tool-body .dim-l:not(.prose){white-space:pre-wrap;word-break:break-word}
/* A real command/diff/output block — visually a piece of CODE, set apart from
   the plain narrative line above it with a faint panel instead of running
   straight into the text. */
.tool-detail{background:var(--glass-2);border-radius:var(--r);padding:8px 10px}
.tool-detail.is-diff{font-family:var(--mono);padding:6px 0;overflow:hidden}
/* Editor-style diff: added lines tinted green, removed lines red, each line
   a full-width band like any code review tool. */
.diff-block{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--dim)}
.diff-line{white-space:pre-wrap;word-break:break-word;padding:0 10px;border-left:2px solid transparent}
.diff-line.diff-add{color:#D4EBDB;border-left-color:var(--good)}
.diff-line.diff-del{color:#EFD3CF;border-left-color:var(--bad)}
.diff-sign{display:inline-block;width:1.2em;font-weight:700;user-select:none}
.diff-add .diff-sign{color:var(--good)}
.diff-del .diff-sign{color:var(--bad)}
.diff-line.diff-hunk{color:var(--muted);opacity:.75}
.chat-trunc .trunc-fade{background:linear-gradient(to bottom, transparent, var(--glass))}
.tool-detail .chat-trunc .trunc-fade{background:linear-gradient(to bottom, transparent, var(--glass-2))}
/* Expanded means ALL of it — the shared .trunc cap (2000px) cut long diffs off. */
.chat-trunc.open .trunc-body{max-height:none}
/* The collapsed fade is a MASK on the content, not a gradient painted over it —
   the overlay smeared a dark wash across coloured diff lines. */
.chat-trunc .trunc-fade{display:none}
.chat-trunc:not(.open) .trunc-body{
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent);
  mask-image:linear-gradient(to bottom, #000 55%, transparent);
}

/* ── Tool rows (Chat view only — .tool is hidden outside chat-mode) ───────
   No box: a row is an icon badge in the colour of the KIND of work, a verb
   (doing → done), the target, a short fact and the outcome on the right.
   Only real code (diffs, command output) gets a panel.
   One colour per family, far enough apart to tell at a glance:
     looking  read #74B6FF blue · search/explore #56CFE1 cyan
     changing edit/write green
     running  commands #E8B45F amber
     outside  web #F28FC0 pink · MCP #D9A0F5 orchid
     agents   #A99BFF violet
   Red only ever means failed. */
.tool{
  --tk:var(--muted);
  /* flex:none — .chat-body is a flex column; without it a row can be squashed. */
  position:relative;gap:0;flex:none;
}
.tool[data-kind="error"],.tool.failed{--tk:var(--bad)}
/* Back-to-back steps sit close together, reading as one run of work. */
.tool + .tool{margin-top:-6px}
.tool-meta{margin-left:auto;flex:none;font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.tool-meta:empty{display:none}
.tool-meta + .tool-status{margin-left:8px}
.tool-meta:empty + .tool-status{margin-left:auto}
.tgr-meta{margin-left:8px;color:var(--dim);font-family:var(--mono);font-size:10.5px;white-space:nowrap;flex:none}

.tool .tool-head{margin:-5px -6px;padding:5px 6px;gap:9px;font-family:var(--body);font-size:13px;line-height:20px}
/* A status dot, not an icon: white by default, green once an edit / write / check / command
   has gone through, red when it failed. It blinks while the step runs and is still after. */
.tool{--dot:var(--dot-white)}
.tool.ok[data-kind="edit"],.tool.ok[data-kind="write"],.tool.ok[data-kind="check"],.tool.ok[data-kind="run"]{--dot:var(--good)}
.tool.failed,.tool[data-kind="error"]{--dot:var(--bad)}
.tool.declined{--dot:var(--dim)}
.tool-ico{width:22px;height:22px;flex:none;display:grid;place-items:center}
.tool-ico svg{display:none}
.tool-ico::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot);transform:translateY(1px)}
.tool.running > .tool-head .tool-ico::before{animation:dotblink 1.1s ease-in-out infinite}
.tool-verb{font-weight:600;color:var(--text)}
.tool .tool-arg{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:5px}
.tool-status{margin-left:auto;flex:none;width:16px;height:16px;display:grid;place-items:center}
.tool .tool-head .chev{margin-left:0}
.tool .tool-head .tool-status::before{content:none!important;animation:none!important}
.tool.running > .tool-head .tool-status::before{
  content:'';width:11px;height:11px;border-radius:50%;box-sizing:border-box;
  border:1.5px solid color-mix(in srgb, var(--tk) 25%, transparent);border-top-color:var(--tk);
  animation:tool-spin .8s linear infinite;
}
.tool.ok > .tool-head .tool-status::before{content:'\2713';color:var(--good);font-size:12px;font-weight:700}
.tool.failed > .tool-head .tool-status::before{content:'\2717';color:var(--bad);font-size:12px;font-weight:700}
@keyframes tool-spin{to{transform:rotate(360deg)}}
.diff-stats{margin-left:auto;display:flex;gap:6px;flex:none;font-family:var(--mono);font-size:11px;font-weight:600}
.diff-stats + .tool-status{margin-left:4px}
.diff-stats .a{color:var(--good)}
.diff-stats .d{color:var(--bad)}

/* Body content lines up under the verb, not the icon; code panels run full width. */
.tool .tool-body{margin-top:4px;padding-left:31px;border-left:none}
.tool .tool-body:empty{display:none}
.tool .tool-detail{margin-left:0}
.sh-block{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--muted)}
.sh-line{white-space:pre-wrap;word-break:break-word}
.sh-line.sh-ok{color:var(--good);font-weight:600;margin-top:3px}
.sh-line.sh-fail{color:var(--bad);font-weight:600;margin-top:3px}

/* A sub-agent's own tool calls, nested under its block — one level deeper than
   .tool-body's guide line, same plain-line treatment, no boxes. */
.subagent-rail{display:flex;flex-direction:column;gap:3px}
.subagent-row{display:flex;align-items:center;gap:6px;color:var(--muted)}
.subagent-row .dot{width:5px;height:5px;border-radius:50%;background:var(--dot-white);flex:none}
.subagent-row .dot.pulsing{animation:dotblink 1.1s ease-in-out infinite}
.subagent-row.err .dot{background:var(--bad)}
.subagent-row .srt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Consecutive discovery calls (reads, searches) fold into one block instead
   of each filling a full row — same list-of-rows treatment as a sub-agent's
   nested calls, just at the top level. */
/* Steps of one group stack two or three to a line (as many as fit), each keeping its own dot. */
.tool-group-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 16px}
.tool-group-row{display:flex;align-items:center;gap:6px;min-width:0;color:var(--dim);font-size:11.5px}
.tool-group-row .dot{width:5px;height:5px;border-radius:50%;background:var(--dot-white);flex:none}
.tool-group-row .dot.pulsing{animation:dotblink 1.1s ease-in-out infinite}
.tool-group-row.err .dot{background:var(--bad)}
.tool-group-row .tgr-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-group-count{color:var(--dim);font-weight:400}

/* ── Settings modal ───────────────────────────────────────────────────── */
.settings-overlay{
  position:fixed;inset:0;z-index:200;
  background:var(--scrim);
  display:flex;align-items:center;justify-content:center;
  padding:32px;
}
.settings-overlay[hidden]{display:none}
.settings-modal{
  width:min(860px,100%);height:min(620px,100%);
  background:var(--glass);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -20px var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
}
.settings-head{
  display:flex;align-items:center;justify-content:space-between;
  height:50px;padding:0 10px 0 20px;flex:none;
  border-bottom:1px solid var(--line);
}
.settings-head h2{font-family:var(--display);font-size:17px;font-weight:560;letter-spacing:-.01em;font-variation-settings:'SOFT' 60,'opsz' 24}
.settings-close{width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;color:var(--dim)}
.settings-close:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.settings-close svg{width:14px;height:14px}

.settings-body{flex:1;min-height:0;display:flex}
.settings-nav{
  width:196px;flex:none;overflow-y:auto;
  padding:12px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;
}
.settings-nav button{
  display:flex;align-items:center;gap:9px;
  /* Whole pixels: a 34px row with an 18px text line, so the icon and the text share one centre line
     (an inherited 1.55 line height made 35.4px rows on half pixels, and the pair looked off-centre). */
  height:34px;padding:0 10px;line-height:18px;border-radius:var(--r);
  font-size:12.5px;font-weight:500;color:var(--muted);text-align:left;
}
.settings-nav button svg{width:14px;height:14px;flex:none;color:var(--dim)}
.settings-nav button:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.settings-nav button.active{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.settings-nav button.active svg{color:var(--text)}

.settings-panel{flex:1;min-width:0;overflow-y:auto;padding:22px 26px 30px;display:none;flex-direction:column}
.settings-panel.active{display:flex}
.settings-section-title{font-family:var(--display);font-size:17px;font-weight:560;letter-spacing:-.01em;font-variation-settings:'SOFT' 60,'opsz' 24;margin-bottom:4px}
.settings-section-desc{font-size:12px;color:var(--dim);margin-bottom:6px;max-width:52ch}

.settings-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.settings-row:last-child{border-bottom:none}
.settings-row-icon{
  width:30px;height:30px;border-radius:var(--r);flex:none;
  display:grid;place-items:center;background:var(--glass-2);color:var(--muted);
}
.settings-row-icon svg{width:14px;height:14px}
.settings-row-main{display:flex;align-items:center;gap:11px;min-width:0}
.settings-row-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.settings-row-label .t{font-size:13px;font-weight:600;color:var(--text)}
.settings-row-label .d{font-size:11.5px;color:var(--dim)}
.settings-row-actions{display:flex;align-items:center;gap:8px;flex:none}

/* A status beside its buttons: the same 26px height as they are, so a row reads as one line.
   Connected is in use, so it is purple (white text inside); not connected is a plain grey
   outline with dim text. No fills. Capitals sit high, so 1px more room above than below. */
.settings-badge{
  display:inline-flex;align-items:center;height:var(--control-h);padding:1px 10px 0;
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  border-radius:var(--r);text-transform:uppercase;letter-spacing:.04em;
  flex:none;
}
.settings-badge.ok{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.settings-badge.off{color:var(--dim);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}

.settings-btn{
  display:inline-flex;align-items:center;justify-content:center;height:var(--control-h);
  font-size:11.5px;font-weight:600;padding:0 12px;border-radius:var(--r);
  color:var(--text);background:transparent;flex:none;box-shadow:inset 0 0 0 1px var(--line-2)
}
.settings-btn:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.settings-btn.ghost{color:var(--text);background:transparent}
.settings-btn.ghost:hover{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}

/* Provider rows are one line of text under the name, however long the list of models is. */
#provider-list .settings-row-label .d{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-pin{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--dim);flex:none}
.settings-pin:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.settings-pin.pinned{color:var(--text)}
.settings-pin.locked{opacity:.45;cursor:default}
.settings-pin.locked:hover{background:none}
.settings-pin svg{width:14px;height:14px}
.settings-btn.danger{color:var(--bad);background:transparent;box-shadow:inset 0 0 0 1px rgba(236,124,114,.6)}
.settings-btn.danger:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}

.confirm-overlay{
  position:fixed;inset:0;z-index:300;
  background:var(--scrim);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.confirm-overlay[hidden]{display:none}
.confirm-modal{
  width:min(320px,100%);
  background:var(--glass-3);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -18px var(--shadow);
  padding:18px;
}
.confirm-text{font-size:13px;color:var(--text);margin-bottom:14px;line-height:1.5}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* Several answers (rewind): room for all of them on one row. */
.confirm-modal.wide{width:min(520px,100%)}

/* ── Approval dock ───────────────────────────────────────────────────────
   Sits directly above the composer (same width, same radius) while the agent
   waits on a decision. The composer goes inert underneath, so it reads as
   "answer this first", not as a popup floating over the conversation. */
.approval-dock{
  margin-bottom:8px;
  border-radius:var(--r-lg);border:1px solid rgba(var(--accent-rgb),.38);
  background:var(--glass-2);
  padding:12px 12px 10px;
  animation:ad-in .16s ease-out;
}
@keyframes ad-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.approval-dock{animation:none}}
.ad-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;min-width:0}
.ad-badge{
  flex:none;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text);background:transparent;border-radius:var(--r);padding:2px 7px;box-shadow:inset 0 0 0 1px var(--line-2)
}
.ad-question{font-size:13.5px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* What is being agreed to: labelled rows between faint rules, like the chat's
   code panels. The command is never clipped; a very long one scrolls. */
.ad-detail{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:8px 2px;margin-bottom:8px;max-height:180px;overflow-y:auto;
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:3px;
}
.ad-row{display:contents}
.ad-k{font-size:11.5px;color:var(--dim);line-height:1.6}
.ad-v{font-size:12.5px;color:var(--text);line-height:1.6;white-space:pre-wrap;word-break:break-word;min-width:0}
.ad-v.mono{font-family:var(--mono);font-size:12px;color:var(--code-text)}
.ad-plain{grid-column:1 / -1;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--muted);white-space:pre-wrap;word-break:break-word}

.ad-options{display:flex;flex-direction:column;gap:2px}
.ad-opt{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:6px 8px;border-radius:var(--r);cursor:pointer;
  font-size:13px;color:var(--muted);
}
.ad-opt.on{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.ad-num{
  flex:none;width:18px;height:18px;border-radius:var(--r);display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;color:var(--dim);background:transparent;
}
.ad-opt.on .ad-num{background:transparent;color:var(--text);}
.ad-label{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-opt:not(.ad-text) .ad-label{flex:1 1 auto}
/* The typed answer: "No" and a field on the same row, the field waking up when
   the row is highlighted. */
.ad-input{
  flex:1;min-width:0;background:transparent;border:0;outline:none;
  font-size:13px;color:var(--text);padding:0;
}
.ad-input::placeholder{color:var(--dim)}
.ad-opt.ad-text:not(.on) .ad-input::placeholder{opacity:.6}
.ad-hint{margin-top:8px;padding-left:8px;font-size:11px;color:var(--dim)}
.ad-hint kbd{
  font-family:var(--mono);font-size:10px;color:var(--text);
  background:transparent;border-radius:var(--r-sm);padding:0;margin:0 1px;
}
.cbox textarea:disabled{opacity:.45;cursor:default}

/* On/off switch, built like every other box: an outline, never a fill. Off: grey outline, dim
   knob on the left. On: the selected purple outline, white knob on the right. Even sizes. */
.sw{
  width:36px;height:20px;border-radius:var(--r-lg);position:relative;cursor:pointer;flex:none;
  background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .15s;
}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:var(--r-sm);background:var(--dim);transition:transform .15s,background .15s}
.sw:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.sw.on{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.sw.on:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.85)}
.sw.on::after{transform:translateX(16px);background:var(--text)}

.settings-seg{display:flex;background:transparent;border-radius:var(--r);padding:0;gap:4px;flex:none}
.settings-seg button{display:inline-flex;align-items:center;height:var(--control-h);padding:0 12px;border-radius:var(--r);font-size:11.5px;font-weight:600;color:var(--muted)}
.settings-seg button:hover{color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.settings-seg button.active{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}

.mode-swatch{width:9px;height:9px;border-radius:var(--r-sm);flex:none}

.settings-search{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:8px 12px;margin:14px 0 4px;
  border-radius:var(--r);border:1px solid var(--line-2);background:var(--glass-2);
}
.settings-search:focus-within{border-color:var(--accent)}
.settings-search svg{width:14px;height:14px;color:var(--dim);flex:none}
.settings-search input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--text);font-size:12.5px;font-family:inherit;
}
.settings-search input::placeholder{color:var(--dim)}
.settings-input{
  height:var(--control-h);width:200px;flex:none;padding:0 11px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--glass-2);outline:none;
  color:var(--text);font-size:12.5px;font-family:inherit;transition:border-color .12s;
}
.settings-input::placeholder{color:var(--dim)}
.settings-input:focus{border-color:var(--accent)}
.settings-list{display:flex;flex-direction:column}
.settings-empty{padding:24px 0;text-align:center;font-size:12px;color:var(--dim)}

/* ── Chat pane ───────────────────────────────────────────────────────── */
.chat-head{
  display:flex;align-items:center;gap:8px;
  /* The 1px on top balances the 1px border below, so buttons centre on whole pixels. */
  height:44px;padding:1px 6px 0 16px;border-bottom:1px solid var(--line);flex:none;
  -webkit-app-region:drag;
}
.chat-head > *{-webkit-app-region:no-drag}
.app:not(.side-closed):not(.side-float) .side-open{display:none}
.chat-head .side-open{margin-left:-8px}
.head-actions{margin-left:auto;padding-left:10px}
.shells-wrap:not([hidden]) ~ .head-actions,.limit-meter:not([hidden]) ~ .head-actions{margin-left:14px}
.chat-head .session-pick{
  display:flex;align-items:center;gap:5px;min-width:0;flex:none;
  height:28px;padding:0 10px 0 9px;border-radius:var(--r);
  font-size:11.5px;font-weight:600;
  background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)
}
.chat-head .session-pick:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.chat-head .session-pick .bubble{width:10px;height:10px;color:var(--text);flex:none}
.chat-head .session-pick .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Quick tabs (chat header) ──────────────────────────────────────────── */
.qtabs{display:flex;align-items:center;gap:6px;flex:none}
.qtab-wrap{position:relative}
.qtabs .tab{cursor:pointer}

.qtab-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;
  background:var(--glass-3);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:4px;display:flex;flex-direction:column;gap:1px;
  box-shadow:0 14px 34px -10px var(--shadow);
  min-width:150px;
}
.qtab-menu[hidden]{display:none}
.qtab-menu.up{top:auto;bottom:calc(100% + 6px);box-shadow:0 -14px 34px -10px var(--shadow)}
.qtab-menu.wide{left:0;right:auto;min-width:240px}

/* ── Sessions menu ────────────────────────────────────────────────────
   New session and search first, then the list, grouped by day, that scrolls on
   its own while the top stays put. One line per session: its title and when. */
.session-menu{left:0;right:auto;width:320px;padding:0;gap:0;overflow:hidden}
.sm-top{display:flex;flex-direction:column;gap:6px;padding:8px;border-bottom:1px solid var(--line)}
.sm-new{
  display:flex;align-items:center;justify-content:center;gap:7px;height:32px;border-radius:var(--r);
  font-size:12px;font-weight:600;color:var(--text);
  background:transparent;border:1px solid var(--line-2);
  transition:background .12s,border-color .12s;
}
.sm-new:hover{background:transparent;border-color:rgba(var(--accent-rgb),.7)}
.sm-new svg{width:12px;height:12px;flex:none}
/* The search: the same height as New session above it, whole pixels, and the accent ring while you type in it. */
.sm-search{
  display:flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 10px;border-radius:var(--r);
  background:var(--glass-2);border:1px solid var(--line-2);cursor:text;
}
.sm-search:hover{border-color:rgba(var(--accent-rgb),.7)}
.sm-search:focus-within{border-color:rgba(var(--accent-rgb),.45)}
.sm-search:focus-within:hover{border-color:rgba(var(--accent-rgb),.85)}
.sm-search > svg{width:12px;height:12px;color:var(--dim);flex:none}
.sm-search:focus-within > svg{color:var(--text)}
.sm-search input{flex:1;min-width:0;height:16px;line-height:16px;padding:0;background:none;border:0;outline:none;font-size:12px;color:var(--text)}
.sm-clear{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:var(--r);color:var(--dim);background:transparent}
.sm-clear:hover{color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.sm-clear svg{width:10px;height:10px}
.sm-clear[hidden]{display:none}
.proj-result .si-pin{display:grid;color:var(--dim)}
.sm-search input::placeholder{color:var(--dim)}
.sm-list{max-height:min(380px, 60vh);overflow-y:auto;padding:4px 6px 6px}
.sm-group{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);padding:10px 8px 4px;
}
.sm-group:first-child{padding-top:6px}
.session-item{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 8px 7px 12px;border-radius:var(--r);text-align:left;
}
.session-item:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.si-name{flex:1;min-width:0;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-item:hover .si-name{color:var(--text)}
.si-time{flex:none;font-size:10.5px;color:var(--dim);font-family:var(--mono);font-variant-numeric:tabular-nums}
.session-item.active{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.session-item.active .si-name{color:var(--text);font-weight:600}
.session-item.active .si-time{color:var(--text)}
.sm-empty{padding:18px 10px;text-align:center;font-size:12px;color:var(--dim)}
.qtab-menu.up.left{right:auto;left:0}
#provider-menu{max-height:280px;overflow-y:auto;min-width:150px}
#model-menu{max-height:320px;overflow-y:auto;min-width:220px}
.qtab-menu-item{
  display:flex;align-items:center;gap:7px;
  padding:6px 9px;border-radius:var(--r);
  font-size:11.5px;font-weight:500;color:var(--muted);text-align:left;
}
.qtab-menu-item:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.qtab-menu-item .dot{width:6px;height:6px;border-radius:50%;flex:none}
.qtab-menu-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 9px;font-size:11.5px;color:var(--muted);
}
.qtab-menu-sep{height:1px;background:var(--line);margin:3px 2px}
.qtab-menu-remove{
  padding:6px 9px;border-radius:var(--r);
  font-size:11.5px;font-weight:500;color:var(--bad);text-align:left;
}
.qtab-menu-remove:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}

.chat-body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px 26px;display:flex;flex-direction:column;gap:14px}

.thinking{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--dim);font-style:italic;
}
.thinking .spark{font-style:normal}
.spark{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dot-white);font-size:0;vertical-align:middle;margin-right:2px}


/* A shared, tasteful entrance for anything JS drops into the chat live —
   without it every receipt/tool/card just pops into existence, which reads
   as cheap. Deliberately NOT gated behind prefers-reduced-motion — this is a
   discrete, one-shot signal that something just happened (a reply, a tool
   call), not ambient motion, and Windows' "Show animations" toggle being off
   maps straight to prefers-reduced-motion in Chromium. */
.enter{animation:enter-in .22s cubic-bezier(.22,.61,.36,1) both}
@keyframes enter-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.user-msg{
  align-self:flex-end;max-width:80%;
  background:var(--glass-2);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:9px 12px;
  font-size:13.5px;color:var(--text);
}
/* Chat view is the CLI-style, everything-inline experience — a floating
   right-aligned chat bubble reads as a generic chatbot and undercuts that.
   Here your message becomes a left-aligned prompt line instead, like
   something actually typed at a terminal. */
/* Right-aligned and visibly its own thing — the agent's replies are plain,
   unstyled, left-aligned prose, so your side needs to read differently at a
   glance, not just sit on the other edge. Keeps the mono/prompt-marker
   flavor so it still feels like this session, not a generic chat bubble. */
.split.chat-mode .user-msg{
  align-self:flex-end;max-width:75%;
  /* Plain, like the message box it was typed in: no colour, no marker. */
  background:var(--glass-2);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:8px 13px;
  font-family:var(--mono);font-size:12.5px;color:var(--text);
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
}
/* Sent while a turn was already running — visibly waiting, not silently
   dropped or (worse) indistinguishable from an already-answered message. */
.queued-badge{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-hi);background:var(--tint-3);border-radius:var(--r);padding:2px 6px;flex:none;
}
/* A plain dot, not a text glyph — renders crisp at any size/font, unlike a
   unicode character that can drift between fonts. Distinct shape from the
   agent's sparkle mark below, so the two sides read apart at a glance even
   with the colour and alignment already doing most of that work. */

.caret{display:inline-block;width:2px;height:1em;background:var(--accent-hi);margin-left:1px;vertical-align:text-bottom;animation:caret-blink 1s step-start infinite}
@keyframes caret-blink{50%{opacity:0}}

/* The agent's reply gets a small mark of its own — a plain sparkle, the same
   family as the thinking picker's, so "something is speaking here" reads at a
   glance the way the user's dot does on the other side. Top-aligned with the
   first line, not a big avatar column — this is a mark, not a portrait. */
.msg{display:flex;align-items:flex-start;gap:8px}
.msg-mark{display:block;width:11px;height:11px;color:var(--dot-white);flex:none;margin-top:3px}
.msg.live .msg-mark{animation:dotblink 1.1s ease-in-out infinite}
.msg-body{min-width:0}
.msg-body{flex:1}
/* The inline "about to answer" placeholder — three dots where the reply text
   will land, swapped out the instant real content arrives. */
.thinking-dots{display:flex;gap:4px;align-items:center;height:1.4em;margin:0}
.thinking-dots span{width:5px;height:5px;border-radius:50%;background:var(--dim);animation:thinking-bounce 1.1s ease-in-out infinite}
.thinking-dots span:nth-child(2){animation-delay:.15s}
.thinking-dots span:nth-child(3){animation-delay:.3s}
@keyframes thinking-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
/* Not gated behind prefers-reduced-motion — same reasoning as .enter above:
   this IS the "is it still working" signal, not decoration. */

.msg h3{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;text-wrap:balance}
/* pre-wrap so the model's own paragraph breaks (\n\n) actually show — plain
   `normal` white-space collapses every newline, which is the real reason a
   long multi-paragraph reply read as one unbroken wall of text. */
.msg p{font-size:13.5px;line-height:22px;color:var(--prose);margin-bottom:8px;white-space:pre-wrap}
.msg p:last-child{margin-bottom:0}
.msg code{font-family:var(--mono);font-size:.9em;background:var(--glass-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 5px;color:var(--code-text)}

/* Rendered markdown in agent replies. marked emits <br> for line breaks, so
   paragraphs go back to normal white-space or every break would show twice. */
.md{font-size:13.5px;line-height:22px;color:var(--prose);overflow-wrap:anywhere}
.md p{white-space:normal}
.md > :first-child{margin-top:0}
.md > :last-child{margin-bottom:0}
.md strong{color:var(--text);font-weight:700}
.md em{font-style:italic}
.md del{opacity:.7}
.md a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.md h1,.md h2,.md h3,.md h4{color:var(--text);font-weight:700;letter-spacing:-.01em;line-height:24px;margin:14px 0 6px}
.md h1,.md h2{font-family:var(--display);font-weight:580;letter-spacing:-.012em;font-variation-settings:'SOFT' 60,'opsz' 28}
.md h1{font-size:17px}
.md h2{font-size:15.5px}
.md h3,.md h4{font-size:14px}
.md ul,.md ol{margin:0 0 8px;padding-left:20px}
.md li{margin:2px 0}
.md li::marker{color:var(--dim)}
.md li > p{margin-bottom:4px}
.md blockquote{margin:0 0 8px;padding-left:12px;border-left:2px solid var(--line-2);color:var(--muted)}
.md hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.md pre{margin:0 0 8px;padding:10px 12px;background:var(--glass-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto}
.md pre code{background:none;border:0;padding:0;color:var(--code-text);font-size:12.5px;white-space:pre}
.md table{border-collapse:collapse;margin:0 0 8px;display:block;overflow-x:auto}
.md th,.md td{border:1px solid var(--line);padding:4px 10px;text-align:left}
.md th{color:var(--text);font-weight:600}

.list{display:flex;flex-direction:column;gap:8px;margin:4px 0 2px}
.list .item{position:relative;padding-left:15px;font-size:13.5px;line-height:21px;color:var(--prose)}
.list .item b{color:var(--text);font-weight:700}
.list .item::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--accent)}

.diffcard{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:var(--r-lg);
  background:var(--glass-2);border:1px solid var(--line);
  transition:border-color .12s,background .12s;
}
/* Chat view: strip the box entirely, matching the plain .tool-head line
   Run/Search already use — a card here is inconsistent with everything
   else and reads as a mistake, not a design choice. */
.split.chat-mode .diffcard{
  cursor:pointer;user-select:none;
  padding:4px 6px;margin:-4px -6px;border-radius:var(--r);
  background:none;border:none;
}
.split.chat-mode .diffcard:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.diffcard svg{width:14px;height:14px;color:var(--muted);flex:none}
.diffcard .chev{width:8px;height:8px;color:var(--dim);transition:transform .18s ease;transform:rotate(90deg)}
.diffcard-wrap.collapsed .diffcard .chev{transform:rotate(0deg)}
.diffcard-collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s ease;margin-top:6px}
.diffcard-wrap.collapsed .diffcard-collapse{grid-template-rows:0fr;margin-top:0}
.diffcard-body{
  overflow:hidden;min-height:0;
  padding-left:17px;border-left:1px solid var(--line);
  font-family:var(--mono);font-size:12px;line-height:1.7;display:flex;flex-direction:column;gap:2px;
}

/* A long written/edited file gets a preview height with a fade at the
   bottom, not the whole thing dumped inline — "Show N more lines" reveals
   the rest. Open-by-default is right for a short result; it stops being
   right once a result is hundreds of lines. */
.trunc{position:relative}
.trunc-body{max-height:126px;overflow:hidden}
.trunc.open .trunc-body{max-height:2000px}
.trunc-fade{
  position:absolute;left:0;right:0;bottom:28px;height:32px;
  background:linear-gradient(to bottom, transparent, var(--glass-2));
  pointer-events:none;
}
.trunc.open .trunc-fade{display:none}
.trunc-more{
  display:flex;align-items:center;gap:5px;width:100%;
  padding:6px 0 0;margin-top:2px;
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);
  cursor:pointer;
}
.trunc-more:hover{color:var(--accent)}
.trunc-more svg{width:8px;height:8px;transition:transform .18s ease}
.trunc.open .trunc-more svg{transform:rotate(180deg)}
.diffcard .name{font-family:var(--mono);font-size:12.5px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diffcard .stat{font-family:var(--mono);font-size:11.5px;display:flex;gap:6px;flex:none}
.diffcard .stat .a{color:var(--good)}
.diffcard .stat .d{color:var(--bad)}

.review{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-lg);
  background:transparent;border:1px solid rgba(234,183,103,.25);
}
.review svg{width:14px;height:14px;color:var(--warn);flex:none}
.review .t{flex:1;font-size:12.5px;color:#EFE0BE}
.review button{font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r)}
.review .undo{color:var(--muted)}
.review .undo:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.review .keep{background:var(--text);color:#15161C}
.review .keep:hover{background:#fff}

/* ── Composer ────────────────────────────────────────────────────────── */
.composer{padding:0 14px 12px;flex:none}
.cbox{
  border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:var(--glass-2);
  padding:13px 12px 8px;
}
.cbox:focus-within{border-color:var(--accent)}

/* A marathon is running: the status strip stays, and a light also runs round the composer's
   edge like a runner on a track. It is only a ring, never a fill. */
@property --runner{syntax:'<angle>';initial-value:0deg;inherits:false}
.cbox{position:relative}
.cbox.runner::before{
  content:'';position:absolute;inset:-1px;padding:2px;border-radius:var(--r-lg);pointer-events:none;
  background:conic-gradient(from var(--runner),transparent 0deg,transparent 250deg,rgba(var(--accent-rgb),.25) 300deg,rgba(var(--accent-hi-rgb),.95) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:runner-lap 2.6s linear infinite;
}
/* Not gated behind prefers-reduced-motion: Windows with animations off reports it, and this is the
   one signal that a marathon is running. */
@keyframes runner-lap{to{--runner:360deg}}

/* ── Composer status strip (Chat view) ──────────────────────────────────
   Part of the composer's own flow, so it can never sit on top of the chat;
   opening it shrinks the chat pane, which the auto-follow observer handles.
   grid-template-rows 0fr→1fr animates the height smoothly. */
.cstatus-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease, opacity .22s ease;opacity:0}
.cstatus-wrap.show{grid-template-rows:1fr;opacity:1}
.cstatus{
  min-height:0;overflow:hidden;
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);
}
.cstatus-wrap.show .cstatus{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.cs-spark{width:6px;height:6px;border-radius:50%;background:var(--dot-white);font-size:0;flex:none;animation:dotblink 1.1s ease-in-out infinite;display:inline-block}
@keyframes cs-spin{to{transform:rotate(360deg)}}
/* A light sweeping across the label — reads as "alive" without a spinner. */
.cs-label{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;
  background:linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--text) 50%, var(--muted) 60%, var(--muted) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:cs-shimmer 2.2s linear infinite;
}
@keyframes cs-shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
.cs-time{font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;flex:none}
/* Same look as cs-time — it reads as one continuous "<elapsed> · <tokens>" gauge,
   the same shape the CLI's own status line uses. Hidden (not empty) until output has
   actually streamed, so an empty " · " never flashes before the first token lands. */
.cs-tokens{font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;flex:none}
.cs-hint{margin-left:auto;flex:none;font-size:11px;color:var(--dim)}
.cs-hint kbd{font-family:var(--mono);font-size:10px;padding:0;border-radius:var(--r-sm);background:transparent;color:var(--text)}
/* The old header pill stays for Split view's demo only. */
.cbox textarea{
  width:100%;resize:none;border:none;background:transparent;outline:none;
  font-size:13.5px;color:var(--text);min-height:20px;overflow-y:hidden;
}
.cbox textarea::placeholder{color:var(--dim)}
.crow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px;min-width:0}
/* Takes the free room in the row (up to its full size), so a long model name shortens into it
   before the pair wraps to a line of its own. */
.crow-end{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;flex:1 1 150px;min-width:0;max-width:max-content}
.crow > .spacer{display:none}
.cicon{flex:none;width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--dim)}
.cicon:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.cicon svg{width:14px;height:14px}
/* The tray above the input: what goes out with the next message. */
.attach-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.att{
  position:relative;display:flex;align-items:center;gap:9px;
  height:52px;border-radius:var(--r-lg);cursor:pointer;
  background:var(--glass-3);border:1px solid var(--line-2);
  transition:border-color .12s,background .12s,transform .12s;
}
.att:hover{border-color:rgba(var(--accent-rgb),.45);background:#282934}
.att:active{transform:scale(.98)}
/* Not overflow:hidden on the tile: that also clipped the corner × to a sliver.
   The picture rounds itself instead. */
.att-image{width:52px;padding:0;justify-content:center}
.att-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r)}
.att-file,.att-paste{max-width:230px;padding:0 30px 0 8px}
.att-ico{
  width:34px;height:34px;border-radius:var(--r);flex:none;display:grid;place-items:center;
  background:transparent;color:var(--text);}
.att-paste .att-ico{background:transparent;color:var(--good);}
.att-ico svg{width:18px;height:18px}
.att-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.att-name{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-meta{font-size:10.5px;color:var(--dim);font-family:var(--mono);white-space:nowrap}
.att-x{
  position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--glass-3);border:1px solid var(--line-2);color:var(--muted);
  opacity:0;transition:opacity .12s,background .12s,color .12s;
}
.att:hover .att-x,.att-x:focus-visible{opacity:1}
.att-x:hover{background:transparent;border-color:rgba(236,124,114,.7);color:var(--bad)}
.att-x svg{width:8px;height:8px}

/* ── Attachment viewer ───────────────────────────────────────────────── */
.att-viewer{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:32px;
  background:rgba(6,7,10,.62);backdrop-filter:blur(3px);
  animation:att-fade .14s ease-out;
}
@keyframes att-fade{from{opacity:0}to{opacity:1}}
.att-viewer-card{
  width:min(860px,100%);max-height:100%;display:flex;flex-direction:column;
  background:var(--glass-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 30px 80px -20px var(--shadow);overflow:hidden;
}
.att-viewer[data-kind="image"] .att-viewer-card{width:auto;max-width:100%}
.att-viewer-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--line);flex:none}
.att-viewer-ico{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;background:transparent;color:var(--text);flex:none;}
.att-viewer[data-kind="paste"] .att-viewer-ico{background:transparent;color:var(--good);}
.att-viewer-ico svg{width:16px;height:16px}
.att-viewer-title{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.att-viewer-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-viewer-meta{font-size:11px;color:var(--dim);font-family:var(--mono)}
.att-viewer-close{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--muted);flex:none}
.att-viewer-close:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.att-viewer-close svg{width:12px;height:12px}
.att-viewer-body{min-height:0;overflow:auto;display:flex}
.att-viewer-body img{display:block;max-width:min(1100px, calc(100vw - 64px));max-height:calc(100vh - 150px);object-fit:contain;margin:auto;background:var(--code-bg)}
.att-pre{
  margin:0;padding:14px 16px;flex:1;min-height:120px;max-height:calc(100vh - 150px);overflow:auto;
  font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--code-text);white-space:pre;tab-size:2;
}
.att-pre.att-note{white-space:pre-wrap;font-family:var(--body);color:var(--muted)}
/* The editor never scrolls itself: Chromium draws a textarea's own scrollbar
   with the text I-beam, and no CSS changes that. It grows to fit its text and
   the body around it scrolls. Chromium also KEEPS whatever cursor the mouse had
   when it slides onto a scrollbar, so the body's right padding is an arrow strip
   between the text and the bar, and renderer.js turns the textarea's own right
   edge to the arrow too, so even a fast move arrives at the bar with the arrow. */
.att-viewer[data-kind="paste"] .att-viewer-body{display:block;max-height:calc(100vh - 210px);overflow-y:auto;padding-right:10px}
.att-edit{
  display:block;width:100%;min-height:min(420px, calc(100vh - 220px));resize:none;border:0;outline:none;
  overflow:hidden;padding:14px 16px;background:transparent;color:var(--text);
  font-family:var(--mono);font-size:12px;line-height:1.6;tab-size:2;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.att-viewer-foot{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 16px;border-top:1px solid var(--line);flex:none}
.att-viewer-hint{margin-right:auto;font-size:11px;color:var(--dim)}
.att-viewer-hint{display:inline-flex;align-items:baseline;gap:4px}
.att-viewer-hint kbd{font-family:var(--mono);font-size:10px;color:var(--text);background:transparent;border-radius:var(--r-sm);padding:0;}
.att-btn{height:var(--control-h);padding:0 14px;border-radius:var(--r);font-size:12px;font-weight:500;color:var(--text);background:transparent;border:1px solid var(--line-2)}
.att-btn:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.7)}
.att-btn.primary{background:transparent;border-color:var(--line-2);color:var(--text)}
.att-btn.primary:hover{background:transparent;border-color:rgba(var(--accent-rgb),.85)}

.pick-wrap{position:relative;flex:none}
.crow-end .pick-wrap{flex:0 1 auto;min-width:0}
.c-pick{
  display:flex;align-items:center;gap:6px;max-width:100%;min-width:0;
  height:var(--control-h);padding:0 10px;border-radius:var(--r);
  font-size:12px;font-weight:500;color:var(--muted);
}
/* A long model name shrinks with an ellipsis instead of wrapping onto several lines. */
.c-pick .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-pick:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.c-pick .spark{width:6px;height:6px;margin-right:0}
.c-pick .d{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.c-pick .chev{width:8px;height:8px;color:var(--dim);flex:none}
.menu-label{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);padding:5px 9px 4px;
}
.spacer{flex:1}
.send{
  flex:none;width:30px;height:30px;border-radius:var(--r);
  background:transparent;color:var(--text);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2)
}
.send:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.85)}
.send svg{width:14px;height:14px}
/* No provider connected yet: the button stays in place but does nothing; its tooltip says why. */
.send.locked,.send.locked:hover{opacity:.4;cursor:default;box-shadow:inset 0 0 0 1px var(--line-2)}
/* Doubles as Stop while the agent is working and nothing's typed — the
   control you already know how to find, not a second small button elsewhere
   that's easy to miss. A red ring on hover so "click to stop" reads unambiguously. */
.send.is-stop{background:transparent;color:var(--text);border:0;box-shadow:inset 0 0 0 1px var(--line-2)}
.send.is-stop:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}


/* ── Chat view: agent lane on the left, you on the right ──────────────────
   Everything the agent produces (text, tool rows, diffs, output) lives in one
   lane ~86% of the window wide: a line fills to the lane's edge, then wraps and
   starts again at the left (capped at 1280px for ultrawide screens). Your
   messages sit against the right edge and wrap at 40%, so the two sides
   overlap in the middle and read as one conversation, not two columns. */
.split.chat-mode .chat-body{padding-inline:16px;gap:16px}
.split.chat-mode .chat-body > :not(.user-msg){max-width:min(86%, 1280px)}
.split.chat-mode .user-msg{max-width:40%}
/* A little extra room only where the speaker changes. */
.split.chat-mode .chat-body > .user-msg{margin-block:6px}
/* ONE icon column (22px) + ONE text edge (32px): the agent's dot and every tool
   icon share the column; its words, tool verbs, summaries and diffs all start
   on the same vertical line. */
.msg{gap:10px}
.msg-mark{margin:6px 5.5px 0}
.tool .tool-head{gap:10px}
.tool .tool-body{padding-left:32px}
/* Your bubble flows as text. */
.split.chat-mode .user-msg{display:block}
.split.chat-mode .user-msg .queued-badge,.split.chat-mode .user-msg .img-chip{display:inline-block;margin-left:7px;vertical-align:1px}
/* Your own words in the same typeface as the agent's, not the code font. */
.split.chat-mode .user-msg{font-family:var(--body);font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.img-chip{
  font-family:var(--mono);font-size:10.5px;padding:2px 7px;border-radius:var(--r);
  background:var(--tint-2);color:var(--muted);flex:none;
}
.img-chip.expired{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--tint-line)}

/* ── No sides ────────────────────────────────────────────────────────────
   Code (diffs, command output) sits between a faint top and bottom rule —
   no background box and no left/right edge, so it reads as part of the same
   conversation rather than a separate window beside it. Diff bands fade out
   to the right instead of stopping at a hard edge. */
/* No rules between a row and what it produced: they are told apart by distance instead.
   A header and its own output sit close; the next thing in the chat starts further away. */
.split.chat-mode .tool .tool-detail{background:transparent;border-radius:0;padding:0}
.split.chat-mode .tool .tool-detail.is-diff{padding:2px 0 0}
.split.chat-mode .diff-line{padding:0 10px 0 8px;border-left:none}
/* No fills. A changed line has a thin bar at its edge in its colour (where the changes are),
   and the + / − in the same colour. What was added reads bright; what was removed is dimmed,
   the code that is gone. */
.split.chat-mode .diff-line.diff-add,.split.chat-mode .diff-line.diff-del{background:none}
/* The colours kept very soft: a hint of green or red, never a signal light. */
.split.chat-mode .diff-line.diff-add{color:var(--diff-add);box-shadow:inset 2px 0 0 rgba(111,191,134,.32)}
.split.chat-mode .diff-line.diff-del{color:var(--diff-del);box-shadow:inset 2px 0 0 rgba(236,124,114,.32)}
.split.chat-mode .diff-add .diff-sign{color:rgba(111,191,134,.55)}
.split.chat-mode .diff-del .diff-sign{color:rgba(236,124,114,.55)}
/* The row hugs what it says: facts and ✓ right after the name, not pinned
   to the far edge of the lane; hover highlights only that. */
.split.chat-mode .tool .tool-head{align-self:flex-start;max-width:100%}
.split.chat-mode .tool .tool-meta,
.split.chat-mode .tool .diff-stats{margin-left:10px}
.split.chat-mode .tool .tool-status,
.split.chat-mode .tool .tool-meta:empty + .tool-status{margin-left:8px}
.split.chat-mode .tool .tool-head .chev{margin-left:2px}
/* Open in your editor: faint until the row is hovered. */
.tool-open{
  flex:none;width:22px;height:22px;margin-left:6px;border-radius:var(--r);display:grid;place-items:center;
  color:var(--dim);opacity:.45;transition:opacity .12s,background .12s,color .12s;
}
.tool-head:hover .tool-open,.tool-open:focus-visible{opacity:1}
.tool-open:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.tool-open.failed{color:var(--bad);opacity:1}
.tool-open svg{width:12px;height:12px}
/* A file, folder or site in the agent's words: the same open button as a tool row, inline. */
.path-link{cursor:default}
.inline-open{
  display:inline-grid;place-items:center;width:18px;height:18px;margin:0 1px 0 3px;vertical-align:-3px;
  border-radius:var(--r);color:var(--dim);opacity:.6;transition:opacity .12s,background .12s,color .12s;
}
.inline-open:hover{opacity:1;background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.inline-open.failed{color:var(--bad);opacity:1}
.inline-open svg{width:12px;height:12px}
pre .inline-open{vertical-align:-4px}
.qtab-menu.file-menu{position:fixed;top:0;left:0;right:auto;z-index:60;min-width:200px;max-width:min(460px, 90vw);width:max-content}
.file-menu .qtab-menu-item{gap:10px}
.fm-name{flex:none;color:var(--text);font-family:var(--mono)}
.fm-dir{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-family:var(--mono);font-size:10.5px;margin-left:auto}
/* The target of a tool (the file being edited, the command being run) is the
   row's subject, so it reads brighter than any output: near-white, tinted by
   the kind of work, a touch heavier. Output below stays dim grey. */
.split.chat-mode .tool .tool-arg{
  color:color-mix(in srgb, var(--tk) 32%, var(--text));
  font-weight:500;
}
.composer.asking .cs-hint{display:none}

/* ── Background shells chip + menu (chat header) ─────────────────────────
   The CLI's [BG] bar, as a chip that only exists while something runs. It
   sits at the far right so it never shifts the session/mode tabs around. */
.shells-wrap{margin-left:auto}
.shells-chip{gap:7px;color:var(--good)}
.shells-chip .pulse-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;animation:pulse 1.6s ease-in-out infinite}
.shells-chip.stalled{color:var(--warn)}
@media (prefers-reduced-motion: reduce){.shells-chip .pulse-dot{animation:none}}
/* The commands pop-up is anchored to the pane's right edge (the header's own padding), not to its chip:
   the chip sits beside the limit meter, and a 440px pop-up hung from it ran off the pane's left side. */
.chat-head{position:relative}
.chat-head .shells-wrap{position:static}
.shells-menu{width:min(440px, calc(100% - 32px));max-height:min(480px, 72vh);overflow-y:auto;padding:4px;right:16px}
.shells-menu .menu-label{padding:6px 10px 6px}
.shell-row{padding:10px;border-radius:var(--r);display:flex;flex-direction:column;gap:8px;transition:background .12s}
.shell-row:hover{background:var(--tint)}
.shell-row + .shell-row{margin-top:2px}
.shell-main{display:flex;align-items:flex-start;gap:10px;min-width:0}
.shell-dot{width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px;background:var(--dim)}
.shell-dot.run{background:var(--good);box-shadow:0 0 0 3px var(--good-fill);animation:pulse 1.6s ease-in-out infinite}
.shell-dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-fill);animation:pulse 1.6s ease-in-out infinite}
.shell-dot.ok{background:var(--good)}
.shell-dot.bad{background:var(--bad)}
@media (prefers-reduced-motion: reduce){.shell-dot{animation:none!important}}
.shell-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shell-cmd{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-setup{font-family:var(--mono);font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell-sub{display:flex;align-items:center;gap:0;margin-top:3px;font-size:11px;color:var(--muted);min-width:0}
.shell-sub > span:not(:empty):not([hidden]) ~ span:not(:empty):not([hidden])::before{content:'·';margin:0 7px;color:var(--dim)}
.shell-state{font-weight:600}
.shell-state.run,.shell-state.ok{color:var(--good)}
.shell-state.warn{color:var(--warn)}
.shell-state.bad{color:var(--bad)}
.shell-state.dim{color:var(--dim)}
.shell-port{font-family:var(--mono);font-size:10.5px;color:var(--text)}
.shell-clock{font-family:var(--mono);font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.shell-actions{flex:none;display:flex;gap:6px;align-self:center}
.shell-btn{
  display:inline-flex;align-items:center;gap:5px;height:var(--control-h);padding:0 10px;border-radius:var(--r);
  font-size:11.5px;font-weight:500;color:var(--text);
  background:transparent;border:1px solid var(--line-2);
  transition:background .12s,color .12s,border-color .12s;
}
.shell-btn svg{width:12px;height:12px;flex:none}
.shell-btn:hover{background:transparent;color:var(--text);border-color:rgba(var(--accent-rgb),.7)}
.shell-btn.on{background:transparent;color:var(--text);border-color:rgba(var(--accent-rgb),.35)}
.shell-btn.stop{color:var(--bad);background:transparent;border-color:rgba(236,124,114,.22)}
.shell-btn.stop:hover{background:transparent;color:var(--bad);border-color:rgba(236,124,114,.7)}
.shell-btn:disabled{opacity:.5;pointer-events:none}
.shell-log{
  margin:0 0 0 17px;max-height:240px;overflow:auto;
  font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--code-text);
  white-space:pre-wrap;word-break:break-word;
  background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;
}

/* ── Tool rows that say what happened, not the engine's raw summary ───── */
/* Loaded tool names as small code chips beside the verb. */
.tool-chips{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:7px;vertical-align:1px}
.tool-chip{
  font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:1.5;
  padding:0 6px;border-radius:var(--r);background:var(--glass-2);border:1px solid var(--line);color:var(--muted);
}
/* Searched and found nothing: not a failure, so no red and no check. */
.tool.none > .tool-head .tool-status::before{content:'\2013';color:var(--dim);font-size:12px;font-weight:700}
/* You said no: grey, not an error. */
.tool.declined{--tk:var(--dim)}
.tool.declined > .tool-head .tool-status::before{content:'\2298';color:var(--dim);font-size:12px}
.tool.declined .tool-verb{color:var(--muted)}
/* Nothing to expand: no chevron, no pointer, and no empty body taking space. */
.tool.no-body .chev{display:none}
.tool.no-body .tool-head{cursor:default}
.tool.no-body .tool-collapse{display:none}
.tool.declined .tool-arg{color:var(--dim)}

/* ── Empty chat: composer in the middle, then down to its place ──────────
   A new or empty session in Chat view centres the composer under one quiet
   line. The first event of a turn drops .is-empty: the spacer under the
   composer shrinks to nothing and the line collapses, so the SAME composer
   glides down (nothing is re-created, a half-typed message survives). Split
   view never sees any of this. `.instant` suppresses the glide when a session
   is simply switched to, so only a real first send animates. */
.chat-hero,.chat-bottom-space{display:none}
.split.chat-mode .chat-hero{
  display:grid;grid-template-rows:0fr;opacity:0;flex:none;
  transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.split.chat-mode .chat-hero-clip{min-height:0;overflow:hidden}
.chat-hero-inner{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 20px 22px}
.chat-hero-mark{color:var(--text);font-size:19px;line-height:1}
.chat-hero-text{font-family:var(--display);font-size:25px;font-weight:520;font-variation-settings:'SOFT' 70,'opsz' 48;letter-spacing:-.02em;color:var(--text);text-align:center;text-wrap:balance}
.chat-hero-text b{color:var(--text);font-weight:600;font-style:italic}
.split.chat-mode .pane-chat.is-empty .chat-hero{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease .1s}
.split.chat-mode .chat-bottom-space{display:block;flex:0 0 0;transition:flex-grow .5s cubic-bezier(.2,.8,.2,1)}
/* A touch more room below than above, so the pair sits just above centre. */
.split.chat-mode .pane-chat.is-empty .chat-bottom-space{flex-grow:1.3}
.split.chat-mode .composer{align-self:center;width:100%;transition:width .5s cubic-bezier(.2,.8,.2,1)}
/* The empty chat's box: 760px in the default window (1360px wide, so a 1064px chat beside the sidebar),
   and the same share of the chat below that, so it shrinks with the window instead of eating the margins. */
.split.chat-mode .pane-chat.is-empty .composer{width:min(760px, calc(100% * 760 / 1064))}
/* While the window is being resized the width follows at once, not through the .5s slide. */
html.resizing .split.chat-mode .composer{transition:none}
.split.chat-mode .pane-chat.is-empty .chat-body{overflow:hidden}
.pane-chat.instant,.pane-chat.instant *{transition:none!important}
/* Deliberately NOT gated behind prefers-reduced-motion, same rule as .enter
   above: a short, one-off response to your own send, not ambient motion.
   Without it the box would simply vanish from the middle and reappear at the
   bottom, which reads as a glitch rather than as the chat starting. */

/* ── Mode menu ────────────────────────────────────────────────────────────
   Each mode as an icon badge in its own colour (--mc), its name, and the
   engine's one-line description; the current one carries a check. The unpin
   action is a quiet footer, not a red block that wraps. */
.mode-menu{min-width:232px;padding:4px;left:0;right:auto}
.mode-item{gap:10px;padding:8px 10px;align-items:center}
.mode-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mode-name{font-size:12px;font-weight:600;color:var(--text)}
.mode-desc{font-size:10.5px;font-weight:400;color:var(--dim);white-space:nowrap}
.mode-check{width:12px;height:12px;flex:none;color:var(--text);opacity:0}
.mode-item.active{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.mode-item.active .mode-check{opacity:1}
.mode-unpin{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:11px;font-weight:500;color:var(--dim);padding:6px 9px;
}
.mode-unpin svg{width:12px;height:12px;flex:none}
.mode-unpin:hover{color:var(--bad);background:transparent;box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}
.paste-chip{display:inline-block;font-family:var(--mono);font-size:11px;padding:1px 8px;border-radius:var(--r);background:transparent;color:var(--good);vertical-align:1px;box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
.att-broken{color:var(--muted)} .att-broken > svg{width:20px;height:20px}

/* ── Drop overlay (drag files, photos or text onto the chat) ─────────── */
.pane-chat{position:relative}
.drop-overlay{
  position:absolute;inset:8px;z-index:40;border-radius:var(--r-lg);pointer-events:none;
  display:grid;place-items:center;
  background:rgba(18,19,23,.86);border:1.5px dashed rgba(var(--accent-rgb),.65);
  animation:att-fade .12s ease-out;
}
.drop-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:24px}
.drop-card svg{width:34px;height:34px;color:var(--accent-hi);margin-bottom:4px}
.drop-title{font-size:17px;font-weight:600;color:var(--text)}
.drop-sub{font-size:12px;color:var(--muted)}

/* ── Approval dock: plan and question kinds ─────────────────────────────
   Same box as a Sentinel permission; the badge colour says which kind. A plan
   is shown in full as formatted text in a taller scrolling area. */
.approval-dock[data-kind="plan"] .ad-badge{color:var(--warn);background:transparent;box-shadow:inset 0 0 0 1px rgba(234,183,103,.45)}
.approval-dock[data-kind="plan"]{border-color:rgba(234,183,103,.35)}
.approval-dock[data-kind="question"] .ad-badge{color:var(--good);background:transparent;box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
.approval-dock[data-kind="question"]{border-color:rgba(111,191,134,.35)}
.ad-detail.is-plan{display:block;max-height:min(46vh, 420px);padding:10px 4px 10px 2px}
.ad-detail.is-plan .md{font-size:12.5px}
.ad-detail.is-plan .md h1,.ad-detail.is-plan .md h2,.ad-detail.is-plan .md h3{margin-top:8px}

/* ── Agents bar + agent views ────────────────────────────────────────── */
.agents-bar{
  display:flex;align-items:center;gap:6px;padding:6px 16px;border-bottom:1px solid var(--line);flex:none;
  overflow-x:auto;scrollbar-width:none;
}
.agents-bar::-webkit-scrollbar{display:none}
/* One compact line per agent, the same height as the header tabs. */
.agent-chip{
  display:flex;align-items:center;gap:7px;flex:none;max-width:280px;height:28px;
  padding:0 11px 0 9px;border-radius:var(--r);text-align:left;
  background:transparent;border:1px solid var(--line-2);
  transition:background .12s,border-color .12s;
}
.agent-chip:hover{background:transparent;border-color:rgba(var(--accent-rgb),.7)}
.agent-chip.active{background:transparent;border-color:rgba(var(--accent-rgb),.45)}
.agent-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ac-text{display:flex;align-items:baseline;gap:6px;min-width:0}
.ac-name{font-size:11.5px;font-weight:600;color:var(--text);flex:none}
.ac-last{font-size:10.5px;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ac-last:empty{display:none}
.ac-status{width:12px;height:12px;flex:none;display:grid;place-items:center}
/* The same dot as every other row: white, blinking while it works and still when it is done,
   red if it failed. */
.ac-status::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot-white)}
.agent-chip.running .ac-status::before{animation:dotblink 1.1s ease-in-out infinite}
.agent-chip.failed .ac-status::before{background:var(--bad)}
.agent-chip.done .ac-last,.agent-chip.failed .ac-last{color:var(--dim)}

.agent-body{flex:1;min-height:0;display:flex;flex-direction:column}
.agent-body[hidden]{display:none}
.agent-scroll{flex:1;min-height:0;overflow-y:auto}
.agent-list{display:flex;flex-direction:column;gap:12px;padding:16px 28px 24px;max-width:min(86%, 1280px)}
.agent-task{border-left:2px solid var(--line-2);padding:2px 0 2px 12px}
.agent-task-label{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.agent-task-text{margin-top:3px}
.agent-working{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.agent-result{border-radius:var(--r-lg);padding:10px 14px;background:transparent;border:1px solid rgba(111,191,134,.25)}
.agent-result.failed{background:transparent;border-color:rgba(236,124,114,.25)}
.agent-result-head{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--good);margin-bottom:4px}
.agent-result.failed .agent-result-head{color:var(--bad)}
.agent-open{
  margin-left:10px;height:22px;padding:0 9px;border-radius:var(--r);flex:none;
  font-size:11px;font-weight:500;color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)
}
.agent-open:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
/* Watching a sub-agent: the composer is read only and says so by looking it. */
.composer.read-only .cbox{opacity:.55;pointer-events:none}

/* ── First launch (renderer.js "First launch"): no project hides Run and the project-only rows in
   General (MINDWEAVE.md, the Run command); no key swaps the model pickers
   and the context meter for one "Connect a provider" button. */
body.no-project #proj-pick .chev,body.no-project #run-btn,body.no-project .notes-row,body.no-project .settings-group:has(+ #run-cmd-row),body.no-project #run-cmd-row{display:none}
.composer.needs-key #think-pick,.composer.needs-key #provider-pick,.composer.needs-key #model-pick,
.composer.needs-key #ctx-meter,.composer.needs-key #marathon-btn{display:none!important}

/* ── Chat backdrop: plain, no glow. The header and agents bar match it. ── */
.split.chat-mode .pane-chat{background:var(--glass)}
.split.chat-mode .chat-head,
.split.chat-mode .agents-bar{background:var(--glass)}

/* ── Settings > General: groups, and the MINDWEAVE.md card ─────────────── */
.settings-group{
  margin:22px 0 2px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);
}
.settings-section-desc + .settings-group{margin-top:14px}
.settings-row:has(+ .settings-group){border-bottom:none}
.settings-row.notes-row{flex-direction:column;align-items:stretch;gap:10px}
.notes-card{
  border:1px solid var(--line-2);background:var(--glass-2);border-radius:var(--r-lg);
  padding:10px 12px 11px;cursor:pointer;outline:none;
  transition:border-color .12s,background .12s;
}
.notes-card:hover{border-color:rgba(var(--accent-rgb),.45);background:var(--card-hover)}
.notes-card:focus-visible{border-color:var(--accent)}
.notes-card-head{display:flex;align-items:center;gap:9px}
.notes-card-ico{
  width:24px;height:24px;border-radius:var(--r);display:grid;place-items:center;flex:none;
  background:transparent;color:var(--text);}
.notes-card-ico svg{width:14px;height:14px}
.notes-card-name{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text)}
.notes-card-meta{font-size:11px;color:var(--dim);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes-card-actions{display:flex;gap:6px;flex:none}
.notes-card-preview{
  margin:9px 0 0;padding:9px 11px;border-radius:var(--r);background:var(--glass);
  font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--muted);
  white-space:pre-wrap;word-break:break-word;max-height:calc(1.55em * 4 + 18px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent);
}
.notes-card-preview.empty{-webkit-mask-image:none;mask-image:none;font-family:var(--body);color:var(--dim);font-style:italic}
/* The notes editor reuses the attachment viewer, above the Settings window. */
.att-viewer.over-settings{z-index:260}
.att-viewer[data-kind="notes"] .att-viewer-ico{background:transparent;color:var(--text);}
.att-viewer[data-kind="notes"] .att-viewer-body{display:block;max-height:calc(100vh - 210px);overflow-y:auto;padding-right:10px}

/* ── Settings > Providers: detail screen ──────────────────────────────── */
#provider-list .settings-row.has-detail{cursor:pointer}
#provider-list .settings-row.has-detail:hover .settings-row-label .t{color:var(--accent-hi)}
#provider-list .settings-row.has-detail:hover .row-chev{color:var(--text);transform:translateX(2px)}
.row-chev{width:12px;height:12px;color:var(--dim);flex:none;transition:transform .12s,color .12s}

.pd-back{
  display:inline-flex;align-items:center;gap:5px;margin:-4px 0 16px -6px;padding:5px 9px 5px 6px;
  border-radius:var(--r);font-size:12px;font-weight:600;color:var(--muted);
}
.pd-back:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.pd-back svg{width:12px;height:12px}

.pd-head{display:flex;align-items:center;gap:14px}
.pd-mark{
  width:46px;height:46px;border-radius:var(--r-lg);flex:none;display:grid;place-items:center;
  font-size:20px;font-weight:700;color:var(--text);
  background:linear-gradient(145deg,var(--glass-3),var(--glass-2));border:1px solid var(--line-2);
}
.pd-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pd-title h3{margin:0;font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.pd-title span{font-size:12px;color:var(--dim)}
.pd-about{margin:14px 0 18px;font-size:13px;line-height:1.65;color:var(--muted);max-width:62ch}

.pd-connect{
  display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:var(--glass-2);
}
.pd-connect.is-on{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
.pd-connect-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pd-connect-text .t{font-size:13px;font-weight:600;color:var(--text)}
.pd-connect-text .d{font-size:11.5px;color:var(--dim)}
.pd-key{display:flex;gap:8px}
.pd-key input{
  flex:1;min-width:0;height:var(--control-h);padding:0 11px;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--glass);outline:none;color:var(--text);font-size:12.5px;font-family:var(--mono);
}
.pd-key input:focus{border-color:var(--accent)}
.pd-key input::placeholder{color:var(--dim);font-family:var(--body)}
.pd-key .settings-btn{padding:0 16px}
.pd-key .settings-btn:disabled{opacity:.45;cursor:default}
/* Under a key box it is a button: grey outline at rest, its left edge on the box's left edge. */
.pd-connect > .pd-link,.km-add > .pd-link{align-self:flex-start;height:var(--control-h);padding:0 10px;box-shadow:inset 0 0 0 1px var(--line-2)}
.pd-connect > .pd-link:hover,.km-add > .pd-link:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}

.pd-section{margin-top:24px}
.pd-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.pd-section-head .settings-group{margin:0}
.pd-unit{font-size:11px;color:var(--dim)}
.pd-table{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pd-model{
  display:grid;grid-template-columns:minmax(0,1fr) repeat(4,78px);align-items:center;gap:8px;
  padding:11px 14px;border-top:1px solid var(--line);
}
.pd-model:not(.pd-th):hover{background:var(--tint)}
.pd-th{
  border-top:none;background:var(--glass-2);padding-top:8px;padding-bottom:8px;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
}
.pd-model-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.pd-model-name .n{font-size:13px;font-weight:600;color:var(--text)}
.pd-model-name .id{font-family:var(--mono);font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-model-name .tags{display:flex;gap:4px;margin-top:4px}
.pd-model-name .tags:empty{display:none}
.pd-tag{
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:1.5px 6px;border-radius:var(--r);background:var(--glass-3);color:var(--muted);
}
.pd-num{text-align:right;font-family:var(--mono);font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}
.pd-num.dim{color:var(--muted)}
.pd-th .pd-num{font-family:var(--body);font-size:10px;color:var(--dim)}

.pd-links{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 12px}
.pd-link{
  display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:var(--r);
  font-size:12px;font-weight:600;color:var(--text);
}
/* Link buttons under a provider/About/Analytics page: ONE 1px ring (an inset shadow, no border on top of
   it, which made the hover ring 2px), one control tall like every other text button. */
.pd-links .pd-link{height:var(--control-h);padding:0 11px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted)}
.pd-link:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.pd-link svg{width:10px;height:10px}
.pd-disclosure{
  margin:0;padding-top:12px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.6;color:var(--dim);
}
.pd-table.no-write .pd-model{grid-template-columns:minmax(0,1fr) repeat(3,84px)}
/* A runtime on this computer has no prices: one column, the model. */
.pd-table.local .pd-model{grid-template-columns:minmax(0,1fr)}
/* Ollama's "Check again": the icon (14 in the 28px button) turns while it looks. Not gated by reduced
   motion: it is the only sign that something is happening. The width stays when the label changes. */
/* The buttons on the right of a connect box: Get Ollama (a link made a button) and Check again. */
.pd-actions{display:flex;align-items:center;gap:8px;flex:none}
.pd-actions .pd-link{height:var(--control-h);padding:0 10px;box-shadow:inset 0 0 0 1px var(--line-2)}
.pd-actions .pd-link:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
/* Where Ollama runs: the two choices, then (for another address) a field and Save, then one line of warning. */
.pd-where{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pd-where .pd-key{align-self:stretch}
.pd-key[hidden]{display:none}
.pd-where-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--dim)}
.pd-where-note:empty{display:none}
.pd-where-note.err{color:var(--bad)}
.pd-check{gap:6px;min-width:120px}
.pd-check svg{width:14px;height:14px;flex:none}
.pd-check.busy{pointer-events:none}
.pd-check.busy svg{animation:tool-spin .8s linear infinite}
.pd-model[hidden]{display:none}
.pd-model-note{margin-top:5px;font-size:11px;line-height:1.45;color:var(--warn);max-width:46ch}
.pd-empty{padding:18px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);text-align:center}
.pd-filter{margin:0 0 8px}
.pd-notes{margin:10px 0 0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:4px}
.pd-notes li{font-size:11.5px;line-height:1.5;color:var(--muted)}
.pd-notes li::marker{color:var(--dim)}
.pd-tools{display:flex;gap:8px;margin:0 0 8px}
.pd-tools .pd-filter{flex:1;margin:0}
.pd-sort-wrap{position:relative;flex:none}
.pd-sort-btn{
  height:100%;display:flex;align-items:center;gap:7px;padding:0 11px 0 10px;
  border-radius:var(--r);border:1px solid var(--line-2);background:transparent;
  font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;
  transition:border-color .12s,color .12s;
}
.pd-sort-btn:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.7)}
.pd-sort-btn.open{color:var(--text);border-color:rgba(var(--accent-rgb),.45)}
.pd-sort-btn.sorted{color:var(--accent-hi)}
.pd-sort-btn svg{width:14px;height:14px;flex:none}
.pd-sort-btn .chev{width:10px;height:10px;opacity:.7;transition:transform .12s}
.pd-sort-btn.open .chev{transform:rotate(180deg)}
.pd-sort-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:200px;
  background:var(--glass-3);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:4px;
  display:flex;flex-direction:column;gap:1px;box-shadow:0 14px 34px -10px var(--shadow);
}
.pd-sort-menu[hidden]{display:none}
.pd-sort-head{padding:6px 9px 5px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.pd-sort-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 9px;border-radius:var(--r);font-size:12px;font-weight:500;color:var(--muted);text-align:left;
}
.pd-sort-menu button:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.pd-sort-menu button.active{color:var(--text)}
.pd-sort-menu button.active::after{
  content:"";width:10px;height:6px;border-left:1.5px solid var(--accent-hi);border-bottom:1.5px solid var(--accent-hi);
  transform:rotate(-45deg) translate(1px,-1px);
}

/* ── Settings > Providers > Manage keys ───────────────────────────────── */
.km-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.km-head h3{margin:0 0 3px;font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.km-head span{font-size:12px;color:var(--dim)}
.km-head .settings-btn{padding:7px 14px}
.km-head .settings-btn:disabled{opacity:.45;cursor:default}
.km-error{
  margin:0 0 12px;padding:9px 12px;border-radius:var(--r);font-size:12px;
  color:var(--bad);background:transparent;border:1px solid rgba(236,124,114,.3);
}

.km-list{display:flex;flex-direction:column;gap:8px}
.km-empty{padding:22px;text-align:center;font-size:12px;color:var(--dim);border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.km-key{
  border:1px solid var(--line-2);background:var(--glass-2);border-radius:var(--r-lg);
  transition:border-color .12s,opacity .12s;
}
.km-key.is-live{border-color:rgba(var(--accent-rgb),.45)}
.km-key.is-off{opacity:.6}
.km-key-main{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px}
.km-key-ico{
  width:32px;height:32px;border-radius:var(--r);flex:none;display:grid;place-items:center;
  background:transparent;color:var(--muted);
}
.km-key.is-live .km-key-ico{background:transparent;color:var(--text);}
.km-key-ico svg{width:16px;height:16px}
.km-key-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.km-key-text .n{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:baseline;gap:8px}
.km-key-text .hint{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--dim)}
.km-badges{display:flex;flex-wrap:wrap;gap:5px}
.km-badges:empty{display:none}
.km-badge{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-lg);
}
.km-badge.live{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.km-badge.def{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.km-badge.off{color:var(--dim);background:var(--glass-3)}
.km-badge.bad{color:var(--warn);background:transparent;text-transform:none;letter-spacing:0;font-weight:600;box-shadow:inset 0 0 0 1px rgba(234,183,103,.45)}

.km-more-wrap{position:relative;flex:none}
.km-more{width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;color:var(--dim)}
.km-more:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.km-more svg{width:16px;height:16px}
.km-menu{
  position:absolute;top:calc(100% + 4px);right:0;z-index:20;min-width:180px;
  background:var(--glass-3);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:4px;
  display:flex;flex-direction:column;gap:1px;box-shadow:0 14px 34px -10px var(--shadow);
}
.km-menu[hidden]{display:none}
.km-menu button{padding:7px 9px;border-radius:var(--r);font-size:12px;font-weight:500;color:var(--muted);text-align:left}
.km-menu button:hover:not(:disabled){background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.km-menu button:disabled{opacity:.4;cursor:default}
.km-menu button.danger{color:var(--bad)}
.km-menu button.danger:hover{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}
.km-menu-sep{height:1px;background:var(--line);margin:3px 4px}

.km-edit{display:flex;gap:8px;padding:0 12px 12px 58px}
.km-input{
  height:var(--control-h);min-height:var(--control-h);flex:1;min-width:0;padding:0 11px;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--glass);outline:none;color:var(--text);font-size:12.5px;font-family:inherit;
}
.km-input.mono{font-family:var(--mono)}
.km-input:focus{border-color:var(--accent)}
.km-input::placeholder{color:var(--dim);font-family:var(--body)}

.km-add{
  display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:14px 16px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:transparent;
}
.km-add-title{font-size:13px;font-weight:600;color:var(--text)}
.km-add-row{display:flex;gap:8px}

.km-auto{
  display:flex;align-items:center;justify-content:space-between;gap:18px;margin:16px 0 14px;
  padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--glass-2);
}
.km-auto-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.km-auto-text .t{font-size:13px;font-weight:600;color:var(--text)}
.km-auto-text .d{font-size:11.5px;line-height:1.5;color:var(--dim);max-width:56ch}

/* ── Settings > MCP Servers ───────────────────────────────────────────── */
.mcp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.mcp-head .settings-btn{padding:7px 14px;margin-top:2px}
.mcp-summary{
  display:flex;align-items:center;gap:10px;margin:14px 0 12px;font-size:12px;color:var(--muted);
}
.mcp-summary > span{display:inline-flex;align-items:center;gap:6px}
.mcp-summary .sep{width:3px;height:3px;border-radius:50%;background:var(--dim);opacity:.6}
.mcp-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dim)}
.mcp-dot.ok{background:var(--accent-hi);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.mcp-dot.wait{background:var(--warn);animation:mcp-pulse 1.2s ease-in-out infinite}
.mcp-dot.bad{background:var(--bad)}
.mcp-dot.warn{background:var(--warn)}
.mcp-dot.off{background:var(--glass-3);box-shadow:inset 0 0 0 1px var(--line-2)}
@keyframes mcp-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.mcp-dot.wait{animation:none}}

.mcp-list{display:flex;flex-direction:column;gap:8px}
.mcp-card{
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:var(--r-lg);cursor:pointer;
  border:1px solid var(--line-2);background:var(--glass-2);outline:none;
  transition:border-color .12s,background .12s,opacity .12s;
}
.mcp-card:hover,.mcp-card:focus-visible{border-color:rgba(var(--accent-rgb),.4);background:var(--card-hover)}
.mcp-card:hover .mcp-chev{color:var(--text);transform:translateX(2px)}
.mcp-card.state-disabled{opacity:.62}
.mcp-card.busy{opacity:.55;pointer-events:none}
.mcp-tile{
  width:34px;height:34px;border-radius:var(--r-lg);flex:none;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:var(--text);
  background:transparent;
}
.mcp-card.state-connected .mcp-tile,.mcp-tile.state-connected{color:var(--text);background:transparent;}
.mcp-card.state-failed .mcp-tile,.mcp-tile.state-failed{color:var(--bad);border-color:rgba(236,124,114,.35)}
.mcp-card.state-needs-auth .mcp-tile,.mcp-tile.state-needs-auth{color:var(--warn);border-color:rgba(234,183,103,.35)}
.mcp-tile.big{width:46px;height:46px;border-radius:var(--r-lg);font-size:19px}
.mcp-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mcp-card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mcp-card-top .n{font-size:13px;font-weight:600;color:var(--text);margin-right:2px}
.mcp-chip{
  font-size:10px;font-weight:600;padding:1.5px 7px;border-radius:var(--r-lg);
  color:var(--muted);background:var(--glass-3);
}
.mcp-status{display:flex;align-items:center;gap:7px;min-width:0;font-size:11.5px;color:var(--dim)}
.mcp-status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-card.state-failed .mcp-status-text{color:var(--bad)}
.mcp-card.state-needs-auth .mcp-status-text{color:var(--warn)}
.mcp-chev{width:12px;height:12px;flex:none;color:var(--dim);transition:transform .12s,color .12s}
.mcp-chev svg{width:12px;height:12px;display:block}

.mcp-warn,.mcp-note,.mcp-error{
  display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding:12px 14px;border-radius:var(--r-lg);
}
.mcp-warn{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(234,183,103,.3);background:transparent}
.mcp-warn > div{display:flex;flex-direction:column;gap:3px}
.mcp-warn .t,.mcp-note .t,.mcp-error .t{font-size:12.5px;font-weight:600;color:var(--text)}
.mcp-warn .d,.mcp-note .d{font-size:11.5px;line-height:1.5;color:var(--muted)}
.mcp-note{border:1px solid var(--line-2);background:transparent}
.mcp-note > .pd-link{align-self:flex-start;margin:4px 0 0 -8px}
.mcp-error{border:1px solid rgba(236,124,114,.3);background:transparent}
.mcp-error .d{font-size:11.5px;line-height:1.5;color:var(--bad);white-space:pre-wrap;word-break:break-word}
.mcp-toast{margin:0 0 12px;padding:9px 12px;border-radius:var(--r);font-size:12px;color:var(--bad);background:transparent;border:1px solid rgba(236,124,114,.3)}
.mcp-toast[hidden]{display:none}

.mcp-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:18px;
  padding:34px 24px;border:1px dashed var(--line-2);border-radius:var(--r-lg);
}
.mcp-empty-ico{width:42px;height:42px;border-radius:var(--r-lg);display:grid;place-items:center;background:transparent;color:var(--text);margin-bottom:6px;}
.mcp-empty-ico svg{width:20px;height:20px}
.mcp-empty .t{font-size:14px;font-weight:600;color:var(--text)}
.mcp-empty .d{font-size:12px;color:var(--dim);max-width:40ch;margin-bottom:10px}

.mcp-dhead{display:flex;align-items:center;gap:14px}
.mcp-dtitle{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mcp-dtitle h3{margin:0;font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.mcp-dtitle .mcp-status{margin-left:4px}
.mcp-actions{display:flex;align-items:center;gap:6px;margin:16px 0 14px}
.mcp-actions .grow{flex:1}
.mcp-actions .settings-btn{padding:6px 12px}
.mcp-actions .settings-btn:disabled{opacity:.45;cursor:default}
.settings-btn.danger-text{color:var(--bad)}
.settings-btn.danger-text:hover{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}

.mcp-section{margin-top:18px}
.mcp-section .settings-group{margin:0 0 8px}
.mcp-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.mcp-section-head .settings-group{margin:0}
.mcp-section-head .pd-link{padding:2px 6px}
.mcp-box{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mcp-kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:9px 14px;border-top:1px solid var(--line);font-size:12px}
.mcp-kv:first-child{border-top:none}
.mcp-kv .k{color:var(--dim)}
.mcp-kv .v{color:var(--text);word-break:break-all}
.mcp-kv .mono,.mcp-tool .mono{font-family:var(--mono);font-size:11.5px}
.mcp-tools{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mcp-tool{padding:10px 14px;border-top:1px solid var(--line)}
.mcp-tool:first-child{border-top:none}
.mcp-tool[hidden]{display:none}
.mcp-tool-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mcp-tool-top .n{color:var(--text);font-weight:600}
.mcp-tool-desc{
  margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.mcp-form{display:flex;flex-direction:column;gap:16px}
.mcp-field{display:flex;flex-direction:column;gap:6px}
.mcp-field .l{font-size:12px;font-weight:600;color:var(--text)}
.mcp-field .l em{font-style:normal;font-weight:500;color:var(--dim);margin-left:4px}
.mcp-field .h{font-size:11px;color:var(--dim);line-height:1.45}
.mcp-seg{align-self:flex-start}
.mcp-when{display:flex;flex-direction:column;gap:16px}
.mcp-when[hidden]{display:none}
.mcp-pairs{display:flex;flex-direction:column;gap:6px}
.mcp-pair{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) 28px;gap:6px}
.mcp-pair-x{border-radius:var(--r);color:var(--dim);font-size:16px;line-height:1}
.mcp-pair-x:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.mcp-pair-add{align-self:flex-start;margin-left:-8px}
.mcp-form-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.mcp-form-foot .settings-btn{padding:7px 14px}
.mcp-form-foot .settings-btn:disabled{opacity:.6;cursor:progress}

/* ── Settings > Permissions: plain, the Rules & Skills rows ─────────── */
.rs-bar .perm-show{margin-left:0;font-size:12px;color:var(--muted)}
.perm-mode{margin:2px 0 4px}
.perm-mode .settings-seg{display:inline-flex;flex-wrap:wrap}
.perm-mode .settings-seg button{display:inline-flex;align-items:center;gap:6px}
.perm-sec{margin-top:0}
.perm-head{display:flex;align-items:center;gap:8px}
.perm-addlink{margin-left:auto;display:inline-flex;align-items:center;height:var(--control-h);padding:0 9px;border-radius:var(--r);font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.perm-addlink:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.perm-sub{margin-left:6px;font-size:11px;color:var(--dim)}
.perm-sub.mono,.rs-name .mono{font-family:var(--mono)}
.rs-row.inherited .rs-name{color:var(--muted)}
.perm-sec .rs-new .km-input{flex:1;min-width:200px}
.perm-sec .km-error{margin:8px 0 0}
.perm-select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.perm-select option{background:var(--glass-2);color:var(--text)}
.perm-suggest{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 4px}
.perm-suggest button{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:var(--r-lg);color:var(--muted);border:1px dashed var(--line-2)}
.perm-suggest button:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.5)}
.perm-suggest button::before{content:"+ ";opacity:.6}

/* ── Settings > Rules & Skills: plain list ───────────────────────────── */
.rs-bar{display:flex;gap:6px;margin:14px 0 4px}
.rs-new{display:flex;align-items:center;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.rs-new .km-input{flex:1;min-width:200px}
.rs-group{display:flex;align-items:center;gap:8px;margin:20px 0 3px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;font-weight:650;color:var(--text)}
.rs-count{font-family:var(--mono);font-size:10px;font-weight:700;padding:1px 7px;border-radius:var(--r-lg);color:var(--muted);background:var(--glass-2)}
.rs-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.rs-name{flex:1;min-width:0;font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-name.mono{font-family:var(--mono)}
.rs-scope{flex:none;font-size:10px;font-weight:650;padding:1.5px 7px;border-radius:var(--r-lg)}
.rs-scope.project{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.rs-scope.global{color:var(--good);background:transparent;box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
.rs-actions{display:flex;gap:2px;flex:none}
.rs-actions button{padding:4px 8px;border-radius:var(--r);font-size:11.5px;color:var(--muted)}
.rs-actions button:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.rs-actions button.danger:hover{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}
.rs-empty{padding:6px 0;font-size:12px;color:var(--dim)}
#rs-root .km-error{margin:10px 0 0}
.rs-bar{align-items:center;flex-wrap:wrap}
.rs-to{margin-left:auto;font-size:11px;color:var(--dim)}
.rs-hint{font-size:11.5px;color:var(--dim);margin:0 0 6px}
.rs-notice{margin:10px 0 0;padding:8px 12px;border-radius:var(--r);font-size:12px;color:var(--good);background:transparent;box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
#panel-rules{position:relative}
#panel-rules.rs-dragging::after{
  content:"Drop to add as rules or skills";position:absolute;inset:10px;border-radius:var(--r-lg);pointer-events:none;
  display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--text);
  border:2px dashed var(--accent);background:rgba(20,20,30,.92);box-shadow:inset 0 0 0 999px rgba(var(--accent-rgb),.08);
}
.pname{display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* Rules & Skills "Add to": a dropdown list that holds any number of projects. */
.rs-pick{position:relative;flex:none}
.rs-pick-btn{
  display:flex;align-items:center;gap:7px;height:var(--control-h);padding:0 10px;border-radius:var(--r);min-width:150px;max-width:220px;
  border:1px solid var(--line-2);background:transparent;font-size:12px;font-weight:600;color:var(--text);
}
.rs-pick-btn:hover{border-color:rgba(var(--accent-rgb),.7)}
.rs-pick-btn svg{width:14px;height:14px;flex:none;color:var(--muted)}
.rs-pick-btn .rs-n{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-pick-btn .chev{width:10px;height:10px}
.rs-menu{
  position:absolute;top:calc(100% + 5px);right:0;z-index:30;width:250px;max-height:280px;overflow-y:auto;
  background:var(--glass-3);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:4px;
  display:flex;flex-direction:column;gap:1px;box-shadow:0 14px 34px -10px var(--shadow);
}
.rs-menu[hidden]{display:none}
.rs-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r);font-size:12px;color:var(--muted);text-align:left}
.rs-opt:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.rs-opt.active{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.rs-opt svg{width:14px;height:14px;flex:none}
.rs-opt .rs-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
.rs-open{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:var(--r-lg);color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.rs-opt-sep{padding:6px 9px 3px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

/* ── Settings > Usage ───────────────────────────────────────────────── */
.usage-tabs{display:flex;gap:18px;margin:2px 0 16px;border-bottom:1px solid var(--line)}
.usage-tab{padding:8px 1px 9px;font-size:12.5px;font-weight:600;color:var(--dim);border-bottom:1px solid transparent;transform:translateY(1px)}
.usage-tab:hover{color:var(--muted)}
.usage-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.usage-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.usage-bar .rs-to{margin-left:0}
/* The picker sits near the LEFT of this row (unlike Rules & Skills, where it sits at
   the right end of a toolbar), so its menu has to open rightward, not right-anchored
   off a narrow button — that overflowed clean off the panel's left edge, into the nav. */
.usage-bar .rs-menu{left:0;right:auto}
.usage-banner{font-size:12.5px;color:var(--muted);background:var(--glass-2);border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;margin-bottom:12px}
.usage-banner strong{color:var(--text);font-family:var(--mono)}
.usage-reco{background:transparent;border:1px solid var(--line-2);border-radius:var(--r);padding:10px 12px;margin-bottom:16px}
.usage-reco-head{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px}
.usage-reco-live{font-weight:500;color:var(--dim)}
.usage-reco-note{font-size:11.5px;line-height:1.5;color:var(--muted)}
.usage-presets{flex-wrap:wrap;height:auto}
.usage-tab-desc{margin-top:-4px;margin-bottom:18px}
.usage-custom-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.usage-custom-field{display:flex;align-items:center;gap:9px}
.usage-custom-field .km-input{width:150px;flex:none}
.usage-custom-range{font-size:11px;color:var(--dim);font-family:var(--mono);white-space:nowrap}
.usage-soon{font-size:12.5px;line-height:1.6;color:var(--dim);padding:6px 2px 18px;max-width:440px}

/* ── Settings > Usage > Spend ──────────────────────────────────────────── */
.spend-total{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.spend-total-num{font-size:28px;font-weight:700;color:var(--text);font-family:var(--mono);letter-spacing:-.01em}
.spend-total-label{font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:8px}
.spend-refresh{display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 10px;margin-left:8px;vertical-align:middle;border-radius:var(--r);font-size:11.5px;font-weight:600;color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.spend-refresh:hover:not(:disabled){box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.spend-refresh:disabled{cursor:default}
.spend-refresh.cooldown{color:var(--dim)}
.spend-refresh-ico{width:11px;height:11px;flex:none}
.spend-refresh.spinning .spend-refresh-ico{animation:cs-spin .7s linear infinite}
.spend-trend{display:flex;gap:22px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.spend-trend-item{display:flex;flex-direction:column;gap:2px}
.spend-trend-num{font-size:15px;font-weight:600;color:var(--text);font-family:var(--mono)}
.spend-trend-label{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.spend-list{display:flex;flex-direction:column}
.spend-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.spend-row:last-child{border-bottom:none}
.spend-row-name{font-size:12px;color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spend-row-share{font-size:11px;color:var(--dim);font-family:var(--mono);width:34px;flex:none;text-align:right}
.spend-row-num{font-size:12px;color:var(--text);font-family:var(--mono);width:56px;flex:none;text-align:right}

/* ── Quick tabs: chips pinned to the chat header ───────────────────────── */
.qt-chip{display:inline-flex;align-items:center;gap:6px;max-width:170px}
.qt-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qt-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dim)}
.qt-dot.ok{background:var(--accent-hi)}
.qt-dot.wait{background:var(--warn)}
.qt-dot.bad{background:var(--bad)}
.qt-dot.warn{background:var(--warn)}
.qt-dot.off{background:transparent;box-shadow:inset 0 0 0 1px var(--dim)}
.qt-dot.rs{background:var(--accent)}
.qt-menu{min-width:230px;padding:6px}
.qt-head{display:flex;flex-direction:column;gap:3px;padding:6px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.qt-kind{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.qt-title{font-size:13px;font-weight:650;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qt-status{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.qt-sub{padding:4px 8px 6px;font-size:11.5px;color:var(--dim)}
.qt-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-size:12px;color:var(--text)}
.qt-actions{display:flex;flex-direction:column;gap:1px;padding:2px 0 4px}
.qt-actions button{padding:6px 8px;border-radius:var(--r);font-size:12px;color:var(--muted);text-align:left}
.qt-actions button:hover:not(:disabled){background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.qt-actions button:disabled{opacity:.4;cursor:default}
.qt-remove{width:100%;padding:6px 8px;border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r);font-size:11.5px;color:var(--dim);text-align:left;margin-top:2px}
.qt-remove:hover{color:var(--bad)}
/* Settings > Quick Tabs pin buttons */
.qt-pin{flex:none;padding:4px 11px;border-radius:var(--r);font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line-2)}
.qt-pin:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.45)}
.qt-pin.on{color:var(--text);background:transparent;border-color:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
/* The last row of a section needs no line of its own: the next section's divider is right under it. */
.rs-row:last-child,.rs-row:has(+ .rs-group){border-bottom:none}
/* Row actions: quiet icons that come forward when the row is hovered. */
.rs-actions{gap:2px;align-items:center}
.rs-actions .rs-ib{
  width:28px;height:28px;padding:0;display:grid;place-items:center;border-radius:var(--r);
  color:var(--dim);opacity:.7;transition:opacity .12s,background .12s,color .12s;
}
.rs-actions .rs-ib svg{width:14px;height:14px}
.rs-row:hover .rs-ib{opacity:1;color:var(--muted)}
.rs-actions .rs-ib:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.rs-actions .rs-ib.danger:hover{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px rgba(236,124,114,.7)}
.rs-row .rs-scope{margin-right:4px}

/* ── Composer model picker ─────────────────────────────────────────────── */
#model-menu{min-width:260px;max-height:420px;overflow-y:auto}
#model-menu.mp-big{width:440px;max-height:min(560px,60vh);overflow:hidden;display:flex;flex-direction:column;padding:0}
.mp-top{padding:8px 8px 6px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px;flex:none}
.mp-search{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:var(--r);background:var(--glass-2);border:1px solid var(--line-2)}
.mp-search:focus-within{border-color:var(--accent)}
.mp-search svg{width:14px;height:14px;color:var(--dim);flex:none}
.mp-search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-size:12.5px;font-family:inherit}
.mp-search input::placeholder{color:var(--dim)}
.mp-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mp-chip{padding:3px 9px;border-radius:var(--r-lg);font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--line-2)}
.mp-chip:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.7)}
.mp-chip.on{color:var(--text);background:transparent;border-color:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.mp-sort{margin-left:auto;display:flex;gap:1px}
.mp-sort button{padding:3px 7px;border-radius:var(--r);font-size:11px;color:var(--dim)}
.mp-sort button:hover{color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.mp-sort button.on{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.mp-list{padding:4px;overflow-y:auto;flex:1;min-height:0}
.mp-label{padding:7px 9px 3px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.mp-row{width:100%;display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:var(--r);text-align:left}
.mp-row:hover,.mp-row.kb{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.mp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mp-name{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-meta{display:flex;align-items:center;gap:5px;min-height:0}
.mp-meta:empty{display:none}
.mp-maker{font-size:10.5px;color:var(--dim)}
.mp-tag{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:0 5px;border-radius:var(--r-sm);color:var(--muted);background:var(--glass-3)}
.mp-price{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.mp-free{flex:none;font-size:10px;font-weight:700;padding:1px 7px;border-radius:var(--r-lg);color:var(--good);background:transparent;box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
.mp-check{width:12px;height:12px;flex:none;color:var(--accent-hi);visibility:hidden}
.mp-row.on .mp-check{visibility:visible}
.mp-row.on .mp-name{color:var(--accent-hi)}
.mp-empty{padding:14px 9px;font-size:12px;color:var(--dim)}


/* Settings > General > Run button */
#run-cmd-row .settings-row-label .d .mono{font-family:var(--mono);color:var(--muted)}
.run-actions{display:flex;gap:6px;flex:none}
.run-edit{display:flex;flex-direction:column;gap:8px;padding:13px 0}
.run-edit .km-input{width:100%}
.run-hint{font-size:11px;color:var(--dim)}
.run-hint .mono{font-family:var(--mono);color:var(--muted)}
.run-err{font-size:11.5px;color:var(--bad)}
.run-edit-actions{display:flex;justify-content:flex-end;gap:6px}
.run-edit-actions .settings-btn,.run-actions .settings-btn{padding:6px 12px}

/* ── Pictures in the chat: thumbnails, and the full-window view ── */
.img-thumbs{display:flex;flex-wrap:wrap;gap:6px}
.tool-body .img-thumbs{margin-top:6px}
.user-msg.has-images .img-thumbs{flex-basis:100%}
.split.chat-mode .user-msg.has-images .img-thumbs + span{display:block;margin-top:7px}
.img-thumb{
  padding:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  background:rgba(0,0,0,.25);cursor:zoom-in;line-height:0;
  transition:border-color .12s, transform .12s;
}
.img-thumb:hover{border-color:var(--accent-hi)}
.img-thumb img{display:block;max-height:140px;max-width:220px;object-fit:cover}
.tool-body .img-thumb img{max-height:180px;max-width:320px}
.img-thumb.missing{
  cursor:default;line-height:1.4;padding:6px 9px;font-family:var(--mono);font-size:10.5px;
  color:var(--dim);text-decoration:line-through;
}
.lightbox{
  position:fixed;inset:0;z-index:1000;background:rgba(6,7,12,.88);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;
  animation:enter-in .15s ease-out both;
}
.lightbox[hidden]{display:none}
.lb-img{max-width:calc(100vw - 120px);max-height:calc(100vh - 110px);object-fit:contain;border-radius:var(--r);box-shadow:0 12px 50px rgba(0,0,0,.6)}
.lb-bar{
  position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:12px;
  font-family:var(--mono);font-size:11px;color:var(--muted);pointer-events:none;
}
.lb-meta{color:var(--dim)}
.lb-close,.lb-nav{
  position:absolute;width:34px;height:34px;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--tint);color:var(--text);cursor:pointer;display:grid;place-items:center;
}
.lb-close:hover,.lb-nav:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.lb-close svg,.lb-nav svg{width:12px;height:12px}
.lb-close{top:44px;right:18px}
.lb-nav[hidden]{display:none}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}

/* Files you sent: small cards under the pictures, each opening the file. */
.file-cards{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.user-msg .img-thumbs + .file-cards{margin-top:6px}
.split.chat-mode .user-msg.has-images .file-cards + span{display:block;margin-top:7px}
.file-card{
  display:inline-flex;align-items:center;gap:7px;max-width:240px;
  padding:6px 10px 6px 8px;border-radius:var(--r);border:1px solid var(--line-2);
  background:rgba(0,0,0,.2);color:var(--text);cursor:pointer;
  font-family:var(--mono);font-size:11.5px;line-height:1.2;
  transition:border-color .12s, background .12s;
}
.file-card:hover{border-color:rgba(var(--accent-rgb),.7);background:transparent}
.fc-ico{width:14px;height:14px;flex:none;color:var(--muted);display:grid;place-items:center}
.fc-ico svg{width:14px;height:14px}
.fc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fc-ext{flex:none;font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}

/* Edit and resend: a small pencil beside your message, shown on hover. */
.user-msg{position:relative}
.um-edit{
  position:absolute;left:-30px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:var(--r);border:1px solid transparent;
  background:transparent;color:var(--dim);cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .12s, color .12s, background .12s;
}
.um-edit svg{width:14px;height:14px}
.user-msg:hover .um-edit,.um-edit:focus-visible{opacity:1}
.um-edit:hover{color:var(--text);background:transparent;border-color:rgba(var(--accent-rgb),.7)}
.user-msg .um-edit{display:grid}
/* Send it again: beside Edit on the message, and on the row that says what happened. Grey until pointed at. */
.um-retry{
  position:absolute;left:-60px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:var(--r);border:1px solid transparent;
  background:transparent;color:var(--dim);cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .12s, color .12s, border-color .12s;
}
.um-retry svg{width:14px;height:14px}
.user-msg:hover .um-retry,.um-retry.show,.um-retry:focus-visible{opacity:1}
.um-retry:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.7)}
.row-continue{margin:8px 0 0}
.row-retry{
  flex:none;width:22px;height:22px;margin-left:8px;border-radius:var(--r);border:1px solid var(--line-2);
  background:transparent;color:var(--muted);cursor:pointer;display:inline-grid;place-items:center;vertical-align:middle;
}
.row-retry svg{width:12px;height:12px}
.row-retry:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.7)}

/* Web: the same pieces as every other tool (dim summary line, bordered mono block,
   the shared "Show more"); only the lines themselves are its own: site, title, a tag. */
.chat-trunc.short .trunc-body{max-height:none;-webkit-mask-image:none;mask-image:none}
.chat-trunc.short .trunc-more{display:none}
.web-line{display:flex;gap:10px;align-items:baseline;min-width:0;white-space:nowrap;cursor:pointer}
.web-line:hover .web-title{color:var(--text);text-decoration:underline;text-decoration-color:var(--tint-line);text-underline-offset:2px}
.web-site{flex:none;color:var(--dim)}
.web-title{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.web-line.read .web-title{color:var(--text)}
.web-tag{flex:none;font-size:10.5px;color:var(--dim)}
.web-tag:empty{display:none}
.web-line.read .web-tag{color:var(--good)}
.web-line.bad .web-tag{color:var(--bad)}
.web-in{animation:web-in .45s ease both}
@keyframes web-in{from{opacity:0}to{opacity:1}}

/* ── Testing an app: steps beside the app, live and then recorded ─────────
   A tool row like any other (head, body under the verb, faint rules above and below);
   its body is the steps on the left and the app on the right. */
.lt-live{display:flex;align-items:center;gap:7px;margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--bad);background:transparent;padding:2px 8px;border-radius:var(--r-lg);flex:none;box-shadow:inset 0 0 0 1px rgba(236,124,114,.45)}
.lt-live[hidden]{display:none}
.lt-live i{width:7px;height:7px;border-radius:50%;background:var(--bad);animation:lt-pulse 1.2s ease-in-out infinite}
@keyframes lt-pulse{0%,100%{opacity:1}50%{opacity:.25}}
.lt-score{display:flex;gap:6px;margin-left:10px;font-family:var(--mono);font-size:11px;flex:none}
.lt-score[hidden]{display:none}
.lt-score span{padding:2px 7px;border-radius:var(--r)}
.lt-score .g{color:var(--good);background:transparent;box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
.lt-score .r{color:var(--bad);background:transparent;box-shadow:inset 0 0 0 1px rgba(236,124,114,.45)}
.lt-score .t{color:var(--muted);background:var(--tint)}

.lt-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--body)}
/* Step times are places in the recording: there is no recording until the test ends. */
.uitest.is-live .lt-t{display:none}
/* Other work the agent does mid-test sits in the list as ordinary tool rows. */
.lt-steps > .tool{margin:6px 0}
.lt-steps > .tool + .tool{margin-top:0}
@media (max-width:900px){.lt-body{grid-template-columns:1fr}}

.lt-left{min-width:0;border-right:1px solid var(--line)}
.lt-steps{padding:12px 14px 14px 0;display:flex;flex-direction:column;gap:2px;max-height:430px;overflow-y:auto;overscroll-behavior:contain}
.lt-steps[hidden]{display:none}
.lt-step{display:grid;grid-template-columns:18px 1fr;gap:9px;padding:6px 8px;margin:0 -8px;border-radius:var(--r);cursor:default;transition:background .15s}
.uitest.ok .lt-step,.uitest.failed .lt-step{cursor:pointer}
.lt-step:hover{background:var(--tint)}
.lt-step.now{background:rgba(var(--accent-rgb),.1)}
.lt-st{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;margin-top:1px;font-size:10px;font-weight:800;transition:background .25s,color .25s;box-sizing:border-box}
.lt-st.run{border:1.6px solid var(--line-2);border-top-color:var(--accent-hi);animation:tool-spin .8s linear infinite}
.lt-st.ok{background:transparent;color:var(--good);box-shadow:inset 0 0 0 1px rgba(111,191,134,.45)}
.lt-st.bad{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1px rgba(236,124,114,.45)}
.lt-st.flip{animation:lt-flip .6s ease}
@keyframes lt-flip{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.lt-main{min-width:0}
.lt-line{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.lt-line b{font-weight:600}
.lt-line .what{color:var(--muted)}
.lt-line .el{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:0 5px;margin-left:2px}
.lt-t{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-left:6px}
.lt-why{font-size:12px;margin-top:2px;line-height:1.45;color:var(--good);overflow-wrap:anywhere}
.lt-why.bad{color:var(--bad)}
.lt-why.warn{color:var(--warn)}
.lt-why.lt-wait{color:var(--muted)}
.lt-closed{font-size:12px;color:var(--warn);padding:6px 0 6px 27px}
.lt-say{display:flex;gap:9px;padding:6px 0 6px 1px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.lt-say .msg-mark{width:10px;height:10px;margin:5.5px 3px 0;flex:none;color:var(--dot-white)}
.lt-say .md{min-width:0}
.lt-say .md p{margin:0}

.lt-view{padding:12px 0 14px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.lt-screen{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);background:#0d0e12;aspect-ratio:16/10;user-select:none}
.lt-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none}
.lt-screen.has-frame .lt-frame{display:block}
.lt-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--dim)}
.lt-screen.has-frame .lt-empty{display:none}
.lt-rec{position:absolute;top:8px;right:8px;z-index:2;font-family:var(--mono);font-size:10px;color:#fff;background:rgba(0,0,0,.55);padding:3px 7px;border-radius:var(--r);display:flex;align-items:center;gap:6px}
.lt-rec i{width:6px;height:6px;border-radius:50%;background:#ff4d4d;animation:lt-pulse 1.2s ease-in-out infinite}
.lt-screen.replay .lt-rec{display:none}
.lt-bigplay{position:absolute;inset:0;z-index:3;display:none;place-items:center;background:rgba(0,0,0,.35);cursor:pointer;border:0;padding:0}
.lt-bigplay span{width:54px;height:54px;border-radius:50%;background:rgba(var(--accent-rgb),.9);display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.5);transition:transform .15s}
.lt-bigplay:hover span{transform:scale(1.07)}
.lt-bigplay svg{width:20px;height:20px;margin-left:3px;color:#fff}
.lt-bigplay em{position:absolute;bottom:12px;font-style:normal;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:var(--r)}
.lt-screen.ended .lt-bigplay{display:grid}

.lt-bar{display:flex;align-items:center;gap:10px}
.lt-pp{width:28px;height:28px;border-radius:var(--r);border:1px solid var(--line-2);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;flex:none}
.lt-pp:disabled{opacity:.35;cursor:default}
.lt-pp svg{width:12px;height:12px}
.lt-track{position:relative;flex:1;height:28px;cursor:default}
.lt-track.ready{cursor:pointer}
.lt-rail{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:var(--r-sm);background:var(--tint-2)}
.lt-fill{position:absolute;left:0;top:12px;height:4px;border-radius:var(--r-sm);background:var(--accent);width:0}
.lt-knob{position:absolute;top:8px;left:0;width:12px;height:12px;border-radius:50%;background:#fff;transform:translateX(-50%);box-shadow:0 1px 4px rgba(0,0,0,.5);display:none}
.lt-track.ready .lt-knob{display:block}
.lt-mk{position:absolute;top:6px;width:3px;height:16px;border-radius:var(--r-sm);transform:translateX(-50%)}
.lt-mk.ok{background:var(--good)}.lt-mk.bad{background:var(--bad)}.lt-mk.run{background:var(--dim)}
.lt-clock{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;min-width:78px;text-align:right}
.lt-hint{font-size:11.5px;color:var(--dim)}

/* One tab per run: the box is reused when the agent tests again in the same turn. */
.lt-runs{display:inline-flex;gap:4px;margin-left:10px;flex:none}
.lt-runs[hidden]{display:none}
.lt-run{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--text);background:transparent;border:1px solid var(--line-2);border-radius:var(--r);padding:2px 8px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.lt-run:hover{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.lt-run.on{color:var(--text);background:transparent;border-color:rgba(var(--accent-rgb),.45)}
.lt-run i{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.lt-run[data-state="ok"] i{background:var(--good)}
.lt-run[data-state="bad"] i{background:var(--bad)}
.lt-run[data-state="live"] i{background:var(--bad);animation:lt-pulse 1.2s ease-in-out infinite}

/* What is left where the box was before it moved down to the latest run. */
.lt-moved{display:flex;align-items:center;gap:10px;align-self:flex-start;max-width:100%;margin:-3px -6px;padding:5px 6px;border:0;border-radius:var(--r);background:transparent;color:var(--muted);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;flex:none;overflow:hidden}
.lt-moved:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.lt-moved-ico{width:22px;height:22px;border-radius:var(--r);display:grid;place-items:center;flex:none;background:color-mix(in srgb,#74B6FF 10%,transparent);opacity:.8}
.lt-moved-ico svg{width:12px;height:12px;color:#74B6FF}
.lt-moved-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-moved-text b{font-weight:600;color:var(--text)}
.lt-moved-text .arg{font-family:var(--mono);font-size:11.5px}
.lt-moved-text .bad{color:var(--bad)}
.lt-moved-go{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:11.5px;color:var(--muted);opacity:.85}
.lt-moved-go:hover{color:var(--accent-hi);opacity:1}
.lt-moved-go svg{width:10px;height:10px}
/* Not gated behind prefers-reduced-motion, like .enter: it is the signal that the box
   moved, and Windows' animation toggle maps straight onto that query. */
.lt-moved.enter{animation:lt-grow .3s cubic-bezier(.4,0,.2,1) both}
@keyframes lt-grow{from{opacity:0;max-height:0;padding-block:0}to{opacity:1;max-height:40px}}
/* Arriving from a "continued below" row: the box says which one it is. */
.uitest.lt-flash .lt-body{animation:lt-flash 1.4s ease}
@keyframes lt-flash{0%,30%{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.55)}100%{box-shadow:0 0 0 2px transparent}}

/* ── Settings > Analytics ─────────────────────────────────────────────
   One switch, then plainly what it sends and where to check it. Same rows,
   groups and link buttons as the other pages. */
.an-facts{display:flex;flex-direction:column;padding:8px 0 4px}
.an-fact{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.an-fact:last-child{border-bottom:none}
.an-k{font-size:12px;font-weight:600;color:var(--muted)}
.an-v{font-size:12px;color:var(--text);line-height:1.5;max-width:56ch}
.an-open{font-size:12px;color:var(--muted);line-height:1.55;max-width:58ch;margin-top:10px}
.an-links{margin:12px 0 0}


/* ── Feedback pop-over (sidebar) ──────────────────────────────────────── */
.fb-pop{
  position:fixed;z-index:250;width:340px;
  background:var(--glass-3);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 18px 44px -12px var(--shadow);padding:14px;
}
.fb-title{font-size:13px;font-weight:700;color:var(--text)}
.fb-sub{font-size:11.5px;color:var(--dim);margin:2px 0 10px}
.fb-text{
  width:100%;resize:none;min-height:96px;max-height:220px;padding:9px 10px;border-radius:var(--r);
  background:var(--glass-2);border:1px solid var(--line);outline:none;
  font:inherit;font-size:12.5px;line-height:1.5;color:var(--text);
}
.fb-text:focus{border-color:rgba(var(--accent-rgb),.45)}
.fb-text::placeholder{color:var(--dim)}
.fb-note{font-size:11px;color:var(--dim);line-height:1.5;margin-top:8px}
.fb-error{font-size:11.5px;line-height:1.5;margin-top:8px;padding:8px 10px;border-radius:var(--r);color:var(--bad);background:transparent;box-shadow:inset 0 0 0 1px rgba(236,124,114,.45)}
.fb-error button{color:inherit;text-decoration:underline;font-size:inherit}
.fb-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.fb-actions .settings-btn{width:72px;padding:0}
.fb-count{flex:1;font-size:10.5px;color:var(--dim);font-family:var(--mono);font-variant-numeric:tabular-nums}
.fb-count.over{color:var(--bad)}
.fb-actions .settings-btn:disabled{opacity:.5;cursor:default}
.fb-done{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text);padding:4px 2px}
.fb-done svg{width:20px;height:20px;color:var(--good);flex:none}
.tb-actions button.open{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}

/* ── Context meter (composer, after the provider) ─────────────────────────
   A small bar that fills toward the auto-compaction bar; 100% is where the
   engine compacts. Amber from 90%, the engine's own warn bar. */
.ctx-meter{
  position:relative;display:flex;flex:none;align-items:center;gap:7px;height:26px;padding:0 8px;
  border-radius:var(--r);cursor:default;outline:none;
}
.ctx-meter:hover,.ctx-meter:focus-visible{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.ctx-track{width:42px;height:6px;border-radius:var(--r-sm);background:var(--line-2);overflow:hidden}
.ctx-fill{height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .45s cubic-bezier(.2,.8,.2,1),background .2s}
.ctx-pct{font-size:11px;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);min-width:3ch}
.ctx-meter.warn .ctx-fill{background:var(--warn)}
.ctx-meter.warn .ctx-pct{color:var(--warn)}
.ctx-tip{
  position:absolute;bottom:calc(100% + 8px);left:0;z-index:30;width:280px;
  background:var(--glass-3);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 -14px 34px -10px var(--shadow);padding:11px 12px;
  opacity:0;visibility:hidden;transform:translateY(3px);
  transition:opacity .12s,transform .12s,visibility 0s linear .12s;pointer-events:none;
}
/* The gap between the meter and its card is part of the card, so the mouse can travel
   up to the button without the card closing on the way. */
.ctx-tip::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px}
.ctx-meter:hover .ctx-tip,.ctx-meter:focus-within .ctx-tip,.ctx-meter.pinned .ctx-tip{opacity:1;visibility:visible;transform:none;transition:opacity .12s,transform .12s;pointer-events:auto}
.ctx-tip-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted)}
.ctx-tip-head b{font-weight:700;color:var(--text)}
.ctx-meter.warn .ctx-tip-head b{color:var(--warn)}
.ctx-tip-bar{height:5px;border-radius:var(--r-sm);background:var(--line-2);overflow:hidden;margin:8px 0 6px}
.ctx-meter.warn .ctx-tip-bar .ctx-fill{background:var(--warn)}
.ctx-tip-num{font-size:11px;font-family:var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.ctx-tip-text{font-size:11.5px;line-height:1.5;color:var(--muted);margin-top:8px}

.ctx-tip-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.ctx-tip-why{flex:1;font-size:11px;color:var(--dim);line-height:1.4}
.ctx-tip-foot .settings-btn:disabled{opacity:.45;cursor:default;background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}

/* ── Compacting: the same look for automatic and manual ───────────────────
   The meter's bar gets a light sweeping across it and its number steps aside;
   the chat row shows the context bar shrinking from where it was to where it
   ends up once the summary lands. */
@keyframes ctx-sweep{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes ctx-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.ctx-track,.cmp-bar{position:relative}
.ctx-meter.compacting .ctx-fill{background:var(--accent-hi);animation:ctx-breathe 1.4s ease-in-out infinite}
.ctx-meter.compacting .ctx-track::after,.cmp-row.running .cmp-bar::after{
  content:'';position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:ctx-sweep 1.1s ease-in-out infinite;
}
.ctx-meter.compacting .ctx-pct{color:var(--accent-hi)}
/* Compacting is the fix for a full context, not a warning: the calm colour, not amber. */
.ctx-meter.compacting .ctx-tip-head b{color:var(--accent-hi)}
.ctx-meter.compacting .ctx-tip-bar .ctx-fill{background:var(--accent-hi)}
.cmp-row .cmp-bar{height:6px;border-radius:var(--r-sm);background:var(--line-2);overflow:hidden;max-width:360px;margin:4px 0 7px}
.cmp-row .cmp-fill{height:100%;border-radius:inherit;background:var(--accent);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.cmp-row.running .cmp-fill{background:var(--accent-hi);animation:ctx-breathe 1.4s ease-in-out infinite}
.cmp-row.running .tool-head-text{
  background:linear-gradient(90deg,var(--muted) 0%,var(--muted) 40%,var(--text) 50%,var(--muted) 60%,var(--muted) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:cmp-text 1.8s linear infinite;
}
@keyframes cmp-text{from{background-position:100% 0}to{background-position:-150% 0}}
.cmp-row .cmp-num{font-size:11.5px}

/* ── Queue box: messages waiting to go in ─────────────────────────────────
   One long box right above the composer (and so above the working strip).
   What is queued, then Edit (or ↑) and Send now. Gone once they are sent. */
.queue-box{
  display:flex;align-items:flex-start;gap:12px;margin:0 0 8px;padding:9px 10px 9px 12px;
  background:var(--glass-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  animation:qb-in .18s ease-out;
}
@keyframes qb-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.qb-label{
  flex:none;margin-top:2px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);background:transparent;padding:2px 7px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2)
}
.qb-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.qb-item{
  font-size:12.5px;line-height:1.5;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;word-break:break-word;
}
.qb-item + .qb-item{padding-top:4px;border-top:1px solid var(--line)}
.qb-att{font-size:11px;color:var(--dim)}
.qb-more{font-size:11px;color:var(--dim)}
.qb-actions{flex:none;display:flex;align-items:center;gap:6px}
.qb-btn{
  display:flex;align-items:center;gap:5px;height:var(--control-h);padding:0 10px;border-radius:var(--r);
  font-size:11.5px;font-weight:600;color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);
}
.qb-btn:hover{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.qb-btn svg{width:12px;height:12px;flex:none}
.qb-btn.primary{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.qb-btn.primary:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.qb-btn:disabled{opacity:.5;cursor:default}

/* ── Marathon: the toggle in the composer row and the pinned checklist ───────── */
.marathon-toggle[aria-pressed="true"]{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.marathon-toggle[aria-pressed="true"]:hover{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.marathon-toggle:disabled{opacity:.4;cursor:default}
/* Above the composer: one line. Click it to open the whole checklist in its own view. */
.marathon-box{
  align-self:flex-start;width:min(760px,100%);margin:0 0 8px;
  display:flex;align-items:center;gap:8px;min-width:0;min-height:var(--control-h);cursor:pointer;
  background:var(--glass-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:0 10px;font-size:12px;
}
.marathon-box:hover{border-color:rgba(var(--accent-rgb),.7)}
.marathon-box[hidden]{display:none}
.mb-count{flex:none;color:var(--muted);font-family:var(--mono);font-size:11px}
.mb-count:empty{display:none}
.mb-chev{flex:none;width:12px;height:12px;color:var(--dim);transition:transform .15s ease,color .15s ease}
.marathon-box:hover .mb-chev{color:var(--text);transform:translateX(2px)}
.mb-line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marathon-view .agent-list{max-width:min(86%,900px)}
.marathon-view .mb-list{margin:0;max-height:none;overflow:visible;font-size:12.5px}
.marathon-view .mb-item{padding:4px 0}
.mb-task{margin-bottom:12px}
.mb-task-rows{display:flex;flex-direction:column;gap:6px;margin:6px 0 0 20px}
.mb-task-rows:empty{display:none}
.mb-empty{font-size:12px;color:var(--dim)}
.mb-list:not(:empty) + .mb-empty{display:none}
.mb-title{font-weight:600;color:var(--text);flex:none}
.mb-line{flex:1;min-width:0;color:var(--dim);overflow-wrap:anywhere}
.mb-btn{flex:none;font-size:11px;color:var(--text);background:transparent;border-radius:var(--r);padding:2px 8px;box-shadow:inset 0 0 0 1px var(--line-2)}
.mb-btn:hover{background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.mb-list{margin-top:6px;max-height:200px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column}
.mb-list::-webkit-scrollbar{display:none}
.mb-list:empty{display:none}
.mb-item{display:flex;align-items:flex-start;gap:8px;padding:2px 0;line-height:18px;color:var(--dim);min-width:0}
.mb-item span:last-child{min-width:0;overflow-wrap:anywhere}
.mb-item .mb-mark{flex:none;width:12px;text-align:center;margin-top:0}
.mb-item.done{color:var(--dim)}
.mb-item.done .mb-mark{color:var(--good)}
.mb-item.active{color:var(--text)}
.mb-item.active .mb-mark{margin-top:5px;width:7px;height:7px;border-radius:50%;background:var(--dot-white);font-size:0}
.marathon-view[data-live="1"] .mb-item.active .mb-mark{animation:dotblink 1.1s ease-in-out infinite}

/* ── Settings > Usage > Limits ───────────────────────────────────────────── */
.lim-bars{display:flex;flex-direction:column;gap:20px;margin:4px 0 24px;max-width:640px}
/* A row: name and reset on the left, the bar, then how much is used; the amount sits under the bar. */
.lim-row{display:grid;grid-template-columns:200px minmax(120px,1fr) 78px;column-gap:18px;row-gap:2px;align-items:start}
.lim-name{font-size:13px;font-weight:600;color:var(--text);line-height:19px}
.lim-reset{font-size:11.5px;line-height:1.4;color:var(--dim);min-width:0}
.lim-row.blocked .lim-reset{color:var(--muted)}
.lim-track{height:7px;border-radius:var(--r);background:var(--line-2);overflow:hidden;align-self:center}
.lim-pct{font-size:12px;line-height:19px;color:var(--muted);text-align:right;white-space:nowrap}
.lim-amount{grid-column:2 / 4;line-height:1.4;font-family:var(--mono);font-size:11px;color:var(--dim)}
.lim-off{font-size:12.5px;line-height:1.6;color:var(--dim)}
.lim-fill{height:100%;border-radius:var(--r);background:var(--dot-white);transition:width .3s}
.lim-row.warn .lim-fill{background:var(--warn)}
.lim-row.blocked .lim-fill{background:var(--bad)}
.lim-field{display:flex;align-items:center;gap:6px;flex:none}
.lim-pre{color:var(--dim);font-size:13px}
.lim-input{width:140px;text-align:right}
.lim-input.lim-small{width:64px}
.lim-analyze{display:flex;align-items:center;gap:14px;margin:6px 0 4px;padding:2px 0}
.lim-analyze-hint{font-size:11.5px;line-height:1.5;color:var(--dim);max-width:360px}
.lim-note{margin:8px 0 14px;max-width:520px;background:var(--glass-2);border:1px solid var(--line);color:var(--muted)}
.lim-actions{display:flex;gap:10px;margin:16px 0 8px}
.lim-save{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.lim-fine{padding-top:8px}

/* Amounts: the number and its unit menu, and the line that says what the number really is. */
.lim-field{flex-direction:column;align-items:flex-end;gap:4px}
.lim-amt{display:flex;align-items:center;gap:8px}
.lim-amt .lim-input{width:110px}
.lim-scale-btn{min-width:118px;max-width:118px}
.lim-scale .rs-menu{left:auto;right:0;width:170px}
.lim-scale-short{font-size:10.5px;color:var(--dim);font-family:var(--mono)}
.lim-readback{font-size:11px;color:var(--dim);min-height:14px;text-align:right}
/* Money is shown but not available yet: it says so when the pointer is on it. */
.lim-tipwrap{position:relative;display:inline-flex}
.lim-disabled{opacity:.45;cursor:not-allowed}
.lim-tipwrap::after{
  content:attr(data-tip);position:absolute;right:0;top:calc(100% + 8px);width:240px;z-index:40;
  padding:8px 10px;border-radius:var(--r);background:var(--glass-3);border:1px solid var(--line-2);
  font-size:11.5px;line-height:1.5;color:var(--muted);text-align:left;white-space:normal;
  box-shadow:0 14px 34px -10px var(--shadow);opacity:0;pointer-events:none;transition:opacity .12s;
}
.lim-tipwrap:hover::after{opacity:1}
/* The summary shown once a limit is on. */
.lim-summary{border:1px solid var(--line);background:var(--glass-2);border-radius:var(--r-lg);padding:14px 16px;max-width:520px;margin-bottom:6px}
.lim-sum-main{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lim-sum-label{font-size:12.5px;font-weight:600;color:var(--text)}
.lim-sum-value{font-size:15px;font-weight:700;color:var(--text);font-family:var(--mono)}
.lim-sum-sub{margin-top:6px;font-size:11.5px;line-height:1.6;color:var(--dim)}
.lim-summary .lim-actions{margin:14px 0 0}
/* The Permissions project picker sits at the LEFT of its row, like the Usage one: its menu
   opens rightward. Anchored to the right edge of that button it opened off the panel. */
.rs-bar .perm-menu{left:0;right:auto}

/* ── The usage-limit meter in the chat header ─────────────────────────────── */
/* Quiet on purpose: a thin bar, a percentage and a few words, no box and no glow. It sits at the far
   right; the background-commands chip, when there is one, sits just to its left. */
.limit-meter{
  position:relative;display:flex;align-items:center;gap:9px;margin-left:auto;min-width:0;flex:0 1 auto;
  cursor:default;outline:none;
}
.shells-wrap:not([hidden]) + .limit-meter{margin-left:14px}
.limit-meter[hidden]{display:none}
.lm-track{width:128px;height:4px;border-radius:var(--r-sm);background:var(--line-2);overflow:hidden;flex:none}
/* Green, then amber, then red, in flat zones. The colours belong to the TRACK: the fill only reveals as
   much of it as is used (background-size is set in code), so red only ever shows at the very end. */
.lm-fill{
  height:100%;transition:width .5s ease;
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--good) 78%,var(--glass)) 0 55%,
    color-mix(in srgb,var(--warn) 82%,var(--glass)) 55% 90%,
    color-mix(in srgb,var(--bad) 82%,var(--glass)) 90% 100%);
  background-repeat:no-repeat;
}
.lm-pct{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.lm-msg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--dim)}
.limit-meter[data-state="orange"] .lm-msg{color:var(--muted)}
.limit-meter[data-state="red"] .lm-msg,.limit-meter[data-state="full"] .lm-msg{color:var(--text)}
.lm-tip{
  position:absolute;top:calc(100% + 10px);right:0;z-index:15;width:250px;padding:10px 12px;border-radius:var(--r-lg);
  background:var(--glass-3);border:1px solid var(--line-2);box-shadow:0 14px 34px -10px var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .12s;
}
.limit-meter:hover .lm-tip,.limit-meter:focus-visible .lm-tip{opacity:1}
/* While the background-commands pop-up is open it owns that corner: the meter's card steps aside. */
.chat-head:has(.shells-menu:not([hidden])) .lm-tip{display:none}
.lm-tip-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-bottom:6px}
.lm-tip-head b{color:var(--text);font-weight:600}
.lm-tip-num{font-family:var(--mono);font-size:11.5px;color:var(--text)}
.lm-tip-note{margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--dim)}
/* In a narrow pane there is no room for the words: the bar and the percentage stay, the card says the rest. */
@media (max-width:900px){.lm-msg{display:none}}


/* ── Settings > About ─────────────────────────────────────────────────── */
#panel-about{flex-direction:column;align-items:flex-start;max-width:520px}
#panel-about.active{display:flex}
/* A settings row here (macOS: Command line) spans the page like everywhere else, button at the right. */
#panel-about .settings-row{align-self:stretch;margin-top:12px}
.about-mark{
  width:34px;height:40px;margin:6px 0 14px;
  background:var(--text);
  -webkit-mask:url(assets/logo-mono.png) center / contain no-repeat;
  mask:url(assets/logo-mono.png) center / contain no-repeat;
}
.about-name{font-family:var(--display);font-size:24px;font-weight:560;color:var(--text);letter-spacing:-.015em;font-variation-settings:'SOFT' 70,'opsz' 48}
.about-tag{margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.about-version-row{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.about-versions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.av-k{color:var(--dim);margin-right:8px}
/* An update: the chip becomes a button with a soft purple ring and a light sweeping round it. Ring only, never a fill. */
button.about-version{cursor:pointer;color:var(--text)}
.about-version.has-update,.about-version.pending,.settings-btn.has-update{position:relative;border-color:rgba(var(--accent-rgb),.45);color:var(--text)}
button.about-version:hover,.settings-btn.has-update:hover{border-color:rgba(var(--accent-rgb),.7)}
.about-version.has-update::after,.settings-btn.has-update::after{
  content:'';position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(var(--accent-hi-rgb),.95) 50%,transparent 65%) 0 0/260% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:av-sheen 2.6s linear infinite;
}
@keyframes av-sheen{from{background-position:160% 0}to{background-position:-60% 0}}
.settings-btn.has-update{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.av-new{margin-left:10px;font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--text)}
.au-btn{gap:10px}
.au-btn .au-bar{width:64px;height:3px;border-radius:var(--r-sm);background:var(--line-2);overflow:hidden}
.au-btn .au-bar i{display:block;height:100%;background:var(--accent);transition:width .25s ease}
.au-btn.on{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.au-btn.on:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.85)}
.about-version{
  height:var(--control-h);display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r);
  background:var(--glass-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--muted);
}
/* Something new: a small dot on the Settings gear, so it shows before Settings is even open. A dot, so it may be filled (§3). */
.rbtn{position:relative}
.rbtn .rdot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 0 2px var(--ground-a)}
/* What's new: a list of cards, a summary screen, and a bigger details window. */
.wn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wn-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.wn-count{margin-left:6px;color:var(--dim);font-weight:500}
.wn-filter button.active .wn-count{color:var(--muted)}
/* Rows, not boxes: a hairline between them, and the accent outline only under the pointer. */
.wn-list{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wn-card{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;width:100%;
  padding:9px 12px;border-radius:var(--r);text-align:left;
  background:transparent;color:var(--text);
}
.wn-card.wn-enter{animation:wn-in .32s ease both;animation-delay:calc(var(--i,0) * 60ms)}
.wn-card + .wn-card::before{content:'';position:absolute;left:12px;right:12px;top:0;height:1px;background:var(--line)}
.wn-card:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.wn-card:hover::before,.wn-card:hover + .wn-card::before{opacity:0}
.wn-ico{display:grid;place-items:center;width:12px;height:12px;flex:none;color:var(--dim)}
.wn-ico svg{width:12px;height:12px}
.wn-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.wn-card-top{display:flex;align-items:center;gap:8px;min-height:18px}
.wn-title{font-size:13.5px;font-weight:700;color:var(--text)}
/* Unread: a jade dot and NEW (white text) at the start of the kind and date on the right, gone once opened. */
.wn-new{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.wn-desc{font-size:12px;line-height:18px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wn-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim)}
.wn-side{display:flex;align-items:center;gap:12px;align-self:center;white-space:nowrap}
.wn-ver{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--muted)}
.wn-chev{width:12px;height:12px;color:var(--dim);transition:transform .15s ease,color .15s ease}
.wn-card:hover .wn-chev{color:var(--text);transform:translateX(3px)}
.wn-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-hi);flex:none}
.nav-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--text)}
@keyframes wn-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wn-empty{margin-top:14px;font-size:12px;color:var(--dim)}
.wn-back{align-self:flex-start;gap:6px}
.wn-back svg{width:12px;height:12px}
.wn-sum-title{margin-top:16px;font-family:var(--display);font-size:22px;font-weight:560;color:var(--text);letter-spacing:-.015em;font-variation-settings:'SOFT' 70,'opsz' 36}
.wn-sum-meta{margin-top:4px;font-size:11.5px;color:var(--dim)}
.wn-sum-text{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:58ch}
.wn-points{margin:10px 0 0;padding:0 0 0 18px;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:58ch}
.wn-points li + li{margin-top:4px}
.wn-actions{display:flex;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap}
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
  min-height:50px;padding:0 20px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);
}
.wn-sec-text{margin-top:6px}
.wn-arrow{margin-left:4px;color:var(--dim)}
.settings-btn.wn-out:hover .wn-arrow{color:var(--text)}
.about-version-note{margin-top:6px;font-size:11px;line-height:1.5;color:var(--dim);max-width:420px}
.about-idea{max-width:none}
.about-links{margin-top:2px}
.about-inline-link{color:var(--accent-hi);font-weight:600;text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .12s}
.about-inline-link:hover{text-decoration-color:var(--accent-hi)}

/* The chat header also holds the run and window buttons: on a narrow window the session
   title and the limit bar give up room first, so nothing lands on top of anything. */
.chat-head .session-pick{flex:0 1 auto;min-width:48px}
.chat-head .lm-track{flex:0 1 128px;min-width:40px}
.head-actions{flex:none}

/* A purple-outlined box (selected, on, primary) lights up a little more under the pointer. */
.rbtn.active:hover,
.tab.active:hover,
.settings-nav button.active:hover,
.ad-opt.on:hover,
.settings-seg button.active:hover,
.session-item.active:hover,
.mode-item.active:hover,
.rs-opt.active:hover,
.qt-pin.on:hover,
.mp-chip.on:hover,
.mp-sort button.on:hover,
.tb-actions button.open:hover,
.lim-save:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.85)}
.shell-btn.on:hover,
.agent-chip.active:hover,
.km-add:hover,
.lt-run.on:hover{border-color:rgba(var(--accent-rgb),.85)}

/* An on/off button that is on: a soft outline, the icon stays white. */
.side-pin.on,.settings-pin.pinned{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45)}
.side-pin.on:hover,.settings-pin.pinned:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.85)}
.pd-sort-btn.open:hover{border-color:rgba(var(--accent-rgb),.85)}

/* Usage > Limits while limits are off: a status line with the way to turn them on, and the saved numbers locked. */
.lim-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.lim-status-text{font-size:12px;color:var(--muted)}
.lim-form[inert]{display:none}

/* What's new: pictures. An outline like every other box, never a fill. */
.wn-fig{margin:14px 0 0;max-width:58ch}
.wn-fig img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--line-2)}
.wn-fig figcaption{margin-top:6px;font-size:11px;color:var(--dim)}
.msg-body .row-retry{margin:6px 0 0}


/* Rows off screen are not laid out or painted until scrolled near: resizing the window, hiding the
   sidebar or switching the theme then costs the rows you can see, not the whole conversation. Each row
   remembers its real height once it has been drawn (auto). */
.chat-body > .msg,.chat-body > .tool,.chat-body > .tool-group{content-visibility:auto;contain-intrinsic-size:auto 64px;overflow-clip-margin:24px}

/* A long session shows its recent part; this bar at the top brings the rest in. */
.earlier-bar{display:flex;align-items:center;gap:10px;margin:4px 0 16px;font-size:11.5px;color:var(--dim)}

/* ── Light theme ─────────────────────────────────────────────────────────
   The same rules, other values. System decides unless Settings > General > Appearance says
   otherwise (main.js sets nativeTheme.themeSource, and this query follows it). */
@media (prefers-color-scheme: light){
  :root{
    --ground-a:#D6DCD8;
    --ground-b:#CCD3CE;
    --glass:#E0E5E2;
    --glass-2:#D8DEDA;
    --glass-3:#CDD4CF;
    --line:rgba(16,40,30,.16);
    --line-2:rgba(16,40,30,.23);

    --text:#0F1713;
    --muted:#37433D;
    --dim:#5F6D66;

    --accent:#167554;
    --dot-white:#3F4944;
    --accent-hi:#0F5E43;
    --accent-rgb:22,117,84;
    --accent-hi-rgb:15,94,67;
    --accent-fill:rgba(22,117,84,.12);

    --good:#467F1A;
    --good-fill:rgba(70,127,26,.12);
    --warn:#B07418;
    --warn-fill:rgba(176,116,24,.12);
    --bad:#CF4538;
    --bad-fill:rgba(207,69,56,.12);

    --syn-kw:#A0501A;
    --syn-str:#2F7A45;
    --syn-type:#2E6F68;
    --syn-num:#9A5E12;
    --syn-fn:#75590A;
    --syn-prop:#7A4E3A;
    --syn-cm:#66736D;

    --prose:#1B2520;
    --code-text:#1B2520;
    --code-bg:#D0D7D2;
    --card-hover:#D1D8D3;
    --tint:rgba(16,40,30,.05);
    --tint-2:rgba(16,40,30,.09);
    --tint-3:rgba(16,40,30,.12);
    --tint-line:rgba(16,40,30,.25);
    --scroll-thumb:rgba(16,40,30,.18);
    --scroll-thumb-hi:rgba(16,40,30,.28);
    --shadow:rgba(16,40,30,.14);
    --scrim:rgba(10,24,18,.25);
    --diff-add:#1B2520;
    --diff-del:#66736D;
    --knob:#fff;
    color-scheme: light;
  }
}

/* ── Headings everywhere: the warm serif (Fraunces), like the Settings page titles ─────────────
   Anything that names a section, a page, a thing (a project, a provider, a mode) or heads a part of a
   reply. Small uppercase group labels, row labels, file names and code stay in their own fonts. The
   serif is a touch smaller than the sans at the same size, so sizes go up a step. */
.rs-group,.pd-title h3,.km-head h3,.mcp-dtitle h3,.proj-pick .lbl,.mode-name,.wn-title,.fb-title,
.drop-title,.km-add-title,.mb-title,.md h3,.md h4,.msg h3,#provider-list .settings-row-label .t{
  font-family:var(--display);font-weight:560;letter-spacing:-.01em;font-variation-settings:'SOFT' 60,'opsz' 20;
}
.rs-group{font-size:16px}
.pd-title h3,.km-head h3,.mcp-dtitle h3{font-size:21px;font-variation-settings:'SOFT' 60,'opsz' 32}
.proj-pick .lbl{font-size:15px}
.mode-name{font-size:13px}
.wn-title{font-size:15px}
.fb-title{font-size:15px}
.mb-title{font-size:13px}
.km-add-title{font-size:14px}
.md h3{font-size:16px}
.md h4{font-size:15px}
.msg h3{font-size:17px}
#provider-list .settings-row-label .t{font-size:14.5px}
/* Rows in the session list stand apart: an outlined row (current, hovered, renamed) never touches the next. */
.session-item + .session-item{margin-top:4px}
/* The mode's quick tab in the chat header names a thing (Lightning, Architect, Sentinel): the heading serif. */
#mode-pick{font-family:var(--display);font-size:14px;font-weight:560;letter-spacing:-.005em;font-variation-settings:'SOFT' 60,'opsz' 20}

/* The project list clips while it slides. */
.side-projects{overflow:hidden}
/* The composer's pickers (thinking, provider, model) name things: the heading serif, kept soft (muted until
   pointed at, medium weight) so they don't outshout the message box. */
.c-pick .lbl{position:relative;top:-1px;line-height:20px;font-family:var(--display);font-size:13.5px;font-weight:500;letter-spacing:-.005em;font-variation-settings:'SOFT' 60,'opsz' 18}

/* Armed, before the goal is sent, the marathon box only says so: nothing to open yet. */
.marathon-box[data-phase="armed"]{cursor:default}
.marathon-box[data-phase="armed"]:hover{border-color:var(--line-2)}
.marathon-box[data-phase="armed"] .mb-chev{display:none}

/* Jump to latest: a small round button floating just above the message box, grey ring at rest. */
.composer{position:relative}
.jump-latest{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);z-index:5;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2),0 6px 18px -6px var(--shadow);
  animation:jl-in .16s ease-out;
}
.jump-latest[hidden]{display:none}
.jump-latest:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7),0 6px 18px -6px var(--shadow)}
.jump-latest svg{width:14px;height:14px}
.jl-dot{position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 0 2px var(--glass-2)}
.jl-dot[hidden]{display:none}
@keyframes jl-in{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translateX(-50%)}}