:root{
  --red:#C80000; --gold:#C89632; --goldbright:#F0BC2B;
  --ink:#1c1c1c; --muted:#6b7a85; --bg:#0a0a0a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;
  font-family:'Fira Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:#fff}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
.pill{background:#fff;border:2px solid var(--red);color:var(--red);
  border-radius:999px;padding:7px 14px;font-size:12px;font-weight:800}
.pill:active{transform:scale(.96)}
.pill.hub{background:var(--red);color:#fff;text-decoration:none}

/* ---- Gate ---- */
#gate{position:fixed;inset:0;z-index:100;background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;padding:20px}
.gate-card{text-align:center;max-width:340px;width:100%;
  background:#161616;border:1px solid var(--gold);border-radius:18px;padding:30px 24px}
.gate-crown{font-size:52px}
.gate-card h1{font-family:'Playfair Display SC',Georgia,serif;
  color:#fff;font-size:30px;letter-spacing:2px;margin:8px 0 2px}
.gate-sub{color:var(--goldbright);font-size:11px;letter-spacing:4px;font-weight:800}
.gate-tag{color:#bbb;font-size:13px;margin:14px 0 20px}
#passcode{width:100%;padding:14px;font-size:18px;text-align:center;
  border-radius:12px;border:1px solid #444;background:#0a0a0a;color:#fff;margin-bottom:12px}
#unlockBtn{width:100%;padding:14px;background:var(--red);color:#fff;
  border:0;border-radius:999px;font-size:17px;font-weight:800}
#unlockBtn:active{transform:scale(.98)}
.gate-err{color:#ff6b6b;font-size:13px;min-height:18px;margin:10px 0 0}

/* ---- App shell ---- */
#app{height:100dvh;display:flex;flex-direction:column}
#topbar{background:#111;border-bottom:3px solid var(--red);
  padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.brand{font-family:'Playfair Display SC',Georgia,serif;font-size:17px;letter-spacing:1px}
.crown{font-size:19px}
.office-tag{font-family:'Fira Sans',sans-serif;font-size:9px;color:var(--goldbright);
  letter-spacing:2px;vertical-align:middle}
.top-actions{display:flex;gap:6px;align-items:center}
.top-actions .pill{padding:6px 10px;font-size:11px}

#scene-wrap{position:relative;flex:1;min-height:0;background:#111}
#scene3d{width:100%;height:100%;display:block;touch-action:none}
#scene-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  background:rgba(0,0,0,.6);color:#eee;font-size:11px;padding:5px 12px;
  border-radius:999px;white-space:nowrap;pointer-events:none}
#bus-status{position:absolute;top:10px;right:10px;font-size:10px;
  padding:4px 10px;border-radius:999px;pointer-events:none}
.bus-offline{background:rgba(200,0,0,.85);color:#fff}
.bus-online{background:rgba(20,140,60,.9);color:#fff}
#voice-status{position:absolute;top:34px;right:10px;font-size:10px;pointer-events:none}
.voice-warn{background:rgba(120,60,0,.9);color:#fff;padding:4px 10px;border-radius:999px}

/* Joystick (walk mode) */
#joystick{position:absolute;left:18px;bottom:44px;width:110px;height:110px;
  border-radius:50%;background:rgba(255,255,255,.12);
  border:2px solid rgba(240,188,43,.7);touch-action:none}
#joy-knob{position:absolute;left:50%;top:50%;width:46px;height:46px;
  margin:-23px 0 0 -23px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #F0BC2B, #C89632)}
#walk-hint{position:absolute;left:50%;top:10px;transform:translateX(-50%);
  background:rgba(0,0,0,.6);color:#F0BC2B;font-size:11px;
  padding:5px 12px;border-radius:999px;pointer-events:none}

/* Roster */
#roster{display:flex;gap:8px;overflow-x:auto;padding:8px 10px;
  background:#161616;border-top:1px solid #333;scrollbar-width:none}
#roster::-webkit-scrollbar{display:none}
.roster-chip{flex:0 0 auto;background:#222;border:2px solid #444;color:#fff;
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700}
.roster-chip.active{background:var(--red);border-color:var(--red)}
.roster-chip .dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#2ecc71;margin-right:6px}

/* Chat */
#chat{background:#161616;border-top:3px solid var(--red);
  display:flex;flex-direction:column;max-height:42dvh;min-height:150px}
#chat-head{display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;font-weight:800;font-size:14px;border-bottom:1px solid #333}
#chat-head button{background:#333;color:#fff;border:0;border-radius:50%;
  width:26px;height:26px;font-size:16px;line-height:1}
#messages{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.4}
.msg.me{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}
.msg.them{align-self:flex-start;background:#262626;color:#eee;border-bottom-left-radius:4px}
.msg .who{font-size:10px;color:var(--goldbright);font-weight:800;display:block;margin-bottom:2px}
.msg.me .who{color:#ffd9d9}
#composer{display:flex;gap:8px;padding:8px 10px;border-top:1px solid #333;
  padding-bottom:max(8px, env(safe-area-inset-bottom))}
#micBtn{background:#333;border:0;border-radius:50%;width:42px;height:42px;font-size:19px;flex:0 0 auto}
#micBtn.listening{background:var(--red);animation:pulse 1s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
#chatInput{flex:1;background:#0a0a0a;border:1px solid #444;color:#fff;
  border-radius:999px;padding:10px 14px;font-size:15px;min-width:0}
#sendBtn{background:var(--red);color:#fff;border:0;border-radius:999px;
  padding:10px 18px;font-weight:800;font-size:14px}
#sendBtn:active{transform:scale(.96)}

/* ---- To-Do panel (every desk, voice-controlled) ---- */
#todo-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:49}
#todo{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#161616;
  border-top:3px solid var(--red);border-radius:18px 18px 0 0;
  max-height:72dvh;display:flex;flex-direction:column;
  padding-bottom:max(10px, env(safe-area-inset-bottom))}
