*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07070c;
  --sf:#0f0f17;--sf2:#141420;--sf3:#1a1a28;
  --bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.13);
  --tx:#e4e4f0;--tx2:rgba(228,228,240,.55);--mt:rgba(228,228,240,.28);
  --dm:rgba(255,255,255,.18);
  --ac:#00c8ff;--ac-glow:rgba(0,200,255,.12);--ac-dim:rgba(0,200,255,.07);
  --gr:#22c55e;--rd:#f87171;--am:#f59e0b;
  --fn:'Outfit',sans-serif;--sb:234px;
  --r4:4px;--r8:8px;--r10:10px;--r12:12px;--r16:16px;
}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:var(--fn);font-size:14px;overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(0,200,255,.2);color:var(--tx)}
#canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px}
*{scrollbar-width:thin;scrollbar-color:var(--bd2) transparent}

/* ── LOADER ───────────────────────────────────────────────── */
#loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .4s}
.ld-logo{font-size:54px;font-weight:800;font-style:italic;color:var(--ac);letter-spacing:-.04em}
.ld-logo .w{color:#fff}
.ld-ring{width:28px;height:28px;border:2.5px solid rgba(255,255,255,.08);border-top-color:var(--ac);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── AUTH ─────────────────────────────────────────────────── */
#auth{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.auth-logo{font-size:52px;font-weight:800;font-style:italic;letter-spacing:-.04em;color:var(--ac);line-height:1;margin-bottom:6px}
.auth-logo .w{color:#fff}
.auth-sub{font-size:12px;color:var(--mt);margin-bottom:30px;letter-spacing:.03em}
.auth-card{background:rgba(15,15,23,.96);border:1px solid var(--bd2);border-radius:16px;padding:28px;width:100%;max-width:360px;backdrop-filter:blur(20px);box-shadow:0 24px 64px rgba(0,0,0,.8)}
.auth-dots{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:24px}
.auth-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.1);transition:all .2s}
.auth-dot.on{background:var(--ac);box-shadow:0 0 0 3px var(--ac-glow)}
.auth-dot.done{background:var(--ac);opacity:.4}
.astep{display:none;flex-direction:column;gap:13px}
.astep.on{display:flex;animation:up .18s ease both}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.field-lbl{font-size:10px;font-weight:700;color:var(--tx2);letter-spacing:.12em;text-transform:uppercase}
.at-wrap{display:flex;align-items:stretch;background:var(--sf2);border:1px solid var(--bd2);border-radius:10px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.at-wrap:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-glow)}
.at-pre{display:flex;align-items:center;padding:0 6px 0 14px;color:var(--ac);font-weight:700;font-size:15px;user-select:none;flex-shrink:0}
.at-wrap input{flex:1;background:transparent;border:none;outline:none;color:var(--tx);font-family:var(--fn);font-size:15px;font-weight:500;padding:11px 13px 11px 2px}
.at-wrap input::placeholder{color:var(--dm)}
.inp{background:var(--sf2);border:1px solid var(--bd2);border-radius:10px;color:var(--tx);font-family:var(--fn);font-size:15px;padding:11px 14px;outline:none;width:100%;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-glow)}
.inp::placeholder{color:var(--dm)}
.hint-box{font-size:12px;color:var(--tx2);line-height:1.6;padding:10px 12px;background:var(--sf2);border:1px solid var(--bd);border-radius:8px}
.hint-box em{color:var(--ac);font-style:normal;font-weight:600}
.auth-err{font-size:11px;color:var(--rd);min-height:14px}
.brow{display:flex;gap:8px}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{flex:1;background:var(--ac);color:#000;border:none;border-radius:9px;font-family:var(--fn);font-size:13px;font-weight:700;padding:11px 16px;cursor:pointer;transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.97)}
.btn-o{flex:1;background:none;border:1px solid var(--bd2);color:var(--tx2);border-radius:9px;font-family:var(--fn);font-size:13px;font-weight:500;padding:11px 16px;cursor:pointer;transition:border-color .15s,color .15s}
.btn-o:hover{border-color:rgba(255,255,255,.25);color:var(--tx)}
.btn-sm{background:var(--ac);color:#000;border:none;border-radius:8px;font-family:var(--fn);font-size:12px;font-weight:700;padding:7px 14px;cursor:pointer;transition:filter .15s}
.btn-sm:hover{filter:brightness(1.08)}
.btn-sm-o{background:none;border:1px solid var(--bd2);color:var(--tx2);border-radius:8px;font-family:var(--fn);font-size:12px;font-weight:500;padding:7px 14px;cursor:pointer;transition:border-color .15s,color .15s}
.btn-sm-o:hover{border-color:rgba(255,255,255,.25);color:var(--tx)}
.btn-rd{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.18);color:var(--rd);border-radius:8px;font-family:var(--fn);font-size:12px;font-weight:600;padding:7px 14px;cursor:pointer;transition:background .15s}
.btn-rd:hover{background:rgba(248,113,113,.15)}

/* ── SEMI-LOGIN ───────────────────────────────────────────── */
#semi-login{position:fixed;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.semi-card{background:rgba(15,15,23,.96);border:1px solid var(--bd2);border-radius:16px;padding:28px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(20px);box-shadow:0 24px 64px rgba(0,0,0,.8)}
.semi-welcome{font-size:11px;font-weight:700;color:var(--mt);letter-spacing:.1em;text-transform:uppercase}
.semi-user{font-size:22px;font-weight:800;color:var(--ac);letter-spacing:-.02em;margin-bottom:2px}
.beta-badge{display:inline-block;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);color:#f59e0b;font-size:10px;font-weight:700;padding:2px 9px;border-radius:5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}

/* ── APP ──────────────────────────────────────────────────── */
#app{display:none;height:100vh;position:relative;z-index:5}
#app.on{display:flex}

/* ── SIDEBAR ──────────────────────────────────────────────── */
#sidebar{width:var(--sb);flex-shrink:0;background:var(--sf);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden;transition:width .2s ease}
#sidebar.col{width:52px}
#sidebar.col .sb-sec-lbl,#sidebar.col .sb-iinfo,#sidebar.col .sb-me-name,#sidebar.col .sb-logout,#sidebar.col .sb-plus,#sidebar.col .sb-req-badge{display:none}
#sidebar.col .sb-item{padding:6px;justify-content:center;margin:1px 6px}
#sidebar.col .sb-foot{justify-content:center;padding:10px 0;gap:0}
#sidebar.col .sb-top{justify-content:center;padding:14px 0}
#sidebar.col .sb-logo{display:none}
.col-btn{background:none;border:none;color:var(--mt);font-size:13px;cursor:pointer;padding:4px 6px;border-radius:6px;transition:color .15s;font-family:var(--fn);line-height:1;flex-shrink:0}
.col-btn:hover{color:var(--tx)}
.sb-top{padding:14px 13px 12px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sb-logo{font-size:19px;font-weight:800;font-style:italic;color:var(--ac);letter-spacing:-.03em}
.sb-logo .w{color:#fff}
.sb-body{flex:1;overflow-y:auto;padding:8px 0;scrollbar-width:none}
.sb-body::-webkit-scrollbar{display:none}
.sb-sec{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 4px;gap:6px}
.sb-sec-lbl{font-size:10px;font-weight:700;color:var(--mt);letter-spacing:.1em;text-transform:uppercase;flex:1}
.sb-plus{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;background:transparent;border:1px solid var(--bd2);color:var(--tx2);font-size:14px;line-height:1;cursor:pointer;transition:all .15s;font-family:var(--fn);flex-shrink:0}
.sb-plus:hover{background:var(--ac);border-color:var(--ac);color:#000}
.sb-item{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:8px;margin:1px 6px;cursor:pointer;transition:background .12s;position:relative;user-select:none}
.sb-item:hover{background:rgba(255,255,255,.04)}
.sb-item.on{background:rgba(255,255,255,.07)}
.sb-item.on .sb-iname{color:var(--tx);font-weight:600}
.av{width:32px;height:32px;border-radius:50%;background:var(--sf3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-style:italic;flex-shrink:0;border:1.5px solid transparent;background-size:cover;background-position:center}
.av.cyan{border-color:rgba(0,200,255,.3)}
.hash-av{width:32px;height:32px;border-radius:9px;background:var(--sf3);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--mt);flex-shrink:0;border:1.5px solid var(--bd)}
.sb-item.on .hash-av{color:var(--ac);border-color:rgba(0,200,255,.25)}
.sb-iinfo{flex:1;min-width:0}
.sb-iname{font-size:13px;font-weight:500;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .1s}
.sb-iprev{font-size:11px;color:var(--mt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sb-badge{background:var(--ac);color:#000;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0;letter-spacing:-.02em}
.sb-req-badge{background:var(--am);color:#000;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0}
.fr-item{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:2px 6px;border-radius:8px;background:rgba(245,158,11,.04);border:1px solid rgba(245,158,11,.1)}
.fr-name{flex:1;font-size:12px;font-weight:600;color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-btns{display:flex;gap:4px;flex-shrink:0}
.sb-foot{border-top:1px solid var(--bd);padding:10px 11px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.sb-me-av{width:32px;height:32px;border-radius:50%;background:var(--ac-dim);border:1.5px solid rgba(0,200,255,.35);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--ac);flex-shrink:0;font-style:italic;cursor:pointer;background-size:cover;background-position:center;transition:opacity .15s}
.sb-me-av:hover{opacity:.85}
.sb-me-name{flex:1;font-size:13px;font-weight:600;color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-me-name span{color:var(--ac)}
.sb-logout{background:none;border:none;color:var(--mt);font-size:12px;cursor:pointer;font-family:var(--fn);transition:color .12s;padding:4px 6px;border-radius:5px;white-space:nowrap}
.sb-logout:hover{color:var(--tx)}
#global-search-btn.sb-logout:hover{color:var(--ac)}
.sb-friends-lbl{cursor:pointer;transition:color .15s}
.sb-friends-lbl:hover{color:var(--tx2)}
.sb-friends-lbl.on{color:var(--ac)}

/* ── MAIN AREA ────────────────────────────────────────────── */
#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:linear-gradient(180deg,#03030a 0%,#040a14 50%,#050e1e 100%)}
#chat{flex:1;display:flex;flex-direction:column;overflow:hidden}
#chan-hd{height:48px;flex-shrink:0;border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 18px;gap:10px;background:rgba(7,7,12,.85);backdrop-filter:blur(12px)}
.chan-pfx{font-size:17px;font-weight:700;color:var(--mt)}
.chan-nm{font-size:15px;font-weight:600;color:var(--tx)}
.chan-actions{display:flex;align-items:center;gap:2px;margin-left:auto}
.chan-btn{background:none;border:none;color:var(--mt);font-size:14px;cursor:pointer;padding:5px 7px;border-radius:6px;transition:color .12s,background .12s;font-family:var(--fn)}
.chan-btn:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.chan-btn.on{color:var(--ac)}
#welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--mt)}
.w-logo{font-size:52px;font-weight:800;font-style:italic;color:rgba(255,255,255,.06)}
.w-logo .w{color:rgba(255,255,255,.04)}
#welcome p{font-size:13px;color:var(--mt)}

/* ── MESSAGE LIST ─────────────────────────────────────────── */
.msg-list{flex:1;overflow-y:auto;padding:12px 16px 8px;display:flex;flex-direction:column;gap:0;background:transparent}
.day-sep{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--mt);margin:12px 0 6px;font-weight:600;letter-spacing:.04em}
.day-sep::before,.day-sep::after{content:'';flex:1;height:1px;background:var(--bd)}

/* ── MESSAGES ─────────────────────────────────────────────── */
.mrow{display:flex;gap:10px;padding:2px 4px;border-radius:8px;position:relative;transition:background .1s}
.mrow.own{flex-direction:row-reverse}
.mrow:hover{background:rgba(255,255,255,.02)}
.mrow.grouped{padding-top:1px}
.mav{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-style:italic;margin-top:3px;cursor:pointer;transition:opacity .12s;background-size:cover;background-position:center}
.mav:hover{opacity:.8}
.mav-spacer{width:32px;height:1px;flex-shrink:0}
.mbody{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.mrow.own .mbody{align-items:flex-end}
.mhd{display:flex;align-items:baseline;gap:7px;padding-bottom:2px}
.mrow.own .mhd{flex-direction:row-reverse}
.mnick{font-size:12px;font-weight:700;color:var(--ac);letter-spacing:.01em}
.mrow:not(.own) .mnick{color:var(--tx2)}
.mts{font-size:10px;color:var(--mt);opacity:0;transition:opacity .15s}
.mrow:hover .mts{opacity:1}
.bubble{padding:9px 13px;font-size:14px;line-height:1.55;word-break:break-word;white-space:pre-wrap;width:fit-content;max-width:min(480px,calc(100vw - 120px))}
.mrow.own .bubble{background:linear-gradient(145deg,#0d4f7e,#0b6fa0)!important;color:#ddf2ff!important;border-radius:16px 16px 4px 16px!important;border:none!important}
.mrow:not(.own) .bubble{background:var(--sf2)!important;border:1px solid var(--bd)!important;border-radius:16px 16px 16px 4px!important;color:var(--tx)!important}
.bubble mark{background:rgba(0,200,255,.2);color:var(--ac);border-radius:2px;padding:0 2px}

/* ── RECEIPTS ─────────────────────────────────────────────── */
.rcpt{display:flex;align-items:center;justify-content:flex-end;gap:5px;height:16px;padding:0 2px;overflow:hidden}
.rcpt-lbl{font-size:9px;color:var(--mt);white-space:nowrap;transition:opacity .2s}
.beam-wrap{height:2px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;transition:width .35s cubic-bezier(.4,0,.2,1)}
.beam-fill{height:100%;border-radius:2px;width:0%;transition:width .5s ease}
.rcpt-avs{display:flex;gap:2px;align-items:center}
.rcpt-av{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:700;font-style:italic;border:1.5px solid var(--sf2);transform:scale(0);opacity:0}
@keyframes avpop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.3);opacity:1}100%{transform:scale(1);opacity:1}}

/* ── HOVER ACTIONS ────────────────────────────────────────── */
.msg-actions{position:absolute;top:-40px;display:flex;gap:1px;padding:3px 5px;background:var(--sf);border:1px solid var(--bd2);border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .12s 160ms,transform .1s 160ms;transform:translateY(3px);z-index:20;white-space:nowrap}
.msg-actions::after{content:'';position:absolute;top:100%;left:0;right:0;height:10px}
.mrow:hover .msg-actions,.msg-actions:hover{opacity:1;pointer-events:all;transform:translateY(0);transition:opacity .08s 0ms,transform .08s 0ms}
.mrow.own .msg-actions{right:4px;left:auto}
.mrow:not(.own) .msg-actions{left:42px;right:auto}
.action-btn{background:none;border:none;cursor:pointer;padding:3px 5px;border-radius:6px;font-size:14px;line-height:1;transition:background .1s;color:var(--tx2)}
.action-btn:hover{background:rgba(255,255,255,.08);color:var(--tx)}
.hover-react-picker{display:flex;gap:0px}
.act-divider{width:1px;background:var(--bd2);margin:2px 4px;flex-shrink:0}

/* ── REACTIONS ────────────────────────────────────────────── */
.msg-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;padding:0 2px}
.reaction-pill{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;background:var(--sf2);border:1px solid var(--bd);border-radius:20px;font-size:12px;cursor:pointer;transition:border-color .1s,background .1s;user-select:none;height:24px}
.reaction-pill:hover{border-color:var(--ac);background:var(--ac-dim)}
.reaction-pill.mine{border-color:rgba(0,200,255,.4);background:rgba(0,200,255,.08);color:var(--ac)}
.reaction-pill .rc{font-size:11px;color:var(--tx2);font-weight:600}
.reaction-pill.mine .rc{color:var(--ac)}

/* ── EMOJI PICKER ─────────────────────────────────────────── */
.emoji-picker{position:absolute;background:var(--sf);border:1px solid var(--bd2);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;z-index:30;box-shadow:0 12px 40px rgba(0,0,0,.7);min-width:220px}
.emoji-btn{font-size:18px;cursor:pointer;padding:4px;border-radius:6px;transition:background .1s,transform .08s;line-height:1}
.emoji-btn:hover{background:var(--sf2);transform:scale(1.2)}

/* ── TYPING ───────────────────────────────────────────────── */
.typing-bar{padding:0 18px;display:flex;align-items:center;overflow:hidden;transition:max-height .2s ease,padding .2s ease;max-height:0;flex-shrink:0}
.typing-bar.on{max-height:40px;padding:4px 18px}
.typing-bubble{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:var(--sf2);border:1px solid var(--bd);border-radius:20px;font-size:12px;color:var(--tx2)}
.dots{display:flex;gap:3px;align-items:center}
.dots i{width:6px;height:6px;background:var(--ac);border-radius:50%;animation:bounce 1.2s ease-in-out infinite;display:block;opacity:.8}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

/* ── REPLY BAR ────────────────────────────────────────────── */
.reply-bar{display:none;padding:6px 14px 0;align-items:center;gap:8px;font-size:12px;color:var(--mt)}
.reply-bar.on{display:flex}
.reply-preview{flex:1;padding:4px 10px;background:var(--sf2);border-left:2px solid var(--ac);border-radius:0 6px 6px 0;font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-preview strong{color:var(--ac)}
.reply-cancel{background:none;border:none;color:var(--mt);font-size:16px;cursor:pointer;padding:0 2px;transition:color .1s}
.reply-cancel:hover{color:var(--rd)}
.quoted{background:var(--sf2);border-left:2px solid var(--ac);border-radius:0 5px 5px 0;padding:4px 8px;margin-bottom:4px;font-size:11px;color:var(--mt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.quoted strong{color:var(--ac)}

/* ── INPUT AREA ───────────────────────────────────────────── */
.inp-wrap{display:flex;align-items:flex-end;gap:8px;padding:8px 14px 12px;background:rgba(7,7,12,.9);flex-shrink:0;border-top:1px solid rgba(0,200,255,.12);position:relative}
textarea.minp{flex:1;background:rgba(0,200,255,.03);border:1px solid rgba(0,200,255,.1);border-radius:10px;color:var(--tx);font-family:var(--fn);font-size:14px;padding:9px 13px;outline:none;resize:none;min-height:40px;max-height:120px;overflow-y:auto;transition:border-color .15s,box-shadow .15s;line-height:1.5;scrollbar-width:none;-ms-overflow-style:none}
textarea.minp::-webkit-scrollbar{display:none}
textarea.minp:focus{border-color:rgba(0,200,255,.35);box-shadow:0 0 0 3px rgba(0,200,255,.06)}
textarea.minp::placeholder{color:var(--mt)}
.sbtn{width:38px;height:38px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#00c8ff,#0088ee);border:none;color:#000;font-size:17px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s,transform .1s;box-shadow:0 2px 12px rgba(0,200,255,.25)}
.sbtn:hover{filter:brightness(1.1)}.sbtn:active{transform:scale(.92)}
.upload-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;background:none;border:none;color:var(--tx);font-family:var(--fn);font-size:13px;cursor:pointer;border-radius:8px;text-align:left;white-space:nowrap;transition:background .1s}
.upload-opt:hover{background:rgba(255,255,255,.06)}

/* ── MODALS ───────────────────────────────────────────────── */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:20;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
.ov.on{display:flex}
.modal{background:var(--sf);border:1px solid var(--bd2);border-radius:14px;padding:22px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 64px rgba(0,0,0,.8)}
.modal-hd{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;color:var(--tx)}
.mclose{background:none;border:none;color:var(--mt);font-size:22px;cursor:pointer;font-family:var(--fn);padding:0 3px;line-height:1;transition:color .1s}
.mclose:hover{color:var(--tx)}
.mlbl{font-size:10px;font-weight:700;color:var(--tx2);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:5px}
.minput{background:var(--sf2);border:1px solid var(--bd2);border-radius:8px;color:var(--tx);font-family:var(--fn);font-size:14px;padding:10px 12px;outline:none;width:100%;transition:border-color .15s,box-shadow .15s}
.minput:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-glow)}
.minput::placeholder{color:var(--mt)}
.merr{font-size:11px;color:var(--rd);min-height:14px}
.mhint{font-size:11px;color:var(--tx2);line-height:1.6;padding:8px 11px;background:var(--sf2);border-radius:7px;border:1px solid var(--bd)}
.mhint em{color:var(--ac);font-style:normal;font-weight:600}
#confirm-wrap{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
#confirm-wrap.on{display:flex}
#confirm-box{background:var(--sf);border:1px solid var(--bd2);border-radius:14px;padding:24px;max-width:320px;width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.8)}
#confirm-msg{font-size:14px;color:var(--tx);line-height:1.55}

/* ── PIN BAR ──────────────────────────────────────────────── */
.pin-bar{display:none;align-items:center;gap:8px;padding:6px 16px;background:rgba(0,200,255,.04);border-bottom:1px solid rgba(0,200,255,.1);font-size:12px;color:var(--ac);flex-shrink:0;cursor:pointer}
.pin-bar.on{display:flex}
.pin-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}

/* ── TOAST ────────────────────────────────────────────────── */
#toast-wrap{position:fixed;bottom:20px;right:20px;z-index:500;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--sf);border:1px solid var(--bd2);border-radius:10px;padding:11px 16px;font-size:13px;color:var(--tx);box-shadow:0 8px 32px rgba(0,0,0,.7);display:flex;align-items:center;gap:10px;max-width:300px;pointer-events:auto;animation:tIn .2s ease both}
.toast.success{border-left:3px solid var(--gr)}
.toast.error{border-left:3px solid var(--rd)}
.toast.info{border-left:3px solid var(--ac)}
.toast.warn{border-left:3px solid var(--am)}
@keyframes tIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes tOut{to{opacity:0;transform:translateX(14px)}}

/* ── MEMBER PANEL ─────────────────────────────────────────── */
.member-panel{width:200px;flex-shrink:0;border-left:1px solid var(--bd);background:var(--sf);display:none;flex-direction:column;overflow:hidden}
.member-panel.on{display:flex}
.mp-head{padding:13px 14px 9px;font-size:10px;font-weight:700;color:var(--mt);letter-spacing:.12em;text-transform:uppercase;flex-shrink:0;border-bottom:1px solid var(--bd)}
.mp-list{flex:1;overflow-y:auto;padding:6px 0}
.mp-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;border-radius:7px;transition:background .1s;margin:1px 6px}
.mp-item:hover{background:var(--sf2)}
.mp-av{width:26px;height:26px;border-radius:50%;background:var(--sf3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-style:italic;color:var(--tx2);flex-shrink:0;position:relative;background-size:cover}
.online-dot{position:absolute;bottom:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:var(--gr);border:1.5px solid var(--sf)}
.mp-name{font-size:12px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-kick{background:none;border:none;color:var(--mt);font-size:11px;cursor:pointer;padding:2px 6px;border-radius:4px;margin-left:auto;transition:color .1s,background .1s;font-family:var(--fn);display:none}
.mp-item:hover .mp-kick{display:block}
.mp-kick:hover{color:var(--rd);background:rgba(248,113,113,.08)}

/* ── SETTINGS ─────────────────────────────────────────────── */
.set-nav{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 14px;font-size:13px;font-family:var(--fn);color:var(--mt);cursor:pointer;border-radius:0;transition:color .15s,background .12s}
.set-nav:hover{color:var(--tx);background:rgba(255,255,255,.04)}
.set-nav.on{color:var(--tx);background:rgba(255,255,255,.06);font-weight:600}
.set-pane{display:none;flex-direction:column;gap:14px}
.set-pane.on{display:flex}
.sec-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--sf2);border:1px solid var(--bd);border-radius:9px;gap:12px}
.sec-title{font-size:13px;font-weight:600;color:var(--tx)}
.sec-sub{font-size:11px;color:var(--mt);margin-top:2px}

/* ── FRIENDS PAGE ─────────────────────────────────────────── */
#friends-page{flex:1;overflow:hidden;display:none;flex-direction:column}
.fp-page{display:flex!important;flex-direction:column;height:100%}
.fp-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--sf2);border:1px solid var(--bd);border-radius:10px;margin-bottom:6px;transition:border-color .15s}
.fp-item:hover{border-color:var(--bd2)}
.fp-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;font-style:italic;flex-shrink:0;background-size:cover}
.fp-info{flex:1;min-width:0}
.fp-name{font-size:13px;font-weight:600;color:var(--tx)}
.fp-sub{font-size:11px;color:var(--mt);margin-top:1px}
.fp-btns{display:flex;gap:6px;flex-shrink:0}
.fp-empty{font-size:13px;color:var(--mt);padding:12px 4px;font-style:italic}

/* ── MISC COMPONENTS ──────────────────────────────────────── */
.search-bar{display:none;align-items:center;gap:8px;flex:1}
.search-bar.on{display:flex}
.search-inp{flex:1;background:var(--sf2);border:1px solid var(--bd);border-radius:7px;color:var(--tx);font-family:var(--fn);font-size:13px;padding:6px 11px;outline:none;transition:border-color .15s}
.search-inp:focus{border-color:var(--ac)}
.search-count{font-size:11px;color:var(--mt);white-space:nowrap}
.msg-highlight{background:rgba(0,200,255,.06)!important}
.msg-hidden{display:none!important}
.mention{color:var(--ac);font-weight:700;background:rgba(0,200,255,.08);border-radius:3px;padding:0 2px}
.mention.self{background:rgba(0,200,255,.18)}
.mention-popup{position:absolute;bottom:100%;left:0;background:var(--sf);border:1px solid var(--bd2);border-radius:10px;padding:5px;z-index:50;min-width:170px;box-shadow:0 10px 30px rgba(0,0,0,.7);max-height:200px;overflow-y:auto}
.mention-item{padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--tx2);display:flex;align-items:center;gap:8px}
.mention-item:hover,.mention-item.active{background:var(--sf2);color:var(--tx)}
.gsearch-result{padding:10px 12px;background:var(--sf2);border:1px solid var(--bd);border-radius:9px;cursor:pointer;transition:border-color .1s;margin-bottom:4px}
.gsearch-result:hover{border-color:var(--ac)}
.gsearch-chat{font-size:10px;color:var(--ac);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.gsearch-msg{font-size:13px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsearch-msg mark{background:rgba(0,200,255,.18);color:var(--ac);border-radius:2px;padding:0 2px}
.gsearch-meta{font-size:11px;color:var(--mt);margin-top:3px}
.invite-code-display{font-family:monospace;font-size:22px;font-weight:700;letter-spacing:.2em;text-align:center;background:var(--sf2);border:1px solid var(--bd);border-radius:9px;padding:14px;color:var(--ac);cursor:pointer;transition:background .15s}
.invite-code-display:hover{background:var(--sf3)}
.session-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--sf2);border:1px solid var(--bd);border-radius:9px}
.session-row.current{border-color:rgba(0,200,255,.3)}
.session-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center}
.session-info{flex:1;min-width:0}
.session-device{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-time{font-size:11px;color:var(--mt);margin-top:1px}
.session-current-badge{font-size:10px;padding:2px 8px;border-radius:8px;background:var(--ac-dim);color:var(--ac);border:1px solid rgba(0,200,255,.25);font-weight:600;flex-shrink:0}
.color-grid{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0}
.color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;transition:transform .15s,box-shadow .15s;border:2px solid transparent}
.color-swatch:hover{transform:scale(1.15)}
.color-swatch.selected{border-color:#fff;box-shadow:0 0 0 2px var(--ac)}
.prof-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--mt);font-family:var(--fn);font-size:12px;font-weight:600;padding:8px 12px 10px;cursor:pointer;transition:color .15s,border-color .15s;letter-spacing:.02em}
.prof-tab:hover{color:var(--tx2)}
.prof-tab.on{color:var(--ac);border-bottom-color:var(--ac)}
.prof-tab-panel{display:none}
.prof-tab-panel.on{display:flex;flex-direction:column}
.dm-state{display:none;flex-direction:column;gap:10px}
.dm-state.on{display:flex;animation:up .15s ease both}
.dm-found{display:flex;align-items:center;gap:10px;padding:10px;background:var(--sf2);border:1px solid var(--bd);border-radius:9px}
.dm-found-av{width:36px;height:36px;border-radius:50%;background:var(--sf3);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-style:italic;color:var(--ac);border:1px solid rgba(0,200,255,.25);flex-shrink:0}
.dm-found-info{flex:1}
.dm-found-name{font-size:14px;font-weight:600;color:var(--tx)}
.dm-found-status{font-size:11px;color:var(--mt)}
.disappear-opts{display:flex;flex-wrap:wrap;gap:6px}
.disappear-opt{padding:5px 12px;border:1px solid var(--bd);border-radius:7px;font-size:12px;font-weight:500;color:var(--tx2);cursor:pointer;transition:all .15s;background:none;font-family:var(--fn)}
.disappear-opt:hover{border-color:var(--ac);color:var(--ac)}
.disappear-opt.on{border-color:var(--ac);background:var(--ac-dim);color:var(--ac)}
.msg-expire{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:1px 5px;border-radius:8px;background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.2);margin-top:2px;flex-shrink:0}
.msg-expire svg{width:10px;height:10px;flex-shrink:0}
.msg-expire-critical{background:rgba(239,68,68,.1);color:var(--rd);border-color:rgba(239,68,68,.2)}
@keyframes clockTick{0%,100%{opacity:1}50%{opacity:.5}}
.msg-expire-critical svg{animation:clockTick 1s ease-in-out infinite}
.totp-code{font-family:monospace;font-size:24px;letter-spacing:.3em;text-align:center;background:var(--sf2);border:1px solid var(--bd);border-radius:9px;padding:12px;color:var(--ac)}
.secret-display{font-family:monospace;font-size:11px;word-break:break-all;color:var(--tx2);background:var(--sf2);border:1px solid var(--bd);border-radius:7px;padding:8px;text-align:center}
.presence-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.tut-row{display:flex;align-items:flex-start;gap:12px;padding:10px;background:var(--sf2);border:1px solid var(--bd);border-radius:9px}
.tut-icon{width:32px;height:32px;border-radius:8px;background:var(--sf3);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--ac);flex-shrink:0;font-style:italic}
.tut-text{font-size:13px;color:var(--tx2);line-height:1.5}
.tut-text strong{color:var(--tx);font-weight:600}

