*,*::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 14px 13px;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:10px;padding:7px 12px;border-radius:10px;margin:2px 8px;cursor:pointer;transition:background .12s;position:relative;user-select:none}
.sb-item:hover{background:rgba(255,255,255,.04)}
.sb-item.on{background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.1);border-radius:10px}
.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:#04040e}
#chat{flex:1;display:flex;flex-direction:column;overflow:hidden}
#chan-hd{height:52px;flex-shrink:0;border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 18px;gap:10px;background:rgba(7,7,12,.9);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--bd)}
.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:14px 20px 10px;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,#0d5585,#0a72a8)!important;color:#ddf2ff!important;border-radius:18px 18px 5px 18px!important;border:none!important;box-shadow:0 2px 12px rgba(0,100,180,.2)!important}
.mrow:not(.own) .bubble{background:var(--sf2)!important;border:1px solid var(--bd)!important;border-radius:18px 18px 18px 5px!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:18px;padding:0 2px;overflow:hidden}
.rcpt-lbl{font-size:9px;color:var(--mt);white-space:nowrap;transition:opacity .2s}
.beam-wrap{height:2.5px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;transition:width .32s cubic-bezier(.4,0,.2,1);flex-shrink:0}
.beam-fill{height:100%;border-radius:2px;width:0;transition:width .45s cubic-bezier(.4,0,.2,1),background .28s ease}
.beam-fill-sent{animation:beamSent .55s cubic-bezier(.4,0,.2,1) .08s both}
@keyframes beamSent{from{width:0;background:rgba(255,255,255,.1)}to{width:100%;background:rgba(255,255,255,.28)}}
.rcpt-lbl{font-size:10px;color:var(--mt);white-space:nowrap;transition:opacity .2s ease}
.rcpt-avs{display:flex;align-items:center}
.rcpt-av{
  width:18px;height:18px;border-radius:50%;
  font-size:7px;font-weight:700;font-style:italic;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  overflow:hidden;
  border:2px solid var(--bg);
  margin-left:-5px;
  opacity:0;transform:scale(0);
  box-sizing:content-box;
}
.rcpt-avs .rcpt-av:first-child{margin-left:0}
@keyframes rcptAvIn{
  0%  {opacity:0;transform:scale(0) translateY(2px)}
  55% {opacity:1;transform:scale(1.22) translateY(-3px)}
  78% {transform:scale(.94) translateY(0)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* ── 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:4px;padding:3px 9px;background:var(--sf2);border:1px solid var(--bd);border-radius:20px;font-size:12px;cursor:pointer;transition:border-color .15s,background .15s,transform .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:10px 16px 14px;background:rgba(7,7,12,.95);flex-shrink:0;border-top:1px solid rgba(0,200,255,.1);position:relative}
textarea.minp{flex:1;background:rgba(0,200,255,.025);border:1px solid rgba(0,200,255,.08);border-radius:12px;color:var(--tx);font-family:var(--fn);font-size:14px;padding:10px 14px;outline:none;resize:none;min-height:42px;max-height:140px;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,.3);box-shadow:0 0 0 3px rgba(0,200,255,.05)}
textarea.minp::placeholder{color:var(--mt)}
.sbtn{width:40px;height:40px;border-radius:12px;flex-shrink:0;background:linear-gradient(135deg,#00d4ff,#0090ee);border:none;color:#000;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s,transform .1s;box-shadow:0 2px 16px rgba(0,200,255,.3)}
.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,.7);z-index:20;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)}
.ov.on{display:flex}
.modal{background:var(--sf);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px;box-shadow:0 32px 80px rgba(0,0,0,.9),0 0 0 0.5px rgba(255,255,255,.04) inset}
.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:rgba(20,20,34,.97);border:1px solid var(--bd2);border-radius:12px;padding:12px 18px;font-size:13px;color:var(--tx);box-shadow:0 12px 40px rgba(0,0,0,.8),0 0 0 0.5px rgba(255,255,255,.05) inset;display:flex;align-items:center;gap:10px;max-width:320px;pointer-events:auto;animation:tIn .22s cubic-bezier(.22,1,.36,1) both;backdrop-filter:blur(12px)}
.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:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tOut{to{opacity:0;transform:translateY(6px) scale(.96)}}

/* ── MEMBER PANEL ─────────────────────────────────────────── */
.member-panel{width:210px;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:11px 14px;background:var(--sf2);border:1px solid var(--bd);border-radius:12px;margin-bottom:6px;transition:border-color .15s,box-shadow .15s}
.fp-item:hover{border-color:var(--bd2);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.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)}

