:root{--bg:#0b0d12;--panel:#121722;--text:#fff;--muted:#97a0b3;--line:#263147;--accent:#7c5cff}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,#0b0d12,#0f1420);color:var(--text)}
.wrap{max-width:1100px;margin:0 auto;padding:32px}.card{background:rgba(18,23,34,.96);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
h1,h2{margin:0 0 12px}.muted,.status{color:var(--muted)} input{width:100%;margin:10px 0;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#0d1220;color:#fff}
button{padding:14px 18px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--accent),#5f7cff);color:#fff;font-weight:700;cursor:pointer}.hidden{display:none}
.layout{display:grid;grid-template-columns:320px 1fr;gap:18px;margin-top:18px}.sidebar,.chat{min-height:520px}.chatTop{font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
#usersList{display:flex;flex-direction:column;gap:10px;margin-top:14px}.user{padding:12px 14px;border:1px solid var(--line);border-radius:14px;cursor:pointer}.user:hover{background:#0d1220}
#messages{height:360px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:8px 0}.msg{max-width:75%;padding:12px 14px;border-radius:16px;background:#0d1220;border:1px solid var(--line)}.mine{align-self:flex-end;background:#1a2140}.composer{display:flex;gap:10px;margin-top:14px}.composer input{margin:0;flex:1}
@media (max-width: 800px){.layout{grid-template-columns:1fr}.wrap{padding:16px}}