*{box-sizing:border-box}
:root{
  --panel:#0f1a32;
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --accent:#7dd3fc;
  --bad:#ef4444;
  --good:#34d399;
}
html,body{height:100%}
body{margin:0; font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto; color:var(--ink);
  background: radial-gradient(1000px 600px at 20% 10%, #101735 0%, #0b1020 55%, #070a16 100%);
}
.wrap{max-width:860px; margin:40px auto; padding:0 16px}
h1{margin:0 0 10px 0; letter-spacing:.5px}

.status{display:flex; gap:16px; align-items:center; margin:8px 0 16px 0; color:#cbd5e1}
.badge{display:inline-block; padding:2px 10px; border-radius:999px; font-size:.85rem; border:1px solid #ffffff22;}
.badge.off{background:#1f2937;color:#94a3b8}
.badge.on{background:#063d2e;color:#a7f3d0;border-color:#10b98155}

.controls{margin:12px 0 24px 0}
.btn{appearance:none; background:#0e2741; border:1px solid #ffffff1f; color:var(--ink); padding:.55rem .9rem; border-radius:.6rem; cursor:pointer}
.btn:hover{filter:brightness(1.1)}

.chat{position:fixed; right:16px; bottom:16px; width: min(420px, 92vw); background:#0b1428; border:1px solid #ffffff22; border-radius:.8rem; box-shadow:0 20px 60px #000a; display:flex; flex-direction:column; overflow:hidden}
.chat-header{display:flex; align-items:center; justify-content:space-between; padding:.5rem .75rem; background:#0e1c35; border-bottom:1px solid #ffffff18}
.presence{display:flex; align-items:center; gap:.5rem; color:#cbd5e1}
.icon{appearance:none;background:transparent;border:0;color:#a5b4fc;cursor:pointer;font-size:18px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:#6b7280;box-shadow:0 0 10px #6b7280}
.dot.on{background:#10b981; box-shadow:0 0 10px #10b981}
.dot.off{background:#ef4444; box-shadow:0 0 10px #ef4444}

.chat-log{height:260px; overflow:auto; padding:.6rem .75rem; display:flex; flex-direction:column; gap:.4rem}
.msg{max-width:80%; padding:.45rem .6rem; border-radius:.65rem; font-size:.95rem; line-height:1.35}
.msg.you{align-self:flex-end; background:#163537; border:1px solid #34d39955}
.msg.opp{align-self:flex-start; background:#16223b; border:1px solid #60a5fa55}
.msg.sys{align-self:center; background:#111827; color:#9ca3af; font-size:.85rem}

.chat-form{display:flex; gap:.5rem; padding:.5rem .6rem; border-top:1px solid #ffffff18; background:#0e1a30}
.chat-input{flex:1; padding:.55rem .7rem; border-radius:.5rem; border:1px solid #ffffff22; background:#091226; color:var(--ink)}
.send{appearance:none;border:1px solid #ffffff22;background:#0e2741;color:#dbeafe;padding:.5rem .8rem;border-radius:.5rem;cursor:pointer}

#chat.min .chat-log{ display:none }
#chat.min .chat-form{ display:none }