/* ============================================================
   Brains (js/brain.js: Settings → My brains, Marketplace → Brains)
   + Claude chat (js/agent-chat.js) —
   PatchWork Standard. `.br-*` and `.agc-*` only; shared pieces
   are the `.sl-*` components from css/slate.css, extended by
   co-located modifiers, never restyled. Loaded after style.css,
   so the `.agc-*` rules here replace the old glass panel look
   at equal specificity.
   ============================================================ */

:root {
    --br-star: oklch(0.82 0.14 80);           /* star ratings: the one filled, coloured icon */
    --br-add-bg: oklch(0.76 0.16 156 / 0.1);  /* diff lines */
    --br-add-fg: oklch(0.86 0.1 155);
    --br-del-bg: oklch(0.65 0.19 25 / 0.1);
    --br-del-fg: oklch(0.82 0.1 25);
}

/* ─── page frame ─────────────────────────────────────────────── */
.br-page {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
    font-family: var(--sl-font-ui); color: var(--sl-text-1); background: var(--sl-app);
}
.br-ic { display: inline-flex; flex: none; }
.br-ic svg { display: block; }
.br-flex { flex: 1; min-width: 0; }
.br-mono, .brain-mono { font-family: var(--sl-font-mono); }
.br-body { font-size: 13px; line-height: 1.55; color: var(--sl-text-1); margin: 0; }
.br-muted { color: var(--sl-text-2); }
.br-small { font-size: 12px; color: var(--sl-text-2); line-height: 1.5; }
.br-hint { font-size: 12px; color: var(--sl-text-3); line-height: 1.5; margin: 0; }
.br-loading { padding: 40px 0; text-align: center; color: var(--sl-text-3); font-size: 12.5px; }

.br-head { flex: none; padding: 30px 40px 0; }
.br-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.br-head .sl-h1 { margin: 0; }
.br-sub { font-size: 12.5px; color: var(--sl-text-2); margin: 8px 0 0; max-width: 620px; line-height: 1.5; }
.br-head-actions { display: flex; gap: 8px; }
.br-tabs { margin-top: 20px; gap: 0 24px; }
.br-tab { display: inline-flex; align-items: center; gap: 7px; }
.br-tab-count { font-family: var(--sl-font-mono); font-size: 10.5px; font-weight: 500; color: var(--sl-link); }

.br-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.br-body-pad { padding: 20px 40px 40px; }

/* empty states */
.br-empty { padding: 56px 20px; }
.br-empty-title { font-size: 13.5px; font-weight: 600; color: var(--sl-text-1); margin-top: 4px; }
.br-empty-text { font-size: 12.5px; color: var(--sl-text-2); max-width: 440px; line-height: 1.55; }
.br-empty-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.br-empty-actions a.sl-btn-primary { text-decoration: none; }
.br-inline-error { margin-bottom: 14px; }

/* ─── My brains ──────────────────────────────────────────────── */
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.br-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; cursor: pointer; min-width: 0; outline: none; }
.br-card:focus-visible { border-color: var(--sl-focus); }
.br-card-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.br-card-id { flex: 1; min-width: 0; }
.br-card-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.br-card-name .sl-card-title, .br-card-name .br-detail-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-version { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); flex: none; }
.br-origin { font-size: 12px; color: var(--sl-text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-card-top > .sl-status { flex: none; font-size: 11.5px; margin-top: 2px; }
.br-tile {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    background: var(--sl-control); border: 1px solid var(--sl-hairline); color: var(--sl-link);
}
.br-tile-sm { width: 32px; height: 32px; border-radius: var(--sl-r-8); }
.br-tile-md { width: 38px; height: 38px; border-radius: var(--sl-r-10); }
.br-tile-lg { width: 48px; height: 48px; border-radius: var(--sl-r-12); }
.br-path {
    font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-2);
    padding: 6px 9px; border-radius: var(--sl-r-6); background: var(--sl-app);
    border: 1px solid var(--sl-hairline);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.br-card-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--sl-text-2); min-width: 0; }
.br-card-meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.br-card-meta .br-ic { color: var(--sl-text-3); }
.br-chats { color: var(--sl-text-2); }

/* ─── Marketplace → Brains ───────────────────────────────────── */
.br-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.br-search { flex: 1 1 240px; max-width: 420px; }
.br-search input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.6); }
.br-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--sl-text-2); }
.br-note .br-ic { color: var(--sl-text-3); }
.br-note a { color: var(--sl-link); text-decoration: none; }
.br-note a:hover { color: var(--sl-link-hover); }
.br-gallery { margin-top: 16px; }
.br-featured {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    border-radius: var(--sl-r-12); overflow: hidden;
    border: 1px solid var(--sl-accent-line); background: var(--sl-card);
}
.br-featured-main { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.br-featured-main .br-body { color: var(--sl-text-2); max-width: 460px; }
.br-kicker-accent { color: var(--sl-link); }
.br-featured-side { padding: 20px 24px; border-left: 1px solid var(--sl-hairline); background: var(--sl-panel); min-width: 0; }
.br-inside { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; font-family: var(--sl-font-mono); font-size: 11.5px; color: var(--sl-text-1); }
.br-inside > div { display: flex; align-items: center; gap: 8px; }
.br-inside .br-ic { color: var(--sl-text-3); }
.br-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--sl-text-2); }
.br-author { display: inline-flex; align-items: center; gap: 6px; }
.br-avatar {
    width: 18px; height: 18px; border-radius: 50%; background: var(--sl-control);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: var(--sl-text-1);
}
.br-stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.br-stat .br-ic { color: var(--sl-text-3); }
.br-stat .br-star-ic { color: var(--br-star); }
.br-featured-actions { display: flex; gap: 8px; margin-top: 6px; }
.br-gallery-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.br-gcard { display: flex; flex-direction: column; gap: 9px; padding: 14px; min-width: 0; }
.br-gcard-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.br-gcard .br-origin { margin-top: 1px; font-size: 11.5px; }
.br-gdesc { font-size: 12px; line-height: 1.5; color: var(--sl-text-2); flex: 1; }
.br-gcard .br-card-meta { gap: 12px; font-size: 11.5px; }
.br-installed { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.br-installed .sl-status { font-size: 11.5px; }

/* ─── My brains, inside Settings ─────────────────────────────── */
/* Settings' content column scrolls and pads; the section only lays out. */
.br-settings { height: auto; background: transparent; }
.br-settings .br-scroll { overflow: visible; }
.br-settings .br-body-pad, .br-settings .br-detail { padding: 0; }
.br-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.br-mine-count { display: inline-flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--sl-text-2); }
.br-settings .br-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.br-settings .br-detail-grid { grid-template-columns: minmax(0, 1fr); }
.br-settings .br-back { margin-top: 2px; }
.settings-nav-item .br-nav-count {
    margin-left: auto; font-family: var(--sl-font-mono); font-size: 10.5px; font-weight: 500; color: var(--sl-link);
}

