/* ============================================================
   PHOENIX ECHO — GATEWAY COMMAND
   Layered on tokens.css (warm-black + burnished gold).
   Calmer, more spread-out reinvention.
   ============================================================ */

:root {
  --backdrop-op: 0.10;        /* ambient backdrop strength (tweakable) */
  --rail-pad: 7px;            /* rail density (tweakable) */
  --rail-gap: 2px;
  --accent: var(--gold-3);    /* global accent (tweakable: gold | steel) */
  --accent-soft: rgba(201,163,92,0.10);
  --accent-line: rgba(201,163,92,0.30);
}

/* ----- Per-agent accent palettes ----- */
[data-accent="gold"]  { --a:#c9a35c; --a-hi:#e0bc78; --a-soft:rgba(201,163,92,0.12); --a-line:rgba(201,163,92,0.34); --a-glow:rgba(201,163,92,0.20); }
[data-accent="ember"] { --a:#e8623a; --a-hi:#ff8a5c; --a-soft:rgba(232,98,58,0.12);  --a-line:rgba(232,98,58,0.36);  --a-glow:rgba(232,98,58,0.22); }
[data-accent="amber"] { --a:#e0a23c; --a-hi:#f4c463; --a-soft:rgba(224,162,60,0.12); --a-line:rgba(224,162,60,0.36); --a-glow:rgba(224,162,60,0.20); }
[data-accent="steel"] { --a:#6f9fce; --a-hi:#9cc3ea; --a-soft:rgba(111,159,206,0.12);--a-line:rgba(111,159,206,0.36);--a-glow:rgba(111,159,206,0.22); }
[data-accent="teal"]  { --a:#34b8a4; --a-hi:#5fdcc7; --a-soft:rgba(52,184,164,0.12); --a-line:rgba(52,184,164,0.36); --a-glow:rgba(52,184,164,0.22); }
[data-accent="crimson"] { --a:#c43b3b; --a-hi:#e26565; --a-soft:rgba(196,59,59,0.12); --a-line:rgba(196,59,59,0.36); --a-glow:rgba(196,59,59,0.22); }
[data-accent="slate"]   { --a:#9aa3ad; --a-hi:#c2cad2; --a-soft:rgba(154,163,173,0.10); --a-line:rgba(154,163,173,0.32); --a-glow:rgba(154,163,173,0.16); }
[data-accent="violet"]  { --a:#9d7bd8; --a-hi:#bf9ef2; --a-soft:rgba(157,123,216,0.12); --a-line:rgba(157,123,216,0.36); --a-glow:rgba(157,123,216,0.22); }
[data-accent="bronze"]  { --a:#b08358; --a-hi:#d2a87e; --a-soft:rgba(176,131,88,0.12); --a-line:rgba(176,131,88,0.36); --a-glow:rgba(176,131,88,0.20); }
[data-accent="halo"]  { --a:#dcc18a; --a-hi:#f2dfae; --a-soft:rgba(220,193,138,0.12); --a-line:rgba(220,193,138,0.38); --a-glow:rgba(220,193,138,0.22); }

/* global accent override */
.theme-gold  { --accent:#c9a35c; --accent-soft:rgba(201,163,92,0.10); --accent-line:rgba(201,163,92,0.30); }
.theme-steel { --accent:#6f9fce; --accent-soft:rgba(111,159,206,0.10); --accent-line:rgba(111,159,206,0.30); }

/* ============================================================
   SHELL
   ============================================================ */
#root, .shell { height: 100vh; }
.shell {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h);
  height: 100vh;
  position: relative;
  isolation: isolate;
}
/* ambient backdrop behind everything */
.shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/backdrop-blue.jpg") center 38% / cover no-repeat;
  opacity: var(--backdrop-op);
  filter: saturate(0.9) brightness(0.9);
  z-index: -2;
  pointer-events: none;
}
.shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1100px 760px at 22% -5%, rgba(201,163,92,0.06), transparent 55%),
    radial-gradient(ellipse 900px 600px at 82% 105%, rgba(204,31,31,0.04), transparent 55%),
    linear-gradient(180deg, rgba(17,13,10,0.74), rgba(10,8,7,0.90));
  z-index: -1;
  pointer-events: none;
}

.shell__body { display: flex; min-height: 0; min-width: 0; overflow: hidden; position: relative; }
.shell__col { flex-shrink: 0; min-height: 0; height: 100%; }
.shell__main {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* resizer */
.resizer {
  flex-shrink: 0; width: 5px; cursor: col-resize;
  position: relative; background: transparent;
  transition: background 120ms;
}
.resizer::before {
  content:""; position:absolute; top:0; bottom:0; left:2px; width:1px;
  background: var(--stroke-1); transition: background 120ms;
}
.resizer:hover::before, body.resizing .resizer::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-line); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { user-select: none !important; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  display: flex; align-items: center; gap: 14px;
  white-space: nowrap;
  padding: 0 14px; height: var(--topbar-h);
  background: linear-gradient(180deg, rgba(34,27,22,0.92), rgba(24,19,16,0.92));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stroke-1);
}
.topbar__menu {
  display: grid; place-items: center; width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--stroke-1);
  border-radius: var(--r-2); color: var(--text-2); flex-shrink: 0;
}
.topbar__menu:hover { background: var(--bg-3); color: var(--text-0); }
.topbar__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar__mark {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  background: radial-gradient(circle at 50% 35%, rgba(201,163,92,0.18), transparent 70%);
}
.topbar__mark img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(201,163,92,0.5)); }
.topbar__title { display: flex; flex-direction: column; line-height: 1.1; }
.topbar__title b {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--text-0); letter-spacing: 0.01em;
}
.topbar__title span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }

.topbar__crumb {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; margin-left: 6px;
  background: rgba(34,27,22,0.6); border: 1px solid var(--stroke-1);
  border-radius: var(--r-pill); height: 30px; flex-shrink: 0;
}
.topbar__crumb .glyph { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.topbar__crumb-name { font-family: var(--font-display); font-size: 15px; color: var(--text-0); font-weight: 500; white-space: nowrap; }

.topbar__spring { flex: 1; }

.topbar__search {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; width: 320px; max-width: 34vw;
  background: rgba(10,8,7,0.55); border: 1px solid var(--stroke-1);
  border-radius: var(--r-pill); height: 30px; color: var(--text-3);
}
.topbar__search:focus-within { border-color: var(--accent-line); }
.topbar__search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text-0); font-size: 12.5px; }
.topbar__search input::placeholder { color: var(--text-3); }
.kbd {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3);
  padding: 2px 6px; border: 1px solid var(--stroke-1); border-radius: var(--r-1);
  background: var(--bg-2);
}
.topbar__user {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  padding: 3px 14px 3px 4px; background: rgba(34,27,22,0.6);
  border: 1px solid var(--stroke-1); border-radius: var(--r-pill);
}
.topbar__user-av {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold-3), var(--bronze-3));
  color: var(--bg-0); font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.topbar__user-txt { line-height: 1.15; white-space: nowrap; }
