:root { --bg:#0b0f17; --panel:#121826; --muted:#8b95a7; --text:#f5f7fb; --accent:#6ea8fe; --border:#232c3d; }
*{box-sizing:border-box} body{margin:0;background:linear-gradient(180deg,#0a0d14,#111827);color:var(--text);font:16px/1.4 Inter,system-ui,sans-serif}
.wrap{max-width:1100px;margin:40px auto;padding:20px}.card{background:rgba(18,24,38,.95);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.hidden{display:none!important}.muted{color:var(--muted)}.status{min-height:20px;color:#ffb4b4}.layout{display:grid;grid-template-columns:320px 1fr;gap:20px}.sidebar,.chat{min-height:70vh}
input,button{width:100%;border-radius:14px;border:1px solid var(--border);padding:14px 16px;font-size:15px} input{background:#0d1320;color:var(--text);margin:10px 0} button{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;font-weight:600;cursor:pointer}
#usersList{display:flex;flex-direction:column;gap:10px;margin-top:12px}.user{padding:12px;border:1px solid var(--border);border-radius:14px;background:#0d1320;cursor:pointer}.chatTop{font-weight:700;margin-bottom:12px}#messages{height:52vh;overflow:auto;padding:8px 0;display:flex;flex-direction:column;gap:10px}
.msg{max-width:75%;padding:12px 14px;border-radius:14px;background:#0d1320;border:1px solid var(--border)}.msg.mine{align-self:flex-end;background:#1d4ed8;border-color:#1d4ed8}.composer{display:grid;grid-template-columns:1fr 120px;gap:10px;margin-top:12px}
@media (max-width:800px){.layout{grid-template-columns:1fr}.sidebar,.chat{min-height:auto}#messages{height:40vh}}