*{box-sizing:border-box}
:root{--bg:#0b1220;--card:#121a2b;--muted:#7f8cab;--text:#eaf0ff;--accent:#64d2ff;--accent2:#78f3b7;--danger:#ff7575;--ok:#7cf29a}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid #223}
.card{background:var(--card);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:16px}
h1,h2,h3{margin:6px 0 10px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input,select,button{padding:10px 12px;border-radius:10px;border:1px solid #345;background:#0e1627;color:var(--text)}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
.hidden{display:none}
.bubble{padding:10px 12px;margin:8px 0;border-radius:12px;max-width:85%}
.bubble.cust{background:#12263a}
.bubble.rep{background:#2a1f2b}
.controls{margin-top:10px}
.ptt{background:#1e2a44;border:1px solid #2e477b;font-size:16px}
#userList .userrow{display:flex;gap:8px;align-items:center;margin:6px 0;padding:6px;border:1px dashed #2a364d;border-radius:8px}
pre{white-space:pre-wrap;background:#0c1322;padding:10px;border-radius:8px}
/* Layout helpers */
.loginwrap{display:flex;justify-content:center;align-items:flex-start;padding:18px}
.stack{display:flex;flex-direction:column;gap:16px;padding:18px}
.topbar .right{display:flex;gap:8px;align-items:center}
.error{color:#ff7575;margin-top:8px}
/* Mobile */
@media (max-width: 900px){
  .stack{padding:12px}
  .loginwrap{padding:12px}
}