:root{
  --bg:#071019;--panel:#0d1824;--panel2:#111f2e;--line:#23364a;--text:#e6eef7;--muted:#7890aa;
  --blue:#2c7ef7;--blue2:#1759ac;--green:#26c281;--red:#ef5b63;--amber:#e7ad44;
}
*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.hidden{display:none!important}
.auth-shell{height:100%;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 25% 20%,#12304f 0,transparent 35%),var(--bg)}
.auth-card{width:min(460px,100%);background:rgba(13,24,36,.96);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#33a0ff,#14365c);display:grid;place-items:center;font-weight:800}.brand h1{font-size:20px;margin:0}.brand small{display:block;color:var(--muted);margin-top:3px}
.tabs{display:flex;background:#09131e;border:1px solid var(--line);padding:4px;border-radius:10px;margin-bottom:18px}.tabs button{flex:1;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:7px;cursor:pointer}.tabs button.on{background:#17304b;color:#fff}
.form{display:grid;gap:12px}.field{display:grid;gap:6px}.field label{font-size:12px;color:#a7b9cb}.field input,.field select{border:1px solid #2b4258;background:#08121d;color:#fff;border-radius:9px;padding:11px 12px;outline:none}.field input:focus,.field select:focus{border-color:#3d8df0}.btn{border:1px solid #34516e;background:#132337;color:#dbe9f7;border-radius:8px;padding:9px 12px;cursor:pointer}.btn:hover{filter:brightness(1.1)}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.danger{border-color:#6c3540;color:#ff9ba1}.btn:disabled{opacity:.45;cursor:default}.error{color:#ff8c93;font-size:13px;min-height:18px}.hint{color:var(--muted);font-size:12px;line-height:1.5}
.app-shell{height:100%;display:grid;grid-template-rows:58px 1fr}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:#0a1520}.topbar .brand{margin:0}.top-actions{display:flex;align-items:center;gap:8px}.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #2e4357;border-radius:999px;padding:5px 9px;color:#a9bdd1;font-size:12px}.dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.dot.green{background:var(--green)}
.workspace{min-height:0;display:grid;grid-template-columns:360px 1fr}.sidebar{min-height:0;border-right:1px solid var(--line);display:grid;grid-template-rows:auto auto 1fr;background:#0a141f}.sidebar-head{padding:14px;border-bottom:1px solid var(--line)}.search{width:100%;padding:10px 12px;border:1px solid var(--line);background:#07111b;color:#fff;border-radius:9px}.filters{display:flex;gap:8px;margin-top:9px}.filters select{min-width:0;flex:1;padding:8px;border:1px solid var(--line);background:#0d1a27;color:#cfe0f0;border-radius:8px}.summary{padding:9px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;gap:13px}.conv-list{overflow:auto}.conv{padding:12px 14px;border-bottom:1px solid #16283a;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:7px}.conv:hover,.conv.active{background:#112337}.conv-title{font-weight:650;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-meta{font-size:11px;color:#6f8aa5;margin-top:3px}.conv-preview{font-size:12px;color:#93a8bc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-time{font-size:10px;color:#627c96}.unread{min-width:20px;height:20px;border-radius:10px;padding:0 6px;background:var(--blue);display:grid;place-items:center;font-size:10px;font-weight:700;margin-left:auto}.empty-list{padding:30px 16px;color:var(--muted);text-align:center}
.chat{min-width:0;min-height:0;display:grid;grid-template-rows:62px 1fr auto;background:#07111b}.chat.empty{place-items:center;display:grid}.chat-empty{color:#607990;text-align:center}.chat-head{display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:#0b1723}.chat-name{font-weight:700}.chat-sub{font-size:11px;color:var(--muted);margin-top:4px}.messages{overflow:auto;padding:24px;display:flex;flex-direction:column;gap:9px;background:linear-gradient(180deg,#08131e,#071019)}.msg{max-width:min(720px,72%);padding:9px 11px;border-radius:12px;border:1px solid #20364b;background:#102132;align-self:flex-start}.msg.out{align-self:flex-end;background:#16385b;border-color:#225b8e}.msg.deleted{opacity:.45}.msg-text{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.4}.msg-meta{margin-top:5px;font-size:10px;color:#7991a8;text-align:right}.composer{border-top:1px solid var(--line);padding:12px;display:grid;grid-template-columns:1fr auto;gap:10px;background:#0b1723}.composer textarea{resize:none;min-height:45px;max-height:130px;border:1px solid #29435c;background:#07121d;color:#fff;border-radius:10px;padding:11px;outline:none}.composer textarea:focus{border-color:#3c8ef3}.send-status{font-size:11px;color:var(--muted);padding:0 12px 8px;background:#0b1723}
.modal-back{position:fixed;inset:0;background:rgba(1,7,13,.72);display:grid;place-items:center;padding:24px;z-index:20}.modal{width:min(980px,96vw);max-height:88vh;display:grid;grid-template-rows:auto 1fr;background:#0e1a27;border:1px solid #294158;border-radius:14px;box-shadow:0 30px 100px #0008;overflow:hidden}.modal-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-body{overflow:auto;padding:16px}.table{width:100%;border-collapse:collapse;font-size:12px}.table th,.table td{padding:10px;border-bottom:1px solid #223449;text-align:left}.table th{color:#7f9ab4;font-weight:600}.table select{background:#091522;border:1px solid #2b435a;color:#fff;padding:7px;border-radius:7px}.status-green{color:var(--green)}.status-gray{color:#72879c}
@media(max-width:800px){.workspace{grid-template-columns:300px 1fr}.topbar .brand small{display:none}.msg{max-width:85%}}@media(max-width:620px){.workspace{grid-template-columns:1fr}.sidebar{display:block}.chat{position:fixed;inset:58px 0 0 0}.chat.mobile-hidden{display:none}.sidebar.mobile-hidden{display:none}}