:root,
:root[data-theme="dark"] {
  --bg: #0f1115;
  --panel: #161a22;
  --panel-2: #1d222c;
  --fg: #e6e8ec;
  --dim: #8a93a3;
  --accent: #5eb0ff;
  --accent-hover: #78bcff;
  --accent-2: #8c7bff;
  --ok: #6ecb7d;
  --warn: #f2b05e;
  --err: #ef6f6c;
  --border: #262b36;
  --on-accent: #0b1018;
  --msg-user-bg: #1e2838;
  --msg-assistant-bg: #1b2620;
  --msg-assistant-fg: #d8eadc;
  --snippet-fg: #cfd5df;
  --snippet-bg: rgba(255, 255, 255, 0.02);
  --pulse-bg: rgba(94, 176, 255, 0.18);
  --paper-bg: #1a1f29;
  --paper-fg: #e8eaee;
  --paper-border: #2c323d;
  --paper-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  --code-bg: rgba(255, 255, 255, 0.06);
  --quote-border: #3a414e;
  --radius: 8px;
}

:root[data-theme="light"] {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #eef1f5;
  --fg: #1a1d23;
  --dim: #5a6473;
  --accent: #1f6feb;
  --accent-hover: #1858bf;
  --accent-2: #6e58e0;
  --ok: #1f8a30;
  --warn: #b8761e;
  --err: #c63a35;
  --border: #d6dbe2;
  --on-accent: #ffffff;
  --msg-user-bg: #e6edf7;
  --msg-assistant-bg: #e3f0e7;
  --msg-assistant-fg: #18351f;
  --snippet-fg: #2a2f37;
  --snippet-bg: rgba(0, 0, 0, 0.04);
  --pulse-bg: rgba(31, 111, 235, 0.14);
  --paper-bg: #ffffff;
  --paper-fg: #1a1d23;
  --paper-border: #e3e6eb;
  --paper-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  --code-bg: rgba(0, 0, 0, 0.05);
  --quote-border: #d6dbe2;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* App-shell: topbar + breadcrumb (auto-height) above, main fills the rest.
     Lets workspace/dashboard size to the remaining viewport without overflow. */
  display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 14px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); }
