/* MARCEL OS v2 — command-deck theme (dark, self-contained, no external assets) */

:root {
  --deck: #0b0e14;
  --panel: #121722;
  --panel-2: #1a2130;
  --line: #232c3d;
  --ink: #e8ecf4;
  --ink-dim: #8b94a7;
  --amber: #f2a33c;
  --teal: #2dd4a7;
  --red: #e5484d;
  --font-display: "Bahnschrift", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  --radius: 10px;
}

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

html, body { height: 100%; }

body {
  background: var(--deck);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(242, 163, 60, 0.28); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- top bar ---------- */

#topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 0 20px;
  height: 52px;
  background: rgba(11, 14, 20, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.32em;
  font-weight: 700;
  user-select: none;
  white-space: nowrap;
}
.wm-m { color: var(--amber); }
.wm-rest { color: var(--ink); }
.wm-os { color: var(--ink-dim); margin-left: 0.55em; font-weight: 400; }

#nav { display: flex; gap: 4px; flex: 1; }
#nav a {
  padding: 6px 14px;
  border-radius: 7px;
  color: var(--ink-dim);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 13px;
  text-transform: uppercase;
  border: 1px solid transparent;
}
#nav a:hover { color: var(--ink); background: var(--panel); }
#nav a.active { color: var(--amber); background: var(--panel); border-color: var(--line); }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim); flex: none; }
.pill.conn-open .dot { background: var(--teal); box-shadow: 0 0 6px rgba(45, 212, 167, 0.7); }
.pill.conn-open { color: var(--teal); }
.pill.conn-connecting .dot { background: var(--amber); animation: pulse 1.2s infinite; }
.pill.conn-connecting { color: var(--amber); }
.pill.conn-closed .dot { background: var(--red); }
.pill.conn-closed { color: var(--red); }
.pill.quota-ok { color: var(--teal); }
.pill.quota-warn { color: var(--amber); }
.pill.quota-over { color: var(--red); }

/* engine health pill — always visible, sits beside the link pill on purpose:
   a green link with a dead engine is the illusion this feature exists to kill */
.pill.engine-ok { color: var(--teal); }
.pill.engine-warn { color: var(--amber); border-color: rgba(242, 163, 60, 0.45); }
.pill.engine-unknown { color: var(--ink-dim); }
.pill.engine-broken {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
  font-weight: 700;
  letter-spacing: 0.04em;
  animation: engine-alarm 1.6s ease-in-out infinite;
}
@keyframes engine-alarm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); }
}

/* engine health banner (Deck) — rendered only when NOT ok, so it never becomes
   wallpaper the eye learns to skip */
.engine-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 14px;
}
.engine-banner.broken {
  border-color: var(--red);
  background: linear-gradient(180deg, rgba(229, 72, 77, 0.16), rgba(229, 72, 77, 0.06));
  box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.25), 0 8px 26px rgba(229, 72, 77, 0.12);
}
.engine-banner.warn {
  border-color: rgba(242, 163, 60, 0.55);
  background: linear-gradient(180deg, rgba(242, 163, 60, 0.13), rgba(242, 163, 60, 0.04));
}
.engine-banner .eb-main { flex: 1; min-width: 0; }
.engine-banner .eb-head {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.engine-banner.broken .eb-head { color: var(--red); }
.engine-banner.warn .eb-head { color: var(--amber); }
.engine-banner.unknown .eb-head { color: var(--ink-dim); }
.engine-banner .eb-reason { color: var(--ink); font-size: 13px; }
.engine-banner .eb-fix {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  font-size: 13px;
}
.engine-banner .eb-fix code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber);
  background: rgba(242, 163, 60, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
}
.engine-banner .eb-facts {
  margin-top: 8px;
  color: var(--ink-dim);
  font-size: 12px;
  font-family: var(--font-mono);
}
.engine-banner .eb-actions { flex: none; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- layout ---------- */

#view {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.card-title .count {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0;
}
.card-title .spacer { flex: 1; }

.mono { font-family: var(--font-mono); }
.dim { color: var(--ink-dim); }
.hidden { display: none !important; }

.empty {
  color: var(--ink-dim);
  font-size: 13px;
  padding: 12px 4px;
}