/* ─── Detail ─────────────────────────────────────────────────── */
.br-detail { padding: 22px 40px 40px; }
.br-back {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
    cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--sl-text-2);
}
.br-back:hover { color: var(--sl-text-1); }
.br-detail-head { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.br-detail-id { flex: 1; min-width: 240px; }
.br-detail-name { margin: 0; }
.br-path-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; }
.br-path-inline { background: var(--sl-panel); border-color: var(--sl-border); color: var(--sl-text-1); max-width: 520px; }
.br-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.br-flash { margin-top: 16px; }
.br-update {
    margin-top: 18px; display: flex; align-items: center; gap: 14px; padding: 14px; flex-wrap: wrap;
    border-radius: var(--sl-r-12); background: var(--sl-card); border: 1px solid var(--sl-accent-line);
}
.br-update > .br-ic { color: var(--sl-link); }
.br-update-text { flex: 1; min-width: 220px; }
.br-update-text .br-small { margin-top: 2px; }
.br-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; align-items: start; }
.br-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.br-box { padding: 14px; }
.br-box .br-body { margin-top: 6px; font-size: 12.5px; }
.br-pub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.br-pub-text { flex: 1; min-width: 180px; }
.br-pub-text .br-small { margin-top: 2px; }
.br-pub-actions { display: flex; gap: 6px; }
.br-stars { display: inline-flex; gap: 2px; }
.br-star {
    width: 28px; height: 28px; border-radius: var(--sl-r-6); border: none; background: transparent;
    color: var(--sl-text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.br-star:hover { background: var(--sl-wash); color: var(--br-star); }
.br-star.is-on { color: var(--br-star); }

/* file tree */
.br-tree { border-radius: var(--sl-r-12); border: 1px solid var(--sl-hairline); overflow: hidden; background: var(--sl-card); }
.br-tree-head { display: flex; align-items: center; padding: 10px 14px; background: var(--sl-card); }
.br-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sl-text-3); }
.br-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sl-warning); flex: none; }
.br-tree-row {
    display: flex; align-items: center; gap: 8px; padding: 6px 14px; min-height: 28px; box-sizing: border-box;
    border-top: 1px solid oklch(1 0 0 / 0.04); background: var(--sl-app);
}
.br-tree-row.is-file, .br-tree-row.is-more { cursor: pointer; }
.br-tree-row.is-file:hover, .br-tree-row.is-more:hover { background: var(--sl-row-hover); }
.br-tree-row:focus-visible { outline: 1px solid var(--sl-focus); outline-offset: -1px; }
.br-tree-row .br-ic { color: var(--sl-text-3); }
.br-tree-row.is-dir .br-ic { color: var(--sl-text-2); }
.br-tree-name { font-family: var(--sl-font-mono); font-size: 11.5px; color: var(--sl-text-1); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-tree-row.is-more .br-tree-name { color: var(--sl-text-3); }
.br-tree-msg { padding: 12px 14px; font-size: 12px; color: var(--sl-text-3); border-top: 1px solid var(--sl-hairline); }

/* update review */
.br-review { margin-top: 20px; border-radius: var(--sl-r-12); border: 1px solid var(--sl-border); overflow: hidden; }
.br-review-head, .br-review-foot {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; background: var(--sl-card);
}
.br-review-head { border-bottom: 1px solid var(--sl-hairline); }
.br-review-foot { border-top: 1px solid var(--sl-hairline); }
.br-apply-line { flex: 1; min-width: 200px; }
.br-ghost-quiet { color: var(--sl-text-2); }
.br-ghost-quiet:hover { color: var(--sl-text-1); }
.br-review-empty { padding: 14px; font-size: 12.5px; color: var(--sl-text-2); background: var(--sl-app); }
.br-rfile { border-top: 1px solid var(--sl-hairline); }
.br-rfile:first-of-type { border-top: none; }
.br-rfile-head {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-height: 44px; box-sizing: border-box;
    background: var(--sl-panel); cursor: pointer;
}
.br-rfile-head:hover { background: var(--sl-row-hover); }
.br-check { padding: 0; }
.br-check .br-ic svg { width: 11px; height: 11px; }
.br-kind-ic { display: inline-flex; }
.br-kind-ic.is-warning { color: var(--sl-warning); }
.br-kind-ic.is-accent { color: var(--sl-link); }
.br-kind-ic.is-success { color: var(--sl-success); }
.br-kind-ic.is-error { color: var(--sl-error); }
.br-rfile-path { font-family: var(--sl-font-mono); font-size: 12px; color: var(--sl-text-1); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-rfile-head .sl-status { font-size: 11.5px; flex: none; }
.br-diffstat { font-family: var(--sl-font-mono); font-size: 11px; white-space: nowrap; flex: none; }
.br-diffstat .is-add { color: var(--sl-success); }
.br-diffstat .is-del { color: var(--sl-error); }
.br-choice { font-size: 11.5px; color: var(--sl-text-3); white-space: nowrap; width: 100px; text-align: right; flex: none; }
.br-icon-quiet { background: transparent; border-color: transparent; color: var(--sl-text-2); }
.br-icon-quiet:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.br-rfile-body { padding: 4px 14px 14px 44px; display: flex; flex-direction: column; gap: 10px; background: var(--sl-app); }
.br-note-warn { font-size: 12px; line-height: 1.5; color: var(--sl-warning); padding-top: 8px; }
.br-hunk { border-radius: var(--sl-r-8); border: 1px solid var(--sl-hairline); overflow: hidden; }
.br-hunk.is-on { border-color: oklch(0.72 0.13 230 / 0.35); }
.br-hunk-head { display: flex; align-items: center; gap: 9px; padding: 6px 10px; min-height: 32px; box-sizing: border-box; background: var(--sl-card); cursor: pointer; }
.br-hunk-title { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-overwrites { font-size: 11.5px; font-weight: 600; color: var(--sl-warning); white-space: nowrap; }
.br-hunk-lines { font-family: var(--sl-font-mono); font-size: 11px; line-height: 1.65; padding: 6px 0; background: var(--sl-app); }
.br-hunk:not(.is-on) .br-hunk-lines { opacity: 0.55; }
.br-line { display: flex; gap: 10px; padding: 0 10px; color: var(--sl-text-3); }
.br-line.is-add { background: var(--br-add-bg); color: var(--br-add-fg); }
.br-line.is-del { background: var(--br-del-bg); color: var(--br-del-fg); }
.br-line.is-more { color: var(--sl-text-3); font-style: italic; }
.br-sign { width: 10px; flex: none; opacity: 0.8; }
.br-line-text { white-space: pre-wrap; word-break: break-word; min-width: 0; }

/* modals */
/* Brain dialogs open from Settings, the home page or its overlay (z-index 10200):
   above both, below the app's confirm dialog (10300) that Unpublish asks through. */
.br-scrim { z-index: 10250; }
.br-modal { width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); display: flex; flex-direction: column; }
.br-modal.is-wide { width: 760px; }
.br-modal-head { font-size: 14px; }
.br-modal-head.br-mono { font-size: 12.5px; font-weight: 600; }
.br-modal-body { display: flex; flex-direction: column; gap: 12px; overflow: auto; min-height: 0; }
.br-field { display: flex; flex-direction: column; gap: 6px; }
.br-field .sl-input { width: 100%; }
.br-modal-error { font-size: 12px; color: var(--sl-error); }
.br-modal .sl-modal-foot { gap: 8px; }
.br-file-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.br-editor {
    width: 100%; min-height: 360px; box-sizing: border-box; resize: vertical;
    font-family: var(--sl-font-mono); font-size: 12px; line-height: 1.6; tab-size: 4;
}

@media (max-width: 900px) {
    .br-head, .br-body-pad, .br-detail { padding-left: 16px; padding-right: 16px; }
    .br-featured, .br-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .br-featured-side { border-left: none; border-top: 1px solid var(--sl-hairline); }
}

/* ─── Settings → Brain ───────────────────────────────────────── */
.settings-tab[data-tab="brain"] .sfr-title.sl-status { font-size: 13.5px; }
.settings-tab[data-tab="brain"] .brain-mono { font-size: 11px; }

/* ============================================================
   Claude chat — the dock (every screen) and the page (the dock expanded)
   ============================================================ */
.agc-ic { display: inline-flex; flex: none; }
.agc-ic svg { display: block; }
.agc-flex { flex: 1; min-width: 0; }

.agc-panel {
    background: var(--sl-raised);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid oklch(1 0 0 / 0.13);
    border-radius: var(--sl-r-14);
    box-shadow: var(--sl-shadow-pop);
    font-family: var(--sl-font-ui);
    color: var(--sl-text-1);
    overflow: visible;
}
.agc-page {
    display: flex; flex: 1; min-width: 0; min-height: 0;
    background: var(--sl-panel); font-family: var(--sl-font-ui); color: var(--sl-text-1);
    border-top: 1px solid var(--sl-hairline);
}
.agc-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* sessions sidebar (page) */
.agc-sessions { width: 230px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--sl-app); border-right: 1px solid var(--sl-hairline); }
.agc-new-chat { margin: 12px; width: calc(100% - 24px); }
.agc-session-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; }
.agc-session-group { font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-text-3); padding: 10px 8px 5px; }
.agc-session {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 7px 9px;
    border: none; border-radius: var(--sl-r-8); background: transparent; cursor: pointer; font-family: inherit;
}
.agc-session:hover { background: var(--sl-wash); }
.agc-session.is-active { background: var(--sl-selected); }
.agc-session-title { font-size: 12.5px; font-weight: 500; color: var(--sl-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-session.is-active .agc-session-title { font-weight: 600; }
.agc-session-brain { font-size: 11px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* header */
.agc-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--sl-hairline); min-width: 0; }
.agc-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sl-text-1); flex: none; }
.agc-title[hidden], .agc-brain-wrap[hidden] { display: none; }
.agc-title svg, .agc-title .agc-ic { color: var(--sl-link); width: 14px; height: 14px; }
.agc-brain-wrap { position: relative; min-width: 0; flex: 0 1 auto; }
.agc-brain-btn {
    display: flex; align-items: center; gap: 8px; height: var(--sl-h); padding: 0 10px; max-width: 260px;
    border-radius: var(--sl-r-8); background: var(--sl-raised); border: 1px solid var(--sl-border);
    color: var(--sl-text-1); cursor: pointer; font-family: inherit; min-width: 0;
}
.agc-panel .agc-brain-btn { background: var(--sl-control); }
.agc-brain-btn:hover { background: var(--sl-quiet-hover); }
.agc-brain-btn.is-open { border-color: var(--sl-accent-line); }
.agc-brain-btn > .agc-ic:first-child { color: var(--sl-link); }
.agc-brain-btn > .agc-ic:last-child { color: var(--sl-text-3); }
.agc-brain-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.agc-brain-ver { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); flex: none; }
.agc-brain-ver:empty { display: none; }
.agc-brain-menu { position: absolute; top: calc(100% + 4px); left: 0; width: 280px; z-index: 1100; }
.agc-brain-item { height: auto; min-height: 28px; padding: 6px 9px; align-items: center; }
.agc-brain-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.agc-brain-item-name { font-size: 12px; font-weight: 600; color: var(--sl-text-1); }
.agc-brain-item-path { font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-brain-item .agc-check { color: var(--sl-link); }
.agc-brain-item > .agc-ic:first-child { color: var(--sl-text-3); }
.agc-brain-empty { font-size: 12px; color: var(--sl-text-3); padding: 4px 9px 6px; }
.agc-status { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: 11.5px; color: var(--sl-text-2); white-space: nowrap; overflow: hidden; }
.agc-status span { overflow: hidden; text-overflow: ellipsis; }
.agc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sl-text-3); flex-shrink: 0; }
.agc-dot[data-state="ready"] { background: var(--sl-success); }
.agc-dot[data-state="waiting"] { background: var(--sl-warning); }
.agc-dot[data-state="off"] { background: var(--sl-error); }
.agc-dot[data-state="busy"] { background: var(--sl-link); animation: agc-pulse 1.2s ease-in-out infinite; }
.agc-head-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.agc-transport {
    height: var(--sl-h-sm); font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 0 8px; margin-right: 4px;
    border-radius: var(--sl-r-6); border: 1px solid var(--sl-border); background: var(--sl-panel); color: var(--sl-text-1);
    cursor: pointer; max-width: 150px;
}
.agc-transport:focus-visible { outline: none; border-color: var(--sl-focus); }
.agc-icon-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0;
    border-radius: var(--sl-r-8); border: none; background: transparent; color: var(--sl-text-2); cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.agc-icon-btn:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.agc-icon-btn:active { transform: none; }
.agc-icon-btn:focus-visible { outline: 1px solid var(--sl-focus); outline-offset: -1px; }
.agc-icon-btn[hidden] { display: none; }
.agc-icon-btn svg { width: 15px; height: 15px; }

/* transcript */
.agc-body { flex: 1; overflow-y: auto; max-height: 300px; padding: 14px 14px; display: block; }
.agc-page .agc-body { max-height: none; padding: 18px 20px; }
.agc-col { display: flex; flex-direction: column; gap: 12px; }
.agc-page .agc-col { max-width: 760px; margin: 0 auto; }
.agc-empty { margin: 16px auto; text-align: center; color: var(--sl-text-2); font-size: 12.5px; line-height: 1.55; max-width: 320px; display: flex; flex-direction: column; gap: 4px; }
.agc-page .agc-empty { margin-top: 18vh; }
.agc-empty-title { font-size: 13.5px; font-weight: 600; color: var(--sl-text-1); margin-bottom: 2px; }
.agc-msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.agc-msg.agc-user { align-self: flex-end; align-items: flex-end; }
.agc-msg.agc-assistant { align-self: flex-start; max-width: 100%; }
.agc-msg.agc-system { align-self: center; max-width: 100%; align-items: center; }
.agc-bubble { font-size: 13px; line-height: 1.55; color: var(--sl-text-1); overflow-wrap: anywhere; min-width: 0; }
.agc-user .agc-bubble {
    padding: 8px 12px; border-radius: 12px 12px 4px 12px;
    background: oklch(0.72 0.13 230 / 0.16); border: 1px solid oklch(0.72 0.13 230 / 0.25);
}
.agc-assistant .agc-bubble { background: transparent; border: none; padding: 2px 0 0; }
.agc-agent-line { display: flex; gap: 10px; align-items: flex-start; }
.agc-avatar {
    width: 24px; height: 24px; border-radius: var(--sl-r-6); flex: none;
    background: oklch(0.72 0.1 230 / 0.18); color: var(--sl-link);
    display: inline-flex; align-items: center; justify-content: center;
}
.agc-assistant .agc-meta { padding-left: 34px; }
.agc-system .agc-bubble { color: var(--sl-text-2); font-size: 12px; text-align: center; padding: 2px 6px; background: transparent; border: none; }
.agc-bubble p { margin: 0; }
.agc-bubble p + p, .agc-bubble p + .agc-code, .agc-bubble .agc-code + p { margin-top: 6px; }
.agc-code {
    margin: 0; padding: 8px 10px; border-radius: var(--sl-r-8);
    background: var(--sl-app); border: 1px solid var(--sl-hairline);
    font-family: var(--sl-font-mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-x: auto;
}
.agc-meta { font-size: 11px; color: var(--sl-text-3); }
.agc-meta[data-state="failed"] { color: var(--sl-error); }
.agc-meta[data-state="pending"] { color: var(--sl-warning); }
.agc-tool {
    flex-direction: row; align-items: center; gap: 8px; align-self: stretch; max-width: 100%;
    padding: 5px 10px; border-radius: var(--sl-r-8); background: var(--sl-card); border: 1px solid var(--sl-hairline);
    font-size: 12px; color: var(--sl-text-2);
}
.agc-tool > .agc-ic { color: var(--sl-link); }
.agc-tool-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-tool-count { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
.agc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.agc-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; box-sizing: border-box;
    border-radius: var(--sl-r-6); font-size: 11.5px; background: var(--sl-quiet); border: 1px solid var(--sl-hairline);
    color: var(--sl-text-2); max-width: 100%;
}
.agc-chip > span:first-child { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }
.agc-chip b { color: var(--sl-text-1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.agc-chip-x { all: unset; cursor: pointer; color: var(--sl-text-3); display: inline-flex; padding: 2px; border-radius: 4px; }
.agc-chip-x:hover { color: var(--sl-text-1); background: var(--sl-wash); }

/* working… + Stop */
.agc-busy { display: flex; align-items: center; gap: 8px; padding: 0 14px 8px; font-size: 12px; color: var(--sl-text-2); }
.agc-busy[hidden] { display: none; }
.agc-page .agc-busy { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 20px 8px; box-sizing: border-box; }
.agc-busy > .agc-ic { color: var(--sl-link); animation: agc-spin 0.9s linear infinite; }
.agc-busy-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes agc-spin { to { transform: rotate(360deg); } }

/* hint */
.agc-hint {
    margin: 0 14px 8px; padding: 10px 12px; border-radius: var(--sl-r-10);
    background: var(--sl-card); border: 1px solid var(--sl-border); border-left: 2px solid var(--sl-warning);
    color: var(--sl-text-1); font-size: 12px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px;
}
.agc-page .agc-hint { max-width: 760px; width: calc(100% - 40px); margin: 0 auto 8px; box-sizing: border-box; }
.agc-hint[hidden] { display: none; }
.agc-hint[data-tone="error"] { border-left-color: var(--sl-error); background: var(--sl-card); }
.agc-hint code {
    font-family: var(--sl-font-mono); font-size: 11px; background: var(--sl-app); border: 1px solid var(--sl-hairline);
    padding: 4px 7px; border-radius: var(--sl-r-6); user-select: all; overflow-wrap: anywhere;
}
.agc-hint-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.agc-hint-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sl-text-3, #9a9a9a); cursor: pointer; user-select: none; }

/* composer */
.agc-compose { border-top: none; padding: 0 12px 12px; display: block; }
.agc-page .agc-compose { padding: 0 20px 16px; }
.agc-compose-box {
    background: var(--sl-quiet); border: 1px solid oklch(1 0 0 / 0.1); border-radius: var(--sl-r-12);
    padding: 8px 10px; display: flex; flex-direction: column; gap: 6px;
}
.agc-page .agc-compose-box { max-width: 760px; margin: 0 auto; }
.agc-compose-box:focus-within { border-color: var(--sl-focus); }
.agc-attach-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.agc-attach-row[hidden] { display: none; }
.agc-input-row { display: flex; gap: 8px; align-items: flex-end; }
.agc-input {
    flex: 1; resize: none; min-height: 22px; max-height: 160px; padding: 2px; border: none; border-radius: 0;
    background: transparent; color: var(--sl-text-1); font-family: var(--sl-font-ui); font-size: 13px; line-height: 1.5;
}
.agc-input::placeholder { color: oklch(0.5 0.005 250); }
.agc-input:focus { outline: none; border-color: transparent; }
.agc-compose-foot { display: flex; align-items: center; gap: 6px; }
.agc-compose-foot .agc-icon-btn { width: 28px; height: 28px; }
.agc-keys { font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-3); white-space: nowrap; }
.agc-panel .agc-keys { display: none; }
.agc-send {
    width: 32px; height: 32px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sl-r-8); border: none; background: oklch(0.72 0.13 230 / 0.35); color: var(--sl-on-accent);
    cursor: pointer; transition: background 0.12s ease;
}
.agc-send.is-ready { background: var(--sl-accent); }
.agc-send.is-ready:hover { filter: brightness(1.07); background: var(--sl-accent); color: var(--sl-on-accent); border-color: transparent; }
.agc-send:hover { background: oklch(0.72 0.13 230 / 0.45); color: var(--sl-on-accent); }
.agc-send:active { transform: none; }
.agc-send:focus-visible { outline: 1px solid var(--sl-focus); outline-offset: 2px; }

/* edge tab, activity pill, question card, unread badge */
.agc-tab {
    background: var(--sl-raised); backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--sl-border); border-right: none; box-shadow: var(--sl-shadow-float); color: var(--sl-text-2);
}
.agc-tab:hover { color: var(--sl-text-1); background: var(--sl-control); }
.agc-tab svg { color: var(--sl-link); }
.agc-badge { background: var(--sl-accent); color: var(--sl-on-accent); font-family: var(--sl-font-mono); font-size: 10px; border-radius: 8px; }
.agc-activity-pill {
    background: var(--sl-raised); backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid oklch(1 0 0 / 0.13); border-radius: var(--sl-r-10); box-shadow: var(--sl-shadow-pop);
    font-family: var(--sl-font-ui); font-size: 12.5px; color: var(--sl-text-1); padding: 0 12px; height: 32px;
}
.agc-activity-pill:hover { background: var(--sl-control); border-color: var(--sl-accent-line); }
.agc-pill-key { font-family: var(--sl-font-mono); font-size: 10px; border-radius: 5px; background: transparent; border: 1px solid var(--sl-border); color: var(--sl-text-3); }
.agc-question-card {
    background: var(--sl-raised); backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid oklch(1 0 0 / 0.13); border-radius: var(--sl-r-14); box-shadow: var(--sl-shadow-modal);
    font-family: var(--sl-font-ui); padding: 14px;
}
.agc-q-header { font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em; font-weight: 500; color: var(--sl-text-3); }
.agc-q-text { font-size: 13.5px; font-weight: 600; color: var(--sl-text-1); }
.agc-q-btn {
    min-height: 32px; padding: 6px 10px; border-radius: var(--sl-r-8); font-size: 12.5px;
    background: var(--sl-card); border: 1px solid var(--sl-hairline); color: var(--sl-text-1);
}
.agc-q-btn:hover { background: var(--sl-quiet-hover); border-color: var(--sl-accent-line); color: var(--sl-text-1); }
.agc-q-num { font-family: var(--sl-font-mono); font-size: 10.5px; border-radius: 5px; background: transparent; border: 1px solid var(--sl-border); color: var(--sl-text-3); }
.agc-q-input {
    height: 32px; box-sizing: border-box; padding: 0 11px; border-radius: var(--sl-r-8);
    background: var(--sl-panel); border: 1px solid var(--sl-border); color: var(--sl-text-1); font-family: var(--sl-font-ui); font-size: 12.5px;
}
.agc-q-input:focus { outline: none; border-color: var(--sl-focus); }
.agc-q-submit {
    height: 32px; padding: 0 14px; border-radius: var(--sl-r-8); border: none;
    background: var(--sl-accent); color: var(--sl-on-accent); font-family: var(--sl-font-ui); font-size: 12px; font-weight: 700;
}
.agc-q-submit:hover { background: var(--sl-accent); filter: brightness(1.07); }

