:root{--ink:#231942;--accent:#5e60ce;--soft:#ece9fb;--bg:#f6f5fb;--line:#dedaf0;font-family:system-ui,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:#1e1b2e;margin:0}input{border:1px solid var(--line);font:inherit;background:#fff;border-radius:8px;padding:.55rem .7rem}button{background:var(--accent);color:#fff;font:inherit;cursor:pointer;border:0;border-radius:8px;padding:.55rem 1rem}button:disabled{opacity:.5;cursor:default}button.ghost{color:inherit;background:0 0;border:1px solid;padding:.2rem .55rem}button.link{color:var(--accent);background:0 0;padding:0}.dot{background:#ffd166;border-radius:50%;width:.7rem;height:.7rem;margin-right:.4rem;display:inline-block}.error{color:#b3261e;margin:.4rem 0}.login{background:#fff;border-radius:16px;gap:.8rem;max-width:340px;margin:6rem auto;padding:2rem;display:grid;box-shadow:0 8px 30px #2319421f}.login h1{margin:0;font-size:1.4rem}.login p{color:#5d5878;margin:0;font-size:.9rem}.chat{grid-template-columns:230px 1fr 190px;height:100vh;display:grid}.chat aside{background:var(--ink);color:#ddd9f5;flex-direction:column;gap:1rem;padding:1rem;display:flex}.chat aside h2{color:#fff;margin:0;font-size:1.1rem}.rooms{gap:.2rem;margin:0;padding:0;list-style:none;display:grid}.rooms li{cursor:pointer;border-radius:8px;padding:.5rem .7rem}.rooms li:hover{background:#ffffff14}.rooms li.active{background:var(--accent);color:#fff}.me{justify-content:space-between;align-items:center;margin-top:auto;font-size:.9rem;display:flex}.pane{flex-direction:column;min-width:0;display:flex}.pane header{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;padding:.9rem 1.2rem;display:flex}.status{color:#8a86a5;font-size:.8rem}.status.live{color:#1b8a5a}.status.offline{color:#b3261e}.messages{flex-direction:column;flex:1;gap:.6rem;padding:1rem 1.2rem;display:flex;overflow-y:auto}.more{color:var(--accent);align-self:center}.msg{border:1px solid var(--line);background:#fff;border-radius:12px;align-self:flex-start;gap:.15rem;max-width:70%;padding:.5rem .8rem;display:grid}.msg.mine{background:var(--soft);align-self:flex-end}.who{font-size:.8rem;font-weight:600}.who small{color:#8a86a5;margin-left:.4rem;font-weight:400}.body{white-space:pre-wrap;overflow-wrap:anywhere}.empty{color:#8a86a5;text-align:center;margin-top:2rem}.composer{border-top:1px solid var(--line);background:#fff;gap:.6rem;padding:.8rem 1.2rem;display:flex}.composer input{flex:1}.people h3{margin:0;font-size:.95rem}.people ul{gap:.3rem;margin:0;padding:0;list-style:none;display:grid}