.loading-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 80px 0; color: var(--ink-dim);
  font-family: var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px;
}
.loading-state .bar {
  width: 160px; height: 3px; background: var(--panel-2); border-radius: 2px; overflow: hidden; position: relative;
}
.loading-state .bar::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: var(--amber); border-radius: 2px;
  animation: scan 1.2s ease-in-out infinite alternate;
}
@keyframes scan { from { transform: translateX(-20%); } to { transform: translateX(280%); } }

/* ---------- buttons ---------- */

.btn {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 13px;
  transition: border-color 0.12s, background 0.12s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-dim); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--amber); border-color: var(--amber); color: #1a1206; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ok { color: var(--teal); border-color: rgba(45, 212, 167, 0.4); }
.btn.ok:hover { border-color: var(--teal); }
.btn.danger { color: var(--red); border-color: rgba(229, 72, 77, 0.4); }
.btn.danger:hover { border-color: var(--red); }
.btn.ghost { background: transparent; color: var(--ink-dim); }
.btn.ghost:hover { color: var(--ink); }
.btn.sm { padding: 3px 10px; font-size: 12px; }

/* ---------- badges & dots ---------- */

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.badge.model { color: var(--amber); border-color: rgba(242, 163, 60, 0.35); }
.badge.effort { color: var(--teal); border-color: rgba(45, 212, 167, 0.3); }
.badge.off { color: var(--red); border-color: rgba(229, 72, 77, 0.35); }

.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex: none;
  background: var(--ink-dim);
}
.status-dot.running { background: var(--amber); animation: pulse 1.2s infinite; }
.status-dot.done { background: var(--teal); }
.status-dot.error { background: var(--red); }
.status-dot.killed { background: var(--red); opacity: 0.6; }
.status-dot.active { background: var(--teal); box-shadow: 0 0 5px rgba(45, 212, 167, 0.6); }
.status-dot.warn { background: var(--amber); }

.status-text.done { color: var(--teal); }
.status-text.error, .status-text.killed, .status-text.invalid-cron { color: var(--red); }
.status-text.running { color: var(--amber); }

/* ---------- deck view ---------- */

.deck { display: flex; flex-direction: column; gap: 16px; }

.decision {
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  background: var(--panel-2);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.decision:last-child { margin-bottom: 0; }
.d-text { font-size: 14px; margin-bottom: 6px; }
.d-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); margin-bottom: 10px; }
.d-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.d-detail {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.d-detail .kv { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.d-runform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.d-runform select, .d-runform input {
  background: var(--deck); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 10px; font-size: 13px;
}
.d-runform input { flex: 1; min-width: 220px; }

.deck-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
}
.rail { display: flex; flex-direction: column; gap: 16px; }

/* brief pane */
.brief-tabs { display: flex; gap: 4px; }
.brief-tabs button {
  padding: 3px 10px; border-radius: 6px; font-size: 12px;
  color: var(--ink-dim); border: 1px solid transparent;
  letter-spacing: 0.05em;
}
.brief-tabs button.active { color: var(--amber); background: var(--panel-2); border-color: var(--line); }
.brief-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); margin-bottom: 10px; }
.brief-body {
  max-height: 60vh; overflow-y: auto;
  font-size: 13.5px;
  padding-right: 6px;
}

/* mini markdown */
.md-h { font-family: var(--font-display); letter-spacing: 0.04em; margin: 14px 0 6px; color: var(--ink); }
.md-h1 { font-size: 17px; color: var(--amber); }
.md-h2 { font-size: 15px; }
.md-h3, .md-h4 { font-size: 13.5px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.md-p { margin: 4px 0; }
.md-gap { height: 8px; }
.md-ul { margin: 4px 0 4px 20px; }
.md-ul li { margin: 3px 0; }
.md-code {
  background: var(--deck); border: 1px solid var(--line); border-radius: 7px;
  padding: 10px 12px; margin: 8px 0; overflow-x: auto;
  font-family: var(--font-mono); font-size: 12px; white-space: pre;
}
code.md-inline {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--deck); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 5px;
}