/* ── brain agents: the team on a brain (Settings → My brains) ── */
.br-card-manager { color: var(--sl-text-1); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.br-card-manager .br-ic { color: var(--sl-warning); }
.br-agents { margin-top: 20px; padding: 0; overflow: hidden; }
.br-agents-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--sl-hairline); flex-wrap: wrap; }
.br-agents-empty { padding: 14px; font-size: 12.5px; color: var(--sl-text-2); line-height: 1.5; }
.br-agent { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--sl-hairline); min-width: 0; }
.br-agent:first-of-type { border-top: none; }
.br-agent.is-manager { background: var(--sl-wash); }
.br-agent-ic { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sl-r-8); background: var(--sl-raised); border: 1px solid var(--sl-border); color: var(--sl-text-2); }
.br-agent.is-manager .br-agent-ic { color: var(--sl-warning); }
.br-agent-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-agent-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.br-agent-title { font-size: 13px; font-weight: 600; color: var(--sl-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-agent-desc { font-size: 12px; color: var(--sl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-agent-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--sl-text-3); min-width: 0; flex-wrap: wrap; }
.br-agent-chip { padding: 1px 6px; border-radius: var(--sl-r-6); border: 1px solid var(--sl-border); color: var(--sl-text-2); font-size: 10.5px; }
.br-agent-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.br-agent-select { width: 100%; }

/* ── brain agents: the chat ── */
.agc-head { position: relative; }
.agc-agent-pop { position: absolute; top: calc(100% + 4px); right: 8px; width: 270px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.agc-agent-row { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.agc-agent-label { width: 84px; flex: none; font-size: 11.5px; color: var(--sl-text-2); }
.agc-agent-select {
    flex: 1; min-width: 0; height: var(--sl-h-sm); font-family: inherit; font-size: 12px; padding: 0 6px;
    border-radius: var(--sl-r-6); border: 1px solid var(--sl-border); background: var(--sl-panel); color: var(--sl-text-1);
}
.agc-agent-select:focus-visible { outline: none; border-color: var(--sl-focus); }
.agc-agent-note { font-size: 11px; color: var(--sl-text-3); line-height: 1.45; padding: 0 10px; }
.agc-agent-foot { display: flex; justify-content: flex-end; padding: 0 10px; }
.agc-session-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.agc-session-top .agc-session-title { flex: 1; min-width: 0; }
.agc-session-unread { flex: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--sl-accent); color: var(--sl-on-accent); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.agc-team-row {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 9px;
    border: none; border-radius: var(--sl-r-8); background: transparent; cursor: pointer; font-family: inherit; color: var(--sl-text-2);
}
.agc-team-row:hover { background: var(--sl-wash); }
.agc-team-row.is-active { background: var(--sl-selected); color: var(--sl-text-1); }
.agc-team-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-team-row.is-active .agc-team-name { font-weight: 600; }
.agc-team-tag { flex: none; font-family: var(--sl-font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-text-3); }
.agc-team-dot[data-state="off"] { background: var(--sl-border); }
.agc-team-row + .agc-session-group { margin-top: 6px; }

/* ── chat list: search, archive, delete ── */
.agc-session-search {
    display: flex; align-items: center; gap: 7px; margin: 0 12px 6px; padding: 0 9px; height: var(--sl-h-sm);
    border-radius: var(--sl-r-8); border: 1px solid var(--sl-border); background: var(--sl-panel); color: var(--sl-text-3);
}
.agc-session-search:focus-within { border-color: var(--sl-focus); }
.agc-session-search input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--sl-text-1); font-family: inherit; font-size: 12px; outline: none; }
.agc-session:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: -2px; }
.agc-session.is-archived .agc-session-title { color: var(--sl-text-2); }
.agc-session-actions { display: none; align-items: center; gap: 2px; flex: none; margin: -3px -4px -3px 0; }
.agc-session:hover .agc-session-actions, .agc-session:focus-within .agc-session-actions { display: inline-flex; }
.agc-session-act.agc-icon-btn { width: 22px; height: 22px; }
.agc-session-empty { font-size: 12px; color: var(--sl-text-3); padding: 10px 9px; }
.agc-archived-toggle {
    margin: 0 12px 12px; padding: 6px 9px; border: none; border-radius: var(--sl-r-8); background: transparent;
    font-family: inherit; font-size: 11.5px; color: var(--sl-text-3); text-align: left; cursor: pointer;
}
.agc-archived-toggle:hover { background: var(--sl-wash); color: var(--sl-text-2); }
.agc-archived-toggle[hidden] { display: none; }
@media (hover: none) { .agc-session-actions { display: inline-flex; } }

/* ── the agent dock: one chat panel on the right of every screen ──
   Body-level, above the home screen (9999) and the canvas; toasts (10001) and
   modals opened later still paint over it. While open, the page narrows
   (#app, .home-screen, Studio's overlays) instead of being covered. */
#agent-chat-panel.agc-dock {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: var(--agc-dock-w, 400px); max-width: 100vw; max-height: none;
    z-index: 10000;
    display: flex; flex-direction: column;
    background: var(--sl-panel); border: none; border-left: 1px solid var(--sl-hairline);
    border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    opacity: 1; transform: translateX(100%); visibility: hidden; pointer-events: none;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.18s;
}
#agent-chat-panel.agc-dock.agc-open {
    transform: none; visibility: visible; pointer-events: auto;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
#agent-chat-panel.agc-dock.is-resizing { transition: none; user-select: none; }
.agc-dock .agc-body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.agc-dock .agc-head { flex-wrap: wrap; row-gap: 6px; }
.agc-dock .agc-brain-wrap { flex: 1 1 auto; }
.agc-dock .agc-brain-btn { max-width: 100%; }
.agc-dock .agc-status { flex: 1 1 100%; order: 3; }
.agc-dock-grip { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
.agc-dock-grip:hover, .agc-dock.is-resizing .agc-dock-grip { background: var(--sl-accent-line); }

/* --agc-ws-w (js/agent-chat.js _layoutVars): the dock plus the explorer and file
   panel beside it — 0 while they are out in their own window. */
body.pw-agent-open:not(.pw-agent-page) #app { margin-right: var(--agc-ws-w, var(--agc-dock-w, 400px)); }
body.pw-agent-open:not(.pw-agent-page) .home-screen { right: var(--agc-ws-w, var(--agc-dock-w, 400px)); }
body.pw-agent-open:not(.pw-agent-page) #home-screen > .studio-overlay { right: var(--agc-ws-w, var(--agc-dock-w, 400px)); }
body.pw-agent-popped #agent-chat-tab, body.pw-agent-popped .agc-activity-pill { display: none !important; }

/* The expanded chat is on screen: that page is the chat, so the dock steps aside. */
body.pw-agent-page #agent-chat-panel.agc-dock,
body.pw-agent-page #agent-chat-tab,
body.pw-agent-page .agc-activity-pill { display: none !important; }

/* The dock expanded (AgentChat.expand): the page view (chat list, chat, team)
   over the whole window, until Collapse puts it back in the dock. */
.agc-page-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; background: var(--sl-app); }
.agc-page-overlay[hidden] { display: none; }
/* Desktop: the strip under the window's caption buttons (or traffic lights) stays a drag handle. */
.pw-desktop .agc-page-overlay { padding-top: 46px; box-sizing: border-box; }
.pw-desktop .agc-page-overlay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 46px; -webkit-app-region: drag; }

#agent-chat-tab.agc-tab { position: fixed; right: 0; top: 50%; z-index: 10000; }
.agc-activity-pill { position: fixed; top: auto; bottom: 18px; left: auto; right: 34px; transform: translateY(8px); z-index: 10000; }
.agc-activity-pill.agc-pill-open { transform: none; }

/* An agent's question sits in the chat, above the composer. */
.agc-question-card { position: static; transform: none; width: auto; max-width: none; margin: 0 12px 10px; opacity: 1; pointer-events: auto; transition: none; }
.agc-question-card.agc-question-open { transform: none; }
.agc-question-card[hidden] { display: none; }

