/* ============== OFFICE · PIXEL ISOMETRIC ============== */
:root {
  /* ---- TECH VIBE (default) ---- */
  --bg: oklch(0.22 0.012 240);
  --bg-2: oklch(0.26 0.014 240);
  --bg-3: oklch(0.30 0.016 240);
  --floor-a: oklch(0.34 0.012 240);
  --floor-b: oklch(0.38 0.014 240);
  --wall: oklch(0.28 0.014 240);
  --wall-2: oklch(0.33 0.016 240);
  --line: oklch(0.42 0.018 240);
  --line-2: oklch(0.55 0.020 240);
  --ink: oklch(0.97 0.008 240);
  --ink-2: oklch(0.82 0.012 240);
  --ink-3: oklch(0.64 0.014 240);
  --ink-4: oklch(0.48 0.014 240);
  --accent: oklch(0.82 0.14 210);
  --accent-2: oklch(0.76 0.12 210);
  --accent-soft: oklch(0.82 0.14 210 / 0.14);
  --ok: oklch(0.78 0.14 155);
  --warn: oklch(0.80 0.16 70);
  --bad: oklch(0.72 0.18 25);
  --info: oklch(0.76 0.12 230);
  --chair: oklch(0.40 0.014 240);
  --desk: oklch(0.62 0.022 60);
  --desk-dark: oklch(0.48 0.020 60);
  --plant: oklch(0.62 0.12 150);
  --glow: transparent;
}
body[data-vibe="cyber"] {
  --bg: oklch(0.15 0.030 290);
  --bg-2: oklch(0.18 0.035 290);
  --bg-3: oklch(0.22 0.040 290);
  --floor-a: oklch(0.24 0.040 290);
  --floor-b: oklch(0.28 0.045 290);
  --wall: oklch(0.20 0.045 290);
  --wall-2: oklch(0.26 0.055 290);
  --line: oklch(0.48 0.18 310);
  --line-2: oklch(0.72 0.20 195);
  --ink: oklch(0.98 0.010 290);
  --ink-2: oklch(0.80 0.030 290);
  --ink-3: oklch(0.60 0.040 290);
  --ink-4: oklch(0.45 0.050 290);
  --accent: oklch(0.78 0.22 330);
  --accent-2: oklch(0.70 0.20 330);
  --accent-soft: oklch(0.78 0.22 330 / 0.16);
  --ok: oklch(0.82 0.20 155);
  --warn: oklch(0.85 0.20 70);
  --bad: oklch(0.72 0.22 20);
  --info: oklch(0.80 0.18 210);
  --chair: oklch(0.28 0.050 290);
  --desk: oklch(0.35 0.080 290);
  --desk-dark: oklch(0.25 0.060 290);
  --plant: oklch(0.80 0.22 150);
  --glow: oklch(0.78 0.22 330 / 0.4);
}
body[data-vibe="cute"] {
  --bg: oklch(0.95 0.020 70);
  --bg-2: oklch(0.93 0.025 70);
  --bg-3: oklch(0.89 0.030 70);
  --floor-a: oklch(0.86 0.040 60);
  --floor-b: oklch(0.82 0.050 60);
  --wall: oklch(0.90 0.030 80);
  --wall-2: oklch(0.85 0.040 80);
  --line: oklch(0.72 0.030 60);
  --line-2: oklch(0.55 0.030 60);
  --ink: oklch(0.22 0.020 60);
  --ink-2: oklch(0.38 0.020 60);
  --ink-3: oklch(0.52 0.020 60);
  --ink-4: oklch(0.65 0.020 60);
  --accent: oklch(0.68 0.16 30);
  --accent-2: oklch(0.60 0.16 30);
  --accent-soft: oklch(0.68 0.16 30 / 0.18);
  --ok: oklch(0.68 0.14 155);
  --warn: oklch(0.75 0.14 70);
  --bad: oklch(0.65 0.18 25);
  --info: oklch(0.70 0.12 230);
  --chair: oklch(0.55 0.08 30);
  --desk: oklch(0.75 0.08 60);
  --desk-dark: oklch(0.58 0.08 60);
  --plant: oklch(0.65 0.16 140);
  --glow: transparent;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.45; min-height: 100vh; overflow-x: hidden; }
body {
  --sans: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --pixel: 'Press Start 2P', 'JetBrains Mono', monospace;
  font-family: var(--sans);
}
body[data-vibe="cyber"]::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
.mono { font-family: var(--mono); }
.pixel { font-family: var(--pixel); letter-spacing: 0.04em; image-rendering: pixelated; }

