/* ============================================================
   AI OFFICE — v0.1 “The Game” · dark glass HUD
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#0a0d13; --panel:rgba(15,19,28,.88); --panel2:rgba(20,25,36,.9);
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --txt:#e7ecf3; --muted:#8e9bb0; --dim:#5d6a80;
  --acc:#6ea8fe; --acc2:#8b5cf6; --good:#34d399; --warn:#fbbf24; --bad:#f87171;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html,body{ height:100%; overflow:hidden; }
body{
  background:var(--bg); color:var(--txt);
  font:13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; user-select:none;
}
#app{ position:fixed; inset:0; }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
#game.dragging{ cursor:grabbing; }

/* ---------- top bar ---------- */
#topbar{
  position:absolute; top:0; left:0; right:0; height:48px; z-index:20;
  display:flex; align-items:center; gap:14px; padding:0 12px;
  background:linear-gradient(180deg, rgba(10,13,19,.92), rgba(10,13,19,.55) 80%, transparent);
  pointer-events:none;
}
#topbar > *{ pointer-events:auto; }
.brand{ display:flex; align-items:center; gap:8px; font-size:15px; letter-spacing:.06em; }
.brand .logo{ color:var(--acc); font-size:17px; text-shadow:0 0 14px rgba(110,168,254,.8); }
.brand b{ font-weight:800; }
.clock{
  margin-left:auto; margin-right:auto; font:600 12.5px var(--mono); color:var(--muted);
  background:rgba(255,255,255,.04); border:1px solid var(--line); padding:4px 12px; border-radius:999px;
  white-space:nowrap;
}
.tb-actions{ display:flex; gap:6px; flex-wrap:nowrap; }