/* An agent took a screenshot: the window says so. */
.agc-look-flash { position: fixed; inset: 0; z-index: 10060; pointer-events: none; box-shadow: inset 0 0 0 3px var(--sl-accent); animation: agc-look 0.9s ease forwards; }
@keyframes agc-look { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* Windows desktop: start below the caption buttons (the strip above stays theirs). */
.pw-desktop:not(.pw-desktop-mac) #agent-chat-panel.agc-dock { top: 46px; }

/* Narrow windows and phones: the dock covers the page instead of narrowing it. */
@media (max-width: 900px) {
    body.pw-agent-open:not(.pw-agent-page) #app { margin-right: 0; }
    body.pw-agent-open:not(.pw-agent-page) .home-screen,
    body.pw-agent-open:not(.pw-agent-page) #home-screen > .studio-overlay { right: 0; }
    #agent-chat-panel.agc-dock { width: min(100vw, var(--agc-dock-w, 400px)); box-shadow: var(--sl-shadow-pop); }
}
body.pw-mobile #agent-chat-panel.agc-dock { width: 100vw; }
body.pw-mobile.pw-agent-open #app { margin-right: 0; }
body.pw-mobile.pw-agent-open .home-screen { right: 0; }

/* ── the rail's Agent chat row: the shortcut, always on show (there is no edge tab) ── */
#home-rail-chat { position: relative; height: auto; min-height: var(--sl-h); padding-top: 5px; padding-bottom: 5px; }
#home-rail-chat .home-rail-chat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.2; }
#home-rail-chat .home-rail-kbd { font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-3); background: none; border: none; padding: 0; white-space: nowrap; }
#home-rail-chat .home-rail-kbd-short { display: none; }
.home-sidebar.home-sidebar-collapsed #home-rail-chat { flex-direction: column; gap: 3px; padding: 6px 0 5px; }
.home-sidebar.home-sidebar-collapsed #home-rail-chat .home-rail-chat-text { display: none; }
.home-sidebar.home-sidebar-collapsed #home-rail-chat .home-rail-kbd-short {
    display: flex; flex-direction: column; align-items: center; font-family: var(--sl-font-mono); font-size: 8.5px; line-height: 1.1; color: var(--sl-text-3);
}
#home-rail-chat .agc-rail-badge { position: absolute; top: 3px; left: 22px; min-width: 14px; height: 14px; padding: 0 3px; font-size: 9px; line-height: 14px; text-align: center; }
#home-rail-chat .agc-rail-badge[hidden] { display: none; }
#agent-chat-tab { display: none !important; }

/* ── a PatchWork-run chat: tool rows, thinking, permission cards, turn line ── */
.agc-nested { margin-left: 18px; border-left: 2px solid var(--sl-hairline); padding-left: 8px; }
.agc-toolrow { font-size: 12px; color: var(--sl-text-2); border-radius: var(--sl-r-8); }
.agc-toolrow > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; padding: 3px 6px; border-radius: var(--sl-r-6); min-width: 0; }
.agc-toolrow > summary::-webkit-details-marker { display: none; }
.agc-toolrow > summary:hover { background: var(--sl-wash); }
.agc-toolrow .agc-ic { color: var(--sl-text-3); }
.agc-toolrow.is-running .agc-ic { color: var(--sl-link); animation: agc-spin 1s linear infinite; }
.agc-toolrow.is-done .agc-ic { color: var(--sl-success); }
.agc-toolrow.is-error .agc-ic { color: var(--sl-error); }
@keyframes agc-spin { to { transform: rotate(360deg); } }
.agc-toolrow-name { font-weight: 600; color: var(--sl-text-1); white-space: nowrap; flex: none; }
.agc-toolrow-sum { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.agc-toolrow-pre {
    margin: 4px 0 6px 25px; padding: 7px 9px; border-radius: var(--sl-r-6); background: var(--sl-app); border: 1px solid var(--sl-hairline);
    font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-2); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto;
}
.agc-toolrow-pre.is-error { color: var(--sl-error); }
.agc-thinking { font-size: 12px; color: var(--sl-text-3); }
.agc-thinking > summary { cursor: pointer; list-style: none; padding: 2px 6px; font-style: italic; }
.agc-thinking > summary::-webkit-details-marker { display: none; }
.agc-thinking.is-streaming > summary { color: var(--sl-link); }
.agc-thinking-text { margin: 4px 0 6px 6px; padding-left: 10px; border-left: 2px solid var(--sl-hairline); white-space: pre-wrap; font-size: 11.5px; line-height: 1.5; max-height: 260px; overflow: auto; }
.agc-msg.is-streaming .agc-bubble::after { content: '▍'; color: var(--sl-link); animation: agc-pulse 1s ease-in-out infinite; margin-left: 1px; }
.agc-turn { font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-3); text-align: right; padding: 0 4px 6px; }
.agc-turn.is-bad { color: var(--sl-warning); }
.agc-perm { border: 1px solid var(--sl-accent-line); border-radius: var(--sl-r-10); background: var(--sl-card); padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.agc-perm.is-denied, .agc-perm.is-expired { border-color: var(--sl-hairline); opacity: 0.75; }
.agc-perm-title { font-size: 12.5px; font-weight: 600; color: var(--sl-text-1); }
.agc-perm-sum { margin: 0; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-2); white-space: pre-wrap; word-break: break-word; max-height: 140px; overflow: auto; background: var(--sl-app); border-radius: var(--sl-r-6); padding: 6px 8px; }
.agc-perm-desc { font-size: 11.5px; color: var(--sl-text-3); }
.agc-perm-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.agc-perm-state { font-size: 11px; color: var(--sl-text-3); }
.agc-perm-deny { display: flex; flex-direction: column; gap: 6px; }
.agc-perm-reason { width: 100%; box-sizing: border-box; height: var(--sl-h-sm); padding: 0 9px; border-radius: var(--sl-r-8); border: 1px solid var(--sl-border); background: var(--sl-panel); color: var(--sl-text-1); font-family: inherit; font-size: 12px; }
.agc-perm-reason:focus { outline: none; border-color: var(--sl-focus); }

/* ── the composer: model · effort · permissions, and the "/" menu ── */
.agc-compose { position: relative; }
.agc-pickers { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.agc-pickers[hidden] { display: none; }
.agc-pick {
    height: 24px; max-width: 128px; min-width: 0; padding: 0 16px 0 4px; border-radius: var(--sl-r-6); border: 1px solid transparent;
    color: var(--sl-text-2); font-family: inherit; font-size: 11.5px; cursor: pointer;
    -webkit-appearance: none; appearance: none; field-sizing: content; text-overflow: ellipsis; white-space: nowrap;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23888' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 5px center;
}
.agc-pick:hover { background: var(--sl-wash); border-color: var(--sl-hairline); }
.agc-pick:focus-visible { outline: none; border-color: var(--sl-focus); }
.agc-keys[hidden] { display: none; }
.agc-slash { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 6px); z-index: 20; max-height: 300px; overflow-y: auto; padding: 4px; }
.agc-slash[hidden] { display: none; }
.agc-slash-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 6px 8px; border: none; border-radius: var(--sl-r-6); background: transparent; cursor: pointer; font-family: inherit; }
.agc-slash-item:hover, .agc-slash-item.is-active { background: var(--sl-selected); }
.agc-slash-name { font-family: var(--sl-font-mono); font-size: 12px; color: var(--sl-text-1); }
.agc-slash-desc { font-size: 11px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-slash-empty { font-size: 12px; color: var(--sl-text-3); padding: 8px; }

/* ── the session popover: model, skills, agents, MCP servers ── */
.agc-info-pop { position: absolute; top: calc(100% + 4px); right: 8px; width: 320px; max-height: 70vh; overflow-y: auto; z-index: 1100; display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
.agc-info-row { display: flex; gap: 10px; padding: 0 10px; font-size: 11.5px; min-width: 0; }
.agc-info-k { width: 84px; flex: none; color: var(--sl-text-3); }
.agc-info-v { color: var(--sl-text-1); min-width: 0; overflow-wrap: anywhere; }
.agc-info-h { font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-text-3); padding: 6px 10px 0; }
.agc-info-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px; }
.agc-info-chip { font-family: var(--sl-font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--sl-hairline); color: var(--sl-text-2); }
.agc-info-chip.is-bad { color: var(--sl-error); border-color: var(--sl-error); }
.agc-info-chip.is-warn { color: var(--sl-warning); }