.topbar__user-txt b { font-size: 11.5px; color: var(--text-0); font-weight: 600; display: block; }
.topbar__user-txt span { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); }

/* ============================================================
   RAIL  (the menu — everything lives here)
   ============================================================ */
.rail {
  display: flex; flex-direction: column; height: 100%;
  background: rgba(20,15,12,0.72); backdrop-filter: blur(10px);
  border-right: 1px solid var(--stroke-1);
}
.rail__scroll { flex: 1; overflow-y: auto; padding: 12px 10px; }
.rail__group + .rail__group { margin-top: 16px; }
.rail__group-label {
  padding: 6px 10px 6px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.22em; color: var(--text-dim); text-transform: uppercase;
}
.rail__item {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: var(--rail-pad) 10px; margin-bottom: var(--rail-gap);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-2); color: var(--text-1); text-align: left;
  transition: background 120ms, border-color 120ms;
}
.rail--collapsed .rail__item { justify-content: center; padding: var(--rail-pad) 4px; }
.rail__item:hover { background: rgba(45,36,28,0.6); }
.rail__item--active {
  background: linear-gradient(90deg, var(--a-soft, var(--accent-soft)), transparent);
  border-color: var(--a-line, var(--accent-line));
}
.rail__ic { width: 18px; height: 18px; color: var(--text-2); flex-shrink: 0; display: grid; place-items: center; }
.rail__ic svg { width: 18px; height: 18px; }
.rail__item--active .rail__ic { color: var(--a, var(--accent)); }
.rail__item--active .rail__name { color: var(--text-0); font-weight: 500; }
.rail__name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.rail--collapsed .rail__name, .rail--collapsed .rail__group-label, .rail--collapsed .rail__dot { display: none; }
.rail__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rail__dot[data-state="live"]     { background: var(--rd-live); box-shadow: 0 0 6px var(--rd-live); }
.rail__dot[data-state="half"]     { background: var(--rd-half); }
.rail__dot[data-state="scaffold"] { background: var(--rd-scaffold); }
.rail__dot[data-state="mock"]     { background: var(--rd-mock); }
.rail__dot[data-state="blocked"]  { background: var(--rd-blocked); }
.rail__dot[data-state="needs"]    { background: var(--rd-needs); }
/* agent sigil chip in rail */
.rail__sigil { width: 18px; height: 18px; flex-shrink: 0; color: var(--a); }
.rail__sigil svg { width: 18px; height: 18px; }