/* Layout */
.app { min-height: 100vh; display: grid; grid-template-rows: 52px 1fr; }
.topbar { display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); gap: 14px; position: relative; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 20px; height: 20px; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 12px var(--glow); }
.brand-name { font-family: var(--mono); font-weight: 600; letter-spacing: 0.04em; font-size: 13px; }
.ver { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.crumb { display: flex; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-left: 18px; }
.crumb .sep { color: var(--ink-4); }
.crumb .curr { color: var(--ink); }
.crumb .tag { border: 1px solid var(--line); padding: 2px 7px; border-radius: 3px; color: var(--ink-2); font-size: 10px; }
.crumb .tag.live { color: var(--ok); border-color: color-mix(in oklch, var(--ok), transparent 60%); }
.crumb .tag.live::before { content:""; display:inline-block; width:5px; height:5px; background: var(--ok); border-radius: 50%; margin-right:5px; vertical-align:1px; animation: blink 1.5s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.actions { margin-left: auto; display: flex; gap: 6px; }
.chip { background: transparent; border: 1px solid var(--line); color: var(--ink-2); font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 3px; cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.clock { font-family: var(--pixel); font-size: 10px; color: var(--ink-3); padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; letter-spacing: 0.08em; }
.clock b { color: var(--accent); font-weight: normal; }

/* Stage: top-row (office + right sidebar) + bottom data strip */
.stage { display: grid; grid-template-rows: 1fr 220px; }
.top-row { display: grid; grid-template-columns: 1fr 360px; min-height: 0; border-bottom: 1px solid var(--line); }
.office-wrap { position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.office { position: absolute; inset: 0; display: grid; place-items: center; }

/* Right vertical inspector sidebar */
.side-inspector {
  background: var(--bg-2);
  border: none;
  border-left: 1px solid var(--line);
  border-radius: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.side-inspector .insp-panes { max-height: none; flex: 1; }
.side-inspector .insp-tabs { position: sticky; top: 0; background: var(--bg-2); z-index: 2; }

/* Bottom data: 4-column command deck (v5.5 · skill matrix folded into BP panel) */
.data.data-bottom { grid-template-columns: 1.1fr 0.95fr 1fr 1.05fr; padding: 14px 18px 18px; gap: 12px; min-height: 0; align-items: stretch; }
.data-bottom .panel { min-width: 0; min-height: 0; overflow: hidden; }
.data-bottom .feed { max-height: none; flex: 1; overflow-y: auto; }

/* Skill matrix (5 layers) */
.skill-matrix { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; flex: 1; }
.sm-layer {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 4px;
  padding: 6px 8px;
  background: var(--bg-2);
  font-size: 10px;
}
.sm-layer .sm-h {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); color: var(--ink-2);
  margin-bottom: 4px;
}
.sm-layer .sm-h .ct { color: var(--ink-4); font-size: 9px; }
.sm-layer .sm-h .lbl { font-weight: 600; }
.sm-layer .sm-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.sm-chip {
  font-family: var(--mono); font-size: 9px;
  padding: 1px 5px;
  border-radius: 2px;
  background: oklch(0 0 0 / 0.2);
  color: var(--ink-2);
}
.sm-layer.lyr-ut1 { border-left-color: oklch(0.85 0.16 70); }
.sm-layer.lyr-ut1 .sm-chip { background: oklch(0.78 0.16 70 / 0.18); color: oklch(0.88 0.16 70); }
.sm-layer.lyr-s1 { border-left-color: oklch(0.80 0.14 210); }
.sm-layer.lyr-s1 .sm-chip { background: oklch(0.80 0.14 210 / 0.18); color: oklch(0.88 0.14 210); }
.sm-layer.lyr-s2 { border-left-color: oklch(0.76 0.12 160); }
.sm-layer.lyr-s2 .sm-chip { background: oklch(0.76 0.12 160 / 0.18); color: oklch(0.86 0.12 160); }
.sm-layer.lyr-s3 { border-left-color: oklch(0.75 0.14 310); }
.sm-layer.lyr-s3 .sm-chip { background: oklch(0.75 0.14 310 / 0.18); color: oklch(0.86 0.14 310); }
.sm-layer.lyr-suc { border-left-color: oklch(0.78 0.16 40); }
.sm-layer.lyr-suc .sm-chip { background: oklch(0.78 0.16 40 / 0.18); color: oklch(0.88 0.16 40); }
.sm-layer.lyr-smc { border-left-color: oklch(0.68 0.12 290); }
.sm-layer.lyr-smc .sm-chip { background: oklch(0.68 0.12 290 / 0.18); color: oklch(0.86 0.12 290); }

/* Blueprint chapter checkmark on task cards (Iron Law animation) */
.task-card.bp-checked::after {
  content: "蓝图 ✓";
  position: absolute;
  top: -10px; right: -2px;
  background: var(--ok);
  color: var(--bg);
  font-family: var(--mono); font-size: 8px;
  padding: 1px 4px; border-radius: 2px;
  letter-spacing: 0.04em;
  box-shadow: 0 0 6px var(--ok);
  animation: bpStamp 0.6s ease-out;
}
@keyframes bpStamp {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(-4deg); opacity: 1; }
}

/* Task board panel */
.panel-tasks .tb-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tb-counts .tb-c { border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; background: var(--bg-2); display: flex; flex-direction: column; gap: 2px; }
.tb-counts .tb-c .lbl { font-family: var(--mono); font-size: 9px; color: var(--ink-4); letter-spacing: 0.04em; text-transform: uppercase; }
.tb-counts .tb-c .val { font-family: var(--pixel); font-size: 16px; color: var(--ink); letter-spacing: 0.04em; }
.tb-counts .tb-c.doing { border-color: color-mix(in oklch, var(--accent), transparent 60%); }
.tb-counts .tb-c.doing .val { color: var(--accent); }
.tb-counts .tb-c.todo { border-color: color-mix(in oklch, var(--info), transparent 60%); }
.tb-counts .tb-c.todo .val { color: var(--info); }
.tb-counts .tb-c.review { border-color: color-mix(in oklch, var(--warn), transparent 60%); }
.tb-counts .tb-c.review .val { color: var(--warn); }
.tb-counts .tb-c.done { border-color: color-mix(in oklch, var(--ok), transparent 60%); }
.tb-counts .tb-c.done .val { color: var(--ok); }
.tb-hot-hd { font-size: 10px; color: var(--ink-4); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.tb-hot { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; flex: 1; min-height: 0; }
.tb-hot .th { display: grid; grid-template-columns: 42px 1fr 32px; gap: 8px; align-items: center; font-size: 11px; padding: 4px 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; }
.tb-hot .th .code { font-family: var(--mono); font-size: 10px; color: var(--accent); }
.tb-hot .th .ttl { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-hot .th .pct { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-align: right; }
.tb-hot .th .owner { font-family: var(--mono); font-size: 9px; color: var(--ink-4); }

/* Agent matrix */
.am-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow-y: auto; min-height: 0; flex: 1; align-content: start; }
.am-grid .ac { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.am-grid .ac:hover { border-color: var(--line-2); transform: translateY(-1px); }
.am-grid .ac.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.am-grid .ac .nm { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink); }
.am-grid .ac .nm i.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.am-grid .ac .rl { font-family: var(--mono); font-size: 9px; color: var(--ink-4); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-grid .ac .ld { height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.am-grid .ac .ld i { display: block; height: 100%; background: var(--accent); }
i.dot.working { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
i.dot.idle { background: var(--info); }
i.dot.standby { background: var(--ink-4); }
.am-legend { display: flex; gap: 10px; font-size: 10px; color: var(--ink-4); margin-top: 4px; }
.am-legend span { display: flex; align-items: center; gap: 4px; }
.am-legend i.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* ============== ISOMETRIC FLOOR ============== */
.iso {
  position: relative;
  width: 1280px;
  height: 780px;
  transform: scale(calc(var(--autofit, 1) * var(--zoom, 1)));
  transform-origin: center;
}

/* floor = flat top-down room covering the iso box */
.floor {
  position: absolute;
  left: 20px; top: 30px;
  width: 1240px; height: 720px;
  background: var(--floor-a);
  background-image:
    linear-gradient(color-mix(in oklch, var(--floor-b), transparent 55%) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--floor-b), transparent 55%) 1px, transparent 1px);
  background-size: 60px 60px;
  border: 1.5px solid color-mix(in oklch, var(--line), transparent 30%);
  box-shadow:
    inset 0 0 100px oklch(0 0 0 / 0.15),
    0 30px 70px -20px rgba(0,0,0,0.4);
}
body[data-vibe="cyber"] .floor {
  background-image:
    linear-gradient(oklch(0.72 0.20 195 / 0.6) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.72 0.20 195 / 0.6) 1px, transparent 1px);
  box-shadow:
    inset 0 0 80px var(--glow),
    0 0 40px var(--glow),
    0 30px 70px -20px rgba(0,0,0,0.8);
}

/* wall accents */
.wall-n, .wall-w {
  position: absolute;
  background: var(--wall);
  border: 2px solid var(--line);
}
.wall-n {
  left: 20px; top: 0;
  width: 1240px; height: 30px;
  background: linear-gradient(180deg, var(--wall-2), var(--wall));
  opacity: 0.6;
}

/* ========== ROOMS (architectural office spaces) ========== */
/* Info wall (vertical strip left of all rooms) */
.info-wall {
  position: absolute;
  background: oklch(0 0 0 / 0.10);
  border: 1.5px dashed color-mix(in oklch, var(--line-2), transparent 40%);
  border-radius: 4px;
  z-index: 0;
  pointer-events: none;
}
.info-wall .wall-lbl {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-family: var(--pixel); font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  background: var(--bg);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* User entrance (door on left wall) */
.entrance {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.entrance .door {
  width: 22px; height: 60px;
  background: linear-gradient(180deg, oklch(0.45 0.06 30), oklch(0.30 0.04 30));
  border: 1.5px solid oklch(0 0 0 / 0.55);
  border-radius: 2px;
  box-shadow:
    inset -3px 0 0 oklch(0 0 0 / 0.3),
    inset 3px 0 0 oklch(1 0 0 / 0.1);
  position: relative;
}
.entrance .door::after {
  /* door handle */
  content: ""; position: absolute;
  right: 4px; top: 28px;
  width: 3px; height: 4px;
  background: oklch(0.85 0.12 80);
  border-radius: 1px;
}
.entrance .door-lbl {
  position: absolute;
  left: 28px; top: 22px;
  font-family: var(--pixel); font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: var(--bg-2);
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
  white-space: nowrap;
}

/* Meeting table (in corridor between rooms) */
.meeting-table {
  position: absolute;
  width: 220px; height: 22px;
  background: var(--desk);
  border: 1.5px solid var(--desk-dark);
  border-radius: 11px;
  box-shadow: 0 3px 0 oklch(0 0 0 / 0.35), inset 0 2px 0 oklch(1 0 0 / 0.1);
  z-index: 2;
}
.meeting-table::before {
  /* a few chairs */
  content: "";
  position: absolute;
  inset: -10px -10px;
  background:
    radial-gradient(circle at 20px 0, var(--chair) 5px, transparent 5px),
    radial-gradient(circle at 80px 0, var(--chair) 5px, transparent 5px),
    radial-gradient(circle at 140px 0, var(--chair) 5px, transparent 5px),
    radial-gradient(circle at 200px 0, var(--chair) 5px, transparent 5px),
    radial-gradient(circle at 50px 42px, var(--chair) 5px, transparent 5px),
    radial-gradient(circle at 110px 42px, var(--chair) 5px, transparent 5px),
    radial-gradient(circle at 170px 42px, var(--chair) 5px, transparent 5px);
  z-index: -1;
}
.meeting-table::after {
  content: "MEETING";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--pixel); font-size: 7px;
  letter-spacing: 0.1em;
  color: oklch(0 0 0 / 0.4);
}

/* Break corner (right side of bullpen) */
.break-corner {
  position: absolute;
  background: color-mix(in oklch, oklch(0.65 0.10 30), transparent 92%);
  border: 1.5px dashed color-mix(in oklch, oklch(0.65 0.10 30), transparent 55%);
  border-radius: 4px;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 30px oklch(0 0 0 / 0.18);
}
.break-corner .bc-lbl {
  position: absolute; left: 8px; top: -10px;
  font-family: var(--pixel); font-size: 8px;
  letter-spacing: 0.14em;
  color: oklch(0.78 0.14 30);
  background: var(--bg);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.room {
  position: absolute;
  border: 1.5px solid color-mix(in oklch, var(--line-2), transparent 40%);
  border-radius: 4px;
  background: oklch(0 0 0 / 0.06);
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 30px oklch(0 0 0 / 0.18);
}
.room::before {
  /* baseboard / floor edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: oklch(0 0 0 / 0.18);
  border-radius: 0 0 4px 4px;
}
.room-lbl {
  position: absolute;
  left: 8px; top: -10px;
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  background: var(--bg);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.room-lead     { background: color-mix(in oklch, var(--warn),   transparent 92%); border-color: color-mix(in oklch, var(--warn),   transparent 60%); }
.room-planning { background: color-mix(in oklch, var(--info),   transparent 92%); border-color: color-mix(in oklch, var(--info),   transparent 60%); }
.room-memory   { background: color-mix(in oklch, oklch(0.78 0.16 305), transparent 92%); border-color: color-mix(in oklch, oklch(0.78 0.16 305), transparent 55%); }
.room-infra    { background: color-mix(in oklch, oklch(0.72 0.14 190), transparent 92%); border-color: color-mix(in oklch, oklch(0.72 0.14 190), transparent 55%); }
.room-bullpen  { background: color-mix(in oklch, var(--accent), transparent 94%); border-color: color-mix(in oklch, var(--accent), transparent 65%); }
.room-designer { background: color-mix(in oklch, var(--plant),  transparent 92%); border-color: color-mix(in oklch, var(--plant),  transparent 55%); }
.room-lead     .room-lbl { color: var(--warn); }
.room-planning .room-lbl { color: var(--info); }
.room-memory   .room-lbl { color: oklch(0.78 0.16 305); }
.room-infra    .room-lbl { color: oklch(0.78 0.14 190); }
.room-bullpen  .room-lbl { color: var(--accent); }
.room-designer .room-lbl { color: var(--plant); }

/* keep .zone class working but invisible (legacy) */
.zone { display: none; }

/* additional flow line colors */
.flow-line.flow-mem      { color: oklch(0.78 0.16 305); stroke: oklch(0.78 0.16 305); }
.flow-line.flow-mem-up   { color: oklch(0.78 0.16 305); stroke: oklch(0.78 0.16 305); animation-direction: reverse; }
.flow-line.flow-infra    { color: oklch(0.78 0.14 190); stroke: oklch(0.78 0.14 190); animation-direction: reverse; }
.flow-line.flow-coord    { color: oklch(0.78 0.14 155); stroke: oklch(0.78 0.14 155); }
.flow-line.flow-pr       { color: oklch(0.80 0.14 210); stroke: oklch(0.80 0.14 210); }
.flow-line.flow-test     { color: oklch(0.78 0.16 70); stroke: oklch(0.78 0.16 70); }
.flow-line.flow-deploy   { color: oklch(0.76 0.14 130); stroke: oklch(0.76 0.14 130); }
.flow-line.flow-escalate { color: oklch(0.72 0.18 25); stroke: oklch(0.72 0.18 25); }
.flow-line.flow-od       { color: oklch(0.75 0.14 310); stroke: oklch(0.75 0.14 310); }
.zone {
  position: absolute;
  border: 1px dashed color-mix(in oklch, var(--line-2), transparent 35%);
  border-radius: 6px;
  background: oklch(0 0 0 / 0.04);
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}
.zone-exec       { background: color-mix(in oklch, var(--warn), transparent 96%); border-color: color-mix(in oklch, var(--warn), transparent 75%); }
.zone-plan       { background: color-mix(in oklch, var(--info), transparent 96%); border-color: color-mix(in oklch, var(--info), transparent 75%); }
.zone-exec-bull  { background: color-mix(in oklch, var(--accent), transparent 96%); border-color: color-mix(in oklch, var(--accent), transparent 75%); }
.zone-nook       { background: color-mix(in oklch, var(--plant), transparent 96%); border-color: color-mix(in oklch, var(--plant), transparent 75%); }
.zone-lbl {
  position: absolute; left: 10px; top: 6px;
  font-family: var(--pixel); font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  background: var(--bg-2);
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.zone-exec .zone-lbl      { color: var(--warn); }
.zone-plan .zone-lbl      { color: var(--info); }
.zone-exec-bull .zone-lbl { color: var(--accent); }
.zone-nook .zone-lbl      { color: var(--plant); }

/* ========== ORG REPORTING LINES (very faint background) ========== */
.org-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
}
.org-line { fill: none; stroke-width: 1; stroke-linejoin: miter; }
.org-line.tier-01 { stroke: var(--warn); }
.org-line.tier-12 { stroke: var(--accent); opacity: 0.6; }
.org-line.tier-od { stroke: var(--plant); opacity: 0.7; }

/* ========== ACTIVE WORKFLOW (animated dashed arrows) ========== */
.flow-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.flow-line {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 4 4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  animation: flowDash 1.4s linear infinite;
  opacity: 0.85;
}
.flow-up     { color: var(--info);   stroke: var(--info);   }
.flow-down   { color: var(--accent); stroke: var(--accent); }
.flow-side   { color: var(--ok);     stroke: var(--ok);     }
.flow-report { color: var(--warn);   stroke: var(--warn);   animation-direction: reverse; }
@keyframes flowDash {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}

/* whiteboard prop */
.prop.whiteboard {
  width: 140px; height: 56px;
  background: var(--bg);
  border: 2px solid var(--line-2);
  border-top-width: 6px;
  border-top-color: var(--desk-dark);
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--ink-2);
  padding: 6px 8px;
  line-height: 1.7;
  box-shadow: 0 4px 0 oklch(0 0 0 / 0.3);
}
.prop.whiteboard .bh { color: var(--ok); letter-spacing: 0.05em; }
.prop.whiteboard .bl { color: var(--ink-3); }

/* window on floor (flat) */
.window-deco {
  position: absolute;
  left: 790px; top: 34px;
  width: 150px; height: 12px;
  background: linear-gradient(135deg, var(--info), var(--accent-2));
  border: 2px solid var(--line);
  opacity: 0.6;
}

/* ============== DESK + CHAIR + AGENT ============== */
.workstation {
  position: absolute;
  width: 120px;
  height: 150px;
  cursor: pointer;
  transition: filter 0.2s;
  z-index: 10;
}
.workstation:hover { filter: brightness(1.1); }
.workstation.selected { z-index: 50; }
.workstation.selected .agent-body { outline: 2px solid var(--accent); outline-offset: 2px; }

/* desk = 3D-looking pixel block */
.desk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 42px;
  background: var(--desk);
  border: 1.5px solid var(--desk-dark);
  border-radius: 2px;
  box-shadow:
    inset 0 -6px 0 var(--desk-dark),
    0 4px 0 oklch(0 0 0 / 0.3);
}
.desk::before {
  /* monitor */
  content: "";
  position: absolute;
  left: 50%; bottom: 32px;
  transform: translateX(-50%);
  width: 46px; height: 28px;
  background: oklch(0.18 0.02 240);
  border: 2px solid var(--line-2);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--glow);
}
.desk::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 29px;
  transform: translateX(-50%);
  width: 40px; height: 22px;
  background:
    linear-gradient(var(--accent) 2px, transparent 2px),
    linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px),
    linear-gradient(oklch(0.22 0.03 240), oklch(0.18 0.03 240));
  background-size: 100% 6px, 6px 100%, 100% 100%;
  opacity: 0.85;
  animation: screenFlicker 3.2s ease-in-out infinite;
}
@keyframes screenFlicker { 0%,100% { opacity: 0.85; } 50% { opacity: 0.7; } }

/* chair behind desk */
.chair {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 30px;
  background: var(--chair);
  border: 1.5px solid oklch(0 0 0 / 0.4);
  border-radius: 4px 4px 2px 2px;
  z-index: 1;
}
.chair::after {
  content: "";
  position: absolute;
  left: 50%; top: -12px;
  transform: translateX(-50%);
  width: 24px; height: 16px;
  background: var(--chair);
  border: 1.5px solid oklch(0 0 0 / 0.4);
  border-radius: 4px 4px 0 0;
}

/* agent body (pixel-art style via CSS) — sits on chair */
/* z-stacking inside a workstation:
   chair (back) < agent (sits) < desk + monitor (front) < nametag */
.chair { z-index: 1; }
.desk  { z-index: 3; }
.nametag { z-index: 30; }
.status-ring { z-index: 0; }

/* monitor sits forward of agent — naturally because it's a pseudo of .desk */

.agent {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 72px;
  z-index: 2;
  animation: bob 2.6s ease-in-out infinite;
}
.agent .avatar {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 0 oklch(0 0 0 / 0.35));
}
.workstation.selected .agent .avatar {
  filter:
    drop-shadow(0 2px 0 oklch(0 0 0 / 0.35))
    drop-shadow(0 0 0 var(--accent))
    drop-shadow(0 0 6px var(--accent));
}
.workstation.selected .agent::after {
  content: "";
  position: absolute;
  inset: -4px -2px -2px -2px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  pointer-events: none;
  animation: selPulse 1.6s ease-out infinite;
}
@keyframes selPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.workstation[data-state="working"] .agent { animation: workBob 0.9s ease-in-out infinite; }
.workstation[data-state="idle"] .agent { animation: bob 2.6s ease-in-out infinite; }
.workstation[data-state="standby"] .agent { opacity: 0.5; animation-duration: 4s; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -2px); }
}
@keyframes workBob {
  0%, 100% { transform: translate(-50%, 0) rotate(0deg); }
  25% { transform: translate(-50%, -1px) rotate(-1deg); }
  75% { transform: translate(-50%, -1px) rotate(1deg); }
}