.btn{
  height:32px; min-width:32px; padding:0 10px; border-radius:9px; border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:var(--txt); font:600 12px system-ui; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap;
  transition:background .15s,border-color .15s,transform .1s;
}
.btn:hover{ background:rgba(255,255,255,.12); }
.btn:active{ transform:scale(.96); }
.btn.icon{ width:34px; padding:0; font-size:14px; }
.btn.primary{ background:linear-gradient(135deg,#4f7df9,#7c5bff); border-color:transparent; color:#fff; box-shadow:0 4px 16px rgba(90,110,255,.35); }
.btn.primary:hover{ filter:brightness(1.12); }
.btn.on{ border-color:rgba(110,168,254,.55); color:#cfe0ff; background:rgba(94,140,255,.16); }
.btn.off{ opacity:.5; }

.chip{
  font:600 10px var(--mono); letter-spacing:.08em; padding:2px 7px; border-radius:999px;
  background:rgba(139,92,246,.16); border:1px solid rgba(139,92,246,.4); color:#c4b5fd;
}
.chip.sm{ font-size:9px; padding:1px 6px; }
.muted{ color:var(--muted); font-weight:400; }

/* ---------- side panels ---------- */
.panel{
  position:absolute; top:58px; bottom:14px; width:242px; z-index:15;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.25,1), opacity .28s;
}
.panel.left{ left:12px; }
.panel.right{ right:12px; width:302px; }
.p-head{
  padding:10px 12px 8px; font:800 11px system-ui; letter-spacing:.14em; color:#aab8cf;
  display:flex; align-items:center; gap:8px; flex:none;
}
.p-head.sub{ padding-top:6px; border-top:1px solid var(--line); color:var(--dim); }
.p-head .chip{ margin-left:auto; }

.team-list{ overflow-y:auto; padding:0 8px 10px; flex:1; }
.team-row{
  display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:10px; cursor:pointer;
  border:1px solid transparent;
}
.team-row:hover{ background:rgba(255,255,255,.06); }
.team-row.sel{ border-color:rgba(110,168,254,.5); background:rgba(94,140,255,.10); }
.avatar{
  width:28px; height:28px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:15px; border:1px solid; background:rgba(255,255,255,.04);
}
.tr-main{ min-width:0; flex:1; }
.tr-name{ font-weight:700; font-size:12.5px; display:flex; align-items:center; gap:6px; }
.tr-role{ font-size:10.5px; color:var(--muted); }
.tr-act{ font-size:10.5px; color:#9fb6e8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.dot{ width:8px; height:8px; border-radius:50%; flex:none; background:#64748b; }
.dot.working{ background:var(--good); animation:pulse 1.2s infinite; }
.dot.walking{ background:var(--warn); }
.dot.chatting{ background:#f472b6; }
.dot.meeting{ background:#a78bfa; }
.dot.carrying{ background:#38bdf8; }
.dot.celebrate{ background:#f9a8d4; animation:pulse .6s infinite; }

/* ---------- mission board ---------- */
#boardBody{ overflow-y:auto; padding:0 12px 10px; flex:1; }
.m-request{
  font-style:italic; color:#cdd8ea; background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-left:3px solid var(--acc); border-radius:8px; padding:8px 10px; margin-bottom:10px; font-size:12.5px;
}
.m-empty{ color:var(--muted); font-size:12px; padding:8px 2px; }
.st{
  display:flex; gap:8px; padding:7px 8px; border-radius:10px; margin-bottom:4px;
  background:rgba(255,255,255,.035); border:1px solid transparent;
}
.st.active{ border-color:rgba(110,168,254,.35); background:rgba(94,140,255,.08); }
.st-ic{ width:16px; text-align:center; flex:none; font-size:11px; color:var(--dim); padding-top:2px; }
.st.done .st-ic{ color:var(--good); }
.st-main{ flex:1; min-width:0; }
.st-title{ font-size:12px; font-weight:600; }
.st.done .st-title{ color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(52,211,153,.5); }
.st-meta{ display:flex; gap:6px; align-items:center; margin:2px 0 4px; }
.mini{ font:600 10px system-ui; padding:1px 6px; border-radius:999px; border:1px solid; }
.st-time{ font:500 10px var(--mono); color:var(--dim); }
.st-bar{ height:4px; border-radius:3px; background:rgba(255,255,255,.09); overflow:hidden; }
.st-bar i{ display:block; height:100%; border-radius:3px; background:var(--c,#6ea8fe); transition:width .3s; width:0; }
.spin{ display:inline-block; animation:spin 1.1s linear infinite; }
.queue-item{ font-size:11.5px; color:var(--muted); padding:5px 8px; border-radius:8px; background:rgba(255,255,255,.04); margin-bottom:4px; font-style:italic; }
.result-card{
  margin-top:8px; padding:10px; border-radius:12px; border:1px solid rgba(52,211,153,.4);
  background:linear-gradient(160deg, rgba(52,211,153,.12), rgba(52,211,153,.03));
}
.result-card .rc-title{ font-weight:800; font-size:13px; display:flex; gap:8px; align-items:center; }
.result-card .rc-sub{ font-size:11px; color:var(--muted); margin:2px 0 8px; }
.result-card ul{ list-style:none; margin-bottom:8px; }
.result-card li{ font-size:11.5px; color:#cde9dc; padding:2px 0 2px 14px; position:relative; }
.result-card li::before{ content:"▸"; position:absolute; left:2px; color:var(--good); }
.rc-btn{
  width:100%; height:30px; border-radius:8px; border:1px solid rgba(52,211,153,.5);
  background:rgba(52,211,153,.14); color:#a7f3d0; font-weight:700; cursor:pointer; font-size:12px;
}
.rc-btn:hover{ background:rgba(52,211,153,.24); }
.board-sep{ font:800 10px system-ui; letter-spacing:.12em; color:var(--dim); margin:10px 0 6px; }

.log-list{ flex:none; max-height:178px; overflow-y:auto; padding:0 12px 10px; font:11px var(--mono); }
.log-line{ padding:2.5px 0; color:#b9c5d8; border-bottom:1px dashed rgba(255,255,255,.05); }
.log-line .lt{ color:var(--dim); margin-right:6px; }

/* ---------- inspector ---------- */
.inspector{
  position:absolute; left:12px; bottom:14px; width:270px; z-index:16;
  background:var(--panel2); border:1px solid var(--line2); border-radius:14px; padding:12px;
  backdrop-filter:blur(10px); box-shadow:0 12px 40px rgba(0,0,0,.5);
  animation:slideUp .22s cubic-bezier(.2,.8,.25,1);
}
.insp-head{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.insp-head .avatar{ width:40px; height:40px; font-size:22px; border-radius:12px; }
.insp-name{ font-weight:800; font-size:14px; }
.insp-role{ font-size:11px; color:var(--acc); font-weight:600; }
.insp-x{ margin-left:auto; background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; }
.insp-desc{ font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.insp-status{ display:flex; align-items:center; gap:7px; font-size:11.5px; margin-bottom:8px; }
.insp-skills{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.skill{ font-size:10px; padding:2px 7px; border-radius:999px; background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.35); color:#c4b5fd; }
.insp-quote{ font-size:11px; color:var(--dim); font-style:italic; border-top:1px solid var(--line); padding-top:7px; }
.insp-btns{ display:flex; gap:6px; margin-top:9px; }

/* ---------- modal ---------- */
.modal-root{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(4,8,16,.66); backdrop-filter:blur(5px); animation:fade .18s;
}
.modal{
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 80px); overflow-y:auto;
  background:#121724f5; border:1px solid var(--line2); border-radius:16px; padding:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.6); animation:slideUp .22s cubic-bezier(.2,.8,.25,1);
}
.modal h2{ font-size:16px; margin-bottom:4px; display:flex; align-items:center; gap:9px; }
.modal .sub{ color:var(--muted); font-size:12px; margin-bottom:14px; }
.preset-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.preset{
  text-align:left; padding:10px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--txt); cursor:pointer; font:inherit;
}
.preset:hover{ background:rgba(255,255,255,.09); }
.preset.sel{ border-color:var(--acc); background:rgba(94,140,255,.13); }
.preset .pt{ font-weight:700; font-size:12.5px; margin-bottom:2px; }
.preset .pd{ font-size:11px; color:var(--muted); }
.modal textarea{
  width:100%; height:74px; resize:vertical; border-radius:10px; border:1px solid var(--line2);
  background:rgba(0,0,0,.35); color:var(--txt); padding:10px; font:13px system-ui; margin-bottom:12px;
}
.modal textarea:focus{ outline:2px solid rgba(110,168,254,.5); }
.modal .row{ display:flex; gap:8px; justify-content:flex-end; }
.modal .note{ font-size:10.5px; color:var(--dim); margin-top:10px; }
.credits{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.credit{ font-size:11px; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:12.5px; margin:8px 0; }
.kv b{ color:var(--acc); font-weight:700; white-space:nowrap; }
kbd{
  font:600 10.5px var(--mono); background:rgba(255,255,255,.08); border:1px solid var(--line2);
  border-bottom-width:2px; border-radius:5px; padding:1px 6px;
}

/* ---------- toasts / hint / tabs ---------- */
#toasts{ position:absolute; top:58px; left:50%; transform:translateX(-50%); z-index:40; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
.toast{
  background:#141a28ee; border:1px solid var(--line2); border-radius:999px; padding:8px 18px;
  font-size:12.5px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:slideDown .28s cubic-bezier(.2,.8,.25,1);
}
.toast.good{ border-color:rgba(52,211,153,.55); color:#a7f3d0; }
.toast.fade{ opacity:0; transition:opacity .4s; }
.hint{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--dim); z-index:10; pointer-events:none; white-space:nowrap; }
.tab{ display:none; position:absolute; top:50%; z-index:18; width:36px; height:44px; border-radius:10px; border:1px solid var(--line2); background:var(--panel); color:var(--txt); font-size:15px; cursor:pointer; }
.tab.left{ left:6px; transform:translateY(-50%); }
.tab.right{ right:6px; transform:translateY(-50%); }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.2); }
::-webkit-scrollbar-track{ background:transparent; }

@keyframes pulse{ 50%{ opacity:.35; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes fade{ from{ opacity:0; } }
@keyframes slideUp{ from{ opacity:0; transform:translateY(14px); } }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-14px); } }
.hidden{ display:none !important; }

@media (max-width:1180px){
  .panel.left{ transform:translateX(-115%); }
  .panel.right{ transform:translateX(115%); }
  .panel.open{ transform:none; }
  .tab{ display:block; }
}
@media (max-width:760px){
  .btn span{ display:none; }
  .brand b, #verChip{ display:none; }
  .clock{ font-size:11px; padding:3px 8px; }
  .panel.right{ width:min(302px, calc(100vw - 76px)); }
  .hint{ display:none; }
}