h3 { font-size: 13px; margin: 12px 0 6px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.dim { color: var(--dim); }
.error { color: var(--err); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand { font-weight: 600; color: var(--fg); }
.topbar-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  color: var(--dim);
  font-size: 13px;
}
.topbar-context-link {
  color: var(--dim);
  white-space: nowrap;
}
.topbar-context-link:hover {
  color: var(--fg);
}
.topbar-context-sep {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  flex-shrink: 0;
}
.topbar-context-current {
  color: var(--fg);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-modes { display: flex; align-items: center; gap: 4px; }
.mode-link {
  display: inline-block;
  padding: 6px 14px;
  color: var(--dim);
  text-decoration: none;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
}
.mode-link:hover { color: var(--fg); background: var(--panel-2); }
.mode-link.active {
  color: var(--fg);
  background: var(--panel-2);
  border-color: var(--border);
}
.topbar-nav { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar .who { color: var(--dim); }
.theme-toggle {
  background: var(--panel-2); color: var(--dim); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--accent); }

/* Top-bar model pill: passive indicator with hover tooltip showing
   provider/endpoint and the list of models on the same provider. */
.model-pill {
  position: relative;
  display: inline-flex; align-items: center;
  background: var(--panel-2); color: var(--dim);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; font-size: 12px;
  cursor: default; outline: none;
}
.model-pill:hover, .model-pill:focus { color: var(--fg); border-color: var(--accent); }
.model-pill-label #model-pill-name { color: var(--fg); font-weight: 600; }
/* Environment + backend badges (states: local·dev, IONOS·stage, IONOS·prod). */
.mp-badge {
  display: inline-block; margin-right: 6px; padding: 1px 6px;
  border-radius: 999px; border: 1px solid var(--border);
  font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--dim);
}
.mp-env-prod    { color: #fff; background: var(--err); border-color: transparent; }
.mp-env-stage   { color: #fff; background: var(--accent); border-color: transparent; }
.mp-env-dev     { color: var(--dim); }
.mp-backend-ionos { color: var(--fg); border-color: var(--accent); }
.mp-backend-local { color: var(--dim); }
.model-pill-tooltip {
  position: absolute; top: calc(100% + 8px); right: 0;
  max-width: 280px; width: max-content;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 9px; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  font-size: 11px; line-height: 1.45; z-index: 50;
  white-space: nowrap; pointer-events: none;
}
.model-pill-tooltip[hidden] { display: none; }
/* Arrow pointing up to the pill. */
.model-pill-tooltip::before,
.model-pill-tooltip::after {
  content: ""; position: absolute; right: 12px;
  border: 5px solid transparent;
}
.model-pill-tooltip::before {
  top: -10px; border-bottom-color: var(--border);
}
.model-pill-tooltip::after {
  top: -9px; border-bottom-color: var(--panel);
}
.mp-row { display: flex; gap: 8px; }
.mp-key { color: var(--dim); }
.mp-val { color: var(--fg); }
.mp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* GPU pill — reuses .model-pill, adds a colored status dot and tighter spacing.
   Dot color encodes offload state; same hover-tooltip pattern as the model pill. */
.gpu-pill { gap: 6px; }
.gpu-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--dim); flex-shrink: 0;
}
.gpu-dot-ok   { background: #22c55e; }   /* green: fully on GPU */
.gpu-dot-warn { background: #eab308; }   /* amber: partial offload */
.gpu-dot-bad  { background: #ef4444; }   /* red: CPU only */
.gpu-dot-idle { background: var(--dim); } /* gray: no model loaded */

/* Send button in Stop mode — appears whenever a turn is active and the user
   can abort with Esc or by clicking the same button. */
button.danger,
button.danger:hover {
  background: var(--err);
  border-color: var(--err);
  color: #fff;
}
.inline { display: inline; }
.linklike {
  background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit;
}

main {
  padding: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Forms */
input, select, textarea, button {
  font: inherit; color: var(--fg);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px;
}
textarea { resize: vertical; }
button { cursor: pointer; background: var(--panel-2); }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
label { display: block; margin-bottom: 8px; color: var(--dim); font-size: 12px; }
label input, label select, label textarea { display: block; width: 100%; margin-top: 4px; color: var(--fg); font-size: 14px; }

/* Login */
.login-wrap { display: grid; place-items: center; padding: 60px 20px; }
.login-wrap .card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; width: 320px;
}
.login-wrap h1 { margin-bottom: 12px; }

/* Breadcrumb (Workspace pages). CSS-drawn chevron keeps the separator
   visually aligned across browsers (Unicode › drifts off-baseline in FF). */
.breadcrumb {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1;
}
.breadcrumb .crumb {
  display: inline-flex; align-items: center;
  color: var(--dim);
  padding: 4px 8px;
  border-radius: 999px;
  transition: color 0.15s, background-color 0.15s;
}
.breadcrumb a.crumb:hover {
  color: var(--fg);
  background: var(--panel-2);
  text-decoration: none;
}
.breadcrumb .crumb.current {
  color: var(--fg);
  font-weight: 600;
  background: var(--panel-2);
}
.breadcrumb .crumb-sep {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--dim);
  border-top: 1.5px solid var(--dim);
  transform: rotate(45deg);
  opacity: 0.55;
}

/* Dashboard */
.dash {
  display: grid;
  --pane-resizer-size: 12px;
  grid-template-columns: minmax(240px, var(--pane-1-size, 280px)) var(--pane-resizer-size) minmax(420px, var(--pane-2-size, 1fr));
  gap: 0;
  /* Fill main vertically so the cards stretch with the window. Default
     align-items (stretch) takes care of equalizing the column heights. */
  height: 100%;
  min-height: 0;
}
.dash-side, .dash-main {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}
/* Center the empty-state card vertically when no client is picked. */
.dash-main > .empty-card { margin: auto 0; }
.clients { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 2px; }
.clients li {
  display: flex; align-items: stretch; gap: 4px;
  border-radius: 6px;
}
.clients li.selected { background: var(--panel-2); }
.clients li.empty { padding: 6px 8px; }
.clients .client-link {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--fg);
  border: 1px solid transparent;
}
.clients .client-link:hover { background: var(--panel-2); text-decoration: none; }
.clients li.selected .client-link {
  border-color: var(--border);
  background: var(--panel-2);
}
.clients li.selected .client-link strong { color: var(--accent); }
.clients .client-link .dim { font-size: 11px; }
.clients .del, .projects .del {
  background: none; border: 0; color: var(--dim); cursor: pointer;
  padding: 0 8px; font-size: 16px; line-height: 1;
  align-self: center;
}
.clients .del:hover, .projects .del:hover { color: var(--err); }
.projects .project-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stack > * { display: block; }
.stack h3 { margin-top: 16px; }
.projects { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.projects li {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px;
  background: var(--panel-2);
}
.projects li.empty {
  background: transparent; border-style: dashed;
}
.projects li p { margin: 4px 0; }

/* Pane header in the main column: title left, "New X" disclosure right. */
.pane-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 4px;
}
.pane-head .pane-sub { margin: 2px 0 0; font-size: 12px; }
.pane-head .pane-sub strong { color: var(--fg); }

/* Unified create-form disclosure (used for both client and project) */
.create-block summary {
  cursor: pointer; color: var(--accent);
  font-size: 13px; padding: 4px 0;
}
.create-block summary:hover { color: var(--accent-hover); }
.create-block[open] summary { margin-bottom: 6px; }
.entity-form button[type="submit"] {
  margin-top: 8px;
}

/* Inline empty-state text used inside any pane (project doc-body, KB
   sidebar/main, etc.). Explicit sans-serif font so the doc-body's Georgia
   serif doesn't bleed in. Add `margin: auto 0` in the parent's flex column
   to vertically center it. */
.placeholder {
  text-align: center;
  color: var(--dim);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  padding: 24px 16px;
  margin: 0;
}

/* Bigger "card" empty state with dashed outline + tinted background.
   Used in the dashboard when no client is selected. */
.empty-card {
  text-align: center;
  padding: 32px 16px;
  color: var(--dim);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.empty-card h2 { margin-bottom: 6px; color: var(--fg); }

/* Shared status pill used in the project workspace top bar. */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--border); color: var(--dim); font-size: 12px;
  min-width: 120px; justify-content: center;
}
.status::before {
  content: ""; display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; opacity: 0.35;
}
.status.busy {
  color: var(--warn); border-color: var(--warn);
  background: rgba(242, 176, 94, 0.08);
}
.status.busy::before {
  opacity: 1;
  background: transparent;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
.status.done { color: var(--ok); border-color: var(--ok); }
.status.done::before { opacity: 1; animation: pulseDot 1.4s ease-in-out 2; }
.status.err  { color: var(--err); border-color: var(--err); }
.status.err::before { opacity: 1; }
.topbar-status {
  min-width: 110px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseDot { 50% { transform: scale(1.4); opacity: 0.6; } }

/* Project page wraps everything in <section class="project">. Keep it a
   flex column so .workspace can fill the page body area. */
.project {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workspace {
  display: grid;
  --pane-resizer-size: 12px;
  /* Fluid: all three panes grow/shrink with the viewport. The minmax() floor
     stops any pane from being crushed below the width its content needs
     (file-drop label, smallest doc line, chat textarea + Send button). */
  grid-template-columns:
    minmax(220px, var(--pane-1-size, 1fr))
    var(--pane-resizer-size)
    minmax(360px, var(--pane-2-size, 2fr))
    var(--pane-resizer-size)
    minmax(320px, var(--pane-3-size, 1.4fr));
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.pane {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; min-height: 0;
}

.pane-resizer {
  position: relative;
  min-width: var(--pane-resizer-size, 12px);
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
.pane-resizer::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 82%, transparent);
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.pane-resizer:hover::before,
.pane-resizer:focus-visible::before,
[data-resizable-layout].is-resizing > .pane-resizer.active::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pane-resizer:focus-visible {
  outline: none;
}
.pane-resizer-block {
  min-width: 0;
  min-height: var(--pane-resizer-size, 12px);
  cursor: row-resize;
}
.pane-resizer-block::before {
  top: 50%;
  bottom: auto;
  left: 10px;
  right: 10px;
  width: auto;
  height: 2px;
  transform: translateY(-50%);
}

/* Uploads pane — slim drop zone with an inline Attach button, plus a
   wrapping chip grid (.file-chips) below for the actual uploads. */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--dim);
  cursor: pointer;
  text-align: center;
}
.file-drop:hover { border-color: var(--accent); }
.file-drop.drag { border-color: var(--accent); color: var(--accent); background: var(--panel-2); }
.file-drop .file-drop-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 12px;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
.file-drop:hover .file-drop-btn { border-color: var(--accent); background: var(--panel-2); }
.file-drop .file-drop-hint { font-size: 11px; }
.uploads {
  margin: 10px 0 0;
  padding: 0;
  overflow: auto;
  min-height: 0;
}
.uploads:empty::before {
  content: "No documents uploaded yet.";
  display: block;
  font-size: 12px;
  color: var(--dim);
  padding: 4px 2px;
}

/* Document pane */
.doc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.doc-actions { display: flex; align-items: center; gap: 10px; }
.publish-btn {
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  border-radius: 6px; padding: 6px 12px; font-weight: 600; font-size: 12px;
}
.publish-btn:hover:not([disabled]) { background: var(--accent-hover); border-color: var(--accent-hover); }
.publish-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.norm-strip {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px 0; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-alt, var(--surface));
  font-size: 12px;
}
.norm-strip .label { font-weight: 600; }
.norm-strip .value { font-family: var(--mono, monospace); }
.norm-strip .progress { margin-left: auto; }

.doc-stack {
  --pane-resizer-size: 12px;
  display: grid;
  grid-template-rows:
    minmax(120px, var(--pane-1-size, 32%))
    var(--pane-resizer-size)
    minmax(220px, var(--pane-2-size, 68%));
  flex: 1 1 auto;
  min-height: 0;
}
.doc-stack.gaps-hidden {
  grid-template-rows: 0 0 minmax(0, 1fr);
}
.doc-stack.gaps-hidden > .pane-resizer,
.doc-stack.gaps-hidden > #gaps-panel {
  display: none;
}

/* "Needs your input" gaps panel — placeholders the agent left for the user. */
.gaps-panel {
  margin: 0; padding: 10px 12px;
  border: 1px solid var(--warn); border-radius: 6px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface, transparent));
  font-size: 13px;
  overflow: auto;
  min-height: 0;
}
.gaps-head { display: flex; align-items: center; gap: 8px; }
.gaps-title { font-weight: 600; }
.gaps-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--warn); color: #1a1205;
  font-size: 12px; font-weight: 700;
}
.gaps-hint { margin: 4px 0 8px 0; font-size: 12px; }
.gaps-list { margin: 0; padding: 0; list-style: none; }
.gaps-list .gap-item {
  display: flex; align-items: flex-start; gap: 4px; margin: 4px 0;
}
.gaps-list .gap-check {
  display: flex; align-items: flex-start; gap: 7px; cursor: pointer; flex: 1;
}
/* Override the global `label input { display:block; width:100% }` (line ~189),
   which otherwise stretches this checkbox across the whole row. */