/* ── replies as Markdown: a document's type scale, not a chat's ── */
.agc-md { line-height: 1.62; font-size: 13.5px; color: var(--sl-text-1); }
.agc-page .agc-md { font-size: 14px; line-height: 1.66; }
.agc-md p { margin: 0 0 10px; }
.agc-md p:last-child, .agc-md > :last-child { margin-bottom: 0; }
.agc-md > :first-child { margin-top: 0; }
.agc-md strong { font-weight: 650; color: var(--sl-text-1); }
.agc-md em { font-style: italic; }
.agc-md del { color: var(--sl-text-3); text-decoration-thickness: 1px; }
.agc-md u { text-underline-offset: 2px; }
.agc-md mark { background: oklch(0.82 0.14 85 / 0.28); color: inherit; padding: 0 2px; border-radius: 3px; }
.agc-md kbd { font-family: var(--sl-font-mono); font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--sl-border); border-bottom-width: 2px; background: var(--sl-control); }
.agc-md sub, .agc-md sup { font-size: 0.75em; }
.agc-md .agc-md-h { margin: 18px 0 8px; font-weight: 650; color: var(--sl-text-1); line-height: 1.3; letter-spacing: -0.005em; }
.agc-md .agc-md-h.is-l1 { font-size: 19px; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--sl-hairline); }
.agc-md .agc-md-h.is-l2 { font-size: 16.5px; font-weight: 700; }
.agc-md .agc-md-h.is-l3 { font-size: 14.5px; }
.agc-md .agc-md-h.is-l4 { font-size: 13.5px; }
.agc-md .agc-md-h.is-l5, .agc-md .agc-md-h.is-l6 { font-size: 11px; font-family: var(--sl-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sl-text-2); }
.agc-page .agc-md .agc-md-h.is-l1 { font-size: 21px; }
.agc-page .agc-md .agc-md-h.is-l2 { font-size: 18px; }
.agc-page .agc-md .agc-md-h.is-l3 { font-size: 15.5px; }
.agc-md .agc-md-list { margin: 4px 0 10px; padding-left: 22px; }
.agc-md .agc-md-list .agc-md-list { margin: 3px 0 4px; }
.agc-md .agc-md-list li { margin: 3px 0; padding-left: 2px; }
.agc-md .agc-md-list li::marker { color: var(--sl-text-3); }
.agc-md ol.agc-md-list > li::marker { font-variant-numeric: tabular-nums; }
.agc-md li.is-task { list-style: none; margin-left: -20px; }
.agc-md-box { display: inline-flex; width: 14px; height: 14px; margin-right: 7px; border: 1px solid var(--sl-border); border-radius: 4px; font-size: 10px; align-items: center; justify-content: center; vertical-align: -2px; }
.agc-md-box.is-done { color: var(--sl-on-accent, #fff); background: var(--sl-success); border-color: var(--sl-success); }
.agc-md-code { font-family: var(--sl-font-mono); font-size: 0.86em; padding: 1px 5px; border-radius: 4px; background: var(--sl-app); border: 1px solid var(--sl-hairline); color: oklch(0.86 0.06 60); }
.agc-md-code.is-file { cursor: pointer; color: var(--sl-link); }
.agc-md-link { color: var(--sl-link); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sl-link) 40%, transparent); text-underline-offset: 2px; overflow-wrap: anywhere; }
.agc-md-link:hover { text-decoration-color: currentColor; }
.agc-md-quote { margin: 8px 0 10px; padding: 6px 12px; border-left: 3px solid var(--sl-border); border-radius: 0 var(--sl-r-6) var(--sl-r-6) 0; background: var(--sl-wash); color: var(--sl-text-2); }
.agc-md-callout { border-left-color: var(--sl-link); background: color-mix(in oklab, var(--sl-link) 8%, transparent); color: var(--sl-text-1); }
.agc-md-callout-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; }
.agc-md-callout-head strong { font-weight: 650; }
.agc-md-callout.is-note .agc-md-callout-head, .agc-md-callout.is-important .agc-md-callout-head { color: var(--sl-link); }
.agc-md-callout.is-tip { border-left-color: var(--sl-success); background: color-mix(in oklab, var(--sl-success) 8%, transparent); }
.agc-md-callout.is-tip .agc-md-callout-head { color: var(--sl-success); }
.agc-md-callout.is-warning { border-left-color: var(--sl-warning); background: color-mix(in oklab, var(--sl-warning) 9%, transparent); }
.agc-md-callout.is-warning .agc-md-callout-head { color: var(--sl-warning); }
.agc-md-callout.is-caution { border-left-color: var(--sl-error); background: color-mix(in oklab, var(--sl-error) 8%, transparent); }
.agc-md-callout.is-caution .agc-md-callout-head { color: var(--sl-error); }
.agc-md-hr { border: none; border-top: 1px solid var(--sl-border); margin: 16px 0; }
.agc-md-img { display: block; max-width: 100%; max-height: 320px; margin: 6px 0 10px; border-radius: var(--sl-r-8); border: 1px solid var(--sl-hairline); cursor: zoom-in; }
.agc-md-tablewrap { overflow-x: auto; margin: 8px 0 12px; border: 1px solid var(--sl-border); border-radius: var(--sl-r-8); }
.agc-md-table { border-collapse: collapse; font-size: 12.5px; width: max-content; min-width: 100%; }
.agc-md-table th, .agc-md-table td { border: none; border-bottom: 1px solid var(--sl-hairline); padding: 6px 12px; text-align: left; vertical-align: top; }
.agc-md-table th + th, .agc-md-table td + td { border-left: 1px solid var(--sl-hairline); }
.agc-md-table tbody tr:last-child td { border-bottom: none; }
.agc-md-table th { background: var(--sl-wash); font-weight: 650; color: var(--sl-text-1); white-space: nowrap; }
.agc-md-table tbody tr:nth-child(even) td { background: oklch(1 0 0 / 0.018); }
.agc-md-table td { font-variant-numeric: tabular-nums; }
.agc-md-pre { margin: 6px 0 8px; border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8); overflow: hidden; background: var(--sl-app); }
.agc-md-pre-bar { display: flex; align-items: center; padding: 2px 4px 2px 10px; border-bottom: 1px solid var(--sl-hairline); }
.agc-md-pre-lang { flex: 1; font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-3); }
.agc-md-pre .agc-code { margin: 0; border: none; border-radius: 0; }
.agc-md-copy { border: none; background: transparent; color: var(--sl-text-3); cursor: pointer; padding: 4px; border-radius: var(--sl-r-6); display: inline-flex; }
.agc-md-copy:hover { color: var(--sl-text-1); background: var(--sl-wash); }
.agc-md-copy.is-done { color: var(--sl-success); }
/* code colours (js/agent-chat.js highlightInto) */
.agc-code .agc-hl-com { color: var(--sl-text-3); font-style: italic; }
.agc-code .agc-hl-str { color: oklch(0.80 0.12 145); }
.agc-code .agc-hl-num { color: oklch(0.80 0.12 60); }
.agc-code .agc-hl-lit { color: oklch(0.78 0.13 25); }
.agc-code .agc-hl-kw { color: oklch(0.76 0.13 300); }
.agc-code .agc-hl-fn { color: oklch(0.80 0.10 235); }
.agc-code .agc-hl-key, .agc-code .agc-hl-attr { color: oklch(0.80 0.10 200); }
.agc-code .agc-hl-tag { color: oklch(0.76 0.13 15); }
.agc-code .agc-hl-var { color: oklch(0.82 0.12 85); }
/* a table: scrolls sideways; Copy (tab-separated cells) shows on hover */
.agc-md-tablebox { position: relative; }
.agc-md-tablebox > .agc-md-tablewrap { margin: 8px 0 12px; }
.agc-md-table-copy { position: absolute; top: 3px; right: 3px; background: var(--sl-card); border: 1px solid var(--sl-hairline); opacity: 0; transition: opacity 0.12s; }
.agc-md-tablebox:hover .agc-md-table-copy, .agc-md-table-copy:focus-visible, .agc-md-table-copy.is-done { opacity: 1; }
/* a run of tool calls, folded into one row ("Used 12 tools · 3 edits") */
.agc-toolgroup { font-size: 12px; color: var(--sl-text-2); border-radius: var(--sl-r-8); }
.agc-toolgroup > summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; padding: 3px 6px; border-radius: var(--sl-r-6); min-width: 0; }
.agc-toolgroup > summary::-webkit-details-marker { display: none; }
.agc-toolgroup > summary:hover { background: var(--sl-wash); }
.agc-toolgroup > summary .agc-ic { color: var(--sl-text-3); }
.agc-toolgroup.is-running > summary .agc-ic { color: var(--sl-link); animation: agc-spin 1s linear infinite; }
.agc-toolgroup.is-error > summary .agc-ic { color: var(--sl-error); }
.agc-toolgroup-name { font-weight: 600; color: var(--sl-text-1); white-space: nowrap; flex: none; }
.agc-toolgroup-kinds { color: var(--sl-text-3); white-space: nowrap; flex: none; }
.agc-toolgroup.is-error .agc-toolgroup-kinds { color: var(--sl-error); }
.agc-toolgroup-live { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.agc-toolgroup-list { margin: 2px 0 4px 12px; padding-left: 6px; border-left: 2px solid var(--sl-hairline); display: flex; flex-direction: column; gap: 1px; }
.agc-msg { position: relative; }


/* ── files and media in the chat ── */
.agc-file-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0 6px; height: 20px; margin: 0 1px; vertical-align: 1px;
    border: 1px solid var(--sl-hairline); border-radius: 5px; background: var(--sl-card); color: var(--sl-link); font-family: var(--sl-font-mono); font-size: 11px; cursor: pointer; }
.agc-file-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-file-chip:hover { border-color: var(--sl-accent-line); }
.agc-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px 30px; }
.agc-thumb { max-width: 180px; max-height: 140px; border-radius: var(--sl-r-8); border: 1px solid var(--sl-hairline); cursor: zoom-in; object-fit: cover; background: var(--sl-app); }
.agc-toolrow-open { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border: 1px solid var(--sl-hairline);
    border-radius: 5px; background: transparent; color: var(--sl-link); font-size: 10.5px; cursor: pointer; }
.agc-toolrow-open:hover { border-color: var(--sl-accent-line); }
.agc-toolrow-count { margin-left: auto; font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }
.agc-todos { list-style: none; margin: 4px 0 6px 25px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.agc-todo { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--sl-text-2); }
.agc-todo-box { flex: none; width: 13px; height: 13px; margin-top: 1px; border: 1px solid var(--sl-border); border-radius: 3px; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.agc-todo.is-completed .agc-todo-text { text-decoration: line-through; color: var(--sl-text-3); }
.agc-todo.is-completed .agc-todo-box { color: var(--sl-success); border-color: var(--sl-success); }
.agc-todo.is-in_progress .agc-todo-box { color: var(--sl-link); border-color: var(--sl-link); }
.agc-todo.is-in_progress .agc-todo-text { color: var(--sl-text-1); font-weight: 600; }
.agc-diff { margin: 4px 0 6px 25px; border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-6); background: var(--sl-app); font-family: var(--sl-font-mono); font-size: 10.5px; max-height: 280px; overflow: auto; padding: 4px 0; }
.agc-diff-line { white-space: pre-wrap; word-break: break-word; padding: 0 8px; }
.agc-diff-line.is-del { color: var(--sl-error); background: color-mix(in oklab, var(--sl-error) 8%, transparent); }
.agc-diff-line.is-add { color: var(--sl-success); background: color-mix(in oklab, var(--sl-success) 8%, transparent); }
.agc-diff-gap { height: 6px; }

