/* ============================================================================
   Clayrune — Public Interactive Demo (fully simulated, no backend)
   CSS extracted from the real dashboard (static/index.html) and re-scoped from
   the viewport (`body`) onto a bounded `.demo-root` frame so it embeds cleanly.
   Dark theme is the default. No external fonts/deps (CSP-safe).
   Font sizes are scaled up ~1.14x vs the real app (base 16px) for readability
   in the embedded frame — the one intentional deviation from "verbatim".
   ========================================================================== */

/* ── Color tokens (verbatim dark :root from the real dashboard) ─────────── */
:root {
  --bg:          #0c0e14;
  --surface:     #14171f;
  --surface2:    #1a1e28;
  --surface3:    #222733;
  --border:      #252a38;
  --border2:     #333a4d;
  --text:        #e8ecf4;
  --text-dim:    #8e99ae;
  --text-faint:  #556070;
  --accent:      #5b9ef5;
  --accent-dim:  #1a3a6a;
  --accent-soft: #3a6bb5;
  --green:       #34d399;
  --green-dim:   #163326;
  --green-text:  #6ee7b7;
  --amber:       #f0b429;
  --amber-dim:   #3a2e10;
  --amber-text:  #fcd34d;
  --red:         #f06060;
  --red-dim:     #3a1616;
  --red-text:    #fca5a5;
  --purple:      #a78bfa;
  --purple-dim:  #3f2e80;
  --purple-text: #c4b5fd;
  --sidebar-w:   52px;
  --sidebar-exp: 220px;
  --header-h:    48px;
  /* Font stacks: named fonts used if the host page has them, else system. */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
}

