/* Chupacabra Studio mockup. Tokens and family components come from base.css (copied from the Studio family
   mockups); this sheet adds only what an agent harness needs. Agent identity colors are tokens in both themes. */
:root[data-theme="dark"] {
  --ag-claude: #D97757;
  --ag-codex-bg: #E3E5E8; --ag-codex-fg: #1E1F22;
  --ag-gemini: #7B8CF5;
  --add-bg: color-mix(in srgb, #5FB865 13%, transparent);
  --del-bg: color-mix(in srgb, #E5675F 13%, transparent);
}
:root[data-theme="light"] {
  --ag-claude: #C2613F;
  --ag-codex-bg: #1E1F22; --ag-codex-fg: #FFFFFF;
  --ag-gemini: #5468E0;
  --add-bg: color-mix(in srgb, #3F8F46 11%, transparent);
  --del-bg: color-mix(in srgb, #C9372C 10%, transparent);
}

/* mockbar: screen switcher above the window */
.mockbar .screens button[aria-pressed="true"] { background: var(--editor); color: var(--text); }
.mockbar a { color: var(--accent-text); text-decoration: none; }

/* ------------------------------------------------------------------ marks */
.am { /* agent mark: a circle (projects are squares) so the two identities never read alike */
  width: 16px; height: 16px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  color: #fff; background: var(--ag-claude);
}
.am svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.am.codex { background: var(--ag-codex-bg); color: var(--ag-codex-fg); }
.am.gemini { background: var(--ag-gemini); }
.am.sm { width: 14px; height: 14px; }
.am.sm svg { width: 8px; height: 8px; }
.am.lg { width: 22px; height: 22px; }
.am.lg svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ toolbar */
.proj-widget { font-weight: 500; }
.branch-btn { color: var(--text-2); font-family: var(--mono); font-size: 12px; font-variant-ligatures: none; }
.branch-btn .ahead { color: var(--text-3); font-family: var(--ui); font-size: var(--fs-xs); }
.lay-btn[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.tb-btn.dock-btn[aria-pressed="true"] { color: var(--text); background: var(--hover); }

/* ------------------------------------------------------------------ sidebar: projects and conversations */
.sidepanel { --side-w: 268px; }
.side-actions { display: flex; gap: 2px; }
.proj { margin-bottom: 2px; }
.proj > .node .label { font-weight: 500; }
.proj > .node .path { color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
.cv { height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 28px; cursor: default; position: relative; user-select: none; }
.cv:hover { background: var(--row-hover); }
:root[data-theme="dark"] .cv:hover { background: #33353A; }
.cv.selected { background: var(--sel); }
.cv .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv .when { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.cv .pn { margin-left: -2px; }
.cv .st { width: 14px; display: grid; place-items: center; flex: none; }
.cv .st .needs { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.cv .st .unread { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
.cv .st .ico { color: var(--text-3); }
.cv .marks { display: inline-flex; }
.cv .marks .am + .am { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--panel); }
.cv.selected .marks .am + .am { box-shadow: 0 0 0 1.5px var(--sel); }
.cv.more-row { color: var(--text-3); font-size: var(--fs-sm); }
.side-foot { flex: none; border-top: 1px solid var(--line-soft); padding: 6px 8px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
.side-foot .live { flex: none; }
.side-foot .mono { font-size: 11px; color: var(--text-3); }

/* ------------------------------------------------------------------ center: panes of conversations */
.work { flex: 1; min-width: 0; display: flex; }
.center { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--editor); position: relative; }
.panes.single .pane-head { display: none; }
.pane { cursor: default; }
.pane-head .am { margin-left: 2px; }
.pane-head .model { color: var(--text-3); white-space: nowrap; }
.pane-head .chip.sm { margin-left: 2px; }
.pane-head .state-pill { font-size: var(--fs-xs); color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pane-head .state-pill .needs { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }

/* conversation header in the single view */
.conv-head { height: 40px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line-soft); }
.conv-head h1 { margin: 0; font-size: var(--fs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-head .where { color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.conv-head .where .mono { font-size: 11.5px; color: var(--text-2); }
.conv-head .sp { flex: 1; }
.conv-head .agents { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.panes:not(.single) .conv-head { display: none; }

/* transcript */
.log { flex: 1; min-height: 0; overflow: auto; position: relative; }
.log-inner { max-width: 820px; margin: 0 auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.panes:not(.single) .log-inner { padding: 12px 12px 20px; gap: 14px; }
.msg-user { background: color-mix(in srgb, var(--text) 6%, transparent); padding: 9px 12px; }
.msg-user .att { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.msg-agent { gap: 9px; }
.msg-agent .who { gap: 7px; font-size: var(--fs-xs); margin-bottom: 0; }
.msg-agent .who b { color: var(--text-2); font-weight: 500; }
.msg-agent .who .dur { margin-left: auto; }
.prose { line-height: 1.6; }
.prose p { margin: 0 0 6px; }
.prose p:last-child { margin: 0; }
.prose ul { margin: 2px 0 6px; padding-left: 20px; }
.prose li { margin: 2px 0; }
.prose code { font-family: var(--mono); font-size: 12px; font-variant-ligatures: none; padding: 1px 4px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.think { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-sm); font-style: italic; }
.think .ico { font-style: normal; }
.step .lbl .mono { font-size: 11.5px; color: var(--text); }
.step.fail > .ico:first-child { color: var(--danger); }
.step .badge { font-size: 10.5px; padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); white-space: nowrap; }
.step .plus { color: var(--ok); font: 500 11px var(--mono); }
.step .minus { color: var(--danger); font: 500 11px var(--mono); }

/* switch divider: the conversation continues with another agent */
.handoff { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: var(--fs-xs); }
.handoff::before, .handoff::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.handoff .box { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--editor); white-space: nowrap; max-width: 100%; }
.handoff .box b { color: var(--text); font-weight: 500; }
.handoff .box .ico { color: var(--text-3); }
.handoff .box .link { color: var(--accent-text); }
.handoff .box .link:hover { text-decoration: underline; text-underline-offset: 2px; }
.handoff-detail { margin-top: -8px; align-self: center; width: min(560px, 100%); }
.handoff-detail .card pre { color: var(--text-2); white-space: pre-wrap; }

/* file change card */
.fc-row { height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: var(--fs-sm); }
.fc-row:hover { background: var(--row-hover); }
.fc-row .mono { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fc-row .dir { color: var(--text-3); }
.fc-row .sp { flex: 1; }
.fc-row .plus { color: var(--ok); font: 500 11px var(--mono); }
.fc-row .minus { color: var(--danger); font: 500 11px var(--mono); }
.fc-row .kind { font: 600 10px var(--mono); width: 12px; text-align: center; }
.fc-row .kind.M { color: var(--warn); }
.fc-row .kind.A { color: var(--ok); }
.card.files .card-foot { justify-content: flex-end; }

/* plan / todos */
.todo { padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.todo div { display: flex; align-items: center; gap: 8px; min-height: 22px; color: var(--text-2); }
.todo .done { color: var(--text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-3) 60%, transparent); }
.todo .done .ico { color: var(--ok); }
.todo .now { color: var(--text); }
.todo .now .ico { color: var(--accent-text); }
.todo .ico { color: var(--text-3); }

/* subagents running in parallel */
.sa-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: var(--fs-sm); border-top: 1px solid var(--line-soft); }
.sa-row:first-of-type { border-top: 0; }
.sa-row .nm { color: var(--text); font-weight: 500; white-space: nowrap; }
.sa-row .ds { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.sa-row .ct { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
.sa-row .ok { color: var(--ok); }
.sa-row .run { color: var(--text-3); }

/* background task and browser cards inside the transcript */
.inline-live { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--editor); font-size: var(--fs-sm); color: var(--text-2); }
.inline-live .mono { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.inline-live .sp { flex: 1; }
.inline-live .live { flex: none; }
.inline-live .ico.lead { color: var(--text-2); }
.shot { display: flex; gap: 10px; align-items: stretch; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--editor); }
.shot .thumb { width: 148px; height: 92px; flex: none; border-radius: 4px; border: 1px solid var(--line-soft); overflow: hidden; background: var(--panel); position: relative; }
.shot .thumb .mini { transform: scale(.25); transform-origin: 0 0; width: 400%; height: 400%; pointer-events: none; }
.shot .txt { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); min-width: 0; }
.shot .txt b { color: var(--text); font-weight: 500; }
.shot .txt .mono { font-size: 11.5px; color: var(--accent-text); }
.shot .txt .acts { margin-top: auto; display: flex; gap: 4px; }

/* approval: the family permission card */
.approve .q .mono { font-size: 12px; color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); padding: 1px 5px; border-radius: 3px; }
.approve .why { padding-left: 22px; font-size: var(--fs-xs); color: var(--text-3); }
.approve.resolved { padding: 7px 10px; flex-direction: row; align-items: center; gap: 8px; }
.approve.resolved .ico { color: var(--ok); }

.working { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-sm); }
.working .ico { color: var(--accent-text); }
.working kbd { margin-left: 2px; }

/* composer */
.composer-wrap { flex: none; padding: 0 20px 12px; }
.composer-wrap .inner { max-width: 820px; margin: 0 auto; }
.panes:not(.single) .composer-wrap { padding: 0 8px 8px; }
.as-compose { margin: 0; }
.as-compose textarea { height: 62px; padding: 10px 12px 2px; }
.panes:not(.single) .as-compose textarea { height: 40px; }
.as-compose .row { gap: 3px; }
.ctxchip .x { opacity: .6; display: inline-grid; place-items: center; }
.ctxchip .x:hover { opacity: 1; }
.ctxchip.cmt { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--text); }
.ctxchip.cmt .ico { color: var(--warn); }
.mode-btn { height: 24px; padding: 0 6px; gap: 5px; font-size: var(--fs-sm); color: var(--text-2); }
.mode-btn:hover { color: var(--text); }
.agent-pick { height: 26px; padding: 0 6px 0 4px; gap: 6px; color: var(--text); border-radius: var(--r); }
.agent-pick .model { color: var(--text-3); }
.composer-hint { display: flex; gap: 12px; padding: 6px 2px 0; font-size: var(--fs-xs); color: var(--text-3); }
.composer-hint .sp { flex: 1; }
.composer-hint .mem { display: inline-flex; align-items: center; gap: 5px; }
.panes:not(.single) .composer-hint { display: none; }
@container pane (max-width: 560px) {
  .agent-pick .model, .mode-btn span, .ctxchip.hide-narrow { display: none; }
  .shot .thumb { display: none; }
  .handoff .box .opt { display: none; }
}

/* agent and model picker */
.agent-menu { width: 340px; padding: 4px; }
.agent-menu .head { display: flex; align-items: center; gap: 7px; padding: 8px 8px 4px; }
.agent-menu .head .ver { margin-left: auto; font: 400 10.5px var(--mono); color: var(--text-3); }
.agent-menu button.mi { height: auto; min-height: 30px; padding: 4px 8px 4px 31px; flex-direction: column; align-items: flex-start; gap: 0; position: relative; }
.agent-menu button.mi .l1 { display: flex; width: 100%; gap: 8px; align-items: center; }
.agent-menu button.mi .d { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.35; }
.agent-menu button.mi:hover .d { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.agent-menu button.mi .chk { position: absolute; left: 9px; top: 7px; color: var(--accent-text); }
.agent-menu button.mi:hover .chk { color: inherit; }
.agent-menu button.mi .cur { margin-left: auto; font-size: 10.5px; color: var(--text-3); }
.agent-menu .eff { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: var(--fs-sm); color: var(--text-2); }
.agent-menu .eff .seg { margin-left: auto; }
.agent-menu .note { display: flex; gap: 7px; padding: 8px 8px 6px; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; border-top: 1px solid var(--line); margin-top: 4px; }
.agent-menu .note .ico { flex: none; margin-top: 1px; }
.agent-menu .off { padding: 4px 8px 8px 31px; font-size: var(--fs-xs); color: var(--text-3); }
.seg button { font-size: var(--fs-xs); }

/* empty conversation */
.newconv { flex: 1; min-height: 0; overflow: auto; display: grid; place-content: center; padding: 20px; }
.newconv .in { width: min(520px, 100%); display: flex; flex-direction: column; gap: 12px; }
.newconv h2 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.newconv p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.agent-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.agent-card { display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r); text-align: left; background: var(--editor); }
.agent-card:hover { border-color: var(--field-line); background: var(--row-hover); }
.agent-card[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.agent-card b { font-weight: 500; font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; }
.agent-card span { font-size: var(--fs-xs); color: var(--text-3); }
.agent-card[aria-disabled="true"] { opacity: .55; cursor: default; }

/* ------------------------------------------------------------------ dock: review, files, git, browser, tasks */
.dock { width: var(--dock-w, 440px); flex: none; min-width: 0; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--seam); position: relative; }
.dock .resizer { left: -3px; right: auto; }
.dock[hidden] { display: none; }
.dtabs { height: 36px; flex: none; display: flex; align-items: stretch; padding: 0 4px 0 6px; border-bottom: 1px solid var(--line); gap: 2px; }
.dtab { display: flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--text-2); position: relative; white-space: nowrap; font-size: var(--fs); }
.dtab:hover { color: var(--text); }
.dtab[aria-selected="true"] { color: var(--text); }
.dtab[aria-selected="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); }
.dtab .n { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dtab .live { width: 6px; height: 6px; }
.dtabs .sp { flex: 1; }
.dtabs .pbtn { align-self: center; }
.dbody { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--editor); }
.dsub { height: 34px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--text-2); background: var(--panel); }
.dsub .sp { flex: 1; }
.dsub .mono { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* review: files changed per turn, diff, block comments */
.review { flex: 1; min-height: 0; display: flex; }
.rv-list { width: 236px; flex: none; overflow: auto; border-right: 1px solid var(--line-soft); background: var(--panel); padding: 4px 0 10px; }
.dock.narrow .rv-list { display: none; }
.rv-group { padding: 8px 10px 3px; font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rv-group .am { margin-right: 1px; }
.rv-file { height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 10px 0 14px; font-size: var(--fs-sm); cursor: default; }
.rv-file:hover { background: var(--row-hover); }
.rv-file.selected { background: var(--sel); }
.rv-file .mono { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.rv-file .plus { color: var(--ok); font: 500 10.5px var(--mono); }
.rv-file .minus { color: var(--danger); font: 500 10.5px var(--mono); }
.rv-file .cm { display: inline-flex; align-items: center; gap: 2px; color: var(--warn); font-size: 10.5px; }
.codeview { flex: 1; min-width: 0; overflow: auto; font: 400 12.5px/20px var(--mono); font-variant-ligatures: none; tab-size: 2; }
.cl { display: flex; min-width: max-content; position: relative; }
.cl .g { width: 44px; flex: none; text-align: right; padding-right: 8px; color: var(--text-3); user-select: none; position: sticky; left: 0; background: var(--editor); font-size: 11.5px; }
.cl .g2 { width: 40px; }
.cl .mk { width: 16px; flex: none; text-align: center; color: var(--text-3); user-select: none; }
.cl .src { white-space: pre; padding-right: 24px; }
.cl.add { background: var(--add-bg); }
.cl.add .g { background: color-mix(in srgb, var(--ok) 10%, var(--editor)); }
.cl.add .mk { color: var(--ok); }
.cl.del { background: var(--del-bg); }
.cl.del .g { background: color-mix(in srgb, var(--danger) 9%, var(--editor)); }
.cl.del .mk { color: var(--danger); }
.cl.hunk { color: var(--text-3); background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: 11.5px; }
.cl.hunk .src { padding-left: 4px; }
.cl.sel { box-shadow: inset 2px 0 0 var(--accent); }
.cl.sel .src, .cl.sel .mk { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.cl .addc { position: absolute; left: 30px; top: 2px; width: 16px; height: 16px; border-radius: 4px; background: var(--accent); color: #fff; display: none; place-items: center; }
.cl:hover .addc { display: grid; }
.cl .addc .ico { width: 12px; height: 12px; stroke-width: 2.5; }
.k-kw { color: var(--j-kw); }
.k-str { color: var(--j-str); }
.k-num { color: var(--j-num); }
.k-com { color: var(--c-comment); font-style: italic; }
.k-fn { color: var(--c-fn); }
.k-ty { color: var(--j-key); }
.cthread { margin: 4px 12px 8px 60px; max-width: 560px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-family: var(--ui); font-size: var(--fs-sm); overflow: hidden; }
.cthread .ch { display: flex; align-items: center; gap: 7px; padding: 7px 10px 0; color: var(--text-2); font-size: var(--fs-xs); }
.cthread .ch b { color: var(--text); font-weight: 500; font-size: var(--fs-sm); }
.cthread .ch .ln { font-family: var(--mono); font-size: 11px; }
.cthread .cbody { padding: 4px 10px 8px; line-height: 1.5; color: var(--text); white-space: normal; }
.cthread textarea { display: block; width: calc(100% - 16px); margin: 6px 8px; height: 58px; resize: none; border: 1px solid var(--accent); border-radius: var(--r); background: var(--field); padding: 6px 8px; outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); line-height: 1.45; }
.cthread .cf { display: flex; align-items: center; gap: 4px; padding: 4px 6px 6px 10px; border-top: 1px solid var(--line-soft); }
.cthread .cf .sp { flex: 1; }
.cthread .cf .faint { font-size: var(--fs-xs); }
.queued { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--warn); }

/* files: tree plus editor */
.ftree { width: 220px; flex: none; overflow: auto; border-right: 1px solid var(--line-soft); background: var(--panel); padding: 4px 0; }
.dock.narrow .ftree { width: 170px; }
.ftree .node { height: 24px; }
.ftree .node .mod { margin-left: auto; font: 600 10px var(--mono); color: var(--warn); }
.ftree .node .mod.A { color: var(--ok); }
.edtabs { height: 32px; flex: none; display: flex; border-bottom: 1px solid var(--line-soft); background: var(--panel); }
.edtabs .tab { font-size: var(--fs-sm); }
.edtabs .tab[aria-selected="true"]::after { background: var(--accent); }
.edtabs .tab[aria-selected="true"] { background: var(--editor); }

/* git */
.git { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.git-branch { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--line-soft); background: var(--panel); min-width: 0; }
.git-branch .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.git-branch .sync { white-space: nowrap; }
.git-branch .btn { flex: none; }
.git-branch .mono { font-size: 12.5px; color: var(--text); }
.git-branch .sync { color: var(--text-3); font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 3px; }
.git-branch .sp { flex: 1; }
.git-sec { padding: 8px 10px 3px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.git-sec .sp { flex: 1; }
.git-sec button { color: var(--accent-text); font-weight: 500; }
.gf { height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: var(--fs-sm); }
.gf:hover { background: var(--row-hover); }
.gf .cbx { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--field-line); display: grid; place-items: center; flex: none; }
.gf .cbx[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.gf .cbx .ico { width: 10px; height: 10px; stroke-width: 3; display: none; }
.gf .cbx[aria-checked="true"] .ico { display: block; }
.gf .mono { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gf .dir { color: var(--text-3); }
.gf .sp { flex: 1; }
.gf .plus { color: var(--ok); font: 500 10.5px var(--mono); }
.gf .minus { color: var(--danger); font: 500 10.5px var(--mono); }
.gf .kind { font: 600 10px var(--mono); width: 12px; text-align: center; }
.gf .kind.M { color: var(--warn); } .gf .kind.A { color: var(--ok); } .gf .kind.D { color: var(--danger); }
.gf .by { flex: none; }
.commit-box { margin: 8px 10px; border: 1px solid var(--field-line); border-radius: var(--r); background: var(--field); }
.commit-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.commit-box textarea { display: block; width: 100%; height: 76px; border: 0; outline: 0; resize: none; background: transparent; padding: 8px 10px; line-height: 1.45; font-family: var(--mono); font-size: 12px; font-variant-ligatures: none; }
.commit-box .row { display: flex; align-items: center; gap: 4px; padding: 4px; border-top: 1px solid var(--line-soft); }
.commit-box .row .sp { flex: 1; }
.btn-split { display: inline-flex; }
.btn-split .btn.primary:first-child { border-radius: var(--r) 0 0 var(--r); }
.btn-split .btn.primary:last-child { border-radius: 0 var(--r) var(--r) 0; padding: 0 6px; border-left: 1px solid color-mix(in srgb, #000 25%, var(--accent)); }
.hist { padding: 2px 0 12px; }
.hc { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; font-size: var(--fs-sm); position: relative; }
.hc:hover { background: var(--row-hover); }
.hc .rail { width: 14px; align-self: stretch; position: relative; flex: none; }
.hc .rail::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.hc .rail::after { content: ""; position: absolute; left: 3px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--editor); border: 2px solid var(--text-3); box-sizing: border-box; }
.hc.head .rail::after { border-color: var(--accent); }
.hc .msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.hc .sha { font: 400 11px var(--mono); color: var(--text-3); }
.hc .ref { font: 500 10.5px var(--mono); padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); white-space: nowrap; }
.hc .ref.remote { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); }
.hc .when { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

/* browser */
.browser { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.urlbar { height: 38px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 6px; background: var(--panel); border-bottom: 1px solid var(--line-soft); }
.urlbar .url { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: var(--r); background: var(--editor); border: 1px solid var(--line); font: 400 12px var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; }
.urlbar .url .ico { color: var(--text-3); }
.drive-banner { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; font-size: var(--fs-sm); color: var(--text-2); background: color-mix(in srgb, var(--ag-claude) 12%, var(--editor)); border-bottom: 1px solid var(--line-soft); }
.drive-banner b { color: var(--text); font-weight: 500; }
.drive-banner .sp { flex: 1; }
.drive-banner.user { background: color-mix(in srgb, var(--text) 5%, var(--editor)); }
.viewport { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #fff; }
.viewport.driven { box-shadow: inset 0 0 0 2px var(--ag-claude); }
.cursor-ghost { position: absolute; width: 18px; height: 18px; color: var(--ag-claude); filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));  }
.cursor-ghost::after { content: ""; position: absolute; left: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ag-claude); opacity: .0;  }
@keyframes ping { 0% { opacity: .7; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }
.actlog { flex: none; max-height: 132px; overflow: auto; border-top: 1px solid var(--line); background: var(--panel); padding: 4px 0; }
.actlog div { display: flex; gap: 8px; align-items: center; height: 22px; padding: 0 10px; font-size: var(--fs-xs); color: var(--text-2); }
.actlog .t { font: 400 10.5px var(--mono); color: var(--text-3); width: 54px; }
.actlog .mono { font-size: 11px; color: var(--text); }
.actlog .ico { color: var(--text-3); }

/* the app under test, drawn inside the browser viewport (always light: it is a web page) */
.site { font: 13px/1.45 var(--ui); color: #1E1F22; height: 100%; display: flex; flex-direction: column; background: #F7F8FA; }
.site .hd { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #fff; border-bottom: 1px solid #E4E6EB; font-weight: 600; font-size: 12px; }
.site .hd i { width: 14px; height: 14px; border-radius: 3px; background: #3574F0; display: inline-block; }
.site .bd { flex: 1; display: grid; place-items: center; padding: 14px; }
.site .dlg { width: 100%; max-width: 440px; background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(20,24,35,.16); border: 1px solid #E4E6EB; overflow: hidden; }
.site .dlg h3 { margin: 0; padding: 12px 14px; font-size: 13px; border-bottom: 1px solid #EFF0F3; }
.site table { width: 100%; border-collapse: collapse; font: 11px/1 var(--mono); }
.site th { text-align: left; font: 500 10.5px var(--ui); color: #4F5361; padding: 6px 8px; background: #F7F8FA; border-bottom: 1px solid #E4E6EB; }
.site th small { display: block; color: #8C8C8C; font: 400 9.5px var(--mono); margin-top: 2px; }
.site td { padding: 5px 8px; border-bottom: 1px solid #EFF0F3; white-space: nowrap; }
.site td.n { color: #1750EB; text-align: right; }
.site td.d { color: #00627A; }
.site td.bad { background: #FDECEA; color: #C9372C; }
.site .ft { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px; }
.site .ft span { padding: 5px 10px; border-radius: 6px; font-size: 11px; border: 1px solid #C9CCD6; }
.site .ft span.p { background: #3574F0; color: #fff; border-color: #3574F0; }

/* tasks */
.tasks { flex: 1; min-height: 0; overflow: auto; }
.task { border-bottom: 1px solid var(--line-soft); }
.task-h { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px 6px 10px; }
.task-h .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.task-h .tx b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-h .tx b.mono { font-size: 12px; font-weight: 400; }
.task-h .tx span { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.task-h .st { width: 16px; display: grid; place-items: center; flex: none; }
.task-h .st .ok { color: var(--ok); }
.task-h .st .bad { color: var(--danger); }
.task-h .kind { font-size: 10.5px; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); white-space: nowrap; }
.task .tail { margin: 0 10px 8px 34px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line-soft); font: 400 11px/16px var(--mono); color: var(--text-2); white-space: pre; overflow: auto; max-height: 110px; }
.task .tail .ok { color: var(--ok); }
.task .tail .wn { color: var(--warn); }
.tasks .sec { padding: 10px 10px 4px; font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }

/* ------------------------------------------------------------------ settings dialog */
.dialog { width: min(860px, calc(100% - 32px)); height: min(620px, calc(100% - 32px)); }
.prov { border: 1px solid var(--line); border-radius: var(--r); background: var(--editor); margin-bottom: 10px; }
.prov-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.prov-h .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prov-h .tx b { font-weight: 600; }
.prov-h .tx span { font-size: var(--fs-xs); color: var(--text-3); }
.prov-h .found { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.prov-b { border-top: 1px solid var(--line-soft); padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.prov-b .f { margin: 0; }
.prov-b .full { grid-column: 1 / -1; }
.caps { display: flex; flex-wrap: wrap; gap: 4px; }
.cap { height: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border-radius: var(--r-sm); font-size: var(--fs-xs); background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-2); }
.cap .ico { color: var(--ok); width: 11px; height: 11px; }
.cap.partial .ico { color: var(--warn); }

/* ------------------------------------------------------------------ status bar extras */
.statusbar .am { width: 12px; height: 12px; }
.statusbar .am svg { width: 7px; height: 7px; }
.statusbar .ctxbar { width: 46px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; display: inline-block; }
.statusbar .ctxbar i { display: block; height: 100%; background: var(--text-3); }

/* scrollIntoView must never shift the window inside the stage */
.window { overflow: clip; }
@container pane (max-width: 640px) { .conv-head .where, .conv-head .agents span { display: none; } }
@container pane (max-width: 760px) { .agent-pick .model, .composer-hint .mem { display: none; } }
/* responsive: the window adapts like the family */
@media (max-width: 1280px) {
  .dock { --dock-w: 380px; } .rv-list { width: 200px; }
  /* a narrow tool window keeps only the selected tab's label, JetBrains-style */
  .dock.narrow .dtab:not([aria-selected="true"]) .lbl { display: none; }
  .mockbar .hint { display: none; }
}
@media (max-width: 1100px) { .dock { position: absolute; right: 0; top: 40px; bottom: 26px; z-index: 30; box-shadow: var(--shadow); } }
@media (max-width: 960px) { .agent-cards { grid-template-columns: 1fr; } }