:root{
  --bg:#0b1020; --panel:#111933cc; --ink:#e5e7eb; --muted:#9ca3af;
  --accent:#7dd3fc; --bad:#f87171; --good:#34d399;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 20% 10%, #101735 0%, #0b1020 55%, #070a16 100%),
              radial-gradient(800px 600px at 80% 80%, #0c1228 0%, #0b1020 60%, #070a16 100%);
}
.btn{appearance:none; border:1px solid #ffffff22; color:var(--ink); background:var(--panel);
  padding:.55rem .8rem; border-radius:.7rem; cursor:pointer; box-shadow:0 6px 18px #0005 inset,0 0 0 1px #0006;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,#0e2741cc,#0d1f36cc); border-color:#5eead41a; box-shadow:0 0 0 1px #6ee7b7aa inset,0 10px 30px #0008}

.container{display:grid; grid-template-columns:280px 1fr; gap:12px; padding:12px; height:100vh;}
.sidebar{background:var(--panel); border:1px solid #ffffff22; border-radius:.8rem; display:flex; flex-direction:column; min-height:0;}
.sidebar .row{display:flex; gap:8px; padding:10px; border-bottom:1px solid #ffffff22; align-items:center}
.rooms{flex:1; overflow:auto; padding:8px; display:flex; flex-direction:column; gap:8px;}
.room{padding:.5rem .6rem; border:1px solid #ffffff22; border-radius:.6rem; background:#0c1426; cursor:pointer; display:flex; justify-content:space-between; align-items:center}
.room:hover{outline:1px solid #7dd3fc55}
.room .pill{font-size:.75rem; padding:.1rem .4rem; border-radius:.4rem; border:1px solid #ffffff2a; color:#b3e1ff; background:#0b345533}

.main{background:var(--panel); border:1px solid #ffffff22; border-radius:.8rem; display:grid; grid-template-rows:auto 1fr auto; min-height:0;}
.header{display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid #ffffff22}
.status{margin-left:auto; font-size:.9rem; color:#bcd7ff}
.chat{padding:10px; overflow:auto; display:flex; flex-direction:column; gap:8px;}
.msg{max-width:70%; padding:.5rem .7rem; border-radius:.7rem; background:#0e1a30; border:1px solid #ffffff22; word-wrap:break-word}
.me{align-self:flex-end; background:#0f2838; border-color:#7dd3fc66}
.op{align-self:flex-start; background:#151a2b; border-color:#ffffff22}
.sys{align-self:center; opacity:.8; font-size:.85rem}
.msg small{display:block; color:#9ca3af; font-size:.75rem; margin-top:.25rem}
.composer{display:flex; gap:8px; padding:10px; border-top:1px solid #ffffff22}
.composer input{flex:1; padding:.6rem .7rem; border-radius:.6rem; border:1px solid #ffffff22; background:#0c1426; color:var(--ink); outline:none}
.composer .mic{width:42px; border-radius:50%}
.composer .send{}

@media (max-width: 900px){
  .container{grid-template-columns:1fr; grid-template-rows: 260px 1fr; height:100svh}
  .sidebar{order:1}
  .main{order:2}
}