/* ── PRODUCTION AUDIT FIXES ───────────────────────────────── */

/* Input area secondary buttons */
.inp-btn{
  background:rgba(255,255,255,.05)!important;
  color:var(--mt)!important;
  box-shadow:none!important;
  font-size:17px!important;
  border:1px solid rgba(255,255,255,.07);
  transition:background .15s,color .15s,border-color .15s;
}
.inp-btn:hover{
  background:rgba(255,255,255,.09)!important;
  color:var(--tx2)!important;
  border-color:rgba(255,255,255,.12);
}

/* Sidebar footer icon buttons */
.sb-logout{font-size:13px;min-width:28px;text-align:center}
#global-search-btn{font-size:15px}
#settings-btn{font-size:15px}

/* Settings logout button */
#settings-logout{
  margin:0 8px 8px;
  border-radius:7px;
  width:calc(100% - 16px);
  text-align:center;
  padding:8px;
}

/* Emoji tile hover animation */
.ep-em:active{transform:scale(.85)!important}

/* Channel header actions consistent sizing */
.chan-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:15px}

/* Auth input error shake */
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.inp-shake{animation:shake .35s ease}

/* Settings panel section headers */
.set-section-hd{
  font-size:10px;font-weight:700;color:var(--mt);
  letter-spacing:.1em;text-transform:uppercase;
  margin:4px 0 8px;
}

/* Toast close button */
.toast-x{
  background:none;border:none;color:var(--mt);
  font-size:16px;cursor:pointer;padding:0 2px;
  margin-left:4px;transition:color .1s;line-height:1;
  font-family:var(--fn);
}
.toast-x:hover{color:var(--tx)}

/* Reaction pill active state */
.reaction-pill.mine{
  border-color:rgba(0,200,255,.5);
  background:rgba(0,200,255,.1);
}

/* New message banner transition */
#new-msg-banner{transition:none}

/* Input area layout fix */
.inp-wrap{gap:6px}
#emoji-panel-wrap{flex-shrink:0}

/* Modal backdrop click area */
.ov{cursor:pointer}
.ov > *{cursor:default}

/* Member panel kick button */
.mp-kick{font-size:10px;opacity:.7;letter-spacing:.02em}

/* Scrollbar consistent */
#ep-body{scrollbar-color:rgba(255,255,255,.1) transparent}

/* Focus ring for accessibility */
*:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* Typing animation cleanup */
.typing-bar.on{padding:5px 18px 6px}

/* Sidebar DM avatar - consistent with room hash avatar */
.sb-item .av{border-radius:50%}

/* Prevent text selection in UI */
.sb-item,.chan-btn,.action-btn,.sbtn,.btn,.btn-sm,.btn-sm-o,.tab{user-select:none}

/* Bubble max-width responsive */
@media(max-width:600px){
  .bubble{max-width:calc(100vw - 90px)!important}
  :root{--sb:200px}
}

/* Disabled button state */
button:disabled{opacity:.45;cursor:not-allowed}

/* File card consistent */
.file-card{transition:border-color .15s}
.file-card:hover{border-color:var(--bd2)}

/* ── EMOJI PICKER ─────────────────────────────────────────── */
.ep-em{background:none;border:none;cursor:pointer;font-size:21px;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;transition:background .1s,transform .1s}
.ep-em:hover{background:rgba(255,255,255,.1)!important;transform:scale(1.2)}
.ep-em:active{transform:scale(.85)!important}

/* ── E2EE LOCK ────────────────────────────────────────────── */
.msg-lock{font-size:9px;opacity:.35;line-height:1;transition:opacity .15s;flex-shrink:0}
.mrow:hover .msg-lock{opacity:.6}

/* ═══════════════════════════════════════════════════════════
   MOBILE UI  (@media max-width: 680px)
   ═══════════════════════════════════════════════════════════ */
#mob-nav{ display:none }