/* Random idle micro-actions */
.agent.act-nod { animation: actNod 0.9s ease-in-out !important; }
.agent.act-sip { animation: actSip 1.2s ease-in-out !important; }
.agent.act-stretch { animation: actStretch 1.4s ease-in-out !important; }
.agent.act-type { animation: actType 0.4s ease-in-out 3 !important; }
@keyframes actNod {
  0%, 100% { transform: translate(-50%, 0) rotate(0); }
  30% { transform: translate(-50%, 2px) rotate(-3deg); }
  60% { transform: translate(-50%, 2px) rotate(3deg); }
}
@keyframes actSip {
  0%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -4px) rotate(-2deg); }
  60% { transform: translate(-50%, -4px) rotate(2deg); }
}
@keyframes actStretch {
  0%, 100% { transform: translate(-50%, 0) scale(1, 1); }
  50% { transform: translate(-50%, -3px) scale(1.04, 1.06); }
}
@keyframes actType {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -1px); }
}

/* gentle sway for plants */
.prop.plant { animation: plantSway 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes plantSway {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(1.2deg); }
}

/* monitor glow pulse */
.desk::after { animation: screenFlicker 3.2s ease-in-out infinite, monitorGlow 5.5s ease-in-out infinite; }
@keyframes monitorGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