.rail__foot {
  padding: 12px 14px; border-top: 1px solid var(--stroke-1);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
}
.rail__foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-live); box-shadow: 0 0 6px var(--rd-live); }
.rail--collapsed .rail__foot { justify-content: center; }
.rail--collapsed .rail__foot span { display: none; }

/* ============================================================
   STATUS BAR
   ============================================================ */
.statusbar {
  display: flex; align-items: center; gap: 12px; height: var(--statusbar-h);
  padding: 0 16px; background: rgba(20,15,12,0.85);
  border-top: 1px solid var(--stroke-1);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-1);
  overflow: hidden;
}
/* Fixed-height bar with flex-wrap:nowrap — children must not wrap either, or
   they shrink to 2 lines and spill out of the 24px strip. */
.statusbar > * { white-space: nowrap; flex-shrink: 0; }
.statusbar .spring { flex: 1 1 auto; min-width: 0; }
/* The keyboard hints are the lowest-priority content and the only child
   allowed to give: it ellipsizes instead of being cropped mid-glyph, and
   drops out entirely on narrow viewports. The bar needs ~1078px to show
   everything in the connected state. */
.statusbar__hints { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .statusbar__hints { display: none; } }
.statusbar .sep { color: var(--text-faint); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 9.5px;
  border: 1px solid var(--stroke-1);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill.live { color: var(--rd-live); border-color: rgba(74,222,128,0.3); }
.pill.live .dot { background: var(--rd-live); box-shadow: 0 0 6px var(--rd-live); }
.pill.gold { color: var(--gold-4); border-color: var(--stroke-gold); }
.pill.gold .dot { background: var(--gold-3); }

/* ============================================================
   READINESS BADGE
   ============================================================ */
.rd-declared{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);border:1px dashed currentColor;background:transparent}
.rd-declared__q{font-weight:400;text-transform:none;letter-spacing:0;opacity:.75}
.rd-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; border: 1px solid;
}
.rd-badge .dot { width: 5px; height: 5px; border-radius: 50%; }
.rd-badge[data-state="live"]     { color: var(--rd-live);     border-color: rgba(74,222,128,0.35); }
.rd-badge[data-state="half"]     { color: var(--rd-half);     border-color: rgba(250,204,21,0.35); }
.rd-badge[data-state="scaffold"] { color: var(--rd-scaffold); border-color: rgba(251,146,60,0.35); }
.rd-badge[data-state="mock"]     { color: var(--rd-mock);     border-color: rgba(96,165,250,0.35); }
.rd-badge[data-state="blocked"]  { color: var(--rd-blocked);  border-color: rgba(239,68,68,0.35); }
.rd-badge[data-state="needs"]    { color: var(--rd-needs);    border-color: var(--stroke-2); }
.rd-badge[data-state="live"] .dot     { background: var(--rd-live); }
.rd-badge[data-state="half"] .dot     { background: var(--rd-half); }
.rd-badge[data-state="scaffold"] .dot { background: var(--rd-scaffold); }
.rd-badge[data-state="mock"] .dot     { background: var(--rd-mock); }
.rd-badge[data-state="blocked"] .dot  { background: var(--rd-blocked); }
.rd-badge[data-state="needs"] .dot    { background: var(--rd-needs); }

/* ============================================================
   ROOM SCAFFOLD
   ============================================================ */