@media (max-width: 680px) {
  :root{ --sb:100vw }

  /* ── Hide desktop-only elements ── */
  .col-btn,#global-search-btn,#settings-btn { display:none!important }

  /* ── App root ── */
  #app { flex-direction:column; height:100dvh; overflow:hidden }

  /* ── Sidebar: full-screen panel ── */
  #sidebar {
    position:fixed; inset:0; z-index:50;
    width:100vw!important; height:100dvh;
    transform:translateX(0);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    border-right:none;
    display:flex!important;
    flex-direction:column;
  }
  #sidebar.mob-hidden { transform:translateX(-100%); pointer-events:none }
  #sidebar.col { width:100vw!important }

  /* ── Main chat area ── */
  #main {
    position:fixed; inset:0;
    bottom:56px;
    display:none; flex-direction:column;
  }
  #main.mob-active { display:flex }

  /* ── Channel header ── */
  #chan-hd { height:52px; padding:0 10px; gap:7px }
  .chan-nm  { font-size:15px }
  #mob-back { display:flex!important; font-size:22px; width:36px; height:36px; padding:0; justify-content:center; align-items:center }
  .chan-btn  { width:34px; height:34px; font-size:15px }

  /* ── Messages ── */
  .msg-list  { padding:8px 8px 6px }
  .bubble    { font-size:14px; padding:8px 11px; max-width:calc(100vw - 72px)!important }
  .mav,.mav-spacer { width:28px; height:28px }

  /* ── Input ── */
  .inp-wrap   { padding:6px 8px 8px; gap:4px }
  .minp       { font-size:16px!important; padding:8px 10px }
  .sbtn       { width:38px; height:38px; font-size:17px }

  /* ── Sidebar items ── */
  .sb-item    { padding:8px 12px; margin:2px 8px; border-radius:10px }
  .sb-body    { padding-bottom:8px }
  .sb-sec     { padding:12px 14px 4px }
  .sb-sec-lbl { font-size:10px }
  .sb-iname   { font-size:14px }
  .sb-iprev   { font-size:12px }

  /* ── Emoji picker ── */
  #ep-root { width:calc(100vw - 16px)!important; left:0!important; right:0!important }

  /* ── Upload menu ── */
  #upload-menu { left:0!important; right:auto }

  /* ── Modals ── */
  .ov { align-items:flex-end; padding:0 }
  .modal {
    width:100vw!important; max-width:100vw!important;
    border-radius:18px 18px 0 0!important;
    max-height:88dvh; overflow-y:auto;
    padding:20px 16px 32px;
    animation:slideUp .22s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

  /* Settings modal ── horizontal tabs on top */
  #settings-modal .modal { flex-direction:column!important; height:auto!important; max-height:92dvh }
  #settings-modal .modal > div:first-child {
    width:100%!important; flex-direction:row!important;
    padding:8px 4px 0!important; border-right:none!important; border-bottom:1px solid var(--bd);
    overflow-x:auto; scrollbar-width:none; flex-shrink:0;
  }
  .set-nav { padding:8px 12px; white-space:nowrap; border-radius:0; border-bottom:2px solid transparent }
  .set-nav.on { border-bottom-color:var(--ac); background:none }

  /* ── Auth ── */
  .auth-card { border-radius:14px; padding:22px 18px }
  .auth-logo { font-size:44px }

  /* ── Bottom nav ── */
  #mob-nav {
    display:flex;
    position:fixed; bottom:0; left:0; right:0;
    height:56px;
    background:rgba(8,8,18,.97);
    border-top:1px solid var(--bd2);
    backdrop-filter:blur(20px);
    z-index:60;
    align-items:stretch;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .mob-nav-btn {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; background:none; border:none; color:var(--mt);
    font-family:var(--fn); font-size:10px; font-weight:600; cursor:pointer;
    transition:color .15s; position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-nav-btn.on { color:var(--ac) }
  .mob-nav-btn.on svg { transform:scale(1.1) }
  #mob-fr-badge {
    display:none; position:absolute; top:8px; right:calc(50% - 18px);
    width:8px; height:8px; border-radius:50%;
    background:var(--am); border:2px solid rgba(8,8,18,.97);
  }
  #mob-fr-badge.on { display:block }

  /* ── Misc ── */
  * { touch-action:manipulation }
  input,textarea,select { font-size:16px!important }
  #toast-wrap { right:10px; left:10px; bottom:68px }
  .toast { max-width:100% }
  .member-panel { display:none!important }
  .sb-foot { gap:0; justify-content:center; padding:8px 0 }
  .sb-logout { display:none!important }
  #settings-logout { display:block!important }
}
/* ── Safe area for notch phones ──────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width:680px) {
    #mob-nav { padding-bottom:env(safe-area-inset-bottom) }
  }
}

.msg-ts-cluster{font-size:10px;color:var(--mt);white-space:nowrap;opacity:.7;transition:opacity .15s}
.mrow:hover .msg-ts-cluster{opacity:1}

/* ── PRODUCTION POLISH ────────────────────────────────────── */