/* ── IMAGES ───────────────────────────────────────────────── */
.msg-img{max-width:280px;max-height:320px;border-radius:10px;cursor:pointer;display:block;object-fit:cover;border:1px solid rgba(255,255,255,.07)}
.msg-img-wrap{position:relative;display:inline-block}
.msg-img-loading{width:180px;height:120px;border-radius:10px;background:var(--sf2);display:flex;align-items:center;justify-content:center;color:var(--mt);font-size:12px;border:1px solid var(--bd)}
.img-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.img-lightbox img{max-width:92vw;max-height:92vh;border-radius:8px;object-fit:contain}

/* ── ACCOUNT SWITCHER ─────────────────────────────────────── */
.acct-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;background:none;border:none;color:var(--tx);cursor:pointer;font-family:var(--fn);transition:background .1s;width:100%}
.acct-item:hover{background:rgba(255,255,255,.05)}
.acct-item.current{background:rgba(0,200,255,.05)}
.acct-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;font-style:italic;flex-shrink:0}

/* ── THEMES ───────────────────────────────────────────────── */
.theme-swatches{display:flex;flex-wrap:wrap;gap:8px}
.theme-swatch{width:44px;height:44px;border-radius:10px;cursor:pointer;border:2px solid rgba(255,255,255,.08);transition:border-color .15s,transform .1s;position:relative}
.theme-swatch:hover{transform:scale(1.1)}
.theme-swatch.selected{border-color:var(--ac)}
.theme-swatch.selected::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9)}