.room { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.room-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 26px 40px 20px; border-bottom: 1px solid var(--stroke-1);
}
.room-head__txt { flex: 1; }
.room-head h1 {
  margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 600;
  letter-spacing: -0.015em; color: var(--text-0); line-height: 1.05;
}
.room-head__sub { margin-top: 6px; font-size: 13px; color: var(--text-2); max-width: 64ch; }
.room-head__meta { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.room-body { padding: 28px 40px 48px; }
.room-body--wide { max-width: 1180px; }

.sec-title {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-3);
}
.sec-title .line { flex: 1; height: 1px; background: var(--stroke-1); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  /* A BUTTON LABEL MUST NEVER WRAP. Without this, "Talk to TapeRoot" broke as
     "Talk / to  TapeRoot": the button sits in a shrink-to-fit column inside the same
     449px .agentroom__banner-row that starved .agentroom__id, so it resolved to
     149px and its inline children wrapped internally — the inner <span>Talk to</span>
     collapsing to 30px. Length-dependent, so it was latent: 2 of 8 agents broke
     today and any future name of ~8+ characters would have joined them.
     Stated on .btn rather than on this one call site, which was the mistake in the
     .agentroom__seat fix one element over — same root cause, patched locally, so the
     sibling was left broken. nowrap also makes the button claim its content width,
     which is what stops the wrapper collapsing in the first place. */
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--r-2);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  border: 1px solid var(--stroke-2); background: var(--bg-3); color: var(--text-1);
  transition: background 120ms, border-color 120ms, color 120ms;
}
.btn:hover { background: var(--bg-4); border-color: var(--stroke-3); color: var(--text-0); }
.btn svg { width: 15px; height: 15px; }
.btn.sm { padding: 5px 11px; font-size: 11.5px; }
.btn.accent {
  background: linear-gradient(180deg, var(--a, var(--accent)), color-mix(in srgb, var(--a, var(--accent)) 75%, #000));
  border-color: transparent; color: #1a130a; font-weight: 600;
}
.btn.accent:hover { filter: brightness(1.08); color: #1a130a; }
.btn.ghost { background: transparent; border-color: var(--stroke-1); }
.btn.ghost:hover { background: var(--bg-3); }

/* ============================================================
   COMMAND HOME  (calm, spread out)
   ============================================================ */
.home { padding: 0; }
.home__inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; }

.home__hero {
  padding: 60px 0 36px; text-align: center;
  position: relative;
}
.home__hero-mark { width: 76px; height: 76px; margin: 0 auto 18px; display: block; filter: drop-shadow(0 0 24px rgba(201,163,92,0.45)); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.04); opacity: 1; } }
.home__overline { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-3); margin-bottom: 14px; }
.home__greet {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--text-0); margin: 0 0 14px;
}
.home__greet .accent { color: var(--gold-4); font-style: italic; }
.home__sub { font-size: 15px; color: var(--text-2); max-width: 60ch; margin: 0 auto; line-height: 1.55; }
.home__hero-actions { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }

.home__section { padding: 14px 0 0; }
.home__section + .home__section { margin-top: 40px; }

/* crew strip on home */
.crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.crew-card {
  text-align: left; position: relative; overflow: hidden;
  padding: 18px; border-radius: var(--r-4);
  background: linear-gradient(165deg, rgba(34,27,22,0.66), rgba(20,15,12,0.66));
  border: 1px solid var(--stroke-1); backdrop-filter: blur(6px);
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
  display: flex; flex-direction: column; gap: 12px;
}
.crew-card:hover { border-color: var(--a-line); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px var(--a-line); }
.crew-card__glow { position: absolute; top: -40px; right: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, var(--a-glow), transparent 70%); pointer-events: none; }
.crew-card__top { display: flex; align-items: center; gap: 11px; }
.sigil {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-3);
  display: grid; place-items: center; color: var(--a);
  background: var(--a-soft); border: 1px solid var(--a-line);
}
.sigil svg { width: 24px; height: 24px; }
.sigil--lg { width: 60px; height: 60px; border-radius: var(--r-4); }
.sigil--lg svg { width: 36px; height: 36px; }

/* agent portrait avatars (fallback = sigil) */
.agent-avatar { object-fit: cover; object-position: center 18%; flex-shrink: 0; border: 1px solid var(--a-line); background: var(--a-soft); }
.agent-avatar--sm { width: 40px; height: 40px; border-radius: var(--r-3); }
.agent-avatar--lg { width: 92px; height: 92px; border-radius: var(--r-4); box-shadow: 0 0 28px var(--a-glow); }
.agent-avatar--chat { width: 32px; height: 32px; border-radius: var(--r-2); }
.crew-card__id { line-height: 1.2; }
.crew-card__name { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--text-0); }
.crew-card__title { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a); }
.crew-card__mission { font-size: 12.5px; color: var(--text-2); line-height: 1.45; flex: 1; }
.crew-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crew-card__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-dot[data-s="active"]  { background: var(--rd-live); box-shadow: 0 0 7px var(--rd-live); }
.status-dot[data-s="standby"] { background: var(--rd-half); }
.status-dot[data-s="idle"]    { background: var(--text-dim); }
.crew-card__seat { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); }