.agent-body {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 28px; height: 32px;
  background: var(--agent-color, var(--accent));
  border: 1.5px solid oklch(0 0 0 / 0.35);
  border-radius: 2px;
  image-rendering: pixelated;
  box-shadow: inset -4px -4px 0 oklch(0 0 0 / 0.15), inset 4px 4px 0 oklch(1 0 0 / 0.1);
}
/* role label on shirt */
.agent-body::after {
  content: var(--agent-label, "");
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--bg);
  font-weight: bold;
  letter-spacing: 0;
}
/* head */
.agent-head {
  position: absolute;
  left: 50%; bottom: 30px;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  background: var(--agent-skin, oklch(0.80 0.06 60));
  border: 1.5px solid oklch(0 0 0 / 0.35);
  border-radius: 2px;
}
/* hair */
.agent-head::before {
  content: "";
  position: absolute;
  left: -1.5px; top: -1.5px;
  width: 22px; height: 8px;
  background: var(--agent-hair, oklch(0.25 0.02 60));
  border: 1.5px solid oklch(0 0 0 / 0.35);
  border-radius: 2px 2px 0 0;
}
/* eyes */
.agent-head::after {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 14px; height: 2px;
  background:
    radial-gradient(circle at 3px 1px, var(--ink) 1.5px, transparent 1.5px),
    radial-gradient(circle at 11px 1px, var(--ink) 1.5px, transparent 1.5px);
  animation: blink-eye 5s infinite;
}
@keyframes blink-eye {
  0%, 92%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.1); }
}

