*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#05060d;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#e9edf7;-webkit-font-smoothing:antialiased;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;will-change:transform;transform-origin:50% 100%;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:3px;transition:opacity .3s}
.tag .nm{display:flex;align-items:center;gap:5px;padding:2px 8px 2px 4px;border-radius:999px;background:rgba(10,14,28,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);font-size:11px;font-weight:600;white-space:nowrap;letter-spacing:.1px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.tag .nm i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 6px currentColor}
.tag .nm .sp{width:8px;height:8px;border:1.5px solid rgba(255,255,255,.25);border-top-color:#7cf;border-radius:50%;animation:rot .9s linear infinite;display:none}
.tag.busy .nm .sp{display:block}
.tag .task{max-width:150px;padding:3px 8px;border-radius:8px;background:rgba(20,30,60,.72);border:1px solid rgba(120,200,255,.25);font-size:10px;line-height:1.25;text-align:center;color:#cfe6ff;display:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tag.busy.hastask .task{display:block}
.tag .emo{font-size:20px;line-height:1;opacity:0;transform:translateY(6px) scale(.6);transition:all .35s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));background:rgba(255,255,255,.92);border-radius:14px 14px 14px 4px;padding:4px 6px}
.tag .emo.show{opacity:1;transform:none}
.tag.dim{opacity:.18}
.tag.far .task{display:none!important}
.tag.far .nm{font-size:9px;padding:1px 6px 1px 3px}
@keyframes rot{to{transform:rotate(360deg)}}
#hud{position:fixed;left:max(12px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:8px;z-index:5}
.title{font-size:17px;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:8px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.logo{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#111;border:1px solid rgba(255,255,255,.3);font-size:13px;color:#8fe3ff;box-shadow:0 0 12px rgba(80,200,255,.5)}
.chip{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#aab3c8}
.counts{display:flex;gap:6px}
.pill{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(10,14,28,.6);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pill i,.lg{width:8px;height:8px;border-radius:50%;display:inline-block}
.busy i,.lg.busy{background:#43e8ff;box-shadow:0 0 8px #43e8ff}
.idle i,.lg.idle{background:#ffb454;box-shadow:0 0 8px #ffb454}
.toggles{display:flex;background:rgba(10,14,28,.6);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:2px;width:max-content;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.toggles button,#camBtn{all:unset;cursor:pointer;font-size:12px;padding:5px 10px;border-radius:8px;color:#aab3c8}
.toggles button.on{background:rgba(255,255,255,.12);color:#fff}
#panel{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:290px;max-height:calc(100% - 80px);display:flex;flex-direction:column;background:rgba(9,12,24,.72);border:1px solid rgba(255,255,255,.1);border-radius:14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:6;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.4)}
#panelBtn{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;font-weight:600}
#panelBtn b{font-weight:500;color:#8fe3ff;font-size:12px}
#panelBtn em{margin-left:auto;font-style:normal;transition:transform .25s;color:#aab3c8}
#panel.collapsed em{transform:rotate(-90deg)}
#panel .body{overflow:auto;padding:0 10px 10px;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#panel.collapsed .body{display:none}
#panel h3{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#7f89a3;margin:8px 4px 6px}
#roster,#log{list-style:none;margin:0;padding:0}
#roster li{display:grid;grid-template-columns:12px 1fr auto;gap:2px 8px;align-items:center;padding:6px;border-radius:8px;cursor:pointer}
#roster li:hover,#roster li.sel{background:rgba(255,255,255,.06)}
#roster li i{width:10px;height:10px;border-radius:50%;grid-row:span 2}
#roster .n{font-size:12.5px;font-weight:600}
#roster .r{font-size:10.5px;color:#7f89a3;grid-column:2/4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#roster .b{font-size:10px;padding:2px 7px;border-radius:999px;display:flex;gap:4px;align-items:center}
#roster .b.busy{background:rgba(67,232,255,.12);color:#7cefff}
#roster .b.idle{background:rgba(255,180,84,.12);color:#ffc77e}
#roster .b .sp{width:7px;height:7px;border:1.5px solid rgba(124,239,255,.3);border-top-color:#7cefff;border-radius:50%;animation:rot .9s linear infinite}
#log li{font-size:11px;color:#b9c1d6;padding:4px 6px;border-left:2px solid #333;margin:3px 0 3px 4px;line-height:1.3}
#log li time{color:#6d7790;margin-right:5px;font-variant-numeric:tabular-nums}
#focus{position:fixed;left:50%;bottom:max(54px,calc(env(safe-area-inset-bottom) + 50px));transform:translateX(-50%);width:min(340px,calc(100% - 24px));background:rgba(9,12,24,.82);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 14px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:7;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.fhead{display:flex;align-items:center;gap:10px}
#fDot{width:16px;height:16px;border-radius:50%}
#fName{font-weight:700;font-size:15px}#fRole{font-size:11.5px;color:#8b95ad}
#fClose{all:unset;cursor:pointer;margin-left:auto;padding:4px 8px;color:#aab3c8}
#fState{margin-top:8px;font-size:12.5px}
#fTask{margin-top:4px;font-size:12px;color:#cfe6ff}
#legend{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;font-size:11px;color:#9aa3ba;z-index:5}
#legend span{display:flex;align-items:center;gap:6px}
#camBtn{background:rgba(10,14,28,.6);border:1px solid rgba(255,255,255,.12)}
#loading{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:#05060d;z-index:20;font-size:13px;color:#8b95ad;transition:opacity .8s}
#loading.done{opacity:0;pointer-events:none}
.spin{width:28px;height:28px;border:2px solid rgba(255,255,255,.12);border-top-color:#8fe3ff;border-radius:50%;animation:rot 1s linear infinite}
@media (max-width:700px){
  #panel{left:auto;right:max(10px,env(safe-area-inset-right));top:auto;bottom:max(10px,env(safe-area-inset-bottom));width:auto;max-width:calc(100% - 20px);max-height:55%}
  #panel:not(.collapsed){left:max(10px,env(safe-area-inset-left))}
  #legend span{display:none}
  .title{font-size:15px}
  #focus{bottom:max(64px,calc(env(safe-area-inset-bottom) + 60px))}
}