/* quota card */
.quota-meter {
  height: 10px; border-radius: 6px; background: var(--deck);
  border: 1px solid var(--line); overflow: hidden; margin: 4px 0 10px;
}
.quota-fill { height: 100%; border-radius: 6px; background: var(--teal); transition: width 0.4s; }
.quota-fill.warn { background: var(--amber); }
.quota-fill.over { background: var(--red); }
.quota-nums { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.quota-pct { font-family: var(--font-mono); font-size: 22px; color: var(--ink); }
.quota-pct .of { font-size: 12px; color: var(--ink-dim); }

/* ventures & routines strips */
.strip-item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.strip-item:last-child { border-bottom: none; }
.strip-item .status-dot { align-self: center; }
.strip-main { flex: 1; min-width: 0; }
.strip-name { font-size: 13.5px; font-weight: 600; }
.strip-sub { font-size: 12px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; }
.strip-side { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.strip-side .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }

/* ---------- agents view ---------- */

.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.agent-card { display: flex; flex-direction: column; gap: 10px; }
.agent-card.disabled { opacity: 0.55; }
.agent-head { display: flex; align-items: center; gap: 10px; }
.agent-name {
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase;
}
.agent-role { font-size: 12.5px; color: var(--ink-dim); flex: 1; min-height: 36px; }
.agent-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.agent-cwd {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  direction: rtl; text-align: left;
}
.agent-foot { display: flex; justify-content: flex-end; }

/* ---------- launch modal ---------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5, 7, 11, 0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  width: 100%; max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; gap: 14px;
}
.modal-title {
  font-family: var(--font-display); font-size: 15px;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.modal-title .accent { color: var(--amber); }
.modal label { font-size: 12px; color: var(--ink-dim); display: block; margin-bottom: 4px; letter-spacing: 0.05em; }
.modal textarea {
  width: 100%; min-height: 110px; resize: vertical;
  background: var(--deck); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; font-family: var(--font-body);
}
.modal textarea:focus, .modal input:focus, .modal select:focus { outline: 1px solid var(--amber); }
.modal-row { display: flex; gap: 12px; }
.modal-row > div { flex: 1; }
.modal select, .modal input[type="text"] {
  width: 100%;
  background: var(--deck); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 13px;
}
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- runs view ---------- */

.runs { display: flex; flex-direction: column; gap: 16px; }

.pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.pane:last-child { margin-bottom: 0; }
.pane-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}
.pane-agent { font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; }
.pane-id { font-size: 11px; color: var(--ink-dim); }
.pane-elapsed { font-size: 12px; color: var(--ink-dim); margin-left: auto; }
.pane-prompt {
  padding: 8px 14px; font-size: 12.5px; color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pane-prompt b { color: var(--ink); font-weight: 500; }

.term-wrap { position: relative; }
.term {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--deck);
  padding: 12px 14px;
  height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.term .line { margin: 0; }
.term .line.text { color: var(--ink); }
.term .line.info { color: var(--ink-dim); font-style: italic; }
.term .line.tool { color: var(--amber); }
.term .line.toolresult { color: var(--ink-dim); }
.term .line.stderr { color: var(--red); }
.term .line.raw { color: var(--ink-dim); opacity: 0.7; }
.jump-latest {
  position: absolute; right: 14px; bottom: 12px;
  background: var(--panel-2); border: 1px solid var(--amber);
  color: var(--amber); border-radius: 999px;
  padding: 3px 12px; font-size: 11px; font-family: var(--font-mono);
}

.pane-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  flex-wrap: wrap;
}
.foot-usage { font-size: 12px; color: var(--ink-dim); }
.foot-usage .cost { color: var(--amber); }
.reply { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.reply input {
  flex: 1;
  background: var(--deck); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 11px; font-size: 13px;
}
.reply input:focus { outline: 1px solid var(--amber); }

/* history */
.hist-controls { display: flex; align-items: center; gap: 10px; }
.hist-controls select {
  background: var(--deck); border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 9px; font-size: 12.5px; font-family: var(--font-mono);
}
table.hist { width: 100%; border-collapse: collapse; font-size: 13px; }
table.hist th {
  text-align: left; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-dim); font-weight: 400;
  padding: 6px 10px; border-bottom: 1px solid var(--line);
}
table.hist td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.hist tr.row { cursor: pointer; }
table.hist tr.row:hover td { background: var(--panel-2); }
td.prompt-cell { color: var(--ink-dim); max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr.detail td { background: var(--deck); }
.detail-block { padding: 6px 0; }
.detail-block h4 {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-dim); margin-bottom: 4px; font-weight: 400;
}
.detail-block pre {
  font-family: var(--font-mono); font-size: 12px;
  white-space: pre-wrap; word-break: break-word;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 7px; padding: 10px 12px;
  max-height: 300px; overflow-y: auto;
}

/* ---------- settings view ---------- */