.workstation[data-state="working"] .agent-head::after { animation-duration: 7s; }

/* status ring on the ground */
.status-ring {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 22px;
  border: 1.5px dashed var(--ink-4);
  border-radius: 50%;
  opacity: 0.35;
  z-index: 0;
}
.workstation[data-state="working"] .status-ring {
  border-color: var(--accent);
  border-style: solid;
  opacity: 0.7;
  animation: ringPulse 1.8s ease-out infinite;
}
.workstation[data-state="idle"] .status-ring { border-color: var(--info); opacity: 0.4; }
@keyframes ringPulse {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.7; }
  100% { transform: translateX(-50%) scale(1.4); opacity: 0; }
}

/* name tag over agent */
.nametag {
  position: absolute;
  left: 50%; top: -12px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 30;
}
.nametag .role { color: var(--ink-4); font-size: 9px; margin-left: 4px; }
.workstation.selected .nametag { border-color: var(--accent); color: var(--ink); }

/* tier badge = small dot */
.tier-badge {
  position: absolute;
  top: -3px; right: -3px;
  width: 10px; height: 10px;
  background: var(--accent);
  border: 1.5px solid var(--bg-2);
  border-radius: 50%;
  font-family: var(--pixel); font-size: 7px;
  display: grid; place-items: center;
  color: var(--bg);
  z-index: 3;
}
.tier-0 { background: oklch(0.82 0.18 70); }
.tier-1 { background: oklch(0.78 0.14 210); }
.tier-2 { background: oklch(0.74 0.14 310); }

/* speech bubble */
.bubble {
  position: absolute;
  left: 50%; top: -52px;
  transform: translateX(-50%);
  background: var(--bg-2);
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  max-width: 220px;
  white-space: nowrap;
  opacity: 0;
  animation: bubbleIn 4.5s ease-out forwards;
  z-index: 40;
  box-shadow: 0 4px 12px oklch(0 0 0 / 0.4);
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: var(--bg-2);
  border-right: 1.5px solid var(--line-2);
  border-bottom: 1.5px solid var(--line-2);
  transform: translateX(-50%) rotate(45deg);
}
.bubble.cmd { border-color: var(--accent); box-shadow: 0 4px 12px var(--accent-soft); }
.bubble.report { border-color: var(--info); }
.bubble.coord { border-color: var(--ok); }
.bubble.escalate { border-color: var(--warn); }
@keyframes bubbleIn {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  10% { opacity: 1; transform: translate(-50%, 0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* typing indicator (dots) in bubble */
.bubble.typing { min-width: 42px; text-align: center; }
.bubble .dots span {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-3); margin: 0 1px;
  animation: dotPulse 1.2s infinite;
}
.bubble .dots span:nth-child(2) { animation-delay: 0.2s; }
.bubble .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* flying task card */
.task-card {
  position: absolute;
  width: 64px; height: 44px;
  background: var(--bg-2);
  border: 1.5px solid var(--accent);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink);
  padding: 4px 6px;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 6px 16px var(--accent-soft), 0 0 0 2px oklch(0 0 0 / 0.2);
  will-change: transform;
}
.task-card .tt { color: var(--accent); font-weight: 600; }
.task-card::before {
  content: "";
  position: absolute;
  left: 4px; top: 16px;
  right: 4px; height: 1px;
  background: var(--line);
  box-shadow: 0 4px 0 var(--line), 0 8px 0 var(--line), 0 12px 0 var(--line);
}

/* Plants and small props */
.prop {
  position: absolute;
  pointer-events: none;
}
/* ----- Bookshelf (clickable, in Memory Archive Hall) ----- */
.bookshelf {
  position: absolute;
  width: 48px;
  height: 88px;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s, filter 0.15s;
}
.bookshelf:hover { transform: translateY(-2px); filter: brightness(1.15); }
.bookshelf .sh-top {
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 6px;
  background: var(--desk);
  border: 1.5px solid var(--desk-dark);
  border-radius: 2px 2px 0 0;
}
.bookshelf .sh-row {
  position: absolute;
  left: 0;
  width: 48px;
  height: 32px;
  background: var(--desk-dark);
  border-left: 1.5px solid oklch(0 0 0 / 0.4);
  border-right: 1.5px solid oklch(0 0 0 / 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 3px;
  gap: 1px;
  overflow: hidden;
}
.bookshelf .sh-row:nth-child(2) { top: 6px; border-top: 1.5px solid oklch(0 0 0 / 0.5); }
.bookshelf .sh-row:nth-child(3) { top: 38px; border-top: 1.5px solid oklch(0 0 0 / 0.5); border-bottom: 1.5px solid oklch(0 0 0 / 0.5); }
.bookshelf .book {
  display: block;
  width: 4px;
  height: 24px;
  border-radius: 1px 1px 0 0;
  box-shadow: inset -1px 0 0 oklch(0 0 0 / 0.3), inset 1px 0 0 oklch(1 0 0 / 0.15);
}
.bookshelf .book.b-r { background: oklch(0.55 0.18 25); height: 26px; }
.bookshelf .book.b-g { background: oklch(0.55 0.14 155); height: 22px; }
.bookshelf .book.b-y { background: oklch(0.72 0.16 80); height: 28px; }
.bookshelf .book.b-b { background: oklch(0.55 0.14 230); height: 24px; }
.bookshelf .book.b-p { background: oklch(0.52 0.16 305); height: 25px; }
.bookshelf .book.b-pp { background: oklch(0.62 0.20 305); height: 27px; }
.bookshelf .sh-lbl {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  font-family: var(--pixel); font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--bg-2);
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.bookshelf .sh-lbl.mem { color: oklch(0.78 0.16 305); }
.bookshelf::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 48px; height: 3px;
  background: oklch(0 0 0 / 0.4);
  border-radius: 0 0 3px 3px;
}
.prop.plant {
  width: 30px; height: 42px;
}
.prop.plant::before {
  /* foliage cluster · multiple leaves */
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 28px; height: 30px;
  background:
    /* small accent leaves */
    radial-gradient(ellipse 5px 6px at 5px 4px,
      color-mix(in oklch, var(--plant), white 18%) 95%, transparent 100%),
    radial-gradient(ellipse 5px 6px at 23px 5px,
      color-mix(in oklch, var(--plant), white 12%) 95%, transparent 100%),
    radial-gradient(ellipse 6px 7px at 14px 2px,
      color-mix(in oklch, var(--plant), white 22%) 95%, transparent 100%),
    /* main leaves */
    radial-gradient(ellipse 7px 9px at 8px 14px,
      color-mix(in oklch, var(--plant), black 5%) 95%, transparent 100%),
    radial-gradient(ellipse 8px 10px at 20px 13px,
      var(--plant) 95%, transparent 100%),
    radial-gradient(ellipse 8px 10px at 14px 18px,
      color-mix(in oklch, var(--plant), white 6%) 95%, transparent 100%),
    /* dark base shadow */
    radial-gradient(ellipse 12px 8px at 14px 26px,
      color-mix(in oklch, var(--plant), black 25%) 95%, transparent 100%);
  filter: drop-shadow(0 1px 0 oklch(0 0 0 / 0.4));
}
.prop.plant::after {
  /* terracotta pot */
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 18px; height: 14px;
  background:
    /* pot rim (lighter) */
    linear-gradient(180deg,
      oklch(0.55 0.10 40) 0,
      oklch(0.55 0.10 40) 3px,
      oklch(0.45 0.12 40) 3px,
      oklch(0.45 0.12 40) 4px,
      oklch(0.50 0.12 40) 4px,
      oklch(0.40 0.12 40) 100%);
  border: 1.5px solid oklch(0 0 0 / 0.5);
  border-radius: 1px 1px 4px 4px;
  box-shadow:
    inset -3px -3px 0 oklch(0 0 0 / 0.2),
    inset 3px 3px 0 oklch(1 0 0 / 0.08),
    0 2px 0 oklch(0 0 0 / 0.4);
  clip-path: polygon(8% 0, 92% 0, 100% 25%, 88% 100%, 12% 100%, 0 25%);
}

.prop.board {
  width: 120px; height: 90px;
  background: var(--bg-2);
  border: 2px solid var(--line-2);
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--ink-2);
  padding: 8px;
  line-height: 1.7;
  box-shadow: 0 4px 0 oklch(0 0 0 / 0.3);
}
.prop.board .bh { color: var(--accent); letter-spacing: 0.05em; }
.prop.board .bl { color: var(--ink-3); }
.prop.board .bl b { color: var(--ok); }