/* today + cost row */
.home__cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .home__cols { grid-template-columns: 1fr; } }

.today-list { display: flex; flex-direction: column; gap: 2px; }
.today-row {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px;
  padding: 13px 14px; border-radius: var(--r-3); border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.today-row:hover { background: rgba(34,27,22,0.5); border-color: var(--stroke-1); }
.today-row__t { font-family: var(--font-mono); font-size: 11px; color: var(--gold-3); letter-spacing: 0.04em; }
.today-row__main { min-width: 0; }
.today-row__label { font-size: 13.5px; color: var(--text-0); font-weight: 500; }
.today-row__note { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.today-row__owner { font-family: var(--font-mono); font-size: 10px; color: var(--text-2); }

.panel {
  border-radius: var(--r-4); border: 1px solid var(--stroke-1);
  background: linear-gradient(165deg, rgba(34,27,22,0.55), rgba(20,15,12,0.55));
  backdrop-filter: blur(6px); overflow: hidden;
}
.panel__head { padding: 14px 18px; border-bottom: 1px solid var(--stroke-1); display: flex; align-items: center; justify-content: space-between; }
.panel__head h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-0); }
.panel__body { padding: 18px; }

.cost-big { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--text-0); line-height: 1; }
.cost-big small { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); font-weight: 400; }
.cost-meter { height: 7px; border-radius: var(--r-pill); background: var(--bg-4); overflow: hidden; margin: 16px 0 8px; display: flex; }
.cost-meter .local { background: linear-gradient(90deg, var(--rd-live), #3aa869); }
.cost-meter .cloud { background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); }
.cost-legend { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.cost-stats { display: flex; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--stroke-1); }
.cost-stat b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--text-0); }
.cost-stat span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }

/* quick room tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; }
.tile {
  display: flex; align-items: center; gap: 11px; padding: 14px 16px;
  border-radius: var(--r-3); border: 1px solid var(--stroke-1);
  background: rgba(24,19,16,0.5); color: var(--text-1); text-align: left;
  transition: background 120ms, border-color 120ms;
}
.tile:hover { background: rgba(45,36,28,0.6); border-color: var(--stroke-gold); color: var(--text-0); }
.tile svg { width: 19px; height: 19px; color: var(--gold-3); flex-shrink: 0; }
.tile b { font-size: 13px; font-weight: 500; display: block; }
.tile span { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; }

/* ============================================================
   AGENT ROOM
   ============================================================ */
.agentroom { position: relative; }
.agentroom__banner {
  padding: 40px 40px 30px; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--a-line);
  background:
    radial-gradient(ellipse 700px 320px at 18% 0%, var(--a-glow), transparent 60%),
    linear-gradient(180deg, rgba(20,15,12,0.4), rgba(10,8,7,0.2));
}
.agentroom__banner-row { display: flex; align-items: center; gap: 22px; max-width: 1120px; margin: 0 auto; }
.agentroom__id { flex: 1; }
.agentroom__name { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--text-0); line-height: 1; letter-spacing: -0.02em; }
.agentroom__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--a); margin-top: 8px; }
.agentroom__creed {
  max-width: 1120px; margin: 22px auto 0; font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 23px); font-style: italic; font-weight: 500;
  color: var(--text-1); line-height: 1.4; border-left: 2px solid var(--a-line); padding-left: 18px;
}
/* The three values are single phrases and must never break mid-phrase. They were
   wrapping internally ("seat Mac / Studio", "model opus- / 4.7") because
   .agentroom__id is flex:1 1 0% — basis 0, so it never claims its content width and
   collapsed to 178px of a 449px row, and white-space:normal children wrap inside
   themselves rather than forcing width. Fixed at the constraint, not with a magic
   min-width: each value is nowrap so it CANNOT break, and the row wraps instead, so
   values move to a second line as whole units at any container width. */
.agentroom__seat { display: flex; gap: 16px; margin-top: 14px;  flex-wrap: wrap; row-gap: 5px; }
.agentroom__seat > span { white-space: nowrap; }
.agentroom__seat span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.agentroom__seat b { color: var(--a); }

.agentroom__body { max-width: 1120px; margin: 0 auto; padding: 30px 40px 48px; }
.agentroom__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .agentroom__grid { grid-template-columns: 1fr; } }