.gaps-list .gap-check input {
  width: auto; display: inline-block; flex: none;
  margin: 2px 0 0 0; cursor: pointer;
}
.gaps-list .gap-topic { font-weight: 600; }
.gaps-list .gap-item.done .gap-text { text-decoration: line-through; opacity: 0.6; }
.gaps-list .gap-auto {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 1px 5px; border-radius: 8px;
  background: color-mix(in srgb, var(--ok, #2e7d32) 22%, transparent);
  color: var(--ok, #2e7d32); align-self: center;
}

/* Inline draft-through placeholder marker inside section prose. */
.gap-ph {
  background: color-mix(in srgb, var(--warn) 30%, transparent);
  color: var(--fg); border: 1px dashed var(--warn); border-radius: 4px;
  padding: 0 4px; font-style: italic; cursor: help;
}
.gap-ph::before { content: "✎ "; opacity: 0.7; }
.doc-body {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  background: var(--paper-bg); color: var(--paper-fg);
  border: 1px solid var(--paper-border); border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
  padding: 22px 28px;
  font: 14px/1.5 Georgia, "Iowan Old Style", "Times New Roman", serif;
  /* Flex column so the empty-state placeholder can vertically center via
     margin: auto. Sections (when present) stack from the top because they
     have no flex-grow and default justify-content: flex-start applies. */
  display: flex;
  flex-direction: column;
}
.doc-body .placeholder {
  margin: auto 0;
}

/* Rendered | Source tabs above the document */
.doc-view-tabs {
  position: sticky; top: -22px; z-index: 2;
  display: flex; gap: 2px;
  margin: -22px -28px 14px; padding: 8px 28px 0;
  background: var(--paper-bg);
  border-bottom: 1px solid var(--paper-border);
}
.doc-view-tab {
  background: none; border: none; cursor: pointer;
  font: 600 12px/1 ui-sans-serif, system-ui, sans-serif;
  color: var(--dim); padding: 6px 10px;
  border-bottom: 2px solid transparent;
}
.doc-view-tab:hover { color: var(--paper-fg); }
.doc-view-tab.active { color: var(--paper-fg); border-bottom-color: var(--accent); }
.doc-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.doc-view[hidden] { display: none; }
.doc-source .src-section { margin: 0 0 18px; }
.doc-source .src-title {
  font: 600 11px/1.4 ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.doc-source .src-body {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  font: 13px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--paper-fg);
}

.section { padding: 0; margin: 0 0 22px; }
.section:last-child { margin-bottom: 0; }
.section.new {
  background: var(--pulse-bg); border-radius: 4px;
  animation: pulse 1.2s ease-out;
}
.section.editing {
  background: rgba(94, 176, 255, 0.06);
  outline: 1px dashed var(--accent);
  border-radius: 4px;
  padding: 6px 8px;
  margin-left: -8px;
  margin-right: -8px;
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 8px; padding: 0 0 4px;
  border-bottom: 1px solid var(--paper-border);
}
.section-title {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; font-weight: 700; color: var(--paper-fg);
  text-transform: none; letter-spacing: 0;
  border-bottom: none;
}
.section-actions {
  display: flex; align-items: center; gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.section-actions .src-badge {
  font-size: 11px; line-height: 1; padding: 2px 6px;
  border-radius: 999px; color: var(--dim);
  border: 1px solid var(--border); background: transparent;
}
.section-actions .src-badge.human { color: var(--accent); border-color: var(--accent); }
.section-actions .src-badge.editing-badge { color: var(--warn); border-color: var(--warn); }
.section-actions button {
  font: inherit; font-size: 12px;
  padding: 3px 10px; border-radius: 4px;
  background: transparent; color: var(--dim);
  border: 1px solid var(--border);
  cursor: pointer;
}
.section-actions button:hover { color: var(--fg); border-color: var(--accent); }
.section-actions .save-btn { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.section-actions .save-btn:hover { background: var(--accent-hover); }
.section-actions .save-btn[disabled] { opacity: 0.6; cursor: progress; }
.section-editor {
  width: 100%; box-sizing: border-box;
  margin-top: 6px; padding: 8px 10px;
  font: 13.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--paper-fg); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  resize: vertical; min-height: 160px;
}
.section-editor:focus { outline: none; border-color: var(--accent); }
.section-actions button.active { color: var(--fg); border-color: var(--accent); }
@keyframes pulse { from { background: var(--pulse-bg); } to { background: transparent; } }

/* Targeted-edit proposal panel (propose → preview → confirm) */
.proposal-panel {
  margin: 0 0 12px; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.proposal-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.proposal-title { font-weight: 600; color: var(--fg); }
.proposal-sub { font-size: 12px; }
.proposal-actions { margin-left: auto; display: flex; gap: 8px; }
.proposal-actions button {
  font: inherit; font-size: 12px; padding: 4px 12px;
  border-radius: 4px; border: 1px solid var(--border);
  background: transparent; color: var(--dim); cursor: pointer;
}
.proposal-apply { color: var(--on-accent) !important; background: var(--accent) !important; border-color: var(--accent) !important; }
.proposal-apply:hover { background: var(--accent-hover) !important; }
.proposal-discard:hover { color: var(--fg); border-color: var(--err); }
.proposal-hint { font-size: 12px; margin: 6px 0 10px; }
.proposal-section { margin: 0 0 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.proposal-section.unapplicable { opacity: 0.6; }
.proposal-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; cursor: pointer; }
.proposal-sec-title { font-weight: 600; font-size: 13px; color: var(--paper-fg); }
.proposal-conflict { font-size: 11px; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 1px 7px; }
.proposal-badge { font-size: 11px; color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: 1px 7px; }
.proposal-badge-del { color: var(--err); border-color: var(--err); }
.proposal-section.is-addition { border-left: 3px solid var(--ok); }
.proposal-section.is-deletion { border-left: 3px solid var(--err); }
.proposal-section .redline {
  white-space: pre-wrap; word-break: break-word;
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--paper-fg);
}
.proposal-section .redline ins {
  text-decoration: none; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border-bottom: 1px solid var(--ok);
}
.proposal-section .redline del {
  text-decoration: line-through; color: var(--err);
  background: color-mix(in srgb, var(--err) 14%, transparent);
}

/* Revision history + redline panel */
.section-history {
  margin-top: 10px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.history-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 12px; color: var(--dim);
}
.history-controls label { display: inline-flex; align-items: center; gap: 6px; }
.history-controls select {
  font: inherit; font-size: 12px; padding: 2px 6px;
  color: var(--fg); background: var(--panel); border: 1px solid var(--border);
  border-radius: 4px;
}
.history-controls .hist-arrow { color: var(--dim); }
.redline {
  white-space: pre-wrap; word-break: break-word;
  font: 13.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--paper-fg);
}
.redline ins {
  text-decoration: none; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border-bottom: 1px solid var(--ok);
}
.redline del {
  text-decoration: line-through; color: var(--err);
  background: color-mix(in srgb, var(--err) 14%, transparent);
}

/* Markdown content rendered into .section-body */
.markdown-body { color: var(--paper-fg); }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p { margin: 0 0 10px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 14px 0 6px; font-weight: 600; line-height: 1.3; color: var(--paper-fg);
  text-transform: none; letter-spacing: 0;
}
.markdown-body h1 { font-size: 15px; }
.markdown-body h2 { font-size: 14.5px; }
.markdown-body h3 { font-size: 14px; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 13px; color: var(--dim); }
.markdown-body ul, .markdown-body ol { margin: 0 0 10px; padding-left: 22px; }
.markdown-body li { margin: 2px 0; }
.markdown-body li > p { margin: 0 0 4px; }
.markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 1px 5px; border-radius: 3px; font-size: 0.92em;
}
.markdown-body pre {
  background: var(--code-bg); padding: 10px 12px; border-radius: 4px;
  overflow: auto; margin: 8px 0; font-size: 12.5px; line-height: 1.45;
}
.markdown-body pre code { background: transparent; padding: 0; font-size: inherit; }
.markdown-body blockquote {
  margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--quote-border);
  color: var(--dim); font-style: italic;
}
.markdown-body table {
  border-collapse: collapse; margin: 10px 0; font-size: 13px;
}
.markdown-body th, .markdown-body td {
  border: 1px solid var(--paper-border); padding: 6px 10px; text-align: left;
  vertical-align: top;
}
.markdown-body th { background: var(--code-bg); font-weight: 600; }
.markdown-body hr {
  border: 0; border-top: 1px solid var(--paper-border); margin: 16px 0;
}
.markdown-body a { color: var(--accent); }
.markdown-body strong { font-weight: 700; }
.markdown-body em { font-style: italic; }
.md-fallback { white-space: pre-wrap; word-wrap: break-word; font: inherit; }

/* Auto-numbering: CSS counters always produce a correct sequential sequence
   regardless of what numbers the agent may have baked into heading text.
   Numbers stripped in renderMarkdownSafe / renderDocument in project.js. */
.doc-body {
  counter-reset: doc-s;
}
.doc-body .section {
  counter-increment: doc-s;
  counter-reset: doc-ss doc-sss;
}
.section-title::before {
  content: counter(doc-s) "\2003";
  color: var(--dim);
  font-weight: 400;
}
.markdown-body h3 {
  counter-increment: doc-ss;
  counter-reset: doc-sss;
}
.markdown-body h3::before {
  content: counter(doc-s) "." counter(doc-ss) "\2003";
  color: var(--dim);
  font-weight: 400;
}
.markdown-body h4 {
  counter-increment: doc-sss;
}
.markdown-body h4::before {
  content: counter(doc-s) "." counter(doc-ss) "." counter(doc-sss) "\2003";
  color: var(--dim);
  font-weight: 400;
}

/* Generated-files list lives in the left (uploads) pane, below the requirement
   docs. Let the uploads chips absorb the flexible height (scrolling when long)
   and keep this block compact at the bottom so it's never clipped. */
.pane-uploads .uploads { flex: 1 1 auto; }
.pane-uploads .generated-wrap { flex: 0 0 auto; }

.generated-wrap { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.generated-wrap h3 { margin-top: 0; }
.generated-list { list-style: none; padding: 0; margin: 0; max-height: 22vh; overflow: auto; }
.generated-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px; border-bottom: 1px dashed var(--border);
}
.generated-list .name { color: var(--dim); word-break: break-all; text-decoration: none; }
.generated-list .name:hover { color: var(--fg); text-decoration: underline; }
.generated-list .meta { color: var(--dim); font-size: 11px; margin-left: 8px; white-space: nowrap; }
.generated-list .empty { color: var(--dim); padding: 4px 6px; font-style: italic; }
.older-docs { margin-top: 6px; }
.older-docs > summary {
  cursor: pointer; color: var(--accent); font-size: 12px;
  padding: 4px 6px; list-style: none;
}
.older-docs > summary::-webkit-details-marker { display: none; }
.older-docs > summary::before { content: "▸ "; color: var(--dim); }
.older-docs[open] > summary::before { content: "▾ "; }
.older-docs > summary:hover { text-decoration: underline; }
.older-docs .generated-list { max-height: 18vh; }
.msg a { color: var(--accent); }

/* Chat pane */
.pane-chat { padding-top: 0; }
.chat-tabs {
  display: flex; gap: 2px;
  margin: 0 -12px 10px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
}
.chat-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 10px 14px;
  color: var(--dim); font-weight: 500;
  cursor: pointer;
}
.chat-tab:hover { color: var(--fg); border-color: transparent; }
.chat-tab.active {
  color: var(--fg); border-bottom-color: var(--accent);
}
.chat-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; justify-content: space-between; align-items: center; }
.samples {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; margin-bottom: 8px;
}
.samples button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 6px 4px; color: var(--fg); }
.samples button:hover { color: var(--accent); }
.messages { overflow: auto; min-height: 80px; max-height: 28vh; padding-right: 4px; }
.msg { padding: 6px 10px; border-radius: 6px; margin-bottom: 6px; white-space: pre-wrap; }
.msg.user { background: var(--msg-user-bg); }
.msg.assistant { background: var(--msg-assistant-bg); color: var(--msg-assistant-fg); }
.msg .who { font-size: 11px; color: var(--dim); margin-bottom: 2px; }