.prop.coffee {
  width: 16px; height: 20px;
}
.prop.coffee::before {
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(0.45 0.08 40);
  border: 1.5px solid oklch(0 0 0 / 0.4);
  border-radius: 2px 0 0 2px;
}
.prop.coffee::after {
  content: "";
  position: absolute;
  top: -6px; left: 2px;
  width: 4px; height: 8px;
  background: linear-gradient(180deg, transparent, oklch(1 0 0 / 0.4));
  filter: blur(1px);
  animation: steam 2s infinite;
}
@keyframes steam {
  0% { transform: translateY(0) scaleX(1); opacity: 0.8; }
  100% { transform: translateY(-12px) scaleX(0.4); opacity: 0; }
}

/* ----- Sofa (3-cushion couch, top-down isometric look) ----- */
.prop.sofa {
  width: 84px; height: 30px;
  z-index: 2;
}
.prop.sofa::before {
  /* base (frame) */
  content: "";
  position: absolute;
  inset: 6px 0 0 0;
  background: oklch(0.42 0.04 240);
  border: 1.5px solid oklch(0 0 0 / 0.4);
  border-radius: 4px;
  box-shadow: 0 3px 0 oklch(0 0 0 / 0.4);
}
.prop.sofa::after {
  /* 3 cushions */
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 9px;
  height: 14px;
  background:
    linear-gradient(90deg,
      var(--cushion, oklch(0.62 0.08 240)) 0 calc(33% - 1px),
      oklch(0 0 0 / 0.35) calc(33% - 1px) calc(33%),
      var(--cushion, oklch(0.62 0.08 240)) calc(33%) calc(66% - 1px),
      oklch(0 0 0 / 0.35) calc(66% - 1px) calc(66%),
      var(--cushion, oklch(0.62 0.08 240)) calc(66%) 100%);
  border: 1.5px solid oklch(0 0 0 / 0.4);
  border-radius: 3px;
  box-shadow: inset 0 2px 0 oklch(1 0 0 / 0.15);
}
.prop.sofa.sofa-r {
  --cushion: oklch(0.62 0.10 30);
  width: 70px;
  transform: scaleX(-1);
}
body[data-vibe="cute"] .prop.sofa { --cushion: oklch(0.72 0.10 30); }
body[data-vibe="cyber"] .prop.sofa { --cushion: oklch(0.55 0.18 320); }