.metric-row { display: flex; gap: 12px; margin-bottom: 26px; }
.metric {
  flex: 1; padding: 16px; border-radius: var(--r-3);
  background: rgba(24,19,16,0.55); border: 1px solid var(--stroke-1);
}
.metric b { display: block; font-family: var(--font-display); font-size: 26px; color: var(--text-0); line-height: 1; }
.metric span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-top: 7px; display: block; }

.does-list { display: flex; flex-direction: column; gap: 8px; }
.does-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--r-3); background: rgba(24,19,16,0.5); border: 1px solid var(--stroke-1); font-size: 13px; color: var(--text-1); }
.does-item svg { width: 15px; height: 15px; color: var(--a); flex-shrink: 0; }

.log-feed { display: flex; flex-direction: column; }
.log-item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--stroke-0); }
.log-item:last-child { border-bottom: 0; }
.log-item__t { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); padding-top: 1px; }
.log-item__body { min-width: 0; }
.log-item__kind { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a); margin-bottom: 3px; }
.log-item__text { font-size: 12.5px; color: var(--text-1); line-height: 1.45; }

/* ============================================================
   CREW ROOM (all agents)
   ============================================================ */
.crewroom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 18px; }
.crewroom-card {
  text-align: left; position: relative; overflow: hidden;
  padding: 22px; border-radius: var(--r-4);
  background: linear-gradient(165deg, rgba(34,27,22,0.66), rgba(20,15,12,0.66));
  border: 1px solid var(--stroke-1); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}
.crewroom-card:hover { border-color: var(--a-line); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,0.42), 0 0 0 1px var(--a-line); }
.crewroom-card__creed { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--text-2); line-height: 1.45; }
.crewroom-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-family: var(--font-mono); font-size: 9.5px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--a-soft); border: 1px solid var(--a-line); color: var(--a-hi); }

/* ---------- specialists tier ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.spec-card {
  position: relative; overflow: hidden; padding: 16px;
  border-radius: var(--r-4); border: 1px solid var(--stroke-1);
  background: linear-gradient(165deg, rgba(34,27,22,0.6), rgba(20,15,12,0.6));
  display: flex; flex-direction: column; gap: 11px;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}
.spec-card:hover { border-color: var(--a-line); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.4), 0 0 0 1px var(--a-line); }
.spec-card__top { display: flex; align-items: center; gap: 11px; }
.spec-card__name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-0); line-height: 1.1; }
.spec-card__role { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a); margin-top: 2px; }
.spec-card__creed { font-family: var(--font-display); font-style: italic; font-size: 13.5px; color: var(--text-2); line-height: 1.45; flex: 1; }
.spec-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spec-card__post { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); line-height: 1.4; }

/* ============================================================
   EMPTY / RESERVED ROOM
   ============================================================ */
.reserved { max-width: 720px; margin: 8px auto 0; text-align: center; padding: 40px 0; }
.reserved__icon { width: 64px; height: 64px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: var(--r-4); background: var(--bg-3); border: 1px solid var(--stroke-1); color: var(--text-3); }
.reserved__icon svg { width: 32px; height: 32px; }
.reserved h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text-0); margin: 0 0 12px; }
.reserved p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 0 auto 18px; max-width: 56ch; }
.reserved__owner {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 9px 16px 9px 9px; border-radius: var(--r-pill);
  background: rgba(24,19,16,0.6); border: 1px solid var(--a-line);
}
.reserved__owner .sigil { width: 30px; height: 30px; border-radius: var(--r-2); }
.reserved__owner .sigil svg { width: 18px; height: 18px; }
.reserved__owner span { font-size: 12px; color: var(--text-2); }
.reserved__owner b { color: var(--a); }

/* ============================================================
   CHAT PANEL  (persistent Echo, resizable)
   ============================================================ */
.chat {
  display: flex; flex-direction: column; height: 100%;
  background: rgba(17,13,10,0.78); backdrop-filter: blur(10px);
  border-left: 1px solid var(--stroke-1);
}
.chat__head {
  display: flex; align-items: center; gap: 11px; padding: 13px 16px;
  border-bottom: 1px solid var(--stroke-1);
}
.chat__head .sigil { width: 32px; height: 32px; border-radius: var(--r-2); }
.chat__head .sigil svg { width: 19px; height: 19px; }
.chat__who { flex: 1; line-height: 1.2; }
.chat__who b { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-0); }
.chat__who span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--rd-live); text-transform: uppercase; display: flex; align-items: center; gap: 5px; }
.chat__who .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-live); box-shadow: 0 0 6px var(--rd-live); }
.chat__collapse { width: 26px; height: 26px; display: grid; place-items: center; background: transparent; border: 1px solid var(--stroke-1); border-radius: var(--r-1); color: var(--text-3); }
.chat__collapse:hover { background: var(--bg-3); color: var(--text-0); }