.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; max-width: 900px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: none; }
.set-key { font-size: 13px; color: var(--ink-dim); }
.set-val { font-family: var(--font-mono); font-size: 13px; text-align: right; word-break: break-all; }
.set-row input[type="number"] {
  background: var(--deck); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 10px; font-size: 13px; font-family: var(--font-mono);
  width: 160px; text-align: right;
}
.set-row input:focus { outline: 1px solid var(--amber); }
.set-actions { display: flex; justify-content: flex-end; padding-top: 12px; }
.set-note { font-size: 12px; color: var(--ink-dim); padding-top: 10px; }
.set-note.warn { color: var(--amber); }

/* ---------- toasts ---------- */

#toast-root {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 380px;
}
.toast {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  animation: toast-in 0.18s ease-out;
}
.toast.error { border-left-color: var(--red); }
.toast.info { border-left-color: var(--amber); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- chat view (M4RC3L single conversation — added 2026-08-13) ---------- */

.chat { display: flex; justify-content: center; }
.chat-shell {
  display: flex; flex-direction: column;
  width: 100%; max-width: 860px;
  height: calc(100vh - 110px);
}
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chat-title { font-family: var(--font-display); font-size: 16px; color: var(--amber); letter-spacing: 0.04em; }
.chat-sub { color: var(--ink-dim); font-size: 12px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px 4px; display: flex; flex-direction: column; gap: 12px; }
.chat-empty { color: var(--ink-dim); text-align: center; margin-top: 42px; font-size: 13px; }
.msg { max-width: 84%; border-radius: var(--radius); padding: 10px 13px; font-size: 13.5px; line-height: 1.55; }
.msg.user { align-self: flex-end; background: rgba(242, 163, 60, 0.10); border: 1px solid rgba(242, 163, 60, 0.34); white-space: pre-wrap; }
.msg.agent { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); min-width: 120px; }
.msg.agent.failed { border-color: var(--red); }
.msg-tools { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 2px; margin-bottom: 7px; }
.msg-tools .t-err { color: var(--red); }
.msg-body { white-space: pre-wrap; word-break: break-word; }
.msg-body.md { white-space: normal; }
.msg-body .md-code { background: var(--deck); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; overflow-x: auto; }
.msg-meta { margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim); }
.msg-meta .err { color: var(--red); text-transform: uppercase; }
.chat-form { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); align-items: flex-end; }
.chat-form textarea {
  flex: 1; resize: none;
  background: var(--deck); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.4;
}
.chat-form textarea:focus { outline: none; border-color: var(--amber); }
.chat-form textarea:disabled { opacity: 0.55; }

/* ---------- auth unlock overlay ---------- */

.auth-overlay { position: fixed; inset: 0; background: rgba(4, 6, 10, 0.84); display: flex; align-items: center; justify-content: center; z-index: 100; }
.auth-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; width: min(92vw, 380px); display: flex; flex-direction: column; gap: 12px;
}
.auth-title { font-family: var(--font-display); color: var(--amber); font-size: 15px; }
.auth-hint { color: var(--ink-dim); font-size: 12.5px; margin: 0; }
.auth-hint code { font-family: var(--font-mono); color: var(--ink); }
.auth-box input {
  background: var(--deck); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; font-family: var(--font-mono); font-size: 13px;
}
.auth-box input:focus { outline: none; border-color: var(--amber); }

/* ---------- agent avatars (5-state animation) ---------- */

.av { display: block; }

@keyframes av-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes av-tilt { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-3px); } }
@keyframes av-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-14px) scale(1.04, .96); }
  50% { transform: translateY(0) scale(.97, 1.03); }
  65% { transform: translateY(-6px) scale(1, 1); }
  80% { transform: translateY(0) scale(1, 1); }
}
@keyframes av-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes av-shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-3px); }
  30%, 70% { transform: translateX(3px); }
}
@keyframes av-redglow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(229, 72, 77, 0)); }
  50% { filter: drop-shadow(0 0 14px rgba(229, 72, 77, .9)); }
}

.av.av-idle { animation: av-bob 4s ease-in-out infinite; }
.av.av-think { animation: av-tilt 2.4s ease-in-out infinite; }
.av.av-bounce { animation: av-bounce 1.6s ease-in-out infinite; }
.av.av-sleep { animation: av-breathe 5s ease-in-out infinite; }
.av.av-alert { animation: av-shake .6s linear infinite, av-redglow 1.3s ease-in-out infinite; }