/* ── the viewer ── */
.agc-viewer { position: fixed; inset: 0; z-index: 10020; background: var(--sl-scrim); display: flex; align-items: center; justify-content: center; padding: 28px; }
.agc-viewer-box { width: min(1100px, 100%); height: min(88vh, 100%); display: flex; flex-direction: column; background: var(--sl-raised); border: 1px solid var(--sl-line-pop, var(--sl-border)); border-radius: var(--sl-r-14); box-shadow: var(--sl-shadow-modal); overflow: hidden; }
.agc-viewer-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--sl-hairline); min-width: 0; }
.agc-viewer-name { font-size: 13px; font-weight: 600; color: var(--sl-text-1); white-space: nowrap; }
.agc-viewer-path { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.agc-viewer-body { flex: 1; min-height: 0; overflow: auto; display: flex; background: var(--sl-app); }
.agc-viewer-body.is-image, .agc-viewer-body.is-video, .agc-viewer-body.is-audio { align-items: center; justify-content: center; }
.agc-viewer-body img, .agc-viewer-body video { max-width: 100%; max-height: 100%; object-fit: contain; }
.agc-viewer-body audio { width: min(520px, 90%); }
.agc-viewer-body iframe { flex: 1; border: none; background: #fff; }
.agc-viewer-md { padding: 20px 28px; max-width: 860px; font-size: 13.5px; color: var(--sl-text-1); }
.agc-viewer-text { margin: 0; padding: 16px 20px; font-family: var(--sl-font-mono); font-size: 12px; color: var(--sl-text-1); white-space: pre-wrap; word-break: break-word; flex: 1; }
.agc-viewer-empty { margin: auto; color: var(--sl-text-3); font-size: 13px; }

/* ── questions and plans ── */
.agc-qcard, .agc-plancard { border: 1px solid var(--sl-accent-line); border-radius: var(--sl-r-10); background: var(--sl-card); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.agc-qcard.is-answered, .agc-qcard.is-dismissed, .agc-qcard.is-expired, .agc-plancard.is-approved, .agc-plancard.is-revise, .agc-plancard.is-expired { border-color: var(--sl-hairline); }
.agc-qcard-head { font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-text-3); }
.agc-qcard-q { display: flex; flex-direction: column; gap: 6px; }
.agc-qcard-tag { align-self: flex-start; font-size: 10px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--sl-border); color: var(--sl-text-2); }
.agc-qcard-text { font-size: 13px; font-weight: 600; color: var(--sl-text-1); }
.agc-qcard-opts { display: flex; flex-direction: column; gap: 4px; }
.agc-qcard-opt { display: flex; align-items: flex-start; gap: 8px; text-align: left; padding: 7px 9px; border-radius: var(--sl-r-8); border: 1px solid var(--sl-hairline); background: var(--sl-panel); color: var(--sl-text-1); cursor: pointer; font-family: inherit; }
.agc-qcard-opt:hover { border-color: var(--sl-accent-line); }
.agc-qcard-opt[aria-pressed="true"] { border-color: var(--sl-link); background: var(--sl-selected); }
.agc-qcard-opt[aria-pressed="true"] .agc-qcard-mark { color: var(--sl-link); }
.agc-qcard-mark { flex: none; color: var(--sl-text-3); font-size: 12px; line-height: 1.3; }
.agc-qcard-opt-text { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.agc-qcard-opt-text span { color: var(--sl-text-3); font-size: 11px; }
.agc-qcard-other, .agc-plan-feedback { width: 100%; box-sizing: border-box; padding: 6px 9px; border-radius: var(--sl-r-8); border: 1px solid var(--sl-border); background: var(--sl-panel); color: var(--sl-text-1); font-family: inherit; font-size: 12px; resize: vertical; }
.agc-qcard-other:focus, .agc-plan-feedback:focus { outline: none; border-color: var(--sl-focus); }
.agc-qcard-answer { font-size: 12px; color: var(--sl-text-2); }
.agc-plan-body { max-height: 360px; overflow: auto; font-size: 12.5px; padding: 8px 10px; border-radius: var(--sl-r-8); background: var(--sl-panel); border: 1px solid var(--sl-hairline); }

/* ── attachments ── */
.agc-file-att { gap: 5px; }
.agc-att-thumb { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; }
.agc-att-thumb.is-sent { width: 72px; height: 54px; border-radius: 6px; border: 1px solid var(--sl-hairline); }
.agc-att-state { font-size: 10.5px; color: var(--sl-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.agc-file-att[data-state="processing"] .agc-att-state, .agc-file-att[data-state="uploading"] .agc-att-state { color: var(--sl-link); }
.agc-file-att[data-state="processing"] .agc-att-thumb, .agc-file-att[data-state="uploading"] .agc-att-thumb { opacity: 0.55; }
.agc-file-att[data-state="failed"] { border-color: color-mix(in oklab, var(--sl-error) 55%, transparent); }
.agc-file-att[data-state="failed"] .agc-att-state { color: var(--sl-error); }
.agc-att-act { all: unset; cursor: pointer; font-size: 10.5px; font-weight: 600; color: var(--sl-link); padding: 1px 4px; border-radius: 4px; white-space: nowrap; }
.agc-att-act:hover { background: var(--sl-wash); }
.agc-att-act:focus-visible, .agc-chip-x:focus-visible { outline: 1px solid var(--sl-focus); }
.agc-attach-note { flex-basis: 100%; font-size: 11.5px; line-height: 1.4; color: var(--sl-warning); }
.agc-send.is-waiting { opacity: 0.5; cursor: not-allowed; }
.agc-compose-box.is-drop { border-color: var(--sl-link); box-shadow: 0 0 0 2px color-mix(in oklab, var(--sl-link) 30%, transparent); }
.agc-file-btn[hidden] { display: none; }

/* ── continue a session ── */
.agc-resume-list { display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }
.agc-resume-row { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 7px 8px; border: none; border-radius: var(--sl-r-6); background: transparent; cursor: pointer; font-family: inherit; }
.agc-resume-row:hover { background: var(--sl-wash); }
.agc-resume-row.is-current { background: var(--sl-selected); }
.agc-resume-title { font-size: 12px; color: var(--sl-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-resume-meta { font-size: 10.5px; color: var(--sl-text-3); }

/* sessions toggle � only when the sidebar has no room (below) */
.agc-sessions-toggle { display: none; }

@media (max-width: 720px) {
    /* The sidebar drops down from the chat header as a sheet: the header's
       Chats button opens it, picking a chat / New chat / a tap outside closes it. */
    .agc-page { position: relative; }
    .agc-sessions { display: none; }
    .agc-sessions-toggle { display: inline-flex; }
    .agc-page.is-sessions-open .agc-sessions {
        display: flex; position: absolute; z-index: 30;
        top: 52px; left: 8px; right: 8px; width: auto; max-height: min(70%, 460px);
        background: var(--sl-raised); border: 1px solid var(--sl-line-pop);
        border-radius: var(--sl-r-12); box-shadow: var(--sl-shadow-pop);
    }
    .agc-page.is-sessions-open .agc-sessions-toggle { background: var(--sl-selected); color: var(--sl-text-1); }
    .agc-page .agc-session { min-height: 44px; }
}
/* Settings → Brain: the small label in front of each agent default. */
.setting-sub-label { font-size: 12px; color: var(--text-secondary, var(--sl-text-2)); margin-right: 8px; white-space: nowrap; min-width: 72px; }

/* ============================================================
   Chat tabs, themed pickers, the context meter, reply actions
   ============================================================ */

/* ── the chat bar: the chat in view, and a drop-down of every open chat ── */
.agc-tabs {
    display: flex; align-items: center; gap: 2px; flex: none; min-width: 0;
    height: 38px; padding: 0 6px; box-sizing: border-box;
    background: var(--sl-app); border-bottom: 1px solid var(--sl-hairline);
}
.agc-chatpick {
    position: relative; display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 100%;
    height: 28px; padding: 0 8px 0 9px; box-sizing: border-box;
    border-radius: var(--sl-r-8); border: 1px solid var(--sl-border); background: var(--sl-panel);
    color: var(--sl-text-1); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; outline: none;
    transition: background 0.12s ease;
}
.agc-page .agc-chatpick { background: var(--sl-raised); }
.agc-chatpick:hover, .agc-chatpick.is-open { background: var(--sl-wash); }
.agc-chatpick:focus-visible { border-color: var(--sl-focus); }
.agc-chatpick > .agc-ic { flex: none; color: var(--sl-text-3); }
/* how many chats are open: muted plain text ("3 chats"), never a badge, so it
   does not read as an unread count next to the blue dot */
.agc-chatpick-count {
    flex: none; height: 16px; padding: 0 2px; box-sizing: border-box; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    background: none; color: var(--sl-text-3); font-size: 11px; font-weight: 500;
}
/* another open chat needs you: the count takes its colour */
.agc-chatpick-count.is-waiting { padding: 0 6px; background: var(--sl-warning); color: var(--sl-app); animation: agc-pulse 1.4s ease-in-out infinite; }
.agc-chatpick-count.is-error { padding: 0 6px; background: var(--sl-error); color: var(--sl-app); }
/* another open chat has replied: a blue dot on the button's corner */
.agc-chatpick-dot {
    position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--sl-accent); box-shadow: 0 0 0 2px var(--sl-app); pointer-events: none;
}
.agc-tab-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-tab-mark { display: none; flex: none; width: 7px; height: 7px; border-radius: 50%; align-items: center; justify-content: center; }
:is(.agc-chatpick, .agc-chatrow).is-working .agc-tab-mark { display: inline-flex; width: 11px; height: 11px; color: var(--sl-link); animation: agc-spin 0.9s linear infinite; }
:is(.agc-chatpick, .agc-chatrow).is-waiting .agc-tab-mark { display: inline-flex; background: var(--sl-warning); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sl-warning) 22%, transparent); animation: agc-pulse 1.4s ease-in-out infinite; }
:is(.agc-chatpick, .agc-chatrow).is-error .agc-tab-mark { display: inline-flex; background: var(--sl-error); }
.agc-tab-rename {
    flex: 1; min-width: 0; height: 22px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--sl-focus);
    background: var(--sl-app); color: var(--sl-text-1); font: inherit; font-size: 12px; outline: none;
}
.agc-tabs .agc-icon-btn { width: 28px; height: 28px; flex: none; }

/* the drop-down's rows: state mark, name, who / what it is doing, close */
.agc-chats-menu { width: 320px; max-height: min(70vh, 520px); overflow-y: auto; }
.agc-chatrow { cursor: pointer; }
/* every row keeps the mark's place (an idle chat: a quiet dot), so the names line up */
.agc-chatrow .agc-tab-mark { display: inline-flex; margin: 0 2px; background: var(--sl-border); }
.agc-chatrow .agc-pick-item-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-chatrow.is-waiting .agc-pick-item-desc { color: var(--sl-warning); }
/* a chat at work: a blue spinner, what it is doing in blue, and a bar running along the row's foot */
.agc-chatrow.is-working { position: relative; overflow: hidden; }
.agc-chatrow.is-working .agc-tab-mark { width: 13px; height: 13px; margin: 0 -1px; background: none; }
.agc-chatrow.is-working .agc-pick-item-desc { color: var(--sl-link); }
.agc-chatrow.is-working::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 35%; height: 2px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, var(--sl-link), transparent);
    animation: agc-chatrow-run 1.4s ease-in-out infinite;
}
@keyframes agc-chatrow-run { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .agc-chatrow.is-working::after { animation: none; width: 100%; opacity: 0.5; } }
/* a reply you have not read: a blue dot at the row's end */
.agc-chatrow-new { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sl-accent); }
.agc-tab-x {
    flex: none; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--sl-r-6); background: transparent;
    color: var(--sl-text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; visibility: hidden;
}
.agc-chatrow:hover .agc-tab-x, .agc-chatrow:focus-visible .agc-tab-x, .agc-chatrow.is-current .agc-tab-x { visibility: visible; }
.agc-tab-x:hover { background: var(--sl-wash); color: var(--sl-text-1); }
@media (hover: none) { .agc-tab-x { visibility: visible; } }

/* the header under the strip: quieter, one row where it fits */
.agc-head { padding: 8px 10px 8px 12px; gap: 6px; }
.agc-dock .agc-head { row-gap: 4px; }
.agc-dock .agc-status { font-size: 11px; }
.agc-head-actions .agc-icon-btn { width: 30px; height: 30px; }