.activity { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 80px; max-height: 28vh; }
.activity li {
  border-left: 2px solid var(--border);
  padding: 4px 10px; margin-bottom: 6px; font-size: 12px;
}
.activity li.invoking    { border-left-color: var(--accent-2); }
.activity li.thinking    { border-left-color: var(--dim); }
.activity li.tool_result { border-left-color: var(--accent); }
.activity li.sub_answer  { border-left-color: var(--warn); }
.activity li.final       { border-left-color: var(--ok); }
.activity li.error       { border-left-color: var(--err); }
.activity .row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.activity .label { font-weight: 600; color: var(--fg); }
.activity .origin { color: var(--dim); font-size: 11px; margin-left: 6px; }
.activity .repeat-badge {
  margin-left: 6px; font-size: 11px; font-weight: 600;
  color: var(--dim); border: 1px solid var(--border); border-radius: 999px;
  padding: 0 6px;
}
.activity .reconnect-btn {
  margin-top: 6px; padding: 4px 12px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 6px;
}
.activity .elapsed { color: var(--dim); font-size: 11px; white-space: nowrap; }
.activity .explain { color: var(--dim); }
.activity .snippet {
  color: var(--snippet-fg); margin-top: 4px;
  white-space: pre-wrap; word-wrap: break-word;
  max-height: 6.8em; overflow: hidden;
  font-size: 12px; line-height: 1.35;
  background: var(--snippet-bg); padding: 4px 6px; border-radius: 4px;
}
.activity li.final .snippet, .activity li.sub_answer .snippet { max-height: 14em; }
.activity details { margin-top: 4px; }
.activity details summary { color: var(--accent); cursor: pointer; font-size: 11px; }
.activity details[open] .snippet { max-height: none; }
.activity li.heartbeat {
  border-left-color: var(--dim); opacity: 0.65;
  padding: 2px 10px; font-size: 11px;
}
.activity li.heartbeat .label { font-weight: 400; color: var(--dim); }

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  /* Push the input to the bottom of .chat-panel regardless of how much
     content the messages/activity blocks above are using. */
  margin-top: auto;
  padding-top: 10px;
}
.chat-form textarea { min-height: 60px; }
.chat-form button { align-self: end; }
.chat-form button[disabled] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 1fr; height: auto; }
  .dash { grid-template-columns: 1fr; height: auto; }
  .pane { height: auto; }
  .workspace > .pane-resizer,
  .dash > .pane-resizer { display: none; }
}

