*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:#0b1020;color:#e5e7eb;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial}
.topbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;background:#0d1730;padding:.6rem 1rem;border-bottom:1px solid #ffffff1a}
.brand{font-weight:800;color:#7dd3fc;letter-spacing:.3px}
.status{font-size:.9rem;color:#a5b4fc}
.layout{display:grid;grid-template-columns: minmax(260px, 340px) 1fr;gap:12px;padding:12px;height:calc(100vh - 52px)}
.left{display:flex;flex-direction:column;background:#111933cc;border:1px solid #ffffff1a;border-radius:12px;padding:10px;overflow:hidden}
.section-title{font-weight:700;color:#c8e9ff;margin:.2rem 0 .6rem}
.rooms-header{display:flex;gap:8px;margin-bottom:8px}
.btn{appearance:none;border:1px solid #ffffff22;background:#0e1a30;color:#e5e7eb;border-radius:8px;padding:.45rem .7rem;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#0e2741cc,#0d1f36cc);border-color:#5eead41a;box-shadow:0 0 0 1px #6ee7b7aa inset}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid #ffffff22;background:#0e1a30;color:#e5e7eb;text-decoration:none;cursor:pointer}
.rooms{flex:1;overflow:auto;border-radius:8px;border:1px solid #ffffff18;background:#0b1328;padding:6px}
.room{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-radius:8px;border:1px solid #ffffff18;background:#0d1a30;margin-bottom:6px}
.room .id{font-weight:700;color:#bde5ff}
.room .cnt{color:#94a3b8}
.right{display:flex;flex-direction:column;min-width:0;background:#111933cc;border:1px solid #ffffff1a;border-radius:12px;padding:10px}
.chat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.room-label,.peer-label{font-size:.9rem;color:#bcd7ff}
.chat{flex:1;overflow:auto;border-radius:8px;border:1px solid #ffffff18;background:#0b1328;padding:10px;display:flex;flex-direction:column;gap:8px}
.msg-row{display:flex;max-width:80%}
.msg-row.mine{align-self:flex-end;justify-content:flex-end}
.bubble{background:#13233e;border:1px solid #ffffff1a;border-radius:10px;padding:.45rem .6rem;box-shadow:0 6px 18px #0005}
.mine .bubble{background:#163537;border-color:#34d39966}
.meta{font-size:.75rem;color:#9ca3af;margin-bottom:2px}
.composer{display:flex;gap:8px;margin-top:8px}
.name{width:160px}
.msg{flex:1}
@media (max-width: 880px){.layout{grid-template-columns:1fr}.left{order:2;height:38vh}.right{order:1;height:56vh}}