/* ── SIDEBAR TYPING DOTS ──────────────────────────────────── */
.sb-typing-dots{display:inline-flex;gap:3px;align-items:center;height:14px}
.sb-typing-dots i{width:4px;height:4px;background:var(--ac);border-radius:50%;display:block;opacity:.7;animation:bounce 1.2s ease-in-out infinite}
.sb-typing-dots i:nth-child(2){animation-delay:.15s}
.sb-typing-dots i:nth-child(3){animation-delay:.3s}

/* ── FILE CARDS ───────────────────────────────────────────── */
.file-stream-badge{font-size:10px;padding:1px 6px;border-radius:5px;background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.2);font-weight:600}

/* ── TOGGLE ───────────────────────────────────────────────── */
input:checked + #stay-toggle-track{background:var(--ac-dim);border-color:var(--ac)}
input:checked ~ #stay-toggle-thumb{transform:translateX(18px);background:var(--ac)}
#discreet-track{transition:background .2s,border-color .2s}
#discreet-thumb{transition:transform .2s,background .2s}

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes msgSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.mrow:last-child{animation:msgSlideIn .2s cubic-bezier(.25,.46,.45,.94) both}

/* ── TWEMOJI ──────────────────────────────────────────────── */
img.emoji{height:1.2em;width:1.2em;vertical-align:-.2em;display:inline-block}
.reaction-pill img.emoji{height:1em;width:1em;vertical-align:-.1em}
.action-btn img.emoji{height:1em;width:1em;vertical-align:-.1em}

/* ── PRODUCTION POLISH ────────────────────────────────────── */
.ep-cat:hover{background:rgba(255,255,255,.07)!important}
.ep-em:active{transform:scale(.85)}
#ep-root input::placeholder{color:var(--mt)}
.msg-actions .action-btn[data-action="delete"]{opacity:.7}
.msg-actions .action-btn[data-action="delete"]:hover{opacity:1;color:var(--rd)!important;background:rgba(248,113,113,.1)!important}
.reaction-pill:active{transform:scale(.92)}
.sbtn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.minput:focus-visible{outline:none}
.sb-item:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.emoji-picker{min-width:240px}
.hover-react-picker .action-btn:hover{transform:scale(1.2)}
.hover-react-picker .action-btn{transition:transform .1s,background .1s}
.auth-card input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--sf2) inset!important;-webkit-text-fill-color:var(--tx)!important}
.inp:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--sf2) inset!important;-webkit-text-fill-color:var(--tx)!important}
.upload-opt:active{background:rgba(255,255,255,.1)}
.sb-item:active{background:rgba(255,255,255,.09)}