#todo-head{display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;font-weight:800;font-size:16px;border-bottom:1px solid #333}
#todo-head button{background:#333;color:#fff;border:0;border-radius:50%;
  width:28px;height:28px;font-size:14px}
#todo-sub{padding:6px 14px 0;font-size:11px;color:#bbb}
#todo-list{list-style:none;margin:8px 0 0;padding:0 12px;overflow-y:auto;
  max-height:30dvh;display:flex;flex-direction:column;gap:6px}
.todo-item{display:flex;align-items:center;gap:10px;background:#222;
  border:2px solid #333;border-radius:12px;padding:10px}
.todo-item.selected{border-color:var(--goldbright);background:#2c2410}
.todo-item.done .todo-text{text-decoration:line-through;color:#999}
.todo-check{width:22px;height:22px;flex:0 0 auto;accent-color:var(--red)}
.todo-text{flex:1;font-size:15px;line-height:1.3}
.todo-del{background:#333;color:#fff;border:0;border-radius:50%;
  width:28px;height:28px;flex:0 0 auto;font-size:13px}
.todo-empty{padding:14px;text-align:center;color:#bbb;font-size:14px}
.todo-clear-done{align-self:flex-end;margin:8px 14px 0;background:#333;
  color:#fff;border:0;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}
#todo-heard{margin:10px 12px 0;background:#2c2410;border:1px solid var(--gold);
  border-radius:12px;padding:10px 12px}
#todo-heard-text{font-size:14px;color:#fff}
#todo-heard-action{font-size:13px;color:var(--goldbright);margin-top:4px;font-weight:700}
.todo-heard-btns{display:flex;gap:8px;margin-top:8px}
#todo-apply{background:var(--red);color:#fff;border:0;border-radius:999px;
  padding:8px 16px;font-weight:800}
#todo-cancel{background:#333;color:#fff;border:0;border-radius:999px;
  padding:8px 16px;font-weight:800}
#todo-confirm{margin:10px 12px 0;background:#123a1f;border:1px solid #2ecc71;
  border-radius:12px;padding:9px 12px;font-size:13px;
  display:flex;gap:10px;align-items:center;justify-content:space-between}
.todo-undo{background:var(--goldbright);color:#111;border:0;border-radius:999px;
  padding:5px 12px;font-weight:800}
#todo-mic-row{display:flex;align-items:center;gap:12px;padding:12px 14px 6px}
#todoMicBtn{background:#333;border:0;border-radius:50%;
  width:64px;height:64px;font-size:30px;flex:0 0 auto}
#todoMicBtn.listening{background:var(--red);animation:pulse 1s infinite}
#todo-mic-label{font-size:13px;color:#ddd}
#todo-add-row{display:flex;gap:8px;padding:6px 12px 4px}
#todoInput{flex:1;background:#0a0a0a;border:1px solid #444;color:#fff;
  border-radius:999px;padding:10px 14px;font-size:15px;min-width:0}
#todoAddBtn{background:var(--red);color:#fff;border:0;border-radius:999px;
  padding:10px 18px;font-weight:800;font-size:14px}
.chat-head-btns{display:flex;gap:6px;align-items:center}
.chat-head-btns #chat-todo{background:#333;color:#fff;border:0;
  border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700}

.msg.thinking{opacity:.65;font-style:italic}