/* Smooth scroll for message list */
.msg-list { scroll-behavior: smooth }

/* Better focus states everywhere */
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px }

/* Prevent layout shift on image load */
.msg-img { min-height: 40px }

/* Better disabled state for all buttons */
button:disabled, input:disabled { opacity: .4; cursor: not-allowed; pointer-events: none }

/* Toast max width on mobile */
@media (max-width: 680px) {
  #toast-wrap { right: 10px; left: 10px; bottom: 72px }
  .toast { max-width: 100% }
}

/* Typing indicator animation smoother */
.typing-bar { will-change: max-height }

/* Better link appearance */
a { color: var(--ac); text-decoration: none }
a:hover { text-decoration: underline }

/* Selection in messages */
.bubble ::selection { background: rgba(0,200,255,.25) }

/* Reaction pill active press */
.reaction-pill:active { transform: scale(.88) }

/* Loading ring used for image placeholder */
.ld-ring {
  border: 2.5px solid rgba(255,255,255,.08);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

/* Smooth chat list transitions */
.sb-item { transition: background .12s, opacity .15s }

/* Better empty state */
#welcome { user-select: none }

/* Prevent text overflow in long usernames */
.mnick { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* Message row hover area extend */
.mrow { padding-left: 6px; padding-right: 6px }

/* Timestamp opacity */
.mts { font-size: 10px }

/* Input send button active */
.sbtn.inp-btn:active { transform: scale(.88) }





/* ── SIDEBAR AVATAR WRAP ──────────────────────────────────── */
.sb-av-wrap{
  position:relative;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
/* Unread badge - bottom-right corner of avatar, Discord style */
.sb-av-badge{
  position:absolute;bottom:-3px;right:-3px;
  min-width:16px;height:16px;
  background:var(--rd);color:#fff;
  font-size:9px;font-weight:800;
  border-radius:8px;padding:0 3px;
  border:2px solid var(--bg);
  display:none;align-items:center;justify-content:center;
  line-height:1;pointer-events:none;
}

/* Expanded sidebar - show text badge, hide corner badge */
#sidebar:not(.col) .sb-badge{display:flex}
#sidebar:not(.col) .sb-av-badge{display:none}

/* ── COLLAPSED SIDEBAR ────────────────────────────────────── */
#sidebar.col{width:58px;transition:width .2s ease}
#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,
#sidebar.col .sb-badge{display:none!important}
#sidebar.col .sb-body{overflow:visible;padding:0}
#sidebar.col .sb-sec{padding:8px 0 4px;justify-content:center;align-items:center;flex-direction:column}
#sidebar.col .sb-foot{justify-content:center;flex-direction:column;align-items:center;padding:10px 0;gap:6px}
#sidebar.col .sb-top{justify-content:center;padding:14px 0}
#sidebar.col .sb-logo{display:none}
#sidebar.col .col-btn{font-size:17px}

/* Collapsed item layout */
#sidebar.col .sb-item{
  padding:5px 0;margin:2px auto;
  border-radius:12px;justify-content:center;
  width:46px;position:relative;
}
#sidebar.col .sb-av-wrap{width:38px;height:38px}
#sidebar.col .av, #sidebar.col .hash-av{width:38px;height:38px;font-size:14px;flex-shrink:0}
#sidebar.col .hash-av{font-size:17px;border-radius:11px}

/* Show corner badge in collapsed */
#sidebar.col .sb-av-badge{display:flex}
#sidebar.col .sb-av-badge{border-color:#0d0d16}

/* Active ring - Discord style */
#sidebar.col .sb-item.on .av,
#sidebar.col .sb-item.on .hash-av{
  outline:2.5px solid var(--ac);
  outline-offset:2px;
}
#sidebar.col .sb-item{background:none!important}
#sidebar.col .sb-item:hover .av,
#sidebar.col .sb-item:hover .hash-av{opacity:.85}

/* Tooltip */
#sidebar.col .sb-item::after{
  content:attr(data-tooltip);
  position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%);
  background:var(--sf);border:1px solid var(--bd2);
  color:var(--tx);font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:7px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .15s;box-shadow:0 4px 16px rgba(0,0,0,.5);
  z-index:200;font-family:var(--fn);
}
#sidebar.col .sb-item:hover::after{opacity:1}

.rcpt-other{justify-content:flex-start}
.rcpt-other .rcpt-avs{margin-left:0}

.rcpt-other{justify-content:flex-start}