/* Accent presets (verbatim) */
.demo-root[data-accent="sunset"]  { --accent: #e8824a; --accent-dim: #4a2a1a; --accent-soft: #a8502d; }
.demo-root[data-accent="rose"]    { --accent: #d96480; --accent-dim: #4a2030; --accent-soft: #a14659; }
.demo-root[data-accent="lilac"]   { --accent: #8a7ce0; --accent-dim: #2d2750; --accent-soft: #5c5099; }
.demo-root[data-accent="lagoon"]  { --accent: #4fa89a; --accent-dim: #1a3d38; --accent-soft: #3a7a70; }
.demo-root[data-accent="ink"]     { --accent: #6b7286; --accent-dim: #2a2f3f; --accent-soft: #474e62; }

/* ── Warm tone (light cream) — verbatim re-bind ─────────────────────────── */
.demo-root.tone-warm {
  --bg:          #f6f0e4;
  --surface:     #ffffff;
  --surface2:    #fbf7ee;
  --surface3:    #efe7d6;
  --border:      #e8e0cd;
  --border2:     #c9bea6;
  --text:        #201c16;
  --text-dim:    #5a5247;
  --text-faint:  #8a8172;
  --green:       #2f8a5b;
  --green-dim:   #dff2e6;
  --green-text:  #2f8a5b;
  --amber:       #c77a1a;
  --amber-dim:   #fbe6c7;
  --amber-text:  #a15e10;
  --red:         #c23a3a;
  --red-dim:     #f8dcdc;
  --red-text:    #a12a2a;
}
.demo-root.tone-warm:not([data-accent]) { --accent-dim: #d6e7fb; --accent-soft: #4888de; }

/* ── Editorial tone (light gray, serif) — verbatim re-bind ──────────────── */
.demo-root.tone-editorial {
  --bg:          #faf9f6;
  --surface:     #ffffff;
  --surface2:    #f7f5ef;
  --surface3:    #f2f0ea;
  --border:      #e6e3db;
  --border2:     #c8c4ba;
  --text:        #151310;
  --text-dim:    #595551;
  --text-faint:  #8f8a84;
  --green:       #3a6b46;
  --green-dim:   #e9f1eb;
  --green-text:  #3a6b46;
  --amber:       #a66a11;
  --amber-dim:   #f4e8d1;
  --amber-text:  #8c5810;
  --red:         #a42b2b;
  --red-dim:     #f1dcdc;
  --red-text:    #8a2424;
  font-family: 'Fraunces', Georgia, serif;
}
.demo-root.tone-editorial:not([data-accent]) { --accent-dim: #d8e8fb; --accent-soft: #4783d8; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
}

/* ── Demo root: the flex shell, bounded to its frame (was `body`) ────────── */
.demo-root {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  overflow: hidden;
}

/* ── SIDEBAR (verbatim, scoped) ─────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
  transition: width 0.2s ease;
  overflow: hidden; z-index: 200;
}
.sidebar:hover, .sidebar.expanded { width: var(--sidebar-exp); }
.sidebar-logo {
  height: var(--header-h);
  display: flex; align-items: center; padding: 0 14px; gap: 10px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.sidebar-logo .logo-icon {
  width: 34px; height: 34px; background: #e8824a; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', 'Nunito', var(--font-ui);
  font-weight: 800; font-size: 24px; color: #fff;
  flex-shrink: 0; line-height: 1;
  box-shadow: 0 1px 0 rgba(92, 58, 37, 0.15), inset 0 1px 0 rgba(255,255,255,0.22);
}
.sidebar-logo .logo-text {
  font-size: 16px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #e8824a;
  white-space: nowrap; opacity: 0; transition: opacity 0.15s;
}
.sidebar:hover .logo-text, .sidebar.expanded .logo-text { opacity: 1; }
.sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; margin: 1px 6px; border-radius: 6px;
  color: var(--text-dim); cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap; font-size: 15px; font-weight: 500;
  position: relative;
}
.sidebar-item:hover { background: var(--surface2); color: var(--text); }
.sidebar-item.active { background: var(--accent-dim); color: var(--accent); }
.sidebar-item .si-icon {
  width: 24px; height: 24px; display: flex;
  align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.sidebar-item .si-label { opacity: 0; transition: opacity 0.15s; }
.sidebar:hover .si-label, .sidebar.expanded .si-label { opacity: 1; }
.sidebar-divider { height: 1px; background: var(--border); margin: 8px 14px; }
.sidebar-section-label {
  padding: 4px 14px; opacity: 0; transition: opacity 0.15s;
  font-size: 11.5px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600;
}
.sidebar:hover .sidebar-section-label, .sidebar.expanded .sidebar-section-label { opacity: 1; }
.sidebar-projects { padding: 4px 0; }
.sidebar-project {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; margin: 1px 6px; border-radius: 6px;
  cursor: pointer; transition: background 0.12s; white-space: nowrap;
}
.sidebar-project:hover { background: var(--surface2); }
.sidebar-project .sp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sidebar-project .sp-name {
  font-size: 13.5px; color: var(--text-dim); font-weight: 500;
  opacity: 0; transition: opacity 0.15s;
  overflow: hidden; text-overflow: ellipsis;
}
.sidebar:hover .sp-name, .sidebar.expanded .sp-name { opacity: 1; }

/* ── MAIN AREA + HEADER (verbatim, scoped) ──────────────────────────────── */
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.header {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.header-breadcrumb { font-size: 15px; color: var(--text-dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-breadcrumb strong { color: var(--text); font-weight: 600; }
.header-breadcrumb .crumb-link { cursor: pointer; }
.header-breadcrumb .crumb-link:hover strong { color: var(--accent); }
.header-right { display: flex; align-items: center; gap: 12px; }
.header-search {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-faint); font-size: 13.5px; cursor: pointer;
  transition: border-color 0.15s;
}
.header-search:hover { border-color: var(--border2); }
.header-search kbd {
  font-family: var(--font-ui); font-size: 11.5px;
  background: var(--surface3); padding: 1px 5px; border-radius: 3px;
  color: var(--text-faint); border: 1px solid var(--border2);
}
.metric-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  background: var(--surface2);
}
.metric-pill .mp-dot { width: 6px; height: 6px; border-radius: 50%; }
.live-badge {
  display: flex; align-items: center; gap: 5px;
  color: var(--green-text); font-size: 11.5px;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.header-tour-btn {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface3); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
}
.header-tour-btn:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

/* ── CONTENT AREA ───────────────────────────────────────────────────────── */
.content-area { flex: 1; display: flex; overflow: hidden; position: relative; }
.content-main { flex: 1; overflow-y: auto; padding: 16px 20px; min-width: 0; }
.content-main::-webkit-scrollbar { width: 6px; }
.content-main::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

.section-eyebrow {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-faint); margin: 2px 0 12px;
}

/* ── TILE GRID + CARD (verbatim) ────────────────────────────────────────── */
.projects-col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
  min-height: 188px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  user-select: none;
}
.card.status-blocked,  .card.friendly-stuck  { border-color: var(--red) !important; }
.card.status-waiting,  .card.friendly-asking { border-color: var(--amber) !important; }
.card.friendly-asking::before,
.card.friendly-stuck::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 14px 14px 0 0; pointer-events: none;
}
.card.friendly-asking::before { background: var(--amber); }
.card.friendly-stuck::before  { background: var(--red); }
.card:hover { border-color: var(--border2); box-shadow: 0 8px 24px rgba(0,0,0,0.35); transform: translateY(-2px); }
.card-header {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 14px 8px 14px;
}
.card-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-avatar {
  font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0; overflow: hidden;
  background: var(--surface2); border-radius: 6px;
}
.project-name { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0.1px; line-height: 1.2; }
.domain-tag {
  font-size: 11.5px; padding: 2px 8px; border-radius: 4px;
  letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; font-weight: 600;
}
.status-pill {
  font-size: 11.5px; padding: 3px 10px; border-radius: 4px;
  letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap; font-weight: 700;
  align-self: flex-start;
}
.status-pill.friendly-working { background: var(--green-dim);  color: var(--green-text); }
.status-pill.friendly-stuck   { background: var(--red-dim);    color: var(--red-text); }
.status-pill.friendly-asking  { background: var(--amber-dim);  color: var(--amber-text); }
.status-pill.friendly-idle    { background: var(--surface3);   color: var(--text-dim); }
.status-pill.friendly-done    { background: var(--green-dim);  color: var(--green-text); }
.status-pill.friendly-working,
.status-pill.friendly-asking,
.status-pill.friendly-stuck,
.status-pill.friendly-done,
.status-pill.friendly-idle { display: inline-flex; align-items: center; gap: 6px; }
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.friendly-working .status-dot { animation: mc-pulse 2s ease-in-out infinite; }
@keyframes mc-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.65; }
}
.tile-body {
  flex: 1; padding: 0 14px;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
.tile-summary {
  font-size: 15px; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-task {
  font-size: 12.5px; line-height: 1.4; color: var(--text-faint);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-task.running { color: var(--green-text); }
.tile-task.completed { color: var(--text-dim); }
.tile-task.plan-approval, .tile-task.question { color: var(--accent); }
.tile-next { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-footer {
  padding: 8px 14px 12px 14px;
  display: flex; align-items: center; gap: 6px;
  margin-top: auto;
}
.backlog-badge {
  background: var(--amber-dim); color: var(--amber-text);
  font-size: 11.5px; padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.time-ago { color: var(--text-faint); font-size: 13.5px; white-space: nowrap; font-family: var(--font-mono); margin-left: auto; }

/* Compact density (Appearance → Density) */
.demo-root.compact .projects-col { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.demo-root.compact .card { min-height: 140px; border-radius: 8px; }
.demo-root.compact .card-avatar { font-size: 15px; width: 20px; height: 20px; }
.demo-root.compact .tile-summary { font-size: 13.5px; }

/* ── AGENT CONSOLE (verbatim) ───────────────────────────────────────────── */
.agent-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.agent-view-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; flex-shrink: 0; }
.agent-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.agent-status-dot.idle       { background: var(--accent); box-shadow: 0 0 4px var(--accent); }
.agent-status-dot.running    { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }
.agent-status-dot.completed  { background: var(--accent); }
.agent-status-dot.error      { background: var(--red); }
.agent-status-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.agent-status-label.idle      { color: var(--accent); }
.agent-status-label.running   { color: var(--green-text); }
.agent-status-label.completed { color: var(--accent); }
.provider-badge {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px;
  padding: 1px 6px; border-radius: 8px; background: var(--accent-dim); color: var(--accent);
  text-transform: lowercase; white-space: nowrap; flex-shrink: 0;
}
.agent-chat {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  position: relative; overflow: hidden;
}
.agent-output {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; padding: 12px;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6;
  color: var(--text); white-space: pre-wrap; word-break: break-word; min-width: 0;
}
.agent-output::-webkit-scrollbar { width: 5px; }
.agent-output::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.agent-output .agent-line { padding: 1px 0; }
.agent-output .agent-line-tool { color: var(--amber-text); }
.agent-output .agent-line-status { color: var(--green-text); font-weight: 600; }
.agent-output .agent-line-error { color: var(--red-text); }
.agent-output .agent-line-followup { color: var(--accent); font-weight: 600; }
.agent-output .agent-line-prompt {
  color: var(--text); font-weight: 500; background: var(--surface2);
  margin: 6px -8px; padding: 8px 10px; border-radius: 5px; border-left: 3px solid var(--accent);
  white-space: pre-wrap;
}
/* formatAgentText hl-* classes (verbatim) */
.agent-output .hl-code { background: #1e2233; color: #93c5fd; padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); font-size: 0.95em; }
.agent-output .hl-path { color: #60a5fa; }
.agent-output .hl-bold { color: #cbd5e1; font-weight: normal; background: #171c2a; padding: 1px 5px; border-radius: 3px; }
.agent-output .hl-h { color: #93c5fd; font-size: 1.05em; }
.agent-output .hl-bullet { color: var(--accent); font-weight: 600; }
.agent-output .hl-num { color: #c4b5fd; }
.agent-output .hl-url { color: #60a5fa; text-decoration: underline; text-decoration-style: dotted; }
.agent-output .hl-codeblock { display: block; background: #0d1017; border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; margin: 4px 0; color: #a5d6ff; overflow-x: auto; }
.agent-output .hl-table { display: block; background: #0d1117; border: 1px solid var(--border); border-radius: 4px; padding: 2px 0; margin: 4px 0; overflow-x: auto; max-width: 100%; }
.agent-output .hl-table table { border-collapse: collapse; font-size: inherit; line-height: 1.4; }
.agent-output .hl-table th { color: #93c5fd; text-align: left; padding: 4px 12px; border-bottom: 2px solid var(--border2); white-space: nowrap; }
.agent-output .hl-table td { color: #c9d1d9; padding: 3px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.agent-output .hl-table tr:last-child td { border-bottom: none; }
.cursor-blink::after { content: '▋'; color: var(--accent); animation: cursor-blink 1s step-end infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }

/* plan-approve-row (verbatim inline styles reproduced as a class) */
.plan-approve-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; margin: 6px 0; flex-wrap: wrap; }
.plan-approve-row .pa-text { color: var(--text-dim); font-size: 13.5px; }
.btn-approve { background: var(--green); color: #fff; border: none; padding: 6px 16px; border-radius: 6px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn-collapse { background: transparent; color: var(--text); border: 1px solid var(--border2); padding: 6px 12px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }

/* composer (verbatim) */
.agent-chat-separator { flex-shrink: 0; height: 6px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--border); }
.agent-chat-separator::after { content: ''; width: 32px; height: 2px; border-radius: 2px; background: var(--border); }
.agent-chat-input { flex-shrink: 0; padding: 8px 14px 14px; min-width: 0; box-sizing: border-box; }
.agent-chat-input-row { display: flex; gap: 8px; align-items: flex-end; min-width: 0; }
.agent-task-input {
  flex: 1; background: transparent; border: 1px solid var(--border2);
  color: var(--text); font-family: var(--font-ui); font-size: 15px;
  padding: 8px 12px; border-radius: 5px; outline: none; resize: none;
  min-height: 38px; line-height: 1.5; transition: border-color 0.15s; min-width: 0;
}
.agent-task-input:focus { border-color: var(--accent); }
.agent-task-input::placeholder { color: var(--text-faint); }
.btn-attach {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: transparent; color: var(--text-dim); border: 1px solid var(--border2);
  border-radius: 6px; width: 32px; height: 32px; font-size: 18px; line-height: 1;
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-attach:hover { background: var(--surface3); color: var(--text); border-color: var(--accent); }
.btn-dispatch {
  background: var(--green-dim); border: 1px solid var(--green);
  color: var(--green-text); font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 5px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
}
.btn-dispatch:hover { background: var(--green); color: var(--bg); }
.btn-dispatch:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-stop { background: var(--red-dim); border: 1px solid var(--red); color: var(--red-text); font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 5px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.btn-stop:hover { background: var(--red); color: var(--bg); }

/* ── MODAL (Settings) ───────────────────────────────────────────────────── */
.modal-overlay {
  position: absolute; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-content {
  background: var(--surface);
  width: 640px; max-width: 100%;
  height: auto; max-height: 92%;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  position: relative;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px 12px 22px;
  border-bottom: 1px solid var(--border); background: var(--surface2);
  border-radius: 12px 12px 0 0; flex-shrink: 0;
}
.modal-title { font-size: 18px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.modal-close {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--surface3); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.modal-close:hover { background: var(--red-dim); color: var(--red-text); border-color: var(--red); }
.settings-back-btn {
  background: none; border: none; color: var(--text); cursor: pointer;
  font-size: 24px; line-height: 1; padding: 0 4px 2px; border-radius: 7px;
  display: flex; align-items: center; transition: background 0.12s;
}
.settings-back-btn:hover { background: var(--surface2); }
.settings-hidden { display: none !important; }
#settings-body { padding: 8px 22px 24px; overflow-y: auto; flex: 1; min-height: 0; }
#settings-body::-webkit-scrollbar { width: 6px; }
#settings-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ── PROJECT WINDOW ─────────────────────────────────────────────────────────
   A project opens as a centered floating modal over a dimmed dashboard —
   identical backdrop + centering to the Settings modal, so it inherits the
   ACTIVE theme exactly (warm → light card / dark text, dark → dark card). It
   reuses the shared .modal-content / .modal-header / .modal-close chrome, just
   like the real app's project modal. */
.project-overlay, .inv-overlay {
  position: absolute; inset: 0; z-index: 900;
  background: rgba(8,10,16,0.5);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.project-overlay.open, .inv-overlay.open { display: flex; }
.project-modal { width: 760px; max-width: 100%; height: 88%; max-height: 100%; }
/* Skills / MCP / Hivemind open in the SAME window type as a project. */
.inv-modal { width: 760px; max-width: 100%; height: 86%; max-height: 100%; }
.inv-modal.compact { height: auto; }              /* Hivemind: content-sized, not tall */
.inv-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 18px; }
.inv-modal-body::-webkit-scrollbar { width: 6px; }
.inv-modal-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
/* The "what is this?" explanation callout — front-and-center at the modal top. */
.inv-intro {
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 12px 15px; margin-bottom: 14px;
  font-size: 15px; line-height: 1.55; color: var(--text-dim);
}
.inv-intro b { color: var(--text); font-weight: 600; }
.inv-note2 { font-size: 16px; line-height: 1.6; color: var(--text-dim); padding: 6px 2px; }
.inv-note2 b { color: var(--text); font-weight: 600; }
.pm-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pm-title .project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-window-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.modal-minimize {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--surface3); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.modal-minimize:hover { background: var(--amber-dim); color: var(--amber-text); border-color: var(--amber); }
.project-modal-body { flex: 1; min-height: 0; display: flex; overflow: hidden; padding: 14px 16px 16px; }
.project-modal-body .agent-view { flex: 1; min-width: 0; }

/* ── INVENTORY LISTS (Skills / MCP) — faithful to the real app's list rows:
      name + scope/transport badges, the command/description, then config
      path · mtime, with a search + scope filter bar above. Theme-aware via
      vars only (real app uses inline styles; mapped here to --text-dim/--font-mono). */
.inv-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv-search { flex: 1; min-width: 180px; padding: 6px 10px; font-size: 15px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); outline: none; font-family: var(--font-ui); }
.inv-search:focus { border-color: var(--accent); }
.inv-search::placeholder { color: var(--text-faint); }
.inv-select { padding: 6px 8px; font-size: 15px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; font-family: var(--font-ui); }
.inv-select:disabled { opacity: 0.55; cursor: not-allowed; }
.inv-count { font-size: 13.5px; color: var(--text-faint); }
.inv-newbtn { margin-left: auto; background: var(--green-dim); border: 1px solid var(--green); color: var(--green-text); font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: var(--font-ui); white-space: nowrap; }
.inv-newbtn:hover { background: var(--green); color: var(--bg); }
.inv-group { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: 12px; background: var(--surface); max-width: 900px; }
.inv-row { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.inv-row:last-child { border-bottom: none; }
.inv-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-name { font-weight: 600; color: var(--text); font-size: 16px; font-family: var(--font-mono); }
.inv-badge { font-size: 13px; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.inv-badge.global    { background: var(--surface2);   color: var(--text-faint); }
.inv-badge.project   { background: var(--accent-dim);  color: var(--accent); }
.inv-badge.transport { background: var(--surface2);   color: var(--text-faint); font-family: var(--font-mono); }
.inv-usage { font-size: 13px; color: var(--text-faint); margin-left: 2px; }
.inv-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.inv-tiny { font-size: 13.5px; padding: 3px 9px; border-radius: 5px; background: var(--surface3); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; font-family: var(--font-ui); white-space: nowrap; }
.inv-tiny:hover { border-color: var(--accent); color: var(--accent); }
.inv-tiny.danger:hover { border-color: var(--red); color: var(--red-text); background: var(--red-dim); }
.inv-tiny.locked { color: var(--accent); border-color: var(--accent); opacity: 0.7; cursor: default; }
.inv-preview { font-size: 15px; color: var(--text-dim); line-height: 1.4; font-family: var(--font-mono); word-break: break-all; }
.inv-desc { font-size: 15px; color: var(--text-dim); line-height: 1.4; }
.inv-path { font-size: 13px; color: var(--text-faint); font-family: var(--font-mono); word-break: break-all; }
.inv-empty { padding: 30px 12px; text-align: center; color: var(--text-faint); font-size: 15px; }

/* Settings drill-down (verbatim) */
.settings-search-wrap { position: relative; margin: 2px 0 16px; }
#settings-body[data-view="detail"] .settings-search-wrap,
#settings-body[data-view="subs"] .settings-search-wrap { display: none; }
.settings-search {
  width: 100%; box-sizing: border-box;
  background: var(--surface2); border: 1px solid transparent; color: var(--text);
  font-family: inherit; font-size: 16px; padding: 10px 14px 10px 40px;
  border-radius: 999px; outline: none; transition: background .15s, border-color .15s;
}
.settings-search:focus { background: var(--bg); border-color: var(--accent); }
.settings-search::placeholder { color: var(--text-faint); }
.settings-search-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
#settings-body[data-view="detail"] #settings-master,
#settings-body[data-view="subs"] #settings-master,
#settings-body[data-view="search"] #settings-master { display: none; }
.settings-profile {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 10px; margin-bottom: 10px; border-radius: 14px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; transition: background .12s;
}
.settings-profile:hover { background: var(--surface2); }
.settings-avatar { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-dim); color: var(--accent); font-size: 23px; font-weight: 700; }
.settings-profile-name { display: block; font-size: 19px; font-weight: 600; color: var(--text); }
.settings-profile-sub { display: block; font-size: 15px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-group { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.settings-list-row { display: flex; align-items: center; gap: 15px; width: 100%; padding: 13px 15px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; transition: background .12s; position: relative; }
.settings-list-row:hover { background: var(--surface2); }
.settings-list-row + .settings-list-row::before { content: ''; position: absolute; top: 0; left: 54px; right: 0; border-top: 1px solid var(--border); }
.settings-list-ico { width: 24px; height: 24px; flex-shrink: 0; color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 21px; }
.settings-list-ico svg { width: 23px; height: 23px; opacity: .92; }
.settings-list-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.settings-list-title { font-size: 17px; color: var(--text); font-weight: 500; }
.settings-list-sub { font-size: 14px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-list-chev { color: var(--text-faint); font-size: 22px; line-height: 1; flex-shrink: 0; }
#settings-detail { display: none; }
#settings-body[data-view="subs"] #settings-detail,
#settings-body[data-view="detail"] #settings-detail,
#settings-body[data-view="search"] #settings-detail { display: block; }
.settings-detail-pane, #settings-sub-list:not(.settings-hidden) { animation: settingsPaneIn .2s ease; }
@keyframes settingsPaneIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
#settings-body[data-view="search"] .settings-detail-pane { animation: none; }
#settings-body[data-view="detail"] .settings-section-title { display: none; }
.settings-sub-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 15px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; transition: background .12s; position: relative; }
.settings-sub-row:hover { background: var(--surface2); }
.settings-sub-row + .settings-sub-row::before { content: ''; position: absolute; top: 0; left: 15px; right: 0; border-top: 1px solid var(--border); }
.settings-sub-title { flex: 1; min-width: 0; font-size: 17px; color: var(--text); font-weight: 500; }
.settings-sub-chev { color: var(--text-faint); font-size: 22px; line-height: 1; flex-shrink: 0; }
.settings-cat-label { display: none; }
#settings-body[data-view="search"] .settings-cat-label { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); margin: 16px 0 8px; }
.settings-empty { padding: 30px 4px; color: var(--text-faint); font-size: 15px; text-align: center; }

/* Settings rows + controls (verbatim) */
.settings-section { margin-bottom: 20px; }
.settings-section-title { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; gap: 16px; }
.settings-label { font-size: 15px; color: var(--text); flex-shrink: 0; }
.settings-hint { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }
.settings-input { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font-ui); font-size: 13.5px; padding: 5px 10px; border-radius: 4px; outline: none; width: 220px; text-align: right; }
.settings-input:focus { border-color: var(--accent); }
.settings-input[type="number"] { width: 80px; }
.settings-select { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font-ui); font-size: 13.5px; padding: 5px 10px; border-radius: 4px; outline: none; cursor: pointer; }
.settings-toggle { position: relative; width: 36px; height: 20px; background: var(--surface3); border: 1px solid var(--border2); border-radius: 10px; cursor: pointer; transition: background 0.2s, border-color 0.2s; flex-shrink: 0; }
.settings-toggle.on { background: var(--accent); border-color: var(--accent); }
.settings-toggle::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.settings-toggle.on::after { transform: translateX(16px); }
.mc-seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.mc-seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.mc-seg button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.demo-root.tone-warm .mc-seg button.active, .demo-root.tone-editorial .mc-seg button.active { background: var(--text); color: var(--surface); box-shadow: none; }
.mc-accent-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 360px; }
.mc-accent-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; }
.mc-accent-pill.active { border-color: var(--text); color: var(--text); }
.mc-accent-swatch { width: 14px; height: 14px; border-radius: 50%; }
.adv-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.adv-row input { margin-top: 3px; accent-color: var(--accent); cursor: pointer; }

/* ── COACH-MARKS (demo-only guided tour) ────────────────────────────────── */
.coach-backdrop {
  position: absolute; inset: 0; z-index: 1500;
  pointer-events: none; display: none;
}
.coach-backdrop.active { display: block; }
/* Four dim panels (positioned in JS) dim everything EXCEPT the spotlight and
   the top header strip — so the header bar never washes out during the tour. */
.coach-dim {
  /* No darkening — the tour guides with the spotlight ring + card only, so the
     dashboard (header AND tiles) always reads at full colour. */
  position: absolute; background: transparent;
  pointer-events: none;
  transition: opacity 0.2s ease, left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.coach-spot {
  position: absolute; border-radius: 10px;
  /* Ring carries the focus on its own now (no backdrop dim): accent ring + soft halo. */
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px var(--accent-dim), 0 0 22px 4px rgba(91,158,245,0.4);
  transition: all 0.2s ease; pointer-events: none;
}
.coach-tip {
  position: absolute; z-index: 1600;
  width: 270px; max-width: calc(100% - 24px);
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: 10px; padding: 14px 16px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  /* Card body never blocks the UI beneath it — only the buttons are clickable,
     so coach-marks can hover over interactive controls without trapping clicks. */
  pointer-events: none;
}
.coach-skip, .coach-next { pointer-events: auto; }
.coach-tip-step { font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.coach-tip-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.coach-tip-body { font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.coach-tip-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
.coach-skip { background: none; border: none; color: var(--text-faint); font-size: 12.5px; cursor: pointer; padding: 4px; }
.coach-skip:hover { color: var(--text-dim); }
.coach-next { background: var(--accent); color: #fff; border: none; padding: 6px 16px; border-radius: 6px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.coach-next:hover { filter: brightness(1.08); }
.coach-arrow { position: absolute; width: 12px; height: 12px; background: var(--surface); border: 1px solid var(--accent); transform: rotate(45deg); }

/* Pulse ring to draw the eye to a click target */
.coach-target-pulse { position: relative; z-index: 1550; }
.coach-target-pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(91,158,245,0.55);
  animation: coach-ring 1.6s ease-out infinite; pointer-events: none;
}
@keyframes coach-ring {
  0%   { box-shadow: 0 0 0 0 rgba(91,158,245,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(91,158,245,0); }
  100% { box-shadow: 0 0 0 0 rgba(91,158,245,0); }
}

/* ── DEMO TAG (honest "this is a simulated demo" chip — lives in the header,
      doubles as a Replay button; never overlaps content) ──────────────────── */
.demo-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--amber-dim); border: 1px solid transparent;
  color: var(--amber-text); border-radius: 5px; padding: 4px 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  font-family: var(--font-ui); cursor: pointer; transition: border-color 0.15s, filter 0.15s;
}
.demo-tag:hover { border-color: var(--amber); filter: brightness(1.06); }
.demo-tag .dt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); }

/* ── RESPONSIVE (iframe viewport) ───────────────────────────────────────── */
@media (max-width: 600px) {
  .projects-col { grid-template-columns: 1fr; gap: 8px; }
  .header-search { display: none; }
  .content-main { padding: 12px 12px; }
  .demo-tag .dt-label { display: none; }     /* icon-only on phones to save header room */
  .header-right { gap: 8px; }
  /* Project + inventory modals go full-bleed on phones (real app's coarse-pointer rule) */
  .project-overlay, .inv-overlay { padding: 0; }
  .project-modal, .inv-modal:not(.compact) { width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: none; }
  .project-modal-body, .inv-modal-body { padding: 12px 12px 14px; }
  .inv-modal.compact { width: calc(100% - 24px); height: auto; border-radius: 12px; }   /* Hivemind stays a small centered card */
  /* Inventory: let the "+ New" button sit inline once the filter bar wraps */
  .inv-newbtn { margin-left: 0; }
  /* Mobile console = chat bubbles (verbatim restyle of the same DOM) */
  .agent-output {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 10px 14px;
    font-family: var(--font-ui); font-size: 15px; line-height: 1.45; white-space: normal;
  }
  .agent-output .agent-line {
    align-self: flex-start; background: var(--surface3); color: var(--text);
    border: 1px solid var(--border2); padding: 8px 12px;
    border-radius: 14px 14px 14px 4px; max-width: 84%; word-break: break-word;
    white-space: pre-wrap; font-family: var(--font-mono); font-size: 14px;
  }
  .agent-output .agent-line:empty { display: none; }
  .agent-output .agent-line-prompt {
    align-self: flex-end; background: var(--accent); color: #fff;
    border-radius: 14px 14px 4px 14px; border-left: none; margin: 0;
    padding: 9px 13px; font-family: var(--font-ui); font-size: 15px; font-weight: 500; max-width: 84%;
  }
  .agent-output .agent-line-tool,
  .agent-output .agent-line-status,
  .agent-output .agent-line-error,
  .agent-output .agent-line-followup {
    align-self: center; background: transparent; font-size: 12.5px;
    padding: 2px 8px; text-align: center; max-width: 92%; border: none; font-family: var(--font-ui);
  }
  .agent-output .hl-table, .agent-output .plan-approve-row { align-self: stretch; max-width: 100%; }
  .coach-tip { width: calc(100% - 24px); }
}