/* ── themed pickers (a button over a hidden select) ── */
.agc-pick-btn {
    display: inline-flex; align-items: center; gap: 4px; height: 26px; min-width: 0; max-width: 150px; padding: 0 6px 0 8px;
    border-radius: var(--sl-r-6); border: 1px solid transparent; background: transparent; color: var(--sl-text-2);
    font-family: var(--sl-font-ui); font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
}
.agc-pick-btn:hover, .agc-pick-btn.is-open { background: var(--sl-wash); color: var(--sl-text-1); }
.agc-pick-btn.is-open { border-color: var(--sl-border); }
.agc-pick-btn:focus-visible { outline: none; border-color: var(--sl-focus); }
.agc-pick-btn[hidden] { display: none; }
.agc-pick-btn .agc-ic { color: var(--sl-text-3); }
.agc-pick-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agc-transport-btn { height: var(--sl-h-sm); border-color: var(--sl-border); background: var(--sl-control); color: var(--sl-text-1); font-weight: 600; margin-right: 4px; }
.agc-transport, .agc-pick { display: none !important; }
.agc-pick-menu {
    position: fixed; z-index: 10040; min-width: 230px; max-width: 320px; max-height: min(60vh, 440px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 1px;
}
.agc-pick-item { height: auto; min-height: 30px; padding: 6px 9px; align-items: center; gap: 10px; }
.agc-pick-item.is-current { background: var(--sl-selected); }
.agc-pick-item:focus-visible { outline: none; background: var(--sl-wash); box-shadow: inset 0 0 0 1px var(--sl-focus); }
.agc-pick-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.agc-pick-item-name { font-size: 12.5px; font-weight: 600; color: var(--sl-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agc-pick-item-desc { font-size: 11px; font-weight: 400; color: var(--sl-text-3); line-height: 1.35; white-space: normal; }
.agc-pick-item .agc-check { color: var(--sl-link); }

/* ── the context meter ── */
.agc-ctx {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; flex: none;
    border-radius: var(--sl-r-6); border: 1px solid transparent; background: transparent; cursor: pointer;
    color: var(--sl-text-2); font-family: var(--sl-font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.agc-ctx:hover, .agc-ctx.is-open { background: var(--sl-wash); color: var(--sl-text-1); }
.agc-ctx[hidden] { display: none; }
.agc-ctx svg { transform: rotate(-90deg); flex: none; }
.agc-ctx-track { fill: none; stroke: var(--sl-border); stroke-width: 2.6; }
.agc-ctx-fill { fill: none; stroke: var(--sl-link); stroke-width: 2.6; stroke-linecap: round; transition: stroke-dasharray 0.3s ease; }
.agc-ctx[data-level="high"] { color: var(--sl-warning); }
.agc-ctx[data-level="high"] .agc-ctx-fill { stroke: var(--sl-warning); }
.agc-ctx[data-level="full"] { color: var(--sl-error); }
.agc-ctx[data-level="full"] .agc-ctx-fill { stroke: var(--sl-error); }
.agc-ctx-pop { width: 280px; gap: 8px; padding-bottom: 10px; }
.agc-ctx-big { padding: 0 10px; }
.agc-ctx-big-n { font-size: 20px; font-weight: 700; color: var(--sl-text-1); font-variant-numeric: tabular-nums; }
.agc-ctx-big-of { font-size: 12px; color: var(--sl-text-2); }
.agc-ctx-bar { margin: 0 10px; height: 6px; border-radius: 3px; background: var(--sl-control); overflow: hidden; }
.agc-ctx-bar-fill { height: 100%; background: var(--sl-link); border-radius: 3px; }
.agc-ctx-bar[data-level="high"] .agc-ctx-bar-fill { background: var(--sl-warning); }
.agc-ctx-bar[data-level="full"] .agc-ctx-bar-fill { background: var(--sl-error); }

/* ── the transcript: more air, full-width replies, a toolbar under each ── */
.agc-body { padding: 16px 16px 8px; }
.agc-page .agc-body { padding: 24px 24px 12px; }
.agc-col { gap: 16px; }
.agc-page .agc-col { max-width: 780px; }
.agc-msg.agc-assistant { width: 100%; }
.agc-assistant .agc-bubble { padding: 0; }
.agc-assistant .agc-meta { padding-left: 0; }
.agc-thumbs { margin-left: 0; }
.agc-user .agc-bubble { font-size: 13.5px; line-height: 1.55; padding: 9px 13px; border-radius: 14px 14px 4px 14px; }
.agc-page .agc-user .agc-bubble { font-size: 14px; }
.agc-meta { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.agc-user .agc-meta { justify-content: flex-end; }
.agc-msg-actions { display: inline-flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.12s ease; }
.agc-msg:hover .agc-msg-actions, .agc-msg-actions:focus-within, .agc-plan-head .agc-msg-actions { opacity: 1; }
.agc-msg-act {
    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: none; border-radius: var(--sl-r-6);
    background: transparent; color: var(--sl-text-3); font-family: var(--sl-font-ui); font-size: 11px; cursor: pointer;
}
.agc-msg-act:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.agc-msg-act.is-done { color: var(--sl-success); }
@media (hover: none) { .agc-msg-actions { opacity: 1; } }
.agc-plan-head { display: flex; align-items: center; gap: 8px; }
.agc-plan-head > span:first-child { flex: 1; }
.agc-plan-head .agc-msg-act { font-family: var(--sl-font-ui); letter-spacing: 0; text-transform: none; }

/* system lines: a quiet notice, not centred prose */
.agc-msg.agc-system { align-self: stretch; align-items: stretch; }
.agc-notice {
    display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: var(--sl-r-8);
    background: var(--sl-wash); border: 1px solid var(--sl-hairline); color: var(--sl-text-2);
}
.agc-notice > .agc-ic { color: var(--sl-text-3); margin-top: 2px; }
.agc-system .agc-notice .agc-bubble { text-align: left; font-size: 12px; padding: 0; color: var(--sl-text-2); }

/* tool rows and thinking: one quiet column */
.agc-toolrow > summary { padding: 4px 8px; }
.agc-toolrow-name { font-weight: 600; }
.agc-thinking > summary { padding: 3px 8px; }
.agc-turn { padding: 0 2px 2px; opacity: 0.8; }

/* the composer: a card that reads as the place to type */
.agc-compose-box { background: var(--sl-raised); border-color: var(--sl-border); box-shadow: 0 1px 0 oklch(1 0 0 / 0.03) inset, 0 6px 18px oklch(0 0 0 / 0.18); padding: 10px 10px 8px 12px; }
.agc-input { font-size: 13.5px; }
.agc-page .agc-input { font-size: 14px; }
.agc-compose-foot { gap: 2px; }
.agc-pickers { gap: 0; flex: 0 1 auto; }
.agc-pick-btn .agc-pick-lead { color: var(--sl-text-3); }
.agc-pick-btn:hover .agc-pick-lead, .agc-pick-btn.is-set .agc-pick-lead { color: var(--sl-link); }
.agc-pick-btn > .agc-ic:last-child { opacity: 0.7; }
.agc-dock .agc-pick-btn { padding: 0 6px; gap: 4px; }
.agc-dock .agc-pick-btn > .agc-ic:last-child { display: none; }
.agc-dock .agc-compose-foot .agc-icon-btn { width: 26px; }
.agc-dock .agc-pick-btn[data-field="model"] .agc-pick-lead { display: none; }
.agc-dock .agc-ctx-pct { display: none; }
.agc-dock .agc-ctx { padding: 0 5px; }

.agc-md-tablewrap { width: fit-content; max-width: 100%; }
.agc-md-table { min-width: 0; }


/* ── the header's commands live in ⋯ (the buttons stay hidden, as what the menu runs) ── */
.agc-head-actions .agc-cmd { display: none !important; }
.agc-more-menu { min-width: 240px; }
.agc-more-menu .sl-menu-item { height: 30px; }
.agc-more-menu .sl-menu-item .agc-ic { color: var(--sl-text-3); }
.agc-more-menu .sl-menu-item.is-danger .agc-ic { color: inherit; }
.agc-tab-files.is-on { background: var(--sl-selected); color: var(--sl-link); }

/* ── the file explorer (js/agent-explorer.js) ── */
.agc-explorer-dock {
    position: fixed; top: 0; bottom: 0; right: var(--agc-dock-w, 400px); width: var(--agc-explorer-w, 260px); z-index: 10000;
    display: none; background: var(--sl-app); border-left: 1px solid var(--sl-hairline);
}
.agc-explorer-dock.is-open { display: flex; }
.pw-desktop:not(.pw-desktop-mac) .agc-explorer-dock { top: 46px; }
body.pw-agent-page .agc-explorer-dock, body.pw-agent-page .agc-files-dock { display: none !important; }
@media (max-width: 900px) { body:not(.agc-popout) .agc-explorer-dock, body:not(.agc-popout) .agc-files-dock { display: none !important; } }

.agc-explorer-col { width: 270px; flex: none; display: flex; min-height: 0; border-left: 1px solid var(--sl-hairline); background: var(--sl-app); }
.agc-explorer-col[hidden] { display: none; }

.agx { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; font-family: var(--sl-font-ui); color: var(--sl-text-1); }
.agx-ic { display: inline-flex; flex: none; }
.agx-ic svg { display: block; }
.agx-flex { flex: 1; }
.agx-head { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 4px 0 12px; box-sizing: border-box; border-bottom: 1px solid var(--sl-hairline); flex: none; min-width: 0; }
.agx-title { font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-text-3); flex: none; }
.agx-root { font-size: 12px; font-weight: 600; color: var(--sl-text-1); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agx-btn { width: 26px; height: 26px; flex: none; padding: 0; border: none; border-radius: var(--sl-r-6); background: transparent; color: var(--sl-text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.agx-btn:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.agx-find { display: flex; align-items: center; gap: 6px; margin: 6px 8px 2px; padding: 0 8px; height: 26px; border-radius: var(--sl-r-6); border: 1px solid var(--sl-border); background: var(--sl-panel); color: var(--sl-text-3); flex: none; }
.agx-find[hidden] { display: none; }
.agx-find:focus-within { border-color: var(--sl-focus); }
.agx-find input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--sl-text-1); font: inherit; font-size: 12px; outline: none; }
.agx-tree { flex: 1; min-height: 0; overflow: auto; padding: 4px 0 12px; outline: none; }
.agx-row { display: flex; align-items: center; gap: 5px; height: 24px; padding-right: 8px; cursor: pointer; font-size: 12.5px; color: var(--sl-text-2); white-space: nowrap; user-select: none; border: 1px solid transparent; }
.agx-row:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.agx-row.is-sel { background: var(--sl-selected); color: var(--sl-text-1); }
.agx-tree:focus-visible .agx-row.is-sel { border-color: var(--sl-focus); }
.agx-row.is-dir { color: var(--sl-text-1); }
.agx-twist { width: 12px; flex: none; display: inline-flex; color: var(--sl-text-3); }
.agx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.agx-kind { color: var(--sl-text-3); }
.agx-kind.is-folder { color: oklch(0.78 0.11 80); }
.agx-kind.is-doc { color: oklch(0.72 0.1 230); }
.agx-kind.is-image { color: oklch(0.74 0.13 330); }
.agx-kind.is-video { color: oklch(0.72 0.14 300); }
.agx-kind.is-audio { color: oklch(0.76 0.12 180); }
.agx-kind.is-data { color: oklch(0.8 0.12 95); }
.agx-kind.is-code { color: oklch(0.75 0.13 145); }
.agx-row.is-edited .agx-name { color: oklch(0.83 0.12 80); }
.agx-badge { flex: none; font-family: var(--sl-font-mono); font-size: 10.5px; font-weight: 600; color: oklch(0.83 0.12 80); }
.agx-note { font-size: 11.5px; color: var(--sl-text-3); height: 22px; line-height: 22px; font-style: italic; }
.agx-note.is-error { color: var(--sl-error); font-style: normal; white-space: normal; height: auto; line-height: 1.4; padding: 4px 8px 4px 0; }
.agx-menu { position: fixed; z-index: 10050; min-width: 200px; }
.agc-head-actions { margin-left: auto; }
.agc-more-menu { width: 290px; }
.agc-more-menu .sl-menu-item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── comments (js/agent-comments.js): point at something, say what to change ── */
.agc-comment-btn.is-on, .agc-viewer-comment.is-on { background: color-mix(in oklab, var(--sl-warning) 18%, transparent); color: var(--sl-warning); }
body.agc-commenting .agc-cmt-scope { cursor: crosshair; }
body.agc-commenting .agc-cmt-scope a, body.agc-commenting .agc-cmt-scope button { cursor: crosshair; }
.agc-cmt-hover { outline: 2px dashed color-mix(in oklab, var(--sl-warning) 70%, transparent); outline-offset: 2px; border-radius: 4px; background: color-mix(in oklab, var(--sl-warning) 6%, transparent); }
.agc-cmt-picking { outline: 2px solid var(--sl-warning); outline-offset: 2px; border-radius: 4px; }
.agc-cmt-on { position: relative; background: color-mix(in oklab, var(--sl-warning) 10%, transparent); box-shadow: inset 2px 0 0 var(--sl-warning); border-radius: 3px; }
.agc-cmt-on::after {
    content: attr(data-cmt); position: absolute; top: -7px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 8px; background: var(--sl-warning); color: oklch(0.2 0.02 80); font: 700 10px/16px var(--sl-font-ui); text-align: center; pointer-events: none;
}
tr.agc-cmt-on::after, img.agc-cmt-on::after, video.agc-cmt-on::after { display: none; }
.agc-cmt-mediawrap { position: relative; }
.agc-cmt-pin {
    position: absolute; transform: translate(-50%, -100%); min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px 10px 10px 2px;
    background: var(--sl-warning); color: oklch(0.2 0.02 80); font: 700 11px/20px var(--sl-font-ui); text-align: center; box-shadow: 0 2px 8px oklch(0 0 0 / 0.4); pointer-events: auto; z-index: 2;
}
.agc-cmt-float {
    position: fixed; z-index: 10060; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--sl-r-8);
    border: 1px solid var(--sl-line-pop, var(--sl-border)); background: var(--sl-raised); color: var(--sl-text-1); box-shadow: var(--sl-shadow-pop);
    font: 600 12px var(--sl-font-ui); cursor: pointer;
}
.agc-cmt-float .agx-ic { color: var(--sl-warning); }
.agc-cmt-float:hover { border-color: var(--sl-warning); }
.agc-cmt-box { position: fixed; z-index: 10060; width: 300px; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.agc-cmt-box-what { font-size: 11.5px; color: var(--sl-text-2); line-height: 1.4; border-left: 2px solid var(--sl-warning); padding-left: 8px; max-height: 60px; overflow: hidden; }
.agc-cmt-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; padding: 7px 9px; border-radius: var(--sl-r-8); border: 1px solid var(--sl-border); background: var(--sl-panel); color: var(--sl-text-1); font: 13px/1.45 var(--sl-font-ui); }
.agc-cmt-input:focus { outline: none; border-color: var(--sl-focus); }
.agc-cmt-box-foot { display: flex; align-items: center; gap: 6px; }
.agc-cmt-box-hint { flex: 1; font-size: 10.5px; color: var(--sl-text-3); }
.agc-cmt-num { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--sl-warning); color: oklch(0.2 0.02 80) !important; font: 700 10px var(--sl-font-ui) !important; flex: none; }
.agc-cmt-chip { border-color: color-mix(in oklab, var(--sl-warning) 40%, transparent); }
.agc-cmt-chip b { max-width: 200px; }
.agc-cmt-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
/* A prompt box's request (agent mode): where it came from, under the text. */
.agc-pb-chip { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11px; color: var(--sl-text-3); }
.agc-cmt-card { text-align: left; padding: 6px 8px; border-radius: var(--sl-r-8); background: oklch(0 0 0 / 0.18); border-left: 2px solid var(--sl-warning); }
.agc-cmt-card-where { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; color: var(--sl-text-2); line-height: 1.4; }
.agc-cmt-card-text { font-size: 12.5px; color: var(--sl-text-1); margin-top: 3px; white-space: pre-wrap; }
.agc-viewer-text { counter-reset: agcln; }
.agc-vline { counter-increment: agcln; padding-left: 46px; position: relative; min-height: 1.5em; white-space: pre-wrap; }
.agc-vline::before { content: counter(agcln); position: absolute; left: 0; width: 34px; text-align: right; color: var(--sl-text-3); opacity: 0.6; user-select: none; }
.agc-vline:hover { background: var(--sl-wash); }
.agc-viewer-comment { display: inline-flex; align-items: center; gap: 4px; }

/* ── the file panel (js/agent-files.js): files as editor tabs, left of the explorer ── */
.agc-files-dock {
    position: fixed; top: 0; bottom: 0; right: calc(var(--agc-dock-w, 400px) + var(--agc-x-w, 0px)); width: var(--agc-f-w, 520px); z-index: 10000;
    display: none; background: var(--sl-panel); border-left: 1px solid var(--sl-hairline);
}
.agc-files-dock.is-open { display: flex; }
.pw-desktop:not(.pw-desktop-mac) .agc-files-dock { top: 46px; }
.agc-files-col { flex: 1 1 520px; min-width: 320px; display: flex; min-height: 0; border-left: 1px solid var(--sl-hairline); background: var(--sl-panel); }
.agc-files-col[hidden] { display: none; }

.agf { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; font-family: var(--sl-font-ui); color: var(--sl-text-1); }
.agf-tabs { display: flex; align-items: stretch; height: 38px; flex: none; overflow-x: auto; scrollbar-width: none; background: var(--sl-app); border-bottom: 1px solid var(--sl-hairline); }
.agf-tabs::-webkit-scrollbar { display: none; }
.agf-tab {
    display: flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 200px; padding: 0 4px 0 12px; cursor: pointer; user-select: none;
    font-size: 12px; color: var(--sl-text-2); border-right: 1px solid var(--sl-hairline); border-top: 2px solid transparent; box-sizing: border-box;
}
.agf-tab:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.agf-tab.is-active { background: var(--sl-panel); color: var(--sl-text-1); border-top-color: var(--sl-link); }
.agf-tab-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agf-tab.is-dirty .agf-tab-name::after { content: ' ●'; color: var(--sl-text-2); }
.agf-tab-x { width: 20px; height: 20px; flex: none; padding: 0; border: none; border-radius: var(--sl-r-6); background: transparent; color: var(--sl-text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; visibility: hidden; }
.agf-tab:hover .agf-tab-x, .agf-tab.is-active .agf-tab-x, .agf-tab.is-dirty .agf-tab-x { visibility: visible; }
.agf-tab-x:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.agf-bar { display: flex; align-items: center; gap: 2px; height: 34px; padding: 0 6px 0 12px; flex: none; border-bottom: 1px solid var(--sl-hairline); min-width: 0; }
.agf-bar:empty { display: none; }
.agf-path { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; direction: rtl; text-align: left; }
.agf-act { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; flex: none; border: none; border-radius: var(--sl-r-6); background: transparent; color: var(--sl-text-2); font: 500 11.5px var(--sl-font-ui); cursor: pointer; }
.agf-act:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.agf-act.is-primary { background: var(--sl-accent); color: var(--sl-on-accent); }
.agf-act.is-primary.is-idle { background: transparent; color: var(--sl-text-3); }
.agf-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--sl-panel); }
.agf-view { flex: 1; min-height: 0; overflow: auto; display: flex; }
.agf-body.is-image .agf-view, .agf-body.is-video .agf-view, .agf-body.is-audio .agf-view { align-items: center; justify-content: center; background: var(--sl-app); padding: 16px; box-sizing: border-box; }
.agf-view img, .agf-view video { max-width: 100%; max-height: 100%; object-fit: contain; }
.agf-view iframe { flex: 1; border: none; background: #fff; }
.agf-md { padding: 20px 28px 40px; max-width: 820px; box-sizing: border-box; }
.agf-text { margin: 0; padding: 12px 16px; flex: 1; font-family: var(--sl-font-mono); font-size: 12px; line-height: 1.55; color: var(--sl-text-1); }
.agf-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--sl-text-3); font-size: 12.5px; text-align: center; padding: 20px; }
.agf-stale { display: flex; align-items: center; gap: 10px; padding: 7px 12px; flex: none; font-size: 12px; color: var(--sl-text-1); background: color-mix(in oklab, var(--sl-warning) 14%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--sl-warning) 35%, transparent); }
.agf-stale span { flex: 1; }
.agf-editor { flex: 1; min-height: 0; display: flex; background: var(--sl-app); }
.agf-gutter { flex: none; width: 44px; overflow: hidden; padding: 12px 8px 12px 0; box-sizing: border-box; text-align: right; font-family: var(--sl-font-mono); font-size: 12px; line-height: 1.55; color: var(--sl-text-3); opacity: 0.7; user-select: none; }
.agf-input { flex: 1; min-width: 0; resize: none; border: none; outline: none; padding: 12px 16px 12px 8px; margin: 0; background: transparent; color: var(--sl-text-1); font-family: var(--sl-font-mono); font-size: 12px; line-height: 1.55; white-space: pre; overflow: auto; tab-size: 4; }

/* ── the agent workspace in its own window (js/agent-chat.js popOut) ── */
body.agc-popout { margin: 0; height: 100vh; overflow: hidden; display: flex; background: var(--sl-app); }
body.agc-popout #agent-explorer-panel, body.agc-popout #agent-files-panel, body.agc-popout #agent-chat-panel.agc-dock {
    position: relative; top: auto; right: auto; bottom: auto; left: auto; height: 100vh; transform: none;
}
body.agc-popout #agent-explorer-panel { width: 260px; flex: none; border-left: none; border-right: 1px solid var(--sl-hairline); }
body.agc-popout #agent-files-panel { flex: 1 1 560px; width: auto; min-width: 0; }
body.agc-popout #agent-chat-panel.agc-dock { flex: 1 1 440px; width: auto; min-width: 340px; max-width: none; visibility: visible; pointer-events: auto; transition: none; }
body.agc-popout #agent-files-panel.is-open ~ #agent-chat-panel.agc-dock { flex: 0 1 460px; }
body.agc-popout .agc-dock-grip, body.agc-popout .agc-tab-close-panel { display: none; }
.agc-tab-pop.is-on { background: var(--sl-selected); color: var(--sl-link); }
.agc-pop-toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10070; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.agc-pop-toast { padding: 8px 14px; border-radius: var(--sl-r-8); background: var(--sl-raised); border: 1px solid var(--sl-border); box-shadow: var(--sl-shadow-pop); color: var(--sl-text-1); font: 12.5px var(--sl-font-ui); }
.agc-pop-toast.is-success { border-color: color-mix(in oklab, var(--sl-success) 50%, transparent); }
.agc-pop-toast.is-error, .agc-pop-toast.is-warning { border-color: color-mix(in oklab, var(--sl-warning) 60%, transparent); }
.agc-files-dock.is-over, .agc-explorer-dock.is-over { box-shadow: -12px 0 32px oklch(0 0 0 / 0.35); }
.agx-name-input {
    flex: 1; min-width: 0; height: 20px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--sl-focus);
    background: var(--sl-panel); color: var(--sl-text-1); font: 12.5px var(--sl-font-ui); outline: none;
}
.agx-row.is-editing { background: var(--sl-wash); }