/* ── KB page (Ask the KB) ───────────────────────────────────────────── */
.kb {
  display: grid;
  --pane-resizer-size: 12px;
  grid-template-columns: minmax(240px, var(--pane-1-size, 280px)) var(--pane-resizer-size) minmax(420px, var(--pane-2-size, 1fr));
  gap: 0;
  /* Fill the remaining viewport handed to <main> by the body-level flex.
     Previously calc(100vh - 56px) — magic offset that drifted whenever the
     topbar changed and didn't track height changes cleanly in Firefox. */
  height: 100%;
  min-height: 0;
  /* No card chrome on the wrapper: the two panes are their own cards (like
     .pane in the workspace), so the resizer sits in a page-background gutter
     between them rather than flush inside one bordered box. */
}
.kb-sidebar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  overflow: auto;
  display: flex; flex-direction: column;
  min-height: 0;
}
.kb-new {
  width: 100%;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}
.kb-new:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.kb-thread-list { overflow: auto; min-height: 0; flex: 1 1 auto; }
.kb-bucket {
  font-size: 11px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 14px 4px 4px;
}
.kb-bucket:first-child { margin-top: 4px; }
.kb-threads { list-style: none; margin: 0; padding: 0; }
.kb-thread {
  display: flex; align-items: stretch;
  border-radius: 6px;
  margin-bottom: 2px;
}
.kb-thread:hover { background: var(--panel-2); }
.kb-thread.active { background: var(--panel-2); }
.kb-thread-btn {
  flex: 1 1 auto;
  background: transparent; border: 0;
  text-align: left;
  padding: 7px 8px;
  color: var(--fg);
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
}
.kb-thread-title {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px;
}
.kb-thread-del {
  background: transparent; border: 0;
  color: var(--dim);
  padding: 0 8px;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s;
}
.kb-thread:hover .kb-thread-del,
.kb-thread.active .kb-thread-del { opacity: 1; }
.kb-thread-del:hover { color: var(--err); }

