:root{
  --bg:#0b0d17; --bg2:#10142a; --glass:rgba(255,255,255,.055); --line:rgba(130,150,255,.22);
  --txt:#e8ecff; --mut:#98a2c9; --blue:#00c8ff; --vio:#8b5cf6; --red:#ff5d7a; --ok:#4ade80;
  --grad:linear-gradient(135deg,#00b4ff,#8b5cf6);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:radial-gradient(1200px 600px at 85% -10%,rgba(139,92,246,.22),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(0,200,255,.16),transparent 60%),var(--bg);
  color:var(--txt);font-family:Tahoma,"Segoe UI",system-ui,sans-serif;font-size:14px;overflow:hidden}
.hidden{display:none!important}
.grow{flex:1}
.ic{width:20px;height:20px;flex:none}
.ic.huge{width:72px;height:72px;color:var(--vio);opacity:.7;filter:drop-shadow(0 0 18px rgba(139,92,246,.6))}
.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea{font:inherit;color:var(--txt)}
.brand{font-weight:800;font-size:20px;letter-spacing:1px;direction:ltr}
.brand span{color:var(--blue);text-shadow:0 0 12px rgba(0,200,255,.7)}
.brand.big{font-size:34px;text-align:center;margin-bottom:16px}
.brand small{font-size:14px;color:var(--mut);font-weight:400;letter-spacing:0}
.icon-btn{background:transparent;border:0;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;color:var(--mut);transition:.15s}
.icon-btn:hover{color:var(--blue);background:rgba(0,200,255,.1)}
.back{display:none}
.back .ic{transform:scaleX(1)}

/* auth */
.auth{height:100%;display:grid;place-items:center;padding:16px}
.card{width:100%;max-width:380px;border-radius:20px;padding:26px;box-shadow:0 0 40px rgba(139,92,246,.25)}
.tabs{display:flex;gap:6px;background:rgba(0,0,0,.25);padding:4px;border-radius:12px;margin-bottom:14px}
.tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:9px;color:var(--mut)}
.tabs button.on{background:var(--grad);color:#fff}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px}
.field input,.modal input,.searchbox input{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:0}
.field input:focus,.modal input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,200,255,.15)}
.primary{width:100%;border:0;border-radius:10px;padding:11px;background:var(--grad);color:#fff;font-weight:700;box-shadow:0 0 18px rgba(0,180,255,.35)}
.primary:disabled{opacity:.6}
.ghost{border:1px solid var(--line);background:transparent;border-radius:10px;padding:9px 14px}
.ghost:hover{border-color:var(--blue)}
.danger{border-color:rgba(255,93,122,.5);color:var(--red)}
.err{background:rgba(255,93,122,.12);border:1px solid rgba(255,93,122,.45);color:#ffb3c1;padding:9px 11px;border-radius:10px;margin-bottom:12px;font-size:13px}

/* layout */
.app{height:100%;display:grid;grid-template-columns:340px 1fr}
.side{display:flex;flex-direction:column;min-height:0;border-width:0 0 0 1px;border-radius:0}
.side-top{display:flex;align-items:center;gap:2px;padding:12px 14px 6px}
.searchbox{position:relative;padding:6px 12px 10px}
.searchbox .ic{position:absolute;inset-inline-start:24px;top:17px;color:var(--mut);width:17px;height:17px}
.searchbox input{padding-inline-start:38px}
.convs{flex:1;overflow-y:auto;padding:0 6px 10px}
.sec{font-size:11px;color:var(--mut);padding:10px 10px 4px}
.conv{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;cursor:pointer;border:1px solid transparent}
.conv:hover{background:rgba(255,255,255,.05)}
.conv.on{background:rgba(0,200,255,.1);border-color:rgba(0,200,255,.35)}
.cmid{flex:1;min-width:0}
.crow{display:flex;justify-content:space-between;gap:8px;align-items:center}
.crow b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.crow small{color:var(--mut);font-size:11px;white-space:nowrap}
.cprev{color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.badge{background:var(--grad);color:#fff;border-radius:99px;font-size:11px;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;font-weight:700}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:17px;color:#fff;flex:none;position:relative}
.avatar.on::after{content:"";position:absolute;bottom:0;inset-inline-end:0;width:11px;height:11px;border-radius:50%;background:var(--ok);border:2px solid var(--bg);box-shadow:0 0 8px var(--ok)}
.sm{width:34px;height:34px;font-size:14px}

.chat{min-width:0;min-height:0;display:flex;flex-direction:column;position:relative}
.empty{margin:auto;text-align:center;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:10px}
.pane{display:flex;flex-direction:column;height:100%;min-height:0}
.chead{display:flex;align-items:center;gap:10px;padding:8px 12px;border-width:0 0 1px 0;border-radius:0}
.hinfo{display:flex;flex-direction:column;flex:1;min-width:0;cursor:default}
.hinfo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hinfo small{color:var(--mut);font-size:12px}
.hinfo small.live{color:var(--blue)}
.hinfo.clickable{cursor:pointer}
.conn{background:rgba(255,93,122,.15);color:#ffb3c1;text-align:center;padding:5px;font-size:12px}
.list{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:5px;scroll-behavior:auto}
.older{align-self:center;margin-bottom:8px}

.msg{max-width:min(75%,560px);padding:7px 11px 5px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid var(--line);margin-right:auto;margin-left:0;position:relative;cursor:pointer;word-break:break-word;animation:pop .18s ease}
.msg.me{margin-left:auto;margin-right:0;background:linear-gradient(135deg,rgba(0,150,255,.35),rgba(139,92,246,.4));border-color:rgba(0,200,255,.4)}
.msg.flash{animation:flash 1.2s}
.msg.del{opacity:.55;font-style:italic;cursor:default}
.sname{font-size:12px;color:var(--blue);font-weight:700;margin-bottom:2px}
.txt{white-space:pre-wrap;line-height:1.6}
.txt a{color:#7fe3ff}
.meta{display:flex;gap:5px;justify-content:flex-end;align-items:center;font-size:10.5px;color:var(--mut);margin-top:1px;direction:ltr}
.msg.me .meta{color:#cfd6ff}
.tick .ic{width:15px;height:15px}
.tick.read{color:var(--blue)}
.quote{border-inline-start:3px solid var(--blue);padding:3px 8px;margin-bottom:5px;background:rgba(0,0,0,.2);border-radius:6px;font-size:12px;display:flex;flex-direction:column;cursor:pointer}
.quote b{color:var(--blue)}
.quote span{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pic{display:block;max-width:100%;max-height:320px;border-radius:10px;margin-bottom:4px;background:rgba(0,0,0,.25);min-width:120px;min-height:60px}
.file{display:flex;align-items:center;gap:8px;color:var(--txt);text-decoration:none;padding:6px 8px;background:rgba(0,0,0,.22);border-radius:10px;margin-bottom:4px}
.file small{color:var(--mut);direction:ltr}
.file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}

.ctxbar{display:flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(0,0,0,.3);border-top:1px solid var(--line)}
.ctxbar .ctxtxt{flex:1;min-width:0;border-inline-start:3px solid var(--vio);padding-inline-start:8px;display:flex;flex-direction:column}
.ctxbar b{font-size:12px;color:var(--vio)}
.ctxbar span{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer{display:flex;align-items:flex-end;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-width:1px 0 0 0;border-radius:0}
.composer textarea{flex:1;resize:none;max-height:140px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:14px;padding:9px 12px;outline:0;line-height:1.5}
.composer textarea:focus{border-color:var(--blue)}
.send{width:42px;height:42px;border-radius:50%;border:0;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 0 16px rgba(0,180,255,.4)}
.send .ic{transform:scaleX(-1)}
.send:disabled{opacity:.5}

.menu{position:fixed;z-index:50;background:#141836;border:1px solid var(--line);border-radius:12px;padding:5px;min-width:140px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;padding:9px 10px;border-radius:8px;text-align:start}
.menu button:hover{background:rgba(0,200,255,.12)}
.overlay{position:fixed;inset:0;background:rgba(3,4,12,.65);backdrop-filter:blur(4px);z-index:60;display:grid;place-items:center;padding:14px}
.modal{width:100%;max-width:420px;max-height:88vh;overflow-y:auto;background:#12162e;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 0 40px rgba(139,92,246,.3)}
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mhead b{font-size:16px}
.modal .field{margin-bottom:10px}
.modal .row{display:flex;gap:8px;margin-top:10px}
.modal .row>*{flex:1}
.urow{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:10px}
.urow.click{cursor:pointer}.urow.click:hover{background:rgba(255,255,255,.05)}
.urow .grow small{display:block;color:var(--mut);font-size:12px}
.mini{border:1px solid var(--line);background:transparent;border-radius:8px;padding:4px 8px;font-size:12px}
.mini:hover{border-color:var(--blue)}
.res{padding:8px;border-radius:10px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05)}
.res:hover{background:rgba(255,255,255,.05)}
.res small{color:var(--mut)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#1b1f45;border:1px solid var(--vio);padding:10px 16px;border-radius:12px;z-index:100;max-width:90%;box-shadow:0 0 24px rgba(139,92,246,.5)}

@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes flash{0%,60%{box-shadow:0 0 0 3px var(--blue)}100%{box-shadow:none}}
::-webkit-scrollbar{width:7px}::-webkit-scrollbar-thumb{background:rgba(140,150,255,.3);border-radius:9px}

@media(max-width:760px){
  .app{grid-template-columns:1fr}
  .chat{position:fixed;inset:0;background:var(--bg);transform:translateX(-100%);transition:transform .22s ease;z-index:20}
  .app.chat-open .chat{transform:none}
  .back{display:grid}
  .msg{max-width:86%}
}