.chat__scroll { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 10px; max-width: 92%; }
.msg__av { width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-2); display: grid; place-items: center; color: #c9a35c; background: rgba(201,163,92,0.12); border: 1px solid rgba(201,163,92,0.3); }
.msg__av svg { width: 16px; height: 16px; }
.msg__bubble { padding: 11px 14px; border-radius: var(--r-3); font-size: 13px; line-height: 1.5; color: var(--text-1); background: rgba(34,27,22,0.7); border: 1px solid var(--stroke-1); }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .msg__bubble { background: rgba(201,163,92,0.1); border-color: var(--stroke-gold); color: var(--text-0); }
.msg.me .msg__av { background: linear-gradient(135deg, var(--gold-3), var(--bronze-3)); color: var(--bg-0); border: 0; font-family: var(--font-display); font-weight: 700; font-size: 11px; }
.msg__meta { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); margin-top: 5px; letter-spacing: 0.06em; }

.chat__compose { padding: 12px 14px; border-top: 1px solid var(--stroke-1); }
.chat__inputwrap { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; border-radius: var(--r-3); background: rgba(10,8,7,0.6); border: 1px solid var(--stroke-1); }
.chat__inputwrap:focus-within { border-color: var(--stroke-gold); }
.chat__inputwrap textarea { flex: 1; background: transparent; border: 0; outline: 0; resize: none; color: var(--text-0); font-size: 13px; font-family: var(--font-body); max-height: 120px; line-height: 1.45; }
.chat__inputwrap textarea::placeholder { color: var(--text-3); }
.chat__send { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--r-2); border: 0; background: linear-gradient(135deg, var(--gold-3), var(--bronze-3)); color: var(--bg-0); }
.chat__send:hover { filter: brightness(1.1); }
.chat__send svg { width: 16px; height: 16px; }
.chat__tools { display: flex; gap: 6px; margin-bottom: 9px; }
.chat__tool { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(34,27,22,0.6); border: 1px solid var(--stroke-1); color: var(--text-2); font-size: 11px; }
.chat__tool:hover:not(:disabled) { border-color: var(--stroke-gold); color: var(--text-0); }
.chat__tool:disabled { cursor: not-allowed; opacity: 0.5; }
.chat__tool svg { width: 13px; height: 13px; }

/* collapsed chat rail */
.chat--collapsed { align-items: center; padding-top: 14px; }
.chat--collapsed .chat__expand { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-2); background: rgba(201,163,92,0.12); border: 1px solid var(--stroke-gold); color: var(--gold-3); }
.chat--collapsed .chat__expand:hover { background: rgba(201,163,92,0.2); }

/* ============================================================
   LOCK / BOOT SCREEN
   ============================================================ */