.kb-main {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 16px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.kb-main-head {
  display: flex; justify-content: space-between; align-items: baseline;
  max-width: 760px; width: 100%; margin: 0 auto 8px;
  gap: 12px;
}
.kb-main-head h1 {
  font-size: 18px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kb-actions { display: flex; align-items: center; gap: 12px; }
.kb-actions .danger { color: var(--err); }
.kb-main #kb-sample-prompts { max-width: 760px; width: 100%; margin: 0 auto 8px; }
.kb-messages {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 0;
  max-width: 760px; width: 100%; margin: 0 auto;
  min-height: 0;
  /* Flex column so populated messages still stack from the top, while the
     empty-state placeholder can center itself vertically via margin: auto. */
  display: flex;
  flex-direction: column;
}
.kb-empty {
  text-align: center;
  margin: auto 0;
}
.kb-msg {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.kb-msg.user { background: var(--msg-user-bg); }
.kb-msg.assistant { background: var(--msg-assistant-bg); color: var(--msg-assistant-fg); }
.kb-msg-head { font-size: 11px; color: var(--dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.kb-msg-body { line-height: 1.45; }
.kb-msg-body p { margin: 0 0 6px; }
.kb-msg-body p:last-child { margin-bottom: 0; }
.kb-msg-body ul, .kb-msg-body ol { margin: 2px 0 6px 20px; padding: 0; }
.kb-msg-body li { margin: 0 0 2px; }
.kb-msg-body li > p { margin: 0; }
/* User message preserves the user's own newlines. */
.kb-msg.user .kb-msg-body { white-space: pre-wrap; }
.kb-msg-body code { background: var(--panel-2); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.kb-msg-body pre { background: var(--panel-2); padding: 8px; border-radius: 6px; overflow: auto; font-size: 12px; margin: 4px 0; }
.kb-msg-body a { color: var(--accent); }
.kb-msg-body h1, .kb-msg-body h2, .kb-msg-body h3 {
  margin: 6px 0 2px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  font-size: 14px;
}

/* Footnote-style "Sources" block, applied by kb.js after markdown render. */
.kb-sources {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.35;
}
.kb-sources-head {
  font-size: 10px;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dim);
  font-weight: 600;
}
.kb-sources ol, .kb-sources ul {
  list-style: decimal outside;
  margin: 0 0 0 22px;
  padding: 0;
}
.kb-sources li {
  margin: 0 0 1px;
  padding-left: 2px;
}
.kb-sources li::marker { color: var(--dim); }
.kb-sources a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kb-sources a:hover { text-decoration-thickness: 2px; }

.kb-thinking-row { display: flex; align-items: center; gap: 8px; }
.kb-spinner {
  width: 12px; height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: kb-spin 0.7s linear infinite;
}
@keyframes kb-spin { to { transform: rotate(360deg); } }

.kb-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 760px; width: 100%;
  margin: 8px auto 0;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.kb-form textarea {
  min-height: 60px;
  resize: vertical;
  background: transparent;
  border: 0;
  width: 100%;
}
.kb-form textarea:focus { outline: none; }
.kb-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.kb-form button {
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}
.kb-form button:hover:not([disabled]) { background: var(--accent-hover); border-color: var(--accent-hover); }
.kb-form button[disabled] { opacity: 0.5; cursor: not-allowed; }

.kb-attach {
  background: transparent !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  font-weight: 500 !important;
}
.kb-attach:hover:not([disabled]) {
  background: var(--panel) !important;
  border-color: var(--accent) !important;
}

/* Wrapping chip grid for attached files. Used in two surfaces:
   - KB chat input (small footprint, sits above the textarea)
   - Project workspace uploads pane (replaces the old vertical list)
   .kb-attachments is kept as an alias for the KB form. */
.file-chips,
.kb-attachments {
  display: flex;
  flex-wrap: wrap;
  /* The uploads pane stretches this container (flex: 1 1 auto); without a
     pinned align-content the single flex line — and the pill-shaped chips in
     it — would stretch to the full pane height. */
  align-content: flex-start;
  gap: 6px;
  margin-bottom: 2px;
}
.file-chip,
.kb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  max-width: 320px;
}
.file-chip-name,
.kb-chip-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.file-chip-meta,
.kb-chip-meta { color: var(--dim); font-size: 11px; }
.file-chip-del,
.kb-chip-del {
  background: transparent;
  border: 0;
  color: var(--dim);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.file-chip-del:hover,
.kb-chip-del:hover { color: var(--err); }

/* Friendly framework-level error block. Reuses .kb-msg geometry so it sits
   in the message stream, but recolored to read as an error rather than an
   answer. */
.kb-msg.kb-error {
  background: var(--err-bg, rgba(220, 38, 38, 0.08));
  border-left: 3px solid var(--err, #dc2626);
  color: var(--fg);
}
.kb-msg.kb-error .kb-msg-head { color: var(--err, #dc2626); }

@media (max-width: 800px) {
  .kb { grid-template-columns: 1fr; height: auto; }
  .kb-sidebar { max-height: 240px; }
  .kb > .pane-resizer { display: none; }
  .topbar-modes { display: none; }
}

/* ── Domain Skills page (editor/admin) ───────────────────────────────────
   Two columns: drafting-rule fragments (left) and guidance documents
   (right). Reuses panel/list styling from the dashboard. */
.skills {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 16px; max-width: 1500px; margin: 0 auto; width: 100%;
  align-items: start;
}
.skills-col {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.skills-col-head h2 { margin: 0 0 6px; }
.skills-col-head .dim { margin: 0; font-size: 13px; }
.skills-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.skills-list li.selected .skills-item { background: var(--panel-2); border-color: var(--border); }
.skills-list li.empty { padding: 8px 10px; }
.skills-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; padding: 8px 10px; background: transparent;
  border: 1px solid transparent; border-radius: 6px;
}
.skills-item:hover { background: var(--panel-2); }
.skills-item .dim { font-size: 11px; }
.skills-item .badge {
  align-self: flex-start; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.skills-item .badge-on { color: var(--accent, #4f8cff); border-color: currentColor; }
.skills-editor { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.skills-editor h3 { margin: 0; }
.skills-editor .dim { margin: 0; font-size: 12px; }
.skills-editor textarea {
  width: 100%; resize: vertical; font-family: var(--mono, ui-monospace, monospace);
  font-size: 12.5px; line-height: 1.45;
}
.skills-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skills-status { font-size: 12px; color: var(--dim); }
.skills-status.err { color: var(--err, #dc2626); }
.guidance-meta { display: grid; grid-template-columns: 2fr 2fr 1fr 2fr; gap: 8px; }
.guidance-meta label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dim); }
.guidance-meta input { width: 100%; }

@media (max-width: 1000px) {
  .skills { grid-template-columns: 1fr; }
  .guidance-meta { grid-template-columns: 1fr 1fr; }
}

.who .role-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--accent, #4f8cff); border: 1px solid currentColor;
  border-radius: 999px; padding: 0 6px; margin-left: 4px; vertical-align: 1px;
}