/* Toggle switch */
.toggle-wrap{position:relative;display:inline-flex;width:36px;height:20px;flex-shrink:0}
.toggle-wrap input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.12);border-radius:10px;cursor:pointer;transition:background .2s}
.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}
.toggle-wrap input:checked + .toggle-slider{background:var(--ac)}
.toggle-wrap input:checked + .toggle-slider::before{transform:translateX(16px)}

/* Channel tabs */
.chan-tab.on{background:rgba(0,200,255,.1)!important;color:var(--ac)!important}

/* Pin item */
.pin-item{opacity:.85}
.pin-item.on{opacity:1}

/* Empty splash fix */
#empty-room-splash{display:none}
#empty-room-splash.visible{display:flex!important}

/* ── PRODUCTION POLISH ────────────────────────────────────── */

/* Timestamps cleaner */
.msg-ts-cluster{font-size:10px;color:var(--mt);opacity:.7;padding:0 4px;white-space:nowrap;letter-spacing:.01em}

/* Better day separator */
.day-sep{font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:rgba(228,228,240,.2);margin:16px 0 8px}
.day-sep::before,.day-sep::after{background:rgba(255,255,255,.05)}

/* Profile modal banner taller */
#prof-banner{height:110px!important;transition:background .3s ease}

/* Settings banner hover */
#settings-banner-wrap:hover #settings-banner-overlay{opacity:1!important}

/* Cleaner invite code */
.invite-code-display{font-size:18px;letter-spacing:.18em;padding:16px}

/* New message banner nicer */
#new-msg-banner{background:rgba(0,200,255,.07)!important;border-bottom:1px solid rgba(0,200,255,.15)!important;padding:8px 18px!important}

/* Slightly bigger action buttons */
.action-btn{font-size:15px;padding:4px 6px}

/* Cleaner reply bar */
.reply-bar{padding:8px 16px 0;gap:10px;font-size:11px}

/* Thread-level separator between chats in sidebar */
#dm-list > :first-child,.sb-sec+div>:first-child{margin-top:2px}

/* Welcome page polish */
#welcome{gap:14px}
.w-logo{font-size:64px;letter-spacing:-.05em;background:linear-gradient(135deg,rgba(0,200,255,.08),rgba(0,100,200,.04));-webkit-background-clip:text}

/* Better auth button */
.btn{letter-spacing:.01em;font-size:13.5px}

/* Typing bar spacing */
.typing-bar.on{padding:5px 20px}
.typing-bubble{font-size:11.5px;padding:6px 12px;gap:7px;border-radius:18px}

/* Empty splash full coverage */
#empty-room-splash{background:var(--bg)!important}
#empty-room-splash.visible{display:flex!important}

/* Channel tabs scrollable */
#chan-switch{overflow-x:auto;scrollbar-width:none;max-width:220px;flex-shrink:1}
#chan-switch::-webkit-scrollbar{display:none}

/* Pin section */
#pins-sec{border-bottom:1px solid var(--bd);padding-bottom:8px;margin-bottom:4px}

/* Better hash avatar */
.hash-av{border-radius:10px;font-size:16px;font-weight:800}
.sb-item.on .hash-av{background:rgba(0,200,255,.08)}

/* Slightly richer sidebar bg */
#sidebar{background:#0c0c16}

/* Online-dot updated size */
.online-dot{width:8px;height:8px;border:2px solid #0c0c16}

/* Bigger mp-av */
.mp-av{width:30px;height:30px;border-radius:50%;font-size:12px}

/* Member panel header */
.mp-head{padding:14px 14px 10px;font-size:9px;letter-spacing:.14em}

/* Scrollbar in mp-list */
.mp-list{padding:8px 6px}

/* Settings section rows */
.sec-row{border-radius:10px;padding:13px 15px}

/* Profile modal info area */
#prof-bio{border-radius:10px;font-size:13px;line-height:1.65}

/* Presence ring on active sidebar item (DM) */
.sb-item.on .av.cyan{outline:2px solid rgba(0,200,255,.5);outline-offset:1px}

/* Reaction pill hover scale */
.reaction-pill:hover{transform:scale(1.05)}
.reaction-pill:active{transform:scale(.97)}

/* Link preview card */
.link-preview{border-radius:10px!important;transition:border-color .15s}
.link-preview:hover{border-color:var(--bd2)!important}

/* Better invite card */
.ic-join-btn{border-radius:9px!important;letter-spacing:.01em}

/* Sidebar collapsed even cleaner */
#sidebar.col{background:#0a0a14}