:root{
  --bg:#0b1020; --panel:#111933cc; --ink:#e5e7eb; --muted:#94a3b8;
  --accent:#7dd3fc; --danger:#ef4444; --ok:#22c55e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:radial-gradient(900px 600px at 20% 10%, #101735 0%, #0b1020 55%, #070a16 100%); color:var(--ink); font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;}
.app{max-width:920px; margin:0 auto; padding:16px; display:grid; gap:16px}
.topbar{display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--panel); border:1px solid #ffffff22; border-radius:12px; backdrop-filter: blur(6px)}
.brand{margin:0; font-size:1.1rem; letter-spacing:.02em}
.status{margin-left:auto; font-size:.95rem; color:var(--muted)}
.room{padding:12px; background:var(--panel); border:1px solid #ffffff22; border-radius:12px; display:grid; gap:10px}
.room-line{display:flex; gap:10px; align-items:center}
#roomLabel{opacity:.9}
.op-status{font-size:.95rem; color:#cbd5e1}
.btn{appearance:none; border:1px solid #ffffff22; background:#0d1f36cc; color:var(--ink); padding:.5rem .8rem; border-radius:.6rem; cursor:pointer}
.btn.sm{padding:.35rem .6rem; font-size:.9rem}
.btn.primary{background: linear-gradient(180deg, #0e2741cc, #0d1f36cc); box-shadow:0 0 0 1px #6ee7b7aa inset}
.btn:disabled{opacity:.6; cursor:not-allowed}

.chat{display:grid; grid-template-rows:auto 1fr auto; gap:10px; min-height:340px; background:var(--panel); border:1px solid #ffffff22; border-radius:12px; padding:10px 12px}
.chat-head{display:flex; align-items:center; gap:8px}
.chat-title{font-weight:700}
.dot{width:10px; height:10px; border-radius:50%; background:#64748b; margin-left:auto; box-shadow:0 0 10px #64748b}
.dot.on{background:var(--ok); box-shadow:0 0 10px var(--ok)}
.dot.off{background:#ef4444; box-shadow:0 0 10px #ef4444}

.chat-msgs{overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; max-height:50vh}
.msg{max-width:78%; padding:.45rem .6rem; border-radius:.7rem; background:#0f2244; border:1px solid #ffffff18; box-shadow: inset 0 0 0 1px #0005}
.msg.you{align-self:flex-end; background:#12325a; border-color:#7dd3fc55}
.msg .meta{font-size:.75rem; color:#9ca3af; margin-bottom:2px}
.msg .text{white-space:pre-wrap; word-wrap:break-word}
.msg.sys{align-self:center; background:transparent; border:0; color:#9ca3af; font-style:italic}

.chat-form{display:flex; gap:8px}
.chat-form input{flex:1; padding:.55rem .7rem; border-radius:.5rem; border:1px solid #ffffff22; background:#0a1628; color:var(--ink); outline:none}
.chat-form .send{min-width:48px; border-radius:.5rem; border:1px solid #ffffff22; background:#0e2741; color:#bde7ff; cursor:pointer}

@media (max-width:520px){
  .app{padding:10px}
  .chat{min-height:280px}
}