.lock { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow-x: hidden; overflow-y: auto; background: #07060a; }
.lock__bg { position: absolute; inset: 0; background: url("../assets/backdrop-blue.jpg") center / cover no-repeat; }
.lock__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,6,10,0.45), rgba(7,6,10,0.82)); }
.lock__inner { position: relative; text-align: center; width: min(560px, 90vw); margin: auto; padding: 24px; }
.lock__brand { font-family: var(--font-display); font-size: clamp(34px, 6vw, 58px); font-weight: 700; color: #fff; letter-spacing: 0.04em; text-shadow: 0 4px 30px rgba(0,0,0,0.6); }
.lock__brand .cross { color: var(--gold-4); margin: 0 14px; }
.lock__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-4); margin-top: 12px; }
.lock__log { margin: 30px auto 26px; max-width: 440px; text-align: left; font-family: var(--font-mono); font-size: 11px; color: var(--ice-1); display: flex; flex-direction: column; gap: 5px; min-height: 150px; }
.lock__log-line { display: flex; gap: 9px; opacity: 0; animation: lockline 0.3s ease forwards; }
@keyframes lockline { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lock__log .lvl { font-weight: 600; }
.lock__log .lvl.go { color: var(--gold-4); }
.lock__log .lvl.ok { color: var(--rd-live); }
.lock__enter {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 30px;
  border-radius: var(--r-pill); border: 1px solid var(--gold-3);
  background: linear-gradient(180deg, rgba(201,163,92,0.92), rgba(138,107,42,0.92));
  color: #1a130a; font-family: var(--font-body); font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; box-shadow: 0 8px 30px rgba(201,163,92,0.3);
}
.lock__enter:hover { filter: brightness(1.08); }
.lock__enter svg { width: 17px; height: 17px; }
.lock__enter:disabled { cursor: not-allowed; filter: grayscale(0.55); opacity: 0.5; }
.runtime-token {
  position: relative; width: min(440px, 100%); margin: 0 auto 20px; padding: 16px 18px;
  border: 1px solid var(--stroke-2); border-radius: var(--r-3); background: rgba(7,6,10,0.9);
  color: var(--text-1); text-align: left; box-shadow: 0 16px 50px rgba(0,0,0,0.35);
}
.runtime-token h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; color: var(--text-0); }
.runtime-token p { margin: 0 0 12px; font-size: 11px; line-height: 1.5; color: var(--text-2); }
.runtime-token__target { margin: -3px 0 12px; font-family: var(--font-mono); font-size: 9px; color: var(--gold-4); overflow-wrap: anywhere; }
.runtime-token label { display: block; margin-bottom: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-4); }
.runtime-token input {
  width: 100%; height: 36px; padding: 0 11px; border: 1px solid var(--stroke-2);
  border-radius: var(--r-2); background: var(--bg-2); color: var(--text-0); font-family: var(--font-mono);
}
.runtime-token input:focus { outline: 1px solid var(--gold-3); border-color: var(--gold-3); }
.runtime-token__actions { display: flex; gap: 8px; margin-top: 10px; }
.runtime-token__actions button, .topbar__token {
  border: 1px solid var(--gold-3); border-radius: var(--r-pill); background: rgba(201,163,92,.12);
  color: var(--gold-4); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
}
.runtime-token__actions button { min-height: 32px; padding: 0 13px; }
.runtime-token__actions button.secondary { border-color: var(--stroke-2); background: transparent; color: var(--text-2); }
.runtime-token__actions button:disabled { opacity: .45; cursor: not-allowed; }
.runtime-token__close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: var(--text-2); font-size: 20px; }
.runtime-token-modal { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.72); }
.topbar__token { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin-right: 10px; white-space: nowrap; }

.crew-card__mission--none{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--text-dim)}
.log-empty{font-size:11.5px;color:var(--text-dim);padding:10px 0 4px;line-height:1.5}
.log-empty code{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3)}

/* The chat header's dot and word were painted --rd-live by the element, so "not
   wired" rendered in the success green — the same defect as the em dash that
   inherited a healthy value's colour. Colour follows the STATE, not the element. */
.chat__who [data-agentstate="unwired"]{color:var(--text-dim)}
.chat__who [data-agentstate="unwired"] .dot{background:var(--text-dim);border-color:var(--text-dim);box-shadow:none}
.crew-card__status[data-agentstate="unwired"]{color:var(--text-dim)}
.crew-card__status[data-agentstate="unwired"] .status-dot{background:var(--text-dim);box-shadow:none}
.role-unresolved{display:inline-flex;align-items:center;margin-left:7px;padding:1px 7px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);border:1px dashed currentColor;background:transparent;vertical-align:middle}

/* Boot lines: neutral until measured. The claim half is dim and monospaced so an
   unverified line reads as a pending check, never as a result. */
.lock__log .lvl.pending{color:var(--text-dim)}
.lock__claim{font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);margin-left:auto;padding-left:14px;white-space:nowrap}
.lock__log-line[data-verified="yes"] .lock__claim{color:var(--text-2)}
.cost-meter[data-unmeasured]{background:repeating-linear-gradient(90deg,var(--bg-4) 0 6px,transparent 6px 12px)}
.cost-legend__none{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:.04em}
.cost-legend__none code{font-size:10px;color:var(--text-3)}

/* Boot glyph tone. A measured FAILURE must never wear the success colour: warn is
   gold, bad is the fault red, only a genuinely healthy observation is green. */
.lock__log .lvl.warn{color:var(--gold-4)}
.lock__log .lvl.bad{color:var(--rd-blocked)}
.lock__log-line[data-tone="ok"] .lock__claim{color:var(--text-2)}
.lock__log-line[data-tone="warn"] .lock__claim{color:var(--gold-4)}
.lock__log-line[data-tone="bad"] .lock__claim{color:var(--rd-blocked)}
.today-empty{font-size:11.5px;color:var(--text-dim);padding:14px 0;line-height:1.5}
.today-empty code{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3)}