/* ----- Coffee machine ----- */
.prop.coffee-machine {
  width: 26px; height: 38px;
  z-index: 2;
}
.prop.coffee-machine::before {
  /* body */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #4a4d56 0%, #2d3038 100%);
  border: 1.5px solid oklch(0 0 0 / 0.5);
  border-radius: 3px;
  box-shadow:
    inset -3px -3px 0 oklch(0 0 0 / 0.25),
    inset 3px 3px 0 oklch(1 0 0 / 0.08),
    0 3px 0 oklch(0 0 0 / 0.4);
}
.prop.coffee-machine::after {
  /* spout + display + cup */
  content: "";
  position: absolute;
  inset: 6px 4px;
  background:
    /* status light */
    radial-gradient(circle 1.5px at 4px 4px, #d44a2c 1.5px, transparent 1.5px),
    /* display */
    linear-gradient(180deg, transparent 0, transparent 5px, #1a1a22 5px, #1a1a22 13px, transparent 13px),
    /* glow strip */
    linear-gradient(180deg, transparent 0, transparent 14px, var(--accent) 14px, var(--accent) 15px, transparent 15px),
    /* spout */
    linear-gradient(180deg, transparent 0, transparent 18px, #888 18px, #888 20px, transparent 20px),
    /* cup */
    linear-gradient(180deg, transparent 0, transparent 22px, #d8d2c5 22px, #d8d2c5 28px, transparent 28px);
  background-repeat: no-repeat;
  animation: brew 3.6s ease-in-out infinite;
}
@keyframes brew {
  0%, 60%, 100% { filter: hue-rotate(0deg); }
  30% { filter: hue-rotate(-5deg) brightness(1.15); }
}

/* ----- Water cooler ----- */
.prop.water-cooler {
  width: 22px; height: 40px;
  z-index: 2;
}
.prop.water-cooler::before {
  /* tank (top, jug) */
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 0;
  height: 16px;
  background: linear-gradient(180deg,
    oklch(0.78 0.06 220) 0%,
    oklch(0.68 0.08 220) 50%,
    oklch(0.55 0.08 220) 100%);
  border: 1.5px solid oklch(0 0 0 / 0.5);
  border-radius: 3px 3px 1px 1px;
  box-shadow:
    inset -2px 0 0 oklch(0 0 0 / 0.2),
    inset 2px 0 0 oklch(1 0 0 / 0.3);
}
.prop.water-cooler::after {
  /* body w/ tap */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 14px;
  bottom: 0;
  background:
    /* tap */
    linear-gradient(180deg, transparent 0, transparent 10px, #2a2a2a 10px, #2a2a2a 14px, transparent 14px),
    /* body */
    linear-gradient(180deg, #e0e2e4, #b4b6ba);
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  background-size: 8px 100%, 100% 100%;
  background-position: center 0, 0 0;
  border: 1.5px solid oklch(0 0 0 / 0.5);
  border-radius: 1px 1px 3px 3px;
  box-shadow: 0 3px 0 oklch(0 0 0 / 0.4);
}

/* ============== BOTTOM · DATA PANELS ============== */
.data { padding: 16px 20px; display: grid; grid-template-columns: 320px 1fr 360px; gap: 14px; background: var(--bg-2); border-top: 1px solid color-mix(in oklch, var(--line), transparent 30%); }
.panel { background: var(--bg); border: 1px solid color-mix(in oklch, var(--line), transparent 35%); border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.panel h3 { margin: 0; font-size: 12px; font-weight: 500; font-family: var(--mono); color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.panel h3 .sub { font-size: 10px; color: var(--ink-4); }

/* Inspector (now-active agent detail) */
.inspector { }
.inspector .hd { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.inspector .av { width: 36px; height: 36px; background: var(--agent-color, var(--accent)); border: 1.5px solid oklch(0 0 0 / 0.4); border-radius: 3px; display: grid; place-items: center; font-family: var(--pixel); font-size: 12px; color: var(--bg); }
.inspector h2 { margin: 0; font-size: 15px; }
.inspector .rl { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.inspector .body { font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.inspector dl.kv { display: grid; grid-template-columns: 60px 1fr; gap: 4px 10px; font-size: 11px; margin: 0; }
.inspector dl.kv dt { color: var(--ink-4); font-family: var(--mono); }
.inspector dl.kv dd { margin: 0; color: var(--ink-2); }
.inspector .skills { display: flex; flex-wrap: wrap; gap: 3px; }
.inspector .sk { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); padding: 1px 5px; border-radius: 2px; color: var(--ink-3); }
.inspector .act { display: flex; gap: 6px; margin-top: 8px; }
.inspector .act button { flex: 1; background: var(--accent); color: var(--bg); border: none; font-family: var(--mono); font-size: 11px; padding: 6px 8px; border-radius: 3px; cursor: pointer; font-weight: 500; }
.inspector .act button.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.inspector .act button:hover { filter: brightness(1.1); }

/* Bus feed */
.feed { overflow-y: auto; max-height: 260px; font-family: var(--mono); font-size: 11px; }
.feed .row { padding: 5px 0; border-bottom: 1px dashed var(--line); display: grid; grid-template-columns: 42px 1fr 46px; gap: 8px; align-items: baseline; }
.feed .row:last-child { border-bottom: none; }
.feed .tt { color: var(--ink-4); font-size: 10px; }
.feed .ms { color: var(--ink); }
.feed .ms em { font-style: normal; color: var(--accent); }
.feed .ms .fr, .feed .ms .to { color: var(--ink-3); font-weight: 500; }
.feed .ms .arw { color: var(--ink-4); margin: 0 4px; }
.feed .typ { font-size: 9px; padding: 1px 5px; border-radius: 2px; text-align: center; }
.feed .typ.cmd { background: var(--accent-soft); color: var(--accent); }
.feed .typ.report { background: color-mix(in oklch, var(--info), transparent 80%); color: var(--info); }
.feed .typ.coord { background: color-mix(in oklch, var(--ok), transparent 80%); color: var(--ok); }
.feed .typ.escalate { background: color-mix(in oklch, var(--warn), transparent 80%); color: var(--warn); }

/* Blueprint / skill panel */
.bp-bar { display: flex; flex-direction: column; gap: 6px; }
.bp-row { display: grid; grid-template-columns: 44px 1fr 60px; gap: 8px; align-items: center; font-size: 11px; }
.bp-row .l { font-family: var(--mono); color: var(--ink-3); }
.bp-row .bar { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.bp-row .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.6s; }
.bp-row .v { font-family: var(--mono); color: var(--ink-2); text-align: right; font-size: 11px; }

/* ============== FILING CABINET (clickable) ============== */
.cabinet {
  position: absolute;
  left: 665px; top: 300px;
  width: 52px;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.15s, filter 0.15s;
}
.cabinet:hover { transform: translateY(-2px); filter: brightness(1.15); }

/* Memory cabinet (in ARCHIVE room next to archivist) */
.mem-cabinet {
  left: 730px; top: 415px;
  width: 44px;
}
.mem-cabinet .cab-body { background: oklch(0.40 0.08 305); border-color: oklch(0.28 0.06 305); }
.mem-cabinet .cab-drawer { background: oklch(0.46 0.10 305); border-color: oklch(0.28 0.06 305); }
.mem-cabinet .cab-tag.mem {
  color: oklch(0.78 0.16 305);
  border-color: oklch(0.40 0.08 305);
  animation-name: memPulse;
}
.mem-cabinet .mem-m1 { border-left: 2px solid oklch(0.78 0.14 155); }
.mem-cabinet .mem-m2 { border-left: 2px solid oklch(0.78 0.16 60); }
.mem-cabinet .mem-m3 { border-left: 2px solid oklch(0.76 0.12 230); }
@keyframes memPulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.78 0.16 305 / 0.4); }
  50% { box-shadow: 0 0 0 4px oklch(0.78 0.16 305 / 0.0); }
}

/* UT1 / UT2 / UT3 plaque on back wall (above Lead) */
.ut-plaque {
  position: absolute;
  left: 1090px; top: 30px;
  background: var(--bg-2);
  border: 1.5px solid var(--line-2);
  border-radius: 4px;
  padding: 8px 10px;
  z-index: 4;
  font-family: var(--mono);
  font-size: 10px;
  box-shadow: 0 3px 0 oklch(0 0 0 / 0.35);
}
.ut-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.ut-arrow { text-align: center; color: var(--ink-4); font-size: 9px; line-height: 1; }
.ut-tag {
  font-family: var(--pixel); font-size: 8px;
  padding: 2px 4px; border-radius: 2px;
  letter-spacing: 0.04em;
  min-width: 22px; text-align: center;
}
.ut-tag.ut1 { background: oklch(0.78 0.16 70 / 0.2); color: oklch(0.85 0.16 70); }
.ut-tag.ut2 { background: oklch(0.78 0.14 210 / 0.2); color: oklch(0.85 0.14 210); }
.ut-tag.ut3 { background: oklch(0.78 0.14 155 / 0.2); color: oklch(0.85 0.14 155); }
.ut-name { color: var(--ink-2); white-space: nowrap; }
.cabinet .cab-body {
  background: var(--desk);
  border: 2px solid var(--desk-dark);
  border-radius: 3px;
  box-shadow: 0 4px 0 oklch(0 0 0 / 0.4), inset -3px -3px 0 oklch(0 0 0 / 0.15);
  padding: 3px;
  display: flex; flex-direction: column; gap: 3px;
}
.cabinet .cab-drawer {
  height: 20px;
  background: var(--desk);
  border: 1px solid var(--desk-dark);
  border-radius: 2px;
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 4px;
  box-shadow: inset 0 2px 0 oklch(1 0 0 / 0.1);
}
.cabinet .cab-drawer .hdl {
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 3px;
  background: var(--desk-dark);
  border-radius: 1px;
}
.cabinet .cab-drawer .lbl {
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.cabinet .cab-tag {
  position: absolute;
  left: 50%; top: -14px;
  transform: translateX(-50%);
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--accent);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
  letter-spacing: 0.1em;
  animation: cabPulse 2.4s ease-in-out infinite;
}
@keyframes cabPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50% { box-shadow: 0 0 0 4px var(--accent-soft); }
}

/* ============== TASK LIST IN INSPECTOR ============== */
.insp-tabs { display: flex; gap: 4px; margin-top: 10px; border-bottom: 1px solid var(--line); }
.insp-tabs .tab {
  font-family: var(--mono); font-size: 10px;
  padding: 5px 8px; border: none; background: transparent;
  color: var(--ink-4); cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.04em;
}
.insp-tabs .tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.insp-tabs .tab:hover { color: var(--ink-2); }
.insp-panes { max-height: 190px; overflow-y: auto; padding-top: 6px; }
.insp-pane { display: none; flex-direction: column; gap: 6px; }
.insp-pane.on { display: flex; }

.task-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg-2);
  font-size: 11px;
}
.task-item.doing { border-left: 3px solid var(--warn); }
.task-item.todo { border-left: 3px solid var(--info); opacity: 0.85; }
.task-item.done { border-left: 3px solid var(--ok); opacity: 0.6; }
.task-item .tc { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.task-item .tt { color: var(--ink); }
.task-item .td { font-family: var(--mono); font-size: 9px; color: var(--ink-4); }
.task-item .pct { display: block; font-family: var(--mono); font-size: 9px; color: var(--warn); }
.task-item.done .tt { text-decoration: line-through; color: var(--ink-3); }
.empty-tip { font-family: var(--mono); font-size: 10px; color: var(--ink-4); padding: 8px; text-align: center; }

.skill-list { display: flex; flex-direction: column; gap: 4px; }
.skill-row {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 3px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.skill-row .sc { font-family: var(--mono); font-size: 10px; color: var(--accent); background: var(--accent-soft); padding: 1px 5px; border-radius: 2px; text-align: center; }
.skill-row .sn { color: var(--ink-2); }

/* ============== MODALS ============== */
.modal {
  position: fixed; inset: 0;
  display: none;
  z-index: 500;
}
.modal.on { display: block; }
.modal-bg {
  position: absolute; inset: 0;
  background: oklch(0 0 0 / 0.6);
  backdrop-filter: blur(4px);
}
.modal-pane {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  border: 1.5px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.docs-pane { width: 90vw; max-width: 1100px; height: 80vh; max-height: 680px; }
.msg-pane { width: 520px; max-height: 640px; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.mh-t { font-size: 14px; font-weight: 600; }
.mh-s { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 2px; }
.modal-close { cursor: pointer; color: var(--ink-3); font-size: 16px; padding: 4px 8px; }
.modal-close:hover { color: var(--ink); }

/* Docs */
.docs-body { flex: 1; display: grid; grid-template-columns: 180px 280px 1fr; overflow: hidden; }
.docs-tree { border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 8px; background: var(--bg-2); }
.docs-tree .grp {
  font-family: var(--mono); font-size: 11px; padding: 7px 10px;
  border-radius: 3px; cursor: pointer; color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
  border-left: 3px solid transparent;
  margin-bottom: 3px;
}
.docs-tree .grp:hover { background: var(--bg-3); }
.docs-tree .grp.on { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); }
.docs-tree .grp .gc { font-size: 10px; color: var(--ink-4); }
.docs-tree .grp .gn { font-weight: 500; }
.docs-tree .grp .gcount { margin-left: auto; font-size: 10px; color: var(--ink-4); }

.docs-list { border-right: 1px solid var(--line); overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.doc-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px;
  padding: 8px 10px; border-radius: 3px; cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--mono); font-size: 11px;
}
.doc-row:hover { background: var(--bg-2); }
.doc-row.on { background: var(--accent-soft); border-color: var(--accent); }
.doc-row .dn { color: var(--ink); }
.doc-row .dd { font-size: 10px; color: var(--ink-3); grid-column: 1 / 3; font-family: var(--sans); }
.doc-row .meta { font-size: 9px; color: var(--ink-4); text-align: right; }
.doc-row .bd { display: inline-block; font-size: 8px; padding: 1px 4px; border-radius: 2px; margin-left: 4px; letter-spacing: 0.06em; }
.doc-row .bd.WIP { background: color-mix(in oklch, var(--warn), transparent 75%); color: var(--warn); }
.doc-row .bd.NEW { background: color-mix(in oklch, var(--ok), transparent 75%); color: var(--ok); }

.docs-viewer { overflow-y: auto; padding: 22px 28px; font-size: 13px; line-height: 1.7; color: var(--ink-2); background: var(--bg); }
.docs-viewer h1 { font-size: 20px; margin: 0 0 8px; color: var(--ink); }
.docs-viewer h2 { font-size: 14px; margin: 18px 0 6px; color: var(--accent); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.docs-viewer .meta-bar { font-family: var(--mono); font-size: 11px; color: var(--ink-4); padding: 6px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; margin-bottom: 14px; }
.docs-viewer ul { padding-left: 18px; margin: 6px 0; }
.docs-viewer code { font-family: var(--mono); background: var(--bg-2); padding: 1px 5px; border-radius: 2px; font-size: 12px; }
.docs-empty { padding: 40px; text-align: center; color: var(--ink-4); }

/* Msg compose */
.msg-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; max-height: 540px; overflow: hidden; }
.msg-history { flex: 1; overflow-y: auto; min-height: 160px; max-height: 240px; display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
.msg-bubble { max-width: 85%; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.5; }
.msg-bubble.from-you { align-self: flex-end; background: var(--accent); color: var(--bg); }
.msg-bubble.from-agent { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); }
.msg-bubble .mk { font-family: var(--mono); font-size: 9px; color: var(--ink-4); margin-bottom: 3px; display: block; letter-spacing: 0.05em; }
.msg-bubble.from-you .mk { color: color-mix(in oklch, var(--bg), transparent 30%); }
.msg-compose { display: flex; flex-direction: column; gap: 6px; }
.msg-kind { display: flex; gap: 4px; }
.msg-kind .mk {
  font-family: var(--mono); font-size: 10px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-3);
  padding: 4px 8px; border-radius: 3px; cursor: pointer;
}
.msg-kind .mk.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
#msg-text {
  resize: none;
  min-height: 72px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  outline: none;
}
#msg-text:focus { border-color: var(--accent); }
.msg-actions { display: flex; justify-content: space-between; align-items: center; }
.msg-hint { font-size: 10px; color: var(--ink-4); }
.msg-send { background: var(--accent); color: var(--bg); border: none; font-family: var(--mono); font-size: 12px; padding: 7px 14px; border-radius: 3px; cursor: pointer; font-weight: 500; }
.msg-send:hover { filter: brightness(1.1); }

.phase-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 4px; }
.ph { text-align: center; font-family: var(--mono); font-size: 9px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-4); position: relative; }
.ph.done { color: var(--ok); border-color: color-mix(in oklch, var(--ok), transparent 60%); }
.ph.current { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.ph .n { display: block; font-size: 8px; color: var(--ink-4); margin-bottom: 2px; }

/* Tweaks panel */
.tweaks { position: fixed; right: 20px; bottom: 20px; width: 260px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; z-index: 200; display: none; box-shadow: 0 24px 64px -24px rgba(0,0,0,0.6); }
.tweaks.on { display: block; }
.tweaks header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; }
.tweaks header .close { cursor: pointer; color: var(--ink-4); }
.tweaks .body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.tw-row { display: flex; flex-direction: column; gap: 6px; }
.tw-row label { font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; }
.tw-opts { display: flex; gap: 4px; flex-wrap: wrap; }
.tw-opts button { background: transparent; border: 1px solid var(--line); color: var(--ink-3); font-family: var(--mono); font-size: 11px; padding: 5px 9px; border-radius: 3px; cursor: pointer; }
.tw-opts button.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }