:root{
    --bg:#0b0f14; --panel:#0f1420; --bd:#1e2633;
    --txt:#e8eef7; --mut:#9fb3c8; --c1:#22d3ee; --c2:#7c3aed;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial}
.chat-wrap{max-width:960px;margin:28px auto;padding:0 16px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;height:calc(100vh - 56px)}

.chat-top{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.brand{font-weight:700;font-size:18px;margin-right:auto}

.profile{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--bd);border-radius:10px;padding:8px 10px}
.lbl{display:flex;align-items:center;gap:6px;color:var(--mut);font-size:12px}
.inp{border:1px solid var(--bd);background:#0c131e;color:var(--txt);border-radius:8px;padding:6px 8px;min-width:160px}
.status{font-size:12px;color:#aab7cc}
.status.online{color:#4ade80}
.status.offline{color:#ef4444}

.log{background:var(--panel);border:1px solid var(--bd);border-radius:10px;padding:10px;overflow:auto}
.line{padding:6px 8px;border-radius:8px}
.line.me{background:#0c131e}
.sys{color:#aab7cc;font-style:italic}

.send{display:flex;gap:10px}
.msg{flex:1;border:1px solid var(--bd);background:#0c131e;color:var(--txt);border-radius:10px;padding:10px 12px}
.btn{border:1px solid var(--bd);background:linear-gradient(180deg,#131a26,#0d141e);color:var(--txt);border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.btn:disabled{opacity:.5;cursor:not-allowed}