*{box-sizing:border-box}body{color:#fff;background:#071526;margin:0;font-family:Arial,Helvetica,sans-serif}button,input,textarea{font:inherit}.app{grid-template-columns:280px 1fr;min-height:100vh;display:grid}.side{background:#0b1f35;border-left:1px solid #183957;padding:24px}.brand{margin-bottom:28px;font-size:24px;font-weight:800}.nav{gap:10px;display:grid}.nav button{color:#fff;text-align:right;cursor:pointer;background:#102b49;border:1px solid #21476e;border-radius:14px;padding:14px}.main{padding:24px}.top{justify-content:space-between;align-items:center;margin-bottom:22px;display:flex}.pill{background:#102b49;border:1px solid #21476e;border-radius:999px;padding:8px 14px}.grid{grid-template-columns:360px 1fr;gap:18px;display:grid}.panel{background:#0b1f35;border:1px solid #183957;border-radius:20px;overflow:hidden}.panel h3{border-bottom:1px solid #183957;margin:0;padding:18px}.rooms{padding:10px}.room{cursor:pointer;border-radius:14px;padding:14px}.room:hover,.room.active{background:#102b49}.chat{grid-template-rows:auto 1fr auto;height:72vh;display:grid}.chatHead{border-bottom:1px solid #183957;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;display:flex}.actions{flex-wrap:wrap;gap:8px;display:flex}.actions button{color:#fff;cursor:pointer;background:#173b63;border:1px solid #2c5d91;border-radius:12px;padding:10px 12px}.messages{flex-direction:column;gap:12px;padding:18px;display:flex;overflow:auto}.msg{background:#102b49;border:1px solid #21476e;border-radius:16px;max-width:76%;padding:12px 14px}.msg.me{background:#173b63;align-self:flex-end}.meta{opacity:.7;margin-bottom:5px;font-size:12px}.seen{opacity:.65;margin-top:6px;font-size:11px}.composer{border-top:1px solid #183957;grid-template-columns:1fr auto;gap:10px;padding:14px;display:grid}.composer textarea{resize:none;color:#fff;background:#071526;border:1px solid #21476e;border-radius:14px;min-height:54px;padding:12px}.composer button{color:#fff;cursor:pointer;background:#2f6fb0;border:0;border-radius:14px;padding:0 22px}.empty{opacity:.7;padding:30px}@media (max-width:900px){.app{grid-template-columns:1fr}.side{display:none}.grid{grid-template-columns:1fr}.chat{height:66vh}.main{padding:12px}}