/* signature-accessory motion families (see avatars.js SIG_CLASS) */
@keyframes sig-pop-idle-kf { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes sig-pop-think-kf { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-8deg); } }
@keyframes sig-pop-success-kf {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-13px) rotate(-14deg); }
  55% { transform: translateY(0) rotate(3deg); }
  70% { transform: translateY(-4px) rotate(-2deg); }
  85% { transform: translateY(0) rotate(0); }
}
@keyframes sig-pop-jitter-kf { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } }
.sig-pop-idle { animation: sig-pop-idle-kf 5s ease-in-out infinite; }
.sig-pop-think { animation: sig-pop-think-kf 2.4s ease-in-out infinite; }
.sig-pop-success { animation: sig-pop-success-kf 1.6s ease-in-out infinite; }
.sig-pop-sleep { transform: rotate(-10deg) translateY(5px); }
.sig-pop-alert { animation: sig-pop-jitter-kf .5s linear infinite; }

@keyframes sig-spin-wiggle-kf { 0%, 78%, 100% { transform: rotate(0); } 86% { transform: rotate(12deg); } 93% { transform: rotate(-10deg); } }
@keyframes sig-spin-full-kf { to { transform: rotate(360deg); } }
@keyframes sig-spin-fast-kf { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.sig-spin-idle { animation: sig-spin-wiggle-kf 3.2s ease-in-out infinite; }
.sig-spin-success { animation: sig-spin-full-kf 1.6s linear infinite; }
.sig-spin-sleep { transform: rotate(14deg) translateY(2px); }
.sig-spin-alert { animation: sig-spin-fast-kf .45s ease-in-out infinite; }

@keyframes sig-swing-idle-kf { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes sig-swing-think-kf { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(4deg); } }
@keyframes sig-swing-success-kf {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-32deg); }
  45% { transform: rotate(26deg); }
  70% { transform: rotate(-14deg); }
  90% { transform: rotate(6deg); }
}
@keyframes sig-swing-alert-kf { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.sig-swing-idle { animation: sig-swing-idle-kf 3s ease-in-out infinite; }
.sig-swing-think { animation: sig-swing-think-kf 2s ease-in-out infinite; }
.sig-swing-success { animation: sig-swing-success-kf 1.6s ease-in-out infinite; }
.sig-swing-sleep { transform: rotate(9deg); }
.sig-swing-alert { animation: sig-swing-alert-kf .4s ease-in-out infinite; }

/* small inline avatar in agent cards / run panes / chat header */
.av-sm { width: 34px; height: 34px; flex: none; }
.av-md { width: 44px; height: 44px; flex: none; }

/* ---------- activity sidebar (app-shell level, all views) ---------- */

#shell { display: flex; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 0; }
#shell #view { flex: 1; min-width: 0; margin: 0; }
#sidebar {
  flex: none; width: 260px;
  padding: 16px 10px 16px 0;
  border-left: 1px solid var(--line);
  height: calc(100vh - 52px);
  overflow-y: auto;
  position: sticky; top: 52px;
}
.sb-loading { color: var(--ink-dim); font-size: 12px; padding: 10px; }
.sb-group { margin-bottom: 14px; }
.sb-group:last-child { margin-bottom: 0; }
.sb-group-label {
  font-family: var(--font-display); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-dim); padding: 0 8px 4px;
}
.sb-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; }
.sb-row:hover { background: var(--panel); }
.sb-av { position: relative; }
.sb-dot {
  position: absolute; margin-left: -12px; margin-top: 22px;
  width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--deck);
}
.sb-dot-idle, .sb-dot-sleep { background: var(--ink-dim); }
.sb-dot-think { background: var(--amber); animation: pulse 1.2s infinite; }
.sb-dot-success { background: var(--teal); }
.sb-dot-alert { background: var(--red); }
.sb-meta { flex: 1; min-width: 0; }
.sb-name { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.sb-line { color: var(--ink-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-time { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); align-self: flex-start; padding-top: 2px; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .deck-grid { grid-template-columns: 1fr; }
  #topbar { gap: 12px; padding: 0 12px; }
  .wm-os { display: none; }
  #view { padding: 12px; }
  .modal-row { flex-direction: column; }
  .chat-shell { height: calc(100vh - 96px); }
  .msg { max-width: 94%; }
  #shell { flex-direction: column; }
  #sidebar { width: 100%; height: auto; position: static; border-left: none; border-top: 1px solid var(--line); padding: 12px 0 0; }
}