/* Collab Tower — an office building for the Matrix collab pool.
   Deliberately no external assets: this is served from a private origin with
   no internet egress assumed, so every pixel here is CSS. */

:root {
  --night-1:#0b1026; --night-2:#1a1b3a; --night-3:#2b1e4a;
  --brick:#2a3350; --brick-dark:#1e2540; --brick-line:#3b4670;
  --floor:#f2ead9; --floor-dark:#d9cdb4;
  --ink:#1b2033; --ink-soft:#5b6480;
  --glass:#8fd6ff;
  --ok:#54e08a; --warn:#ffb443; --idle:#8792ad; --gone:#ff6b6b;
  --accent:#ffd166; --accent-2:#7cc7ff;
  --panel:#141a2e; --panel-2:#1b2340; --panel-line:#2c3559;
  font-synthesis-weight:none;
}

* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; color:#e8ecf7;
  background:linear-gradient(#070b1c,#101838 45%,#241d3f);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  overflow-x:hidden;
}
.hidden { display:none !important; }
button { font:inherit; }

.btn { border-radius:8px; border:1px solid var(--panel-line); padding:.45rem .8rem;
  background:var(--panel-2); color:#dbe3f7; cursor:pointer; transition:.15s; }
.btn:hover { border-color:var(--accent); color:#fff; }
.btn.primary { background:linear-gradient(180deg,#ffd980,#f0a93b); color:#2a1c05;
  border-color:#d99a2b; font-weight:600; }
.btn.primary:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; }
.error { color:#ff9b9b; min-height:1.1em; margin:.4rem 0 0; font-size:.85rem; }
.hint { color:var(--ink-soft); font-size:.8rem; }

/* ── lobby / sign-in ───────────────────────────────────────────────────── */
.gate { position:fixed; inset:0; display:grid; place-items:center; z-index:40;
  background:radial-gradient(1200px 600px at 50% 0%,#26305c,#080c1e 70%); }
.lobby { width:min(380px,92vw); background:var(--panel); border:1px solid var(--panel-line);
  border-radius:16px; padding:1.6rem; box-shadow:0 30px 80px #0009; }
.lobby-sign { font-size:1.6rem; letter-spacing:.22em; font-weight:700; text-align:center;
  color:var(--accent); text-shadow:0 0 18px #ffd16688; }
.lobby-sub { text-align:center; color:var(--ink-soft); margin:.3rem 0 1.1rem; font-size:.85rem; }
.lobby label { display:block; margin:.6rem 0; font-size:.78rem; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.08em; }
.lobby input { width:100%; margin-top:.3rem; padding:.55rem .7rem; border-radius:8px;
  border:1px solid var(--panel-line); background:#0d1226; color:#eaf0ff; font-size:.95rem; }
.lobby input:focus { outline:2px solid var(--accent-2); outline-offset:1px; }
.lobby .btn.primary { width:100%; margin-top:.9rem; }
.tabs { display:flex; gap:.4rem; margin-bottom:.4rem; }
.tab { flex:1; padding:.35rem; border-radius:8px; border:1px solid var(--panel-line);
  background:transparent; color:var(--ink-soft); cursor:pointer; font-size:.8rem; }
.tab.active { background:var(--panel-2); color:#fff; border-color:var(--accent); }

/* ── top bar ───────────────────────────────────────────────────────────── */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.6rem 1rem;
  background:#0a0f22ee; border-bottom:1px solid var(--panel-line); backdrop-filter:blur(6px); }
.brand { font-weight:700; letter-spacing:.18em; color:var(--accent); }
.brand-mark { filter:drop-shadow(0 0 6px #ffd16688); }
.topbar-right { display:flex; align-items:center; gap:.7rem; }
.who { color:var(--ink-soft); font-size:.85rem; }
.pill { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--ink-soft);
  border:1px solid var(--panel-line); border-radius:999px; padding:.2rem .6rem; }
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--idle); display:inline-block; }
.pill.live .dot { background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 2s infinite; }
.pill.bad .dot { background:var(--gone); }
@keyframes pulse { 50% { opacity:.35; } }

/* ── scene ─────────────────────────────────────────────────────────────── */
.scene { position:relative; min-height:calc(100vh - 52px); padding:2rem 1rem 0; overflow:hidden; }
.sky { position:absolute; inset:0; pointer-events:none; }
.moon { position:absolute; right:3%; top:4%; width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff8e0,#f3dfa0); box-shadow:0 0 60px #ffeeb055; }
.stars { position:absolute; inset:0;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff,transparent),
    radial-gradient(1px 1px at 28% 44%,#cfe,transparent),
    radial-gradient(1px 1px at 48% 12%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 66% 30%,#fff,transparent),
    radial-gradient(1px 1px at 82% 8%,#dff,transparent),
    radial-gradient(1px 1px at 90% 40%,#fff,transparent),
    radial-gradient(1px 1px at 5% 60%,#fff,transparent);
  opacity:.7; animation:twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity:.35; } }
.cloud { position:absolute; height:26px; border-radius:999px; background:#ffffff10;
  box-shadow:26px -8px 0 4px #ffffff0d, -30px 4px 0 -2px #ffffff0d; }
.c1 { width:120px; top:12%; left:-10%; animation:drift 90s linear infinite; }
.c2 { width:90px;  top:26%; left:-25%; animation:drift 130s linear infinite; }
.c3 { width:150px; top:6%;  left:-40%; animation:drift 160s linear infinite; }
@keyframes drift { to { transform:translateX(150vw); } }

.tower-wrap { position:relative; z-index:2; width:min(1080px,96vw); margin:0 auto; }
.roof { position:relative; height:44px; border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#3a4675,#28304f); border:1px solid var(--brick-line);
  border-bottom:none; display:grid; place-items:center; }
.roof-sign { font-size:.7rem; letter-spacing:.3em; color:#9fb0da; }
.aerial { position:absolute; top:-26px; width:3px; height:26px; background:#5a6699; }
.aerial::after { content:""; position:absolute; top:-6px; left:-3px; width:9px; height:9px;
  border-radius:50%; background:var(--gone); box-shadow:0 0 12px var(--gone); animation:pulse 1.6s infinite; }

.tower { display:flex; flex-direction:column-reverse;
  background:linear-gradient(180deg,var(--brick),var(--brick-dark));
  border:1px solid var(--brick-line); border-top:none; border-bottom:none; }

/* ── a floor ───────────────────────────────────────────────────────────── */
.floor { display:grid; grid-template-columns:74px 1fr; border-top:1px solid var(--brick-line);
  min-height:132px; }
.floor:first-child { border-top:none; }
.floor.locked .office { filter:grayscale(.8) brightness(.5); }

.shaft { border-right:2px solid var(--brick-line); background:
  repeating-linear-gradient(180deg,#161d38 0 8px,#131a32 8px 16px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem;
  cursor:pointer; position:relative; }
.shaft:hover { background:#1d2646; }
.floor-num { font-size:1.5rem; font-weight:800; color:var(--accent); line-height:1;
  text-shadow:0 0 10px #ffd16655; }
.floor-alias { font-size:.62rem; color:#8ea0cc; letter-spacing:.06em; }
.lift-call { font-size:.6rem; color:#66739a; border:1px solid #333e66; border-radius:4px;
  padding:0 .25rem; }
.shaft .live-badge { position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 8px var(--ok); }

.office { position:relative; background:linear-gradient(180deg,#fbf5e8,var(--floor)); color:var(--ink);
  padding:.55rem .8rem .9rem; overflow:hidden; }
.office::before { /* window strip along the back wall */
  content:""; position:absolute; inset:0 0 auto 0; height:26px;
  background:repeating-linear-gradient(90deg,#bfe4ff 0 34px,#e9f5ff 34px 40px);
  border-bottom:3px solid #cbbfa4; opacity:.85; }
.office::after { /* carpet shadow */
  content:""; position:absolute; inset:auto 0 0 0; height:14px;
  background:linear-gradient(180deg,transparent,#00000018); }
.floor-head { position:relative; display:flex; align-items:center; gap:.6rem; height:26px;
  margin-bottom:.45rem; }
.floor-name { font-weight:700; font-size:.9rem; letter-spacing:.04em;
  background:#fff8; padding:0 .4rem; border-radius:5px; }
.floor-meta { font-size:.72rem; color:#6a6350; }
.floor-open { margin-left:auto; font-size:.72rem; border:1px solid #00000022; background:#ffffffaa;
  border-radius:6px; padding:.15rem .5rem; cursor:pointer; color:#2c3350; }
.floor-open:hover { background:#fff; border-color:var(--ink-soft); }

.desks { position:relative; display:flex; flex-wrap:wrap; gap:.55rem; }

/* ── a desk ────────────────────────────────────────────────────────────── */
.desk { position:relative; width:112px; padding-top:38px; cursor:pointer; }
 /* The chair sits BEHIND the desk surface, not under the name plate — a chair
    drawn at the bottom of the card lands on top of the status word. */
.desk .chair { position:absolute; top:20px; left:calc(50% - 46px); z-index:0;
  width:24px; height:18px; border-radius:7px 7px 2px 2px; background:#5d6b8f;
  box-shadow:0 10px 0 -6px #47527090; }
.desk .top { position:relative; z-index:1; height:34px; border-radius:5px;
  background:linear-gradient(180deg,#c99a63,#a97c48); box-shadow:0 3px 0 #00000022; }
.desk .monitor { position:absolute; left:calc(50% - 30px); top:2px;
  width:52px; height:34px; border-radius:4px; background:#20263c; border:2px solid #39415f;
  display:grid; place-items:center; overflow:hidden; }
.desk .monitor::after { content:""; position:absolute; inset:3px; border-radius:2px;
  background:var(--idle); opacity:.25; }
.desk .screen-lines { position:relative; z-index:1; width:70%; height:3px; border-radius:2px;
  background:#0006; box-shadow:0 6px 0 #0006, 0 12px 0 #0006; opacity:.5; }
.desk .agent { position:absolute; left:calc(50% + 20px); top:10px;
  width:20px; height:20px; border-radius:50% 50% 40% 40%; background:#7d5f4a; z-index:2;
  box-shadow:0 -7px 0 -2px #2f3b57; }
.desk .plate { margin-top:.3rem; text-align:center; font-size:.68rem; font-weight:700;
  letter-spacing:.03em; }
.desk .plate { color:#3a3524; }
.desk .status { display:block; font-size:.6rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; }

.desk.listening .monitor::after { background:var(--ok); opacity:.9; animation:flicker 1.6s infinite; }
.desk.listening .status { color:#1c7a44; }
.desk.stalled  .monitor::after { background:var(--warn); opacity:.75; }
.desk.stalled  .status { color:#8a5b12; }
.desk.stalled  .agent::after { content:"z"; position:absolute; right:-10px; top:-8px;
  font-size:.7rem; color:#8a5b12; animation:snooze 2.4s infinite; }
.desk.registered .monitor::after { background:var(--idle); opacity:.6; }
.desk.registered .status { color:#5b6480; }
.desk.vacant { opacity:.45; }
.desk.vacant .agent { display:none; }
.desk.vacant .status { color:#7a7562; }
.desk.you .top { background:linear-gradient(180deg,#8fb7ff,#5f86d6); }
.desk.selected { outline:2px dashed #2c3350; outline-offset:4px; border-radius:6px; }
.desk .msgcount { position:absolute; right:0; top:0; font-size:.6rem; background:#00000018;
  border-radius:999px; padding:0 .3rem; color:#3a3524; }
@keyframes flicker { 45% { opacity:.55; } 55% { opacity:.95; } }
@keyframes snooze { 0% { opacity:0; transform:translateY(0); } 40% { opacity:1; }
  100% { opacity:0; transform:translateY(-8px); } }

.plant { width:26px; align-self:flex-end; }
.plant .pot { height:12px; border-radius:0 0 5px 5px; background:#a4623c; }
.plant .leaf { height:22px; border-radius:50% 50% 30% 30%; background:#3f8f5a; }
.empty-note { flex:0 0 100%; font-size:.76rem; color:#6a6350; font-style:italic; margin:0 0 .2rem; }

.lobby-floor { position:relative; height:80px; border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#333d63,#232a46); border:1px solid var(--brick-line);
  display:grid; place-items:center; }
.lobby-text { letter-spacing:.35em; font-size:.7rem; color:#9fb0da; }
.revolving-door { position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:74px; height:46px; border-radius:37px 37px 0 0; background:#0e1428;
  border:2px solid #46527f; border-bottom:none; }
.revolving-door::after { content:""; position:absolute; left:50%; top:8px; width:2px; height:38px;
  background:#46527f; }
.lobby-people { position:absolute; left:calc(50% + 60px); bottom:12px; display:flex; gap:6px; }
.person { width:12px; height:20px; border-radius:6px 6px 3px 3px; background:#89d0ff;
  box-shadow:0 -8px 0 -3px #ffe0b8; }
.ground { height:60px; background:linear-gradient(180deg,#1a2138,#0d1223); border-top:2px solid #2a3350; }

/* ── drawer ────────────────────────────────────────────────────────────── */
.drawer { position:fixed; inset:0 0 0 auto; width:min(760px,100vw); z-index:30;
  background:var(--panel); border-left:1px solid var(--panel-line); display:flex; flex-direction:column;
  box-shadow:-20px 0 60px #000a; animation:slide .18s ease-out; }
@keyframes slide { from { transform:translateX(30px); opacity:.4; } }
.drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:.9rem 1rem; border-bottom:1px solid var(--panel-line); }
.drawer-head h2 { margin:0; font-size:1.05rem; color:var(--accent); letter-spacing:.06em; }
.d-sub { margin:.25rem 0 0; font-size:.76rem; color:var(--ink-soft); }
.drawer-head-actions { display:flex; gap:.4rem; }
.drawer-body { flex:1; display:grid; grid-template-columns:190px 1fr; min-height:0; }
.d-side { border-right:1px solid var(--panel-line); padding:.8rem; overflow:auto; }
.d-side h3 { font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-soft); margin:.2rem 0 .5rem; }
.desk-list { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.35rem; }
.desk-list li { display:flex; align-items:center; gap:.45rem; font-size:.8rem;
  padding:.3rem .4rem; border-radius:6px; background:#0e1428; border:1px solid #202a4a; }
.desk-list .led { width:8px; height:8px; border-radius:50%; background:var(--idle); flex:none; }
.desk-list .led.listening { background:var(--ok); box-shadow:0 0 7px var(--ok); }
.desk-list .led.stalled { background:var(--warn); }
.desk-list .led.vacant { background:#3b4470; }
.desk-list .age { margin-left:auto; font-size:.68rem; color:var(--ink-soft); }
.chips { display:flex; flex-wrap:wrap; gap:.3rem; }
.chip { font-size:.72rem; padding:.15rem .5rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--panel-line); background:#0e1428; color:#c4cee8; }
.chip.on { background:var(--accent); color:#2a1c05; border-color:var(--accent); font-weight:600; }

.d-main { display:flex; flex-direction:column; min-height:0; }
.log { flex:1; overflow:auto; padding:.8rem 1rem; display:flex; flex-direction:column; gap:.55rem; }
.thread { border-left:2px solid #2c3559; padding-left:.6rem; display:flex; flex-direction:column; gap:.4rem; }
.msg { background:var(--panel-2); border:1px solid var(--panel-line); border-radius:10px;
  padding:.5rem .65rem; }
.msg.human { background:#152a2a; border-color:#245c52; }
.msg.mine { background:#1c2545; border-color:#39508f; }
.msg-head { display:flex; align-items:center; gap:.4rem; font-size:.74rem; margin-bottom:.25rem; }
.who-tag { font-weight:700; color:var(--accent-2); }
.arrow { color:var(--ink-soft); }
.to-tag { color:#c9d4ef; }
.type-tag { font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; padding:.05rem .35rem;
  border-radius:999px; background:#2b3459; color:#b9c6ea; }
.type-assign { background:#3a2f66; color:#d7c6ff; }
.type-plan { background:#2f4a66; color:#bfe2ff; }
.type-result { background:#25543a; color:#b7f0cd; }
.type-done { background:#25543a; color:#b7f0cd; }
.type-question { background:#5c4520; color:#ffd9a0; }
.type-error { background:#5c2424; color:#ffc0c0; }
.type-standdown { background:#4a2a4a; color:#f0c0f0; }
.stamp { margin-left:auto; color:var(--ink-soft); font-size:.68rem; }
.msg-body { white-space:pre-wrap; word-break:break-word; font-size:.86rem; line-height:1.45; }
.route { font-size:.68rem; color:var(--ink-soft); margin-top:.3rem; }
.log-empty { color:var(--ink-soft); font-size:.85rem; text-align:center; padding:2rem 0; }
.day-sep { text-align:center; font-size:.68rem; color:var(--ink-soft); letter-spacing:.1em;
  text-transform:uppercase; }

.compose { border-top:1px solid var(--panel-line); padding:.6rem .8rem .8rem; background:#0f142a; }
.compose-row { display:flex; gap:.5rem; align-items:center; }
.compose-row + .compose-row { margin-top:.45rem; align-items:flex-end; }
.compose select { background:#0d1226; color:#e7eeff; border:1px solid var(--panel-line);
  border-radius:8px; padding:.35rem .5rem; font-size:.82rem; }
.compose textarea { flex:1; resize:vertical; background:#0d1226; color:#e7eeff;
  border:1px solid var(--panel-line); border-radius:8px; padding:.45rem .6rem; font:inherit;
  font-size:.88rem; }
.compose textarea:focus, .compose select:focus { outline:2px solid var(--accent-2); outline-offset:1px; }
.route-hint { font-size:.72rem; color:var(--ink-soft); }

.tooltip { position:fixed; z-index:50; max-width:320px; background:#0b1024f2; color:#dfe7ff;
  border:1px solid var(--panel-line); border-radius:10px; padding:.5rem .6rem; font-size:.76rem;
  pointer-events:none; box-shadow:0 12px 30px #0009; }
.tooltip b { color:var(--accent); }
.tooltip .k { color:var(--ink-soft); }

@media (max-width:820px) {
  .drawer { width:100vw; }
  .drawer-body { grid-template-columns:1fr; }
  .d-side { border-right:none; border-bottom:1px solid var(--panel-line); max-height:150px; }
  .desk { width:96px; }
}