/* ── the code editor (CodeMirror 5, vendor/codemirror5): VS Code Dark+-style colours on the app's surfaces ── */
.agf-cm { display: flex; }
.agf-cm .CodeMirror { flex: 1; height: auto; min-height: 0; background: var(--sl-app); color: oklch(0.9 0.005 250); font-family: var(--sl-font-mono); font-size: 12.5px; line-height: 1.6; }
.agf-editor.is-loading { align-items: center; justify-content: center; }
.cm-s-patchwork .CodeMirror-gutters { background: var(--sl-app); border-right: 1px solid var(--sl-hairline); }
.cm-s-patchwork .CodeMirror-linenumber { color: var(--sl-text-3); opacity: 0.75; padding: 0 10px 0 8px; }
.cm-s-patchwork .CodeMirror-activeline-gutter .CodeMirror-linenumber { color: var(--sl-text-1); opacity: 1; }
.cm-s-patchwork .CodeMirror-cursor { border-left: 2px solid var(--sl-link); }
.cm-s-patchwork .CodeMirror-selected, .cm-s-patchwork.CodeMirror-focused .CodeMirror-selected { background: color-mix(in oklab, var(--sl-link) 26%, transparent); }
.cm-s-patchwork .CodeMirror-line::selection, .cm-s-patchwork .CodeMirror-line > span::selection, .cm-s-patchwork .CodeMirror-line > span > span::selection { background: color-mix(in oklab, var(--sl-link) 26%, transparent); }
.cm-s-patchwork .CodeMirror-activeline-background { background: oklch(1 0 0 / 0.035); }
.cm-s-patchwork .CodeMirror-matchingbracket { color: #e9e9e9 !important; outline: 1px solid oklch(1 0 0 / 0.3); }
.cm-s-patchwork .cm-matchhighlight { background: oklch(1 0 0 / 0.08); }
.cm-s-patchwork .cm-searching { background: oklch(0.8 0.15 85 / 0.35); }
.cm-s-patchwork .cm-keyword { color: #c586c0; }
.cm-s-patchwork .cm-def { color: #dcdcaa; }
.cm-s-patchwork .cm-variable { color: #9cdcfe; }
.cm-s-patchwork .cm-variable-2, .cm-s-patchwork .cm-variable-3, .cm-s-patchwork .cm-property { color: #9cdcfe; }
.cm-s-patchwork .cm-type, .cm-s-patchwork .cm-builtin { color: #4ec9b0; }
.cm-s-patchwork .cm-string, .cm-s-patchwork .cm-string-2 { color: #ce9178; }
.cm-s-patchwork .cm-number { color: #b5cea8; }
.cm-s-patchwork .cm-atom { color: #569cd6; }
.cm-s-patchwork .cm-comment { color: #6a9955; font-style: italic; }
.cm-s-patchwork .cm-operator, .cm-s-patchwork .cm-punctuation { color: #d4d4d4; }
.cm-s-patchwork .cm-meta, .cm-s-patchwork .cm-qualifier { color: #d7ba7d; }
.cm-s-patchwork .cm-tag { color: #569cd6; }
.cm-s-patchwork .cm-attribute { color: #9cdcfe; }
.cm-s-patchwork .cm-bracket { color: #808080; }
.cm-s-patchwork .cm-header { color: #569cd6; font-weight: 700; }
.cm-s-patchwork .cm-strong { font-weight: 700; }
.cm-s-patchwork .cm-em { font-style: italic; }
.cm-s-patchwork .cm-link, .cm-s-patchwork .cm-url { color: #3794ff; }
.cm-s-patchwork .cm-quote { color: #6a9955; }
.cm-s-patchwork .cm-hr { color: #808080; }
.cm-s-patchwork .cm-error { color: #f44747; }
.agf-cm .CodeMirror-dialog { background: var(--sl-raised); color: var(--sl-text-2); border-bottom: 1px solid var(--sl-border); padding: 6px 12px; font-family: var(--sl-font-ui); font-size: 12px; }
.agf-cm .CodeMirror-dialog input { color: var(--sl-text-1); font-family: var(--sl-font-mono); font-size: 12px; background: var(--sl-panel); border: 1px solid var(--sl-border) !important; border-radius: 5px; padding: 2px 6px; margin: 0 4px; }
.agf-cm .CodeMirror-dialog button { font: 12px var(--sl-font-ui); background: var(--sl-control); color: var(--sl-text-1); border: 1px solid var(--sl-border); border-radius: 5px; padding: 2px 8px; margin-left: 4px; cursor: pointer; }
.agf-cm .CodeMirror-dialog .CodeMirror-search-hint { color: var(--sl-text-3); }
/* Files header, like VS Code: the folder's name gets the room; its actions show while the panel is hovered or in use */
.agx-head .agx-btn:not(:last-child) { display: none; }
.agx:hover .agx-head .agx-btn, .agx:focus-within .agx-head .agx-btn { display: inline-flex; }
@media (hover: none) { .agx-head .agx-btn { display: inline-flex; } }

/* ── commenting on anything in the app (js/agent-comments.js _screen) ── */
.agc-cmt-screenhl {
    position: fixed; z-index: 10055; pointer-events: none; box-sizing: border-box; border-radius: 6px;
    outline: 2px dashed var(--sl-warning); outline-offset: 2px; background: color-mix(in oklab, var(--sl-warning) 8%, transparent);
    transition: left 0.06s ease, top 0.06s ease, width 0.06s ease, height 0.06s ease;
}
.agc-cmt-screenhl-label {
    position: absolute; left: -2px; bottom: calc(100% + 6px); max-width: 420px; padding: 3px 8px; border-radius: 6px;
    background: var(--sl-warning); color: oklch(0.2 0.02 80); font: 600 11px/1.35 var(--sl-font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agc-cmt-screenhl.is-low .agc-cmt-screenhl-label { bottom: auto; top: calc(100% + 6px); }
.agc-cmt-banner {
    position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10058; display: flex; align-items: center; gap: 9px;
    padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--sl-raised); border: 1px solid color-mix(in oklab, var(--sl-warning) 55%, transparent);
    box-shadow: var(--sl-shadow-pop); color: var(--sl-text-1); font: 12.5px var(--sl-font-ui);
}
.agc-cmt-banner > .agx-ic { color: var(--sl-warning); }
.agc-cmt-banner-done { height: 24px; padding: 0 12px; border-radius: 999px; border: none; background: var(--sl-warning); color: oklch(0.2 0.02 80); font: 700 11.5px var(--sl-font-ui); cursor: pointer; }
.agc-cmt-banner-key { font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-3); border: 1px solid var(--sl-border); border-radius: 4px; padding: 0 4px; }
.agc-cmt-screenpins { position: fixed; inset: 0; z-index: 10054; pointer-events: none; }
.agc-cmt-screenpins .agc-cmt-pin { pointer-events: auto; }
/* word wrap (Alt+Z) in the file panel's plain editor; its line numbers would drift, so they step aside */
.agf-editor.is-wrap .agf-input { white-space: pre-wrap; overflow-wrap: anywhere; }
.agf-editor.is-wrap .agf-gutter { display: none; }
.agf-editor.is-wrap .agf-input { padding-left: 16px; }
.agf-act.agf-wrap.is-on { color: var(--sl-link); background: var(--sl-selected); }