*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{--bg:#06070b; --sf:#0d0e15; --sf2:#14151e; --sf3:#1c1d29; --bd:rgba(255,255,255,.08); --bd2:rgba(255,255,255,.16); --tx:#ededf3; --tx2:rgba(237,237,243,.65); --mt:rgba(237,237,243,.40); --dm:rgba(255,255,255,.20); --ac:#2bb8ff; --ac-glow:rgba(43,184,255,.15); --ac-dim:rgba(43,184,255,.08); --gr:#10b981; --rd:#ef4444; --am:#f59e0b; --fn:'Josefin Sans',sans-serif; --fn-title:'Unbounded',sans-serif; --sb:240px; --spring:cubic-bezier(.175,.885,.32,1.15); --ease:cubic-bezier(.16,1,.3,1); --r4:4px;--r8:8px;--r10:10px;--r12:12px;--r16:16px;--r20:20px} .tippy-box[data-theme~='b3am']{background:var(--sf);border:1px solid var(--bd2); color:var(--tx);font-size:12px;font-weight:500;font-family:var(--fn); border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.6)} .tippy-box[data-theme~='b3am'] .tippy-content{padding:6px 12px} .tippy-box[data-theme~='b3am'][data-placement^='top']>.tippy-arrow::before{border-top-color:var(--sf)} .tippy-box[data-theme~='b3am'][data-placement^='bottom']>.tippy-arrow::before{border-bottom-color:var(--sf)} .tippy-box[data-theme~='b3am'][data-placement^='left']>.tippy-arrow::before{border-left-color:var(--sf)} .tippy-box[data-theme~='b3am'][data-placement^='right']>.tippy-arrow::before{border-right-color:var(--sf)} 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(43,184,255,.25);color:#fff} ::-webkit-scrollbar{width:4px;height:4px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)} *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent} #loader{position:fixed;inset:0;z-index:200; background:radial-gradient(ellipse 900px 600px at 50% 0%,rgba(43,184,255,.16),transparent 65%), linear-gradient(180deg,#0d1520,#090c12 55%,var(--bg) 100%); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:24px;transition:opacity .4s var(--ease)} .ld-logo{font-size:56px;font-weight:800;font-style:italic; color:var(--ac);letter-spacing:-.04em; font-family:var(--fn-title); text-shadow:none} .ld-logo .w{color:#fff} .ld-ring{width:32px;height:32px; border:3px solid rgba(255,255,255,.06); border-top-color:var(--ac); border-radius:50%; animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .ld-progress{display:flex;flex-direction:column;align-items:center;gap:14px} .ld-bar-track{width:220px;height:3px;background:var(--sf2);border-radius:2px;overflow:hidden} .ld-bar{height:100%;width:0%;background:var(--ac);border-radius:2px;box-shadow:0 0 8px var(--ac-glow);transition:width .4s ease} .ld-label{font-size:12px;color:var(--mt);letter-spacing:.06em;font-family:var(--fn)} #outage-screen{position:fixed;inset:0;z-index:900; background:var(--bg); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:18px; animation:msgSlideIn .2s ease} .outage-msg{font-family:var(--fn-title);font-size:18px;font-weight:800; color:var(--tx);letter-spacing:-.01em;margin-top:2px} .outage-sub{font-size:13px;color:var(--mt)} #auth{position:fixed;inset:0;z-index:10; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:24px; background:radial-gradient(ellipse 900px 600px at 50% 0%,rgba(43,184,255,.16),transparent 65%), linear-gradient(180deg,#0d1520,#090c12 55%,var(--bg) 100%)} .auth-logo{font-size:54px;font-weight:800;font-style:italic; font-family:var(--fn-title); letter-spacing:-.04em;color:var(--ac);line-height:1;margin-bottom:4px; text-shadow:none} .auth-logo .w{color:#fff} .auth-sub{font-size:13px;color:var(--mt);margin-bottom:28px; letter-spacing:.05em;font-weight:500; font-family:var(--fn-title)} .auth-card{background:linear-gradient(180deg,var(--sf2),var(--sf)); border:1px solid var(--bd2); border-radius:var(--r20); padding:30px;width:100%;max-width:380px; backdrop-filter:blur(24px); box-shadow:0 32px 80px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06); display:flex;flex-direction:column;gap:14px} .beta-badge{display:inline-block; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2); color:var(--am); font-size:10px;font-weight:700; padding:3px 10px;border-radius:6px; letter-spacing:.1em;text-transform:uppercase; margin-bottom:26px; font-family:var(--fn-title)} #auth .beta-badge,#semi-login .beta-badge{background:var(--ac-dim); border:1px solid rgba(43,184,255,.25); color:var(--ac)} .invite-banner{display:flex;align-items:center;gap:12px; background:rgba(43,184,255,.08); border:1px solid rgba(43,184,255,.22); border-radius:14px;padding:12px 14px; animation:msgSlideIn .25s ease} .invite-banner-icon{flex-shrink:0;width:38px;height:38px;border-radius:10px; background:var(--sf2);border:1px solid var(--bd); display:flex;align-items:center;justify-content:center; font-size:17px;color:var(--ac);overflow:hidden;font-weight:700} .invite-banner-txt{min-width:0} .invite-banner-hd{font-size:12.5px;font-weight:700;color:var(--tx);line-height:1.4} .invite-banner-hd span{color:var(--ac)} .invite-banner-sub{font-size:11px;color:var(--mt);margin-top:1px} .field-lbl{font-size:10px;font-weight:700;color:var(--tx2); letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px; font-family:var(--fn-title)} .at-wrap{display:flex;align-items:stretch; background:var(--sf); border:1px solid var(--bd2);border-radius:12px; transition:border-color .25s var(--ease),box-shadow .25s var(--ease)} .at-wrap:focus-within{border-color:var(--ac); box-shadow:0 0 0 4px var(--ac-glow)} .at-pre{display:flex;align-items:center;padding:0 4px 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:12px 14px 12px 2px} .at-wrap input::placeholder{color:var(--dm)} .at-wrap input:focus-visible{outline:none} .inp{background:var(--sf);border:1px solid var(--bd2);border-radius:12px; color:var(--tx);font-family:var(--fn);font-size:15px;font-weight:500; padding:12px 16px;outline:none;width:100%; transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)} .inp:focus{border-color:var(--ac); box-shadow:0 0 0 4px var(--ac-glow); background:var(--sf2)} .inp::placeholder{color:var(--dm)} .inp:focus-visible{outline:none} .auth-err{font-size:11px;color:var(--rd);min-height:16px;font-weight:500} .brow{display:flex;gap:8px} .field-hint{font-size:11px;color:var(--dm);margin-top:-6px} #auth-known-accts .field-lbl{margin-bottom:8px} .auth-known-acct{display:flex;align-items:center;gap:10px;padding:9px 10px; border-radius:10px;background:var(--sf);border:1px solid var(--bd); color:var(--tx);cursor:pointer;font-family:var(--fn);width:100%; transition:border-color .15s,background .15s} .auth-known-acct:hover{border-color:var(--bd2);background:var(--sf2)} .auth-known-acct .acct-av{width:28px;height:28px;font-size:12px} .auth-known-acct-name{flex:1;font-size:13px;font-weight:600;text-align:left} .auth-divider{display:flex;align-items:center;gap:10px; font-size:11px;color:var(--mt);margin:2px 0 6px} .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--bd)} .ref-card{display:flex;align-items:center;gap:12px; background:linear-gradient(180deg,var(--sf2),var(--sf)); border:1px solid var(--bd2);border-radius:var(--r16); padding:12px 16px;width:100%;max-width:380px;margin-top:14px; backdrop-filter:blur(24px); box-shadow:0 16px 40px rgba(0,0,0,.6); animation:msgSlideIn .25s ease} .ref-card-av{width:38px;height:38px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:800;font-style:italic;font-family:var(--fn-title); color:#000;background-size:cover;background-position:center} .ref-card-txt{font-size:13px;color:var(--tx2)} .ref-card-txt strong{color:var(--ac);font-weight:700} .pw-reqs{display:flex;gap:11px;flex-wrap:wrap;margin-top:-6px} .pw-req{font-size:11px;color:var(--dm);display:flex;align-items:center;gap:5px;transition:color .15s} .pw-req-dot{width:5px;height:5px;border-radius:50%;background:var(--dm);flex-shrink:0;transition:background .15s,box-shadow .15s} .pw-req.ok{color:var(--gr)} .pw-req.ok .pw-req-dot{background:var(--gr);box-shadow:0 0 6px rgba(16,185,129,.5)} .pw-wrap{position:relative;display:flex} .pw-wrap .inp{flex:1;padding-right:40px} .pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%); background:none;border:none;color:var(--mt);cursor:pointer; width:32px;height:32px;border-radius:8px; display:flex;align-items:center;justify-content:center; transition:color .15s,background .15s} .pw-eye:hover{color:var(--tx2);background:rgba(255,255,255,.05)} .pw-eye .material-symbols-outlined{font-size:18px} .btn:disabled,.btn-o:disabled{opacity:.55;cursor:not-allowed;filter:none;transform:none} .btn{flex:1;background:var(--ac);color:#000; border:none;border-radius:12px; font-family:var(--fn);font-size:13.5px;font-weight:700; padding:12px 18px;cursor:pointer; letter-spacing:.01em; transition:filter .2s,transform .2s var(--spring),box-shadow .2s; box-shadow:none} .btn:hover{filter:brightness(1.1);box-shadow:none} .btn:active{transform:scale(.95)} .btn-o{flex:1;background:none; border:1px solid var(--bd2);color:var(--tx2); border-radius:12px; font-family:var(--fn);font-size:13.5px;font-weight:500; padding:12px 18px;cursor:pointer; transition:border-color .2s,color .2s,background .2s} .btn-o:hover{border-color:rgba(255,255,255,.3);color:var(--tx);background:rgba(255,255,255,.03)} .btn-sm{background:var(--ac);color:#000; border:none;border-radius:8px; font-family:var(--fn);font-size:12px;font-weight:700; padding:8px 16px;cursor:pointer; transition:filter .2s,transform .15s var(--spring); box-shadow:none} .btn-sm:hover{filter:brightness(1.1)} .btn-sm:active{transform:scale(.93)} .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:8px 16px;cursor:pointer; transition:border-color .2s,color .2s,background .2s} .btn-sm-o:hover{border-color:rgba(255,255,255,.3);color:var(--tx);background:rgba(255,255,255,.03)} .btn-rd{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2); color:var(--rd);border-radius:8px; font-family:var(--fn);font-size:12px;font-weight:600; padding:8px 16px;cursor:pointer; transition:background .2s,border-color .2s} .btn-rd:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3)} #semi-login{position:fixed;inset:0;z-index:10;display:none; flex-direction:column;align-items:center;justify-content:center;padding:24px; background:radial-gradient(ellipse 900px 600px at 50% 0%,rgba(43,184,255,.16),transparent 65%), linear-gradient(180deg,#0d1520,#090c12 55%,var(--bg) 100%)} .semi-card{background:linear-gradient(180deg,var(--sf2),var(--sf)); border:1px solid var(--bd2);border-radius:var(--r20); padding:30px;width:100%;max-width:360px; display:flex;flex-direction:column;gap:16px; backdrop-filter:blur(24px); box-shadow:0 32px 80px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)} .semi-welcome{font-size:11px;font-weight:700;color:var(--mt); letter-spacing:.12em;text-transform:uppercase; font-family:var(--fn-title)} .semi-user{font-size:24px;font-weight:800;color:var(--ac); letter-spacing:-.02em;margin-bottom:0; font-family:var(--fn-title)} #app{display:none;height:100vh;position:relative;z-index:5} #app.on{display:flex} #sidebar{width:var(--sb);flex-shrink:0; background:linear-gradient(180deg,rgba(43,184,255,.05),rgba(13,14,21,.7) 30%),rgba(13,14,21,.7); backdrop-filter:blur(16px); border-right:1px solid var(--bd); display:flex;flex-direction:column;overflow:hidden; transition:width .25s var(--ease)} #sidebar.col{width:58px} #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, #sidebar.col .sb-shop-card{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} #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} #sidebar.col .sb-av-badge{display:flex;border-color:var(--bg)} #sidebar.col .sb-item.on .av{outline:2.5px solid var(--ac);outline-offset:2px;border-radius:50%} #sidebar.col .sb-item.on .hash-av{outline:2.5px solid var(--ac);outline-offset:2px;border-radius:11px} #sidebar.col .sb-item{background:none!important} #sidebar.col .sb-item:hover .av, #sidebar.col .sb-item:hover .hash-av{opacity:.85} #sidebar.col .pin-item>.material-symbols-outlined{display:none} .col-btn{background:none;border:none;color:var(--mt); font-size:14px;cursor:pointer;padding:4px 8px;border-radius:6px; transition:color .2s,background .2s; font-family:var(--fn);line-height:1;flex-shrink:0} .col-btn:hover{color:var(--tx);background:rgba(255,255,255,.06)} .sb-top{padding:16px 16px 14px;border-bottom:1px solid var(--bd); display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .sb-logo{font-size:20px;font-weight:800;font-style:italic; color:var(--ac);letter-spacing:-.03em; font-family:var(--fn-title)} .sb-logo .w{color:#fff} .sb-body{flex:1;overflow-y:auto;padding:6px 0;scrollbar-width:none} .sb-body::-webkit-scrollbar{display:none} .sb-sec{display:flex;align-items:center;justify-content:space-between; padding:12px 16px 4px;gap:6px} .sb-sec-lbl{font-size:10px;font-weight:700;color:var(--mt); letter-spacing:.14em;text-transform:uppercase;flex:1; font-family:var(--fn-title)} .sb-plus{display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:6px; background:transparent;border:1px solid var(--bd2); color:var(--tx2);font-size:15px;line-height:1; cursor:pointer;transition:all .2s var(--spring); font-family:var(--fn);flex-shrink:0} .sb-plus:hover{background:var(--ac);border-color:var(--ac);color:#000;transform:scale(1.1)} .sb-item{display:flex;align-items:center;gap:10px; padding:8px 12px;border-radius:10px; margin:2px 8px;cursor:pointer; transition:all .25s var(--ease);position:relative;user-select:none} .sb-item:hover{background:rgba(255,255,255,.045);transform:translateX(1px)} .sb-item.on{background:linear-gradient(90deg,rgba(43,184,255,.12) 0%,rgba(43,184,255,.02) 100%); border:1px solid rgba(43,184,255,.14)} .sb-item.on::before{content:'';position:absolute;left:1px;top:50%;transform:translateY(-50%); width:3px;height:60%;border-radius:2px; background:var(--ac);box-shadow:0 0 8px var(--ac-glow)} .sb-item.on .sb-iname{color:var(--tx);font-weight:600} .av{width:34px;height:34px;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} .hash-av{width:34px;height:34px;border-radius:10px; background:var(--sf3); display:flex;align-items:center;justify-content:center; font-size:16px;font-weight:800;color:var(--mt); flex-shrink:0;border:1.5px solid var(--bd)} .sb-item.on .hash-av{color:var(--ac);border-color:rgba(43,184,255,.3); background:rgba(43,184,255,.08)} .sb-av-wrap{position:relative;flex-shrink:0; display:flex;align-items:center;justify-content:center} .sb-av-badge{position:absolute;bottom:-3px;right:-3px; min-width:17px;height:17px; background:var(--rd);color:#fff; font-size:9px;font-weight:800; border-radius:9px;padding:0 4px; border:2px solid var(--bg); display:none;align-items:center;justify-content:center; line-height:1;pointer-events:none} #sidebar:not(.col) .sb-badge{display:flex} #sidebar:not(.col) .sb-av-badge{display:none} .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 .2s} .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:18px;height:18px;border-radius:9px; display:flex;align-items:center;justify-content:center; padding:0 5px;flex-shrink:0;letter-spacing:-.02em} .sb-req-badge{background:var(--am);color:#000; font-size:10px;font-weight:700; min-width:18px;height:18px;border-radius:9px; display:flex;align-items:center;justify-content:center; padding:0 5px;flex-shrink:0} .sb-friends-lbl{cursor:pointer;transition:color .2s} .sb-friends-lbl:hover{color:var(--tx2)} .sb-friends-lbl.on{color:var(--ac)} .sb-shop-card{display:flex;align-items:center;gap:8px; margin:0 12px 10px;padding:9px 12px; background:var(--sf2);border:1px solid var(--bd);border-radius:12px; cursor:pointer;transition:border-color .15s,background .15s,transform .15s var(--spring); font-size:13px;font-weight:700;color:var(--ac);flex-shrink:0} .sb-shop-card:hover{border-color:rgba(43,184,255,.3);background:var(--sf3);transform:translateY(-1px)} .sb-shop-card:active{transform:scale(.97)} .sb-foot{border-top:1px solid var(--bd);padding:10px 12px; display:flex;align-items:center;gap:8px;flex-shrink:0} .sb-me-av{width:34px;height:34px;border-radius:50%; background:var(--ac-dim); border:1.5px solid rgba(43,184,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 .2s} .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:13px;cursor:pointer;font-family:var(--fn); transition:color .2s;padding:4px 6px;border-radius:6px; white-space:nowrap;min-width:28px;text-align:center} .sb-logout:hover{color:var(--tx);background:rgba(255,255,255,.05)} #settings-btn.sb-logout{font-size:15px} .sb-logout-icon{font-size:15px} .sb-logout-icon:hover{color:var(--rd);background:rgba(239,68,68,.1)} .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} @keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}} .presence-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .online-dot{position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:var(--gr);border:2px solid var(--bg)} .sb-presence-dot{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;border:2.5px solid var(--bg);pointer-events:none} .sb-presence-dot.online{background:#22c55e} .sb-presence-dot.away{background:#facc15} #sidebar.col .sb-presence-dot{right:auto;left:-2px} .fr-item{display:flex;align-items:center;gap:8px; padding:8px 12px;margin:2px 6px;border-radius:10px; 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} #main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg)} #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 16px;gap:10px; background:rgba(6,7,11,.85);backdrop-filter:blur(16px)} .chan-pfx{font-size:17px;font-weight:700;color:var(--mt)} .chan-nm{font-size:15px;font-weight:600;color:var(--tx);letter-spacing:-.01em;font-family:var(--fn-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1} .chan-actions{display:flex;align-items:center;gap:2px;margin-left:auto} .chan-btn{background:none;border:none;color:var(--mt); font-size:15px;cursor:pointer;padding:6px 8px; border-radius:8px;width:32px;height:32px; display:flex;align-items:center;justify-content:center; transition:color .2s,background .2s; font-family:var(--fn)} .chan-btn:hover{color:var(--tx);background:rgba(255,255,255,.06)} .chan-btn.on{color:var(--ac);background:rgba(43,184,255,.08)} #welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--mt);user-select:none} .w-logo{font-size:64px;font-weight:800;font-style:italic; letter-spacing:-.05em; font-family:var(--fn-title); background:linear-gradient(135deg,rgba(43,184,255,.08),rgba(43,130,200,.04)); -webkit-background-clip:text;-webkit-text-fill-color:transparent} .w-logo .w{-webkit-text-fill-color:rgba(255,255,255,.04)} #welcome p{font-size:13px;color:var(--mt);font-weight:500} .msg-list{flex:1;overflow-y:auto;padding:12px 18px 8px; display:flex;flex-direction:column;gap:0; background:transparent;scroll-behavior:smooth} .day-sep{display:flex;align-items:center;gap:10px; font-size:9px;color:rgba(237,237,243,.2); margin:18px 0 10px;font-weight:700; letter-spacing:.1em;text-transform:uppercase} .day-sep::before,.day-sep::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.05)} .mrow{display:flex;gap:10px;padding:3px 8px;border-radius:10px; position:relative;transition:background .15s} .mrow.own{flex-direction:row-reverse} .mrow:hover{background:rgba(255,255,255,.015)} .mrow.grouped{padding-top:1px} .mav{width:34px;height:34px;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:2px;cursor:pointer; transition:opacity .15s; background-size:cover;background-position:center} .mav:hover{opacity:.8} .mav-spacer{width:34px;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(--tx2);letter-spacing:.01em; max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mrow:not(.own) .mnick{color:var(--tx2)} .bubble{padding:10px 14px;font-size:14px;line-height:1.6; word-break:break-word;white-space:pre-wrap; width:fit-content;max-width:min(500px,calc(100vw - 130px)); transition:box-shadow .2s} .mrow.own .bubble{background:linear-gradient(135deg,#1a8fcc,#1578aa)!important; color:#fff!important; border-radius:18px 18px 4px 18px!important; border:none!important; box-shadow:0 4px 16px rgba(43,130,170,.2),inset 0 1px 0 rgba(255,255,255,.12)!important} .mrow:not(.own) .bubble{background:linear-gradient(135deg,var(--sf2),var(--sf))!important; border:1px solid var(--bd)!important; border-radius:18px 18px 18px 4px!important; color:var(--tx)!important; box-shadow:0 2px 8px rgba(0,0,0,.15)!important} .bubble mark{background:rgba(43,184,255,.2);color:var(--ac);border-radius:3px;padding:0 3px} .bubble ::selection{background:rgba(43,184,255,.25)} .msg-ts-cluster{font-size:10px;color:var(--mt);opacity:.65; padding:0 4px;white-space:nowrap;letter-spacing:.01em; transition:opacity .15s} .mrow:hover .msg-ts-cluster{opacity:1} .rcpt{display:flex;align-items:center;justify-content:flex-end;gap:5px;height:20px;padding:0 2px} .rcpt-check{font-size:14px;color:var(--mt); transition:opacity .18s ease} .rcpt-avs{display:flex;align-items:center} .rcpt-av{width:16px;height:16px;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:1.5px solid var(--bg); margin-left:-5px; opacity:0;transform:scale(0); box-sizing:border-box} .rcpt-avs .rcpt-av:first-child{margin-left:0} @keyframes rcptAvIn{0%{opacity:0;transform:scale(0) translateY(3px)} 55%{opacity:1;transform:scale(1.25) translateY(-3px)} 78%{transform:scale(.93) translateY(0)} 100%{opacity:1;transform:scale(1) translateY(0)} } .rcpt-other{justify-content:flex-start} .rcpt-other .rcpt-avs{margin-left:0} .msg-actions{position:absolute;top:-44px;display:flex;gap:1px; padding:4px 6px;background:var(--sf); border:1px solid var(--bd2);border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.7); opacity:0;pointer-events:none; transition:opacity .12s .16s,transform .12s .16s var(--ease); transform:translateY(4px);z-index:20;white-space:nowrap} .msg-actions::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px} .mrow:hover .msg-actions,.msg-actions:hover{opacity:1;pointer-events:all; transform:translateY(0); transition:opacity .08s 0ms,transform .08s 0ms var(--spring)} .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:4px 6px;border-radius:7px; font-size:15px;line-height:1; transition:background .1s,transform .15s var(--spring); color:var(--tx2)} .action-btn:hover{background:rgba(255,255,255,.08);color:var(--tx);transform:scale(1.1)} .msg-actions .action-btn[data-action="delete"]{opacity:.65} .msg-actions .action-btn[data-action="delete"]:hover{opacity:1;color:var(--rd)!important;background:rgba(239,68,68,.1)!important} .hover-react-picker{display:flex;gap:1px} .hover-react-picker .action-btn{transition:transform .15s var(--spring),background .1s} .hover-react-picker .action-btn:hover{transform:scale(1.25)} .hover-react-picker .action-btn.mine{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} .msg-actions.dismissed{display:none!important} .msg-reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;padding:0 2px} .reaction-pill{display:inline-flex;align-items:center;gap:4px; padding:4px 10px;background:var(--sf2); border:1px solid var(--bd);border-radius:20px; font-size:12px;cursor:pointer;user-select:none; height:26px; transition:border-color .2s,background .2s,transform .15s var(--spring)} .reaction-pill:hover{border-color:var(--ac);background:var(--ac-dim);transform:scale(1.05)} .reaction-pill:active{transform:scale(.93)} .reaction-pill.mine{border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.14); color:#fff} .reaction-pill .rc{font-size:11px;color:var(--tx2);font-weight:600} .reaction-pill.mine .rc{color:#fff} .typing-bar{padding:0 18px;display:flex;align-items:center;overflow:hidden; transition:max-height .25s var(--ease),padding .25s var(--ease); max-height:0;flex-shrink:0;will-change:max-height} .typing-bar.on{max-height:44px;padding:6px 20px} .typing-bubble{display:inline-flex;align-items:center;gap:9px; padding:6px 14px 6px 6px; background:linear-gradient(135deg,rgba(43,184,255,.10),var(--sf2)); border:1px solid rgba(43,184,255,.16);border-radius:20px; font-size:12px;color:var(--tx2); animation:msgSlideIn .2s ease} .typing-avs{display:flex;align-items:center;flex-shrink:0} .typing-av{width:20px;height:20px;border-radius:50%; font-size:9px;font-weight:700;font-style:italic; display:flex;align-items:center;justify-content:center;flex-shrink:0; border:1.5px solid var(--sf2);color:#000; margin-left:-7px} .typing-avs .typing-av:first-child{margin-left:0} .dots{display:flex;gap:3px;align-items:center} .dots i{width:6px;height:6px;background:var(--ac); border-radius:50%;animation:typingDot 1.1s ease-in-out infinite; display:block;box-shadow:0 0 6px rgba(43,184,255,.5)} .dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s} @keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-4px);opacity:1} } .reply-bar{display:none;padding:8px 18px 0;align-items:center;gap:10px; font-size:11px;color:var(--mt)} .reply-bar.on{display:flex} .reply-preview{flex:1;padding:5px 12px;background:var(--sf2); border-left:3px solid var(--ac);border-radius:0 8px 8px 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:18px;cursor:pointer;padding:0 2px; transition:color .15s} .reply-cancel:hover{color:var(--rd)} .quoted{background:var(--sf2);border-left:3px solid var(--ac); border-radius:0 6px 6px 0;padding:5px 10px;margin-bottom:5px; font-size:11px;color:var(--mt); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; cursor:pointer} .quoted strong{color:var(--ac);font-weight:600} .inp-wrap{display:flex;align-items:flex-end;gap:6px; padding:10px 14px 14px; background:rgba(6,7,11,.85);backdrop-filter:blur(16px); flex-shrink:0;border-top:1px solid var(--bd); position:relative} textarea.minp{flex:1;background:var(--sf); border:1px solid var(--bd);border-radius:14px; 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 .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease); line-height:1.5;scrollbar-width:none;-ms-overflow-style:none} textarea.minp::-webkit-scrollbar{display:none} textarea.minp:focus{border-color:var(--ac); box-shadow:0 0 0 4px var(--ac-glow); background:var(--sf2)} textarea.minp::placeholder{color:var(--dm)} textarea.minp:focus-visible{outline:none} textarea.minp:disabled{opacity:.35;cursor:not-allowed} .sbtn{width:42px;height:42px;border-radius:14px;flex-shrink:0; background:linear-gradient(135deg,#3dc4ff,#1a8fcc); border:none;color:#000;font-size:20px;font-weight:700; cursor:pointer;display:flex;align-items:center;justify-content:center; transition:filter .2s,transform .2s var(--spring); box-shadow:0 4px 20px rgba(43,184,255,.3),inset 0 1px 0 rgba(255,255,255,.25)} .sbtn:hover{filter:brightness(1.12);box-shadow:0 6px 24px rgba(43,184,255,.4)} .sbtn:active{transform:scale(.9)} .sbtn:focus-visible{outline:2px solid var(--ac);outline-offset:3px} .inp-btn{background:rgba(255,255,255,.04)!important; color:var(--mt)!important;box-shadow:none!important; font-size:17px!important; border:1px solid rgba(255,255,255,.07); transition:background .2s,color .2s,border-color .2s,transform .15s var(--spring)} .inp-btn:hover{background:rgba(255,255,255,.08)!important; color:var(--tx2)!important; border-color:rgba(255,255,255,.14)} .upload-opt{display:flex;align-items:center;gap:10px;width:100%; padding:9px 14px;background:none;border:none; color:var(--tx);font-family:var(--fn);font-size:13px; cursor:pointer;border-radius:9px;text-align:left; white-space:nowrap;transition:background .15s} .upload-opt:hover{background:rgba(255,255,255,.06)} .upload-opt:active{background:rgba(255,255,255,.1)} #emoji-panel-wrap{flex-shrink:0} .pin-bar{display:none;align-items:center;gap:8px; padding:7px 18px; background:rgba(43,184,255,.04); border-bottom:1px solid rgba(43,184,255,.1); font-size:12px;color:var(--ac);flex-shrink:0;cursor:pointer; transition:background .15s} .pin-bar:hover{background:rgba(43,184,255,.07)} .pin-bar.on{display:flex} .pin-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)} .rename-bar{display:none;align-items:center;gap:12px; padding:9px 18px; background:var(--am); font-size:13px;font-weight:700;color:#000;flex-shrink:0; font-family:var(--fn)} .rename-bar.on{display:flex} .rename-bar.danger{background:var(--rd);color:#fff} .rename-bar.danger .rename-close{background:#000;color:var(--rd)} .rename-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rename-text strong{font-weight:800} .rename-close{background:#000;color:var(--am);border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:6px;flex-shrink:0; transition:filter .15s} .rename-close:hover{filter:brightness(1.3)} #new-msg-banner{background:rgba(43,184,255,.08)!important; border-bottom:1px solid rgba(43,184,255,.15)!important; padding:9px 18px!important} .member-panel{width:220px;flex-shrink:0; border-left:1px solid var(--bd); background:rgba(13,14,21,.7);backdrop-filter:blur(16px); display:none;flex-direction:column;overflow:hidden} .member-panel.on{display:flex} .mp-head{padding:14px 16px 10px; font-size:9px;font-weight:700;color:var(--mt); letter-spacing:.14em;text-transform:uppercase; flex-shrink:0;border-bottom:1px solid var(--bd); font-family:var(--fn-title)} .mp-list{flex:1;overflow-y:auto;padding:8px 6px} .mp-item{display:flex;align-items:center;gap:8px; padding:6px 12px;cursor:pointer;border-radius:8px; transition:background .1s;margin:1px 6px} .mp-item:hover{background:var(--sf2)} .mp-av{width:30px;height:30px;border-radius:50%; background:var(--sf3);display:flex;align-items:center; justify-content:center;font-size:12px;font-weight:700; font-style:italic;color:var(--tx2);flex-shrink:0; position:relative;background-size:cover} .mp-kick{background:none;border:none;color:var(--mt); font-size:10px;cursor:pointer;padding:3px 8px;border-radius:5px; margin-left:auto;transition:color .1s,background .1s; font-family:var(--fn);display:none;opacity:.7;letter-spacing:.02em} .mp-item:hover .mp-kick{display:block} .mp-kick:hover{color:var(--rd);background:rgba(239,68,68,.08)} .ov{position:fixed;inset:0; background:rgba(4,5,8,.75);backdrop-filter:blur(16px); z-index:20;display:none; align-items:center;justify-content:center; padding:20px;cursor:pointer} .ov.on{display:flex} .ov>*{cursor:default} .modal,#confirm-box{background:linear-gradient(180deg,var(--sf2),var(--sf)); border:1px solid var(--bd2);border-radius:var(--r20); padding:28px;width:100%;max-width:360px; display:flex;flex-direction:column;gap:16px; box-shadow:0 32px 80px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06); animation:modalIn .35s var(--spring) both} @keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}} .modal-hd{display:flex;align-items:center;justify-content:space-between; font-size:16px;font-weight:700;color:var(--tx); letter-spacing:-.01em; font-family:var(--fn-title)} .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 .15s,transform .15s var(--spring)} .mclose:hover{color:var(--tx);transform:scale(1.1)} .mlbl{font-size:10px;font-weight:700;color:var(--tx2); letter-spacing:.14em;text-transform:uppercase; display:block;margin-bottom:6px; font-family:var(--fn-title)} .minput{background:var(--sf);border:1px solid var(--bd2);border-radius:12px; color:var(--tx);font-family:var(--fn);font-size:14px; padding:11px 14px;outline:none;width:100%; transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)} .minput:focus{border-color:var(--ac); box-shadow:0 0 0 4px var(--ac-glow); background:var(--sf2)} .minput::placeholder{color:var(--dm)} .minput:focus-visible{outline:none} .merr{font-size:11px;color:var(--rd);min-height:16px;font-weight:500} .mhint{font-size:12px;color:var(--tx2);line-height:1.65; padding:10px 14px;background:var(--sf2); border-radius:10px;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(4,5,8,.8);backdrop-filter:blur(12px); display:none;align-items:center;justify-content:center} #confirm-wrap.on{display:flex} #confirm-box{max-width:340px;gap:16px} #confirm-msg{font-size:14px;color:var(--tx);line-height:1.6} .toastify{padding:0!important;background:transparent!important;font-family:var(--fn)!important;border-radius:14px!important} .toastify.on{animation:toastIn .45s var(--spring) both} @keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}} .b3am-toast-inner{display:flex;align-items:center;gap:10px;padding:14px 20px;max-width:340px} .b3am-toast-icon{font-size:16px;flex-shrink:0;line-height:1} .b3am-toast-txt{font-size:13px;color:var(--tx);line-height:1.5} .b3am-toast-success .b3am-toast-icon{color:var(--gr)} .b3am-toast-error .b3am-toast-icon{color:var(--rd)} .b3am-toast-info .b3am-toast-icon{color:var(--ac)} .b3am-toast-warn .b3am-toast-icon{color:var(--am)} .b3am-toast-success{border-left:3px solid var(--gr)} .b3am-toast-error{border-left:3px solid var(--rd)} .b3am-toast-info{border-left:3px solid var(--ac)} .b3am-toast-warn{border-left:3px solid var(--am)} #settings-modal .ov{background:rgba(0,0,0,.85)} .set-shell{display:flex;flex-direction:row; width:100vw;height:100vh; max-width:820px;max-height:640px; background:var(--sf); border:1px solid var(--bd2);border-radius:20px; overflow:hidden; box-shadow:0 32px 100px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04); animation:modalIn .35s var(--spring) both; position:relative} .set-shell>.mclose{position:absolute;top:14px;right:16px;z-index:3; font-size:24px;background:rgba(255,255,255,.06); width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:none;color:var(--mt);cursor:pointer; transition:color .15s,background .15s; font-family:var(--fn)} .set-shell>.mclose:hover{color:var(--tx);background:rgba(255,255,255,.12)} .set-side{width:220px;flex-shrink:0; background:var(--sf2); border-right:1px solid var(--bd); display:flex;flex-direction:column; padding:24px 0 16px} .set-side-hd{display:flex;align-items:center;gap:12px; padding:0 18px 20px; border-bottom:1px solid var(--bd); margin-bottom:12px} .set-side-av{width:42px;height:42px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:16px;font-weight:800;font-style:italic; flex-shrink:0;background-size:cover;background-position:center} .set-side-name{font-size:14px;font-weight:700;color:var(--tx); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .set-side-tabs{flex:1;overflow-y:auto;padding:0 8px} .set-sec-lbl{font-size:9px;font-weight:800;color:var(--mt); letter-spacing:.14em;text-transform:uppercase; padding:6px 12px 8px} .set-nav{display:flex;align-items:center;gap:10px; width:100%;text-align:left; background:none;border:none; padding:10px 14px;margin:2px 0; font-size:13px;font-family:var(--fn); color:var(--tx2);cursor:pointer;border-radius:10px; transition:color .15s,background .15s} .set-nav .material-symbols-outlined{font-size:18px;width:22px;text-align:center;flex-shrink:0} .set-nav:hover{color:var(--tx);background:rgba(255,255,255,.04)} .set-nav.on{color:var(--tx);background:rgba(43,184,255,.08);font-weight:600} .set-nav.on .material-symbols-outlined{color:var(--ac)} .debug-filter{background: none; border: 1px solid var(--bd2); color: var(--mt); font-family: var(--fn); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; transition: color .12s, border-color .12s, background .12s} .debug-filter:hover{color: var(--tx); border-color: rgba(255,255,255,.3)} .debug-filter.on{color: var(--ac); border-color: rgba(0,200,255,.3); background: rgba(0,200,255,.08)} .debug-entry{display: flex; gap: 8px; padding: 1px 12px; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.02); transition: background .08s} .debug-entry:hover{background: rgba(255,255,255,.02)} .debug-entry .de-ts{color: rgba(255,255,255,.15); flex-shrink: 0; font-size: 10px; padding-top: 1px} .debug-entry .de-tag{flex-shrink: 0; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 0 5px; border-radius: 4px; line-height: 1.7; margin-top: 1px} .debug-entry .de-tag.tag-chat{color: #a78bfa; background: rgba(167,139,250,.1)} .debug-entry .de-tag.tag-ws{color: #00c8ff; background: rgba(0,200,255,.1)} .debug-entry .de-tag.tag-auth{color: #fbbf24; background: rgba(251,191,36,.1)} .debug-entry .de-tag.tag-poll{color: #34d399; background: rgba(52,211,153,.1)} .debug-entry .de-tag.tag-pfp{color: #f472b6; background: rgba(244,114,182,.1)} .debug-entry .de-tag.tag-file{color: #60a5fa; background: rgba(96,165,250,.1)} .debug-entry .de-tag.tag-err{color: #f87171; background: rgba(248,113,113,.1)} .debug-entry .de-tag.tag-warn{color: #fb923c; background: rgba(251,146,60,.1)} .debug-entry .de-msg{color: var(--tx2); word-break: break-all} .debug-entry .de-msg .de-str{color: var(--tx)} .set-body{flex:1;overflow-y:auto;overflow-x:hidden; padding:28px 32px 40px; position:relative} .set-pane{display:none;flex-direction:column;gap:14px} .set-pane.on{display:flex} .set-hd{font-size:18px;font-weight:800;color:var(--tx); letter-spacing:-.02em;margin-bottom:6px; font-family:var(--fn-title)} .set-hint-text{font-size:11px;color:var(--mt);margin-top:4px} .sec-row{display:flex;align-items:center;justify-content:space-between; padding:16px 18px;background:var(--sf2); border:1px solid var(--bd);border-radius:12px;gap:12px; transition:border-color .2s} .sec-row:hover{border-color:rgba(255,255,255,.14)} .sec-row-stack{flex-direction:column;align-items:stretch;gap:12px} .sec-row-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .sec-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0} .sec-icon{width:40px;height:40px;border-radius:10px; background:rgba(255,255,255,.05); display:flex;align-items:center;justify-content:center; flex-shrink:0} .sec-icon .material-symbols-outlined{font-size:20px;color:var(--tx2)} .sec-title{font-size:13px;font-weight:600;color:var(--tx);letter-spacing:-.01em} .sec-sub{font-size:11px;color:var(--mt);margin-top:2px} .soon-badge{font-size:9px;background:rgba(43,184,255,.12);color:var(--ac); padding:1px 7px;border-radius:6px;border:1px solid rgba(43,184,255,.2); font-weight:700;vertical-align:middle;margin-left:4px} #settings-banner-wrap{height:100px;border-radius:12px; background:linear-gradient(135deg,#1a2f4f,#1a0a2e); position:relative;cursor:pointer;overflow:hidden; flex-shrink:0;margin-bottom:4px} #settings-banner{width:100%;height:100%; background-size:cover;background-position:center} #settings-banner-overlay{position:absolute;inset:0; background:rgba(0,0,0,.4); display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .2s; font-size:13px;color:#fff;font-weight:600;gap:6px} #settings-banner-wrap:hover #settings-banner-overlay{opacity:1} .set-prof-av-row{display:flex;align-items:flex-end;gap:14px; margin-top:-34px;margin-bottom:20px;padding:0 4px} #settings-av-wrap{position:relative;flex-shrink:0;cursor:pointer} #settings-av{width:68px;height:68px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:24px;font-weight:800;font-style:italic;overflow:hidden; border:4px solid var(--sf); background-size:cover;background-position:center} #settings-av-overlay{position:absolute;inset:0;border-radius:50%; background:rgba(0,0,0,.5); display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .15s;pointer-events:none} #settings-av-overlay .material-symbols-outlined{font-size:18px;color:#fff} #settings-av-wrap:hover #settings-av-overlay{opacity:1} #settings-uname{font-size:14px;font-weight:700;color:var(--tx)} .set-prof-fields{display:flex;flex-direction:column;gap:14px;padding:0 4px} .set-field{display:flex;flex-direction:column;gap:4px} .set-danger{margin-top:8px;padding-top:4px} .set-danger-hd{font-size:9px;font-weight:800;color:var(--rd); letter-spacing:.14em;text-transform:uppercase; margin-bottom:8px;padding-left:4px} .set-key-row{display:flex;gap:8px;margin-top:2px} .adm-hd{display:flex;align-items:center;gap:12px;margin-bottom:2px} .adm-hd-icon{width:40px;height:40px;border-radius:11px;flex-shrink:0; background:linear-gradient(135deg,rgba(43,184,255,.18),rgba(43,184,255,.04)); border:1px solid rgba(43,184,255,.2); display:flex;align-items:center;justify-content:center} .adm-hd-icon .material-symbols-outlined{font-size:20px;color:var(--ac)} .adm-card{background:var(--sf2);border:1px solid var(--bd);border-radius:14px; padding:16px 18px;transition:border-color .2s} .adm-card:hover{border-color:rgba(255,255,255,.14)} .adm-card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px} .adm-card-hd-l{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--tx);letter-spacing:-.01em} .adm-card-hd-l .material-symbols-outlined{font-size:17px;color:var(--ac)} .adm-sub{font-size:11px;color:var(--mt);margin:-4px 0 10px} .adm-row-inp{display:flex;gap:8px} .adm-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .adm-stat{background:var(--sf3);border:1px solid var(--bd);border-radius:10px;padding:12px 14px} .adm-stat-n{font-size:22px;font-weight:800;color:var(--ac);font-family:var(--fn-title)} .adm-stat-l{font-size:11px;color:var(--mt);margin-top:2px} .adm-loading{font-size:12px;color:var(--mt)} .adm-mini-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--sf3);border:1px solid var(--bd);border-radius:9px} .adm-badge-chip{font-size:10px;font-weight:700;color:var(--ac);background:rgba(43,184,255,.1);border:1px solid rgba(43,184,255,.2);border-radius:5px;padding:1px 7px} .adm-banned-chip{font-size:9px;background:rgba(255,68,68,.15);color:#ff6666;border:1px solid rgba(255,68,68,.3);border-radius:4px;padding:0 4px;margin-left:2px} .adm-user-row{border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--sf3);transition:border-color .2s} .adm-user-row:hover{border-color:rgba(255,255,255,.16)} .adm-user-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer} .adm-user-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-style:italic;flex-shrink:0} .adm-user-detail{padding:8px 12px 10px;border-top:1px solid var(--bd);font-size:11px;color:var(--mt);background:var(--bg)} .adm-room-ic{width:34px;height:34px;border-radius:8px;background:var(--sf2);display:flex;align-items:center;justify-content:center;color:var(--mt);flex-shrink:0} #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:14px;padding:12px 16px; background:var(--sf2);border:1px solid var(--bd);border-radius:14px; margin-bottom:6px;transition:border-color .2s,box-shadow .2s} .fp-item:hover{border-color:var(--bd2);box-shadow:0 4px 16px rgba(0,0,0,.3)} .fp-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;font-style:italic;flex-shrink:0;background-size:cover} .fp-info{flex:1;min-width:0} .fp-name{font-size:14px;font-weight:600;color:var(--tx);letter-spacing:-.01em} .fp-sub{font-size:11px;color:var(--mt);margin-top:2px} .fp-btns{display:flex;gap:6px;flex-shrink:0} .fp-empty{font-size:13px;color:var(--mt);padding:14px 4px;font-style:italic} .fp-tab{background:none;border:none;border-bottom:2px solid transparent; color:var(--mt);font-family:var(--fn);font-size:12px;font-weight:600; padding:9px 14px 11px;cursor:pointer; transition:color .2s,border-color .2s;letter-spacing:.02em} .fp-tab:hover{color:var(--tx2)} .fp-tab.on{color:var(--ac);border-bottom-color:var(--ac)} .av,.sb-me-av,.fp-av,.mav,.mp-av,.rcpt-av,.typing-av,.acct-av,.session-icon, .adm-user-av,.dm-found-av,.prof-av,.set-side-av,#settings-av,#set-av,#me-av{font-family:var(--fn-title)} .msg-badge{display:inline-flex;align-items:center;font-size:9px;font-weight:800; padding:1px 6px;border-radius:5px;letter-spacing:.02em;margin-left:5px; vertical-align:middle;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)} .font-font_mono{font-family:'SF Mono','Fira Code','Cascadia Code',monospace!important} .font-font_serif{font-family:Georgia,'Times New Roman',serif!important} .font-font_hand{font-family:'Comic Sans MS','Segoe Print',cursive!important} .font-font_galindo{font-family:'Galindo',cursive!important} .shop-item{display:flex;align-items:center;gap:12px;padding:10px 12px; background:var(--sf2);border:1px solid var(--bd);border-radius:12px;margin-bottom:6px} .shop-item-preview{width:40px;height:40px;border-radius:50%;background:var(--sf3);flex-shrink:0;display:flex;align-items:center;justify-content:center} .shop-item-preview-badge{width:auto;min-width:40px;height:auto;min-height:40px;border-radius:8px;padding:4px 6px} .shop-item-preview-bubble{width:auto;height:auto;min-width:40px;min-height:40px;border-radius:8px;background:transparent;padding:0} .shop-item-preview-name{width:auto;height:auto;min-width:40px;min-height:40px;border-radius:8px} .shop-item-info{flex:1;min-width:0} .shop-item-name{font-size:13px;font-weight:600;color:var(--tx)} .shop-item-price{font-size:11px;color:var(--mt);display:flex;align-items:center;gap:4px;margin-top:1px} .shop-section-lbl{font-size:11px;font-weight:700;color:var(--mt);letter-spacing:.1em;text-transform:uppercase;margin:16px 0 8px} .shop-section-lbl:first-child{margin-top:0} .fp-add-btn{margin-left:auto;align-self:center; background:var(--ac)!important;color:#000!important; border-radius:16px!important;border-bottom:none!important; padding:5px 12px 5px 10px!important; display:flex;align-items:center;gap:3px; font-size:11px!important;font-weight:700!important; transition:filter .2s,transform .15s var(--spring)} .fp-add-btn:hover{filter:brightness(1.1);color:#000!important} .fp-add-btn:active{transform:scale(.95)} .fp-reload-btn{background:none;border:none;color:var(--mt);cursor:pointer; width:30px;height:30px;border-radius:8px; display:flex;align-items:center;justify-content:center; transition:color .15s,background .15s,transform .4s; flex-shrink:0} .fp-reload-btn:hover{color:var(--tx2);background:rgba(255,255,255,.05)} .fp-reload-btn.spin .material-symbols-outlined{animation:fpSpin .6s linear} @keyframes fpSpin{to{transform:rotate(360deg)}} .fp-name-row{display:flex;align-items:baseline;gap:6px;min-width:0} .fp-name-row .fp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fp-uname{font-size:11px;color:var(--mt);flex-shrink:0} .invite-code-display{font-family:'SF Mono','Fira Code',monospace; font-size:18px;font-weight:700;letter-spacing:.18em; text-align:center;background:var(--sf2); border:1px solid var(--bd);border-radius:12px; padding:18px;color:var(--ac);cursor:pointer; transition:background .2s,border-color .2s} .invite-code-display:hover{background:var(--sf3);border-color:var(--ac)} .session-row{display:flex;align-items:center;gap:14px;padding:12px 16px; background:var(--sf2);border:1px solid var(--bd);border-radius:11px} .session-row.current{border-color:rgba(43,184,255,.3)} .session-icon{font-size:20px;flex-shrink:0;width:30px;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:2px} .session-current-badge{font-size:10px;padding:3px 10px;border-radius:10px; background:var(--ac-dim);color:var(--ac); border:1px solid rgba(43,184,255,.25); font-weight:600;flex-shrink:0} .disappear-opts{display:flex;flex-wrap:wrap;gap:6px} .disappear-opt{padding:7px 14px;border:1px solid var(--bd);border-radius:9px; font-size:12px;font-weight:500;color:var(--tx2); cursor:pointer;transition:all .2s;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);font-weight:600} .msg-expire{display:inline-flex;align-items:center;gap:3px; font-size:10px;padding:2px 7px;border-radius:10px; background:rgba(245,158,11,.1);color:var(--am); 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)} .msg-expire-critical svg{animation:clockTick 1s ease-in-out infinite} @keyframes clockTick{0%,100%{opacity:1}50%{opacity:.5}} .search-bar{display:none;align-items:center;gap:8px;flex:1} .search-bar.on{display:flex} .search-inp{flex:1;background:var(--sf);border:1px solid var(--bd);border-radius:10px; color:var(--tx);font-family:var(--fn);font-size:13px;padding:7px 12px; outline:none;transition:border-color .2s,box-shadow .2s} .search-inp:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-glow)} .search-inp:focus-visible{outline:none} .search-count{font-size:11px;color:var(--mt);white-space:nowrap} .gsearch-result{padding:12px 16px;background:var(--sf2);border:1px solid var(--bd); border-radius:11px;cursor:pointer;transition:border-color .15s;margin-bottom:4px} .gsearch-result:hover{border-color:var(--ac)} .gsearch-chat{font-size:10px;color:var(--ac);font-weight:700;letter-spacing:.1em;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(43,184,255,.18);color:var(--ac);border-radius:3px;padding:0 3px} .gsearch-meta{font-size:11px;color:var(--mt);margin-top:3px} .mention{color:var(--ac);font-weight:700;background:rgba(43,184,255,.08);border-radius:3px;padding:0 2px} .mention.self{background:rgba(43,184,255,.18)} .mention-popup{position:absolute;bottom:100%;left:0; background:var(--sf);border:1px solid var(--bd2);border-radius:12px; padding:6px;z-index:50;min-width:180px; box-shadow:0 12px 36px rgba(0,0,0,.75); max-height:220px;overflow-y:auto} .mention-item{padding:8px 12px;border-radius:8px;cursor:pointer; font-size:13px;color:var(--tx2);display:flex;align-items:center;gap:8px; transition:background .1s} .mention-item:hover,.mention-item.active{background:var(--sf2);color:var(--tx)} .emoji-picker{position:absolute;background:var(--sf);border:1px solid var(--bd2); border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px; z-index:30;box-shadow:0 16px 48px rgba(0,0,0,.75);min-width:240px} .emoji-btn{font-size:18px;cursor:pointer;padding:4px;border-radius:7px; transition:background .1s,transform .1s var(--spring);line-height:1} .emoji-btn:hover{background:var(--sf2);transform:scale(1.25)} .msg-img{max-width:300px;max-height:340px;border-radius:12px;cursor:pointer;display:block;object-fit:cover;border:1px solid rgba(255,255,255,.08);min-height:40px} .msg-img-wrap{position:relative;display:inline-block} .msg-img-loading{width:200px;height:130px;border-radius:12px;background:var(--sf2); display:flex;align-items:center;justify-content:center; color:var(--mt);font-size:12px;border:1px solid var(--bd)} .file-stream-badge{font-size:10px;padding:1px 6px;border-radius:5px;background:rgba(245,158,11,.1);color:var(--am);border:1px solid rgba(245,158,11,.2);font-weight:600} .file-card{transition:border-color .2s} .file-card:hover{border-color:var(--bd2)} .acct-item{display:flex;align-items:center;gap:10px;padding:8px 10px; border-radius:8px;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(43,184,255,.05)} .acct-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;font-style:italic;flex-shrink:0} .color-grid{display:flex;flex-wrap:wrap;gap:10px;padding:6px 0} .color-swatch{width:30px;height:30px;border-radius:50%;cursor:pointer; transition:transform .15s var(--spring),box-shadow .15s; border:2px solid transparent} .color-swatch:hover{transform:scale(1.2)} .color-swatch.selected{border-color:#fff;box-shadow:0 0 0 3px var(--ac)} .theme-swatches{display:flex;flex-wrap:wrap;gap:10px} .theme-swatch{width:48px;height:48px;border-radius:12px;cursor:pointer; border:2px solid rgba(255,255,255,.08); transition:border-color .2s,transform .15s var(--spring);position:relative} .theme-swatch:hover{transform:scale(1.12)} .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:16px;font-weight:800;color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.9)} .dm-state{display:none;flex-direction:column;gap:12px} .dm-state.on{display:flex;animation:up .2s var(--ease) both} @keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .dm-found{display:flex;align-items:center;gap:12px;padding:12px; background:var(--sf2);border:1px solid var(--bd);border-radius:11px} .dm-found-av{width:38px;height:38px;border-radius:50%;background:var(--sf3);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;font-style:italic;color:var(--ac);border:1px solid rgba(43,184,255,.25);flex-shrink:0} .dm-found-info{flex:1} .dm-found-name{font-size:14px;font-weight:600;color:var(--tx);letter-spacing:-.01em} .dm-found-status{font-size:11px;color:var(--mt)} .totp-code{font-family:monospace;font-size:26px;letter-spacing:.35em;text-align:center;background:var(--sf2);border:1px solid var(--bd);border-radius:12px;padding:14px;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:9px;padding:10px;text-align:center} .tut-row{display:flex;align-items:flex-start;gap:14px;padding:12px;background:var(--sf2);border:1px solid var(--bd);border-radius:11px} .tut-icon{width:34px;height:34px;border-radius:10px;background:var(--sf3);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--ac);flex-shrink:0;font-style:italic} .tut-text{font-size:13px;color:var(--tx2);line-height:1.6} .tut-text strong{color:var(--tx);font-weight:600} #chan-switch{overflow-x:auto;scrollbar-width:none;max-width:220px;flex-shrink:1} #chan-switch::-webkit-scrollbar{display:none} .chan-tab.on{background:rgba(43,184,255,.1)!important;color:var(--ac)!important} .toggle-wrap{position:relative;display:inline-flex;width:38px;height:22px;flex-shrink:0} .toggle-wrap input{opacity:0;width:0;height:0} .toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:background .2s} .toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .25s var(--spring)} .toggle-wrap input:checked+.toggle-slider{background:var(--ac)} .toggle-wrap input:checked+.toggle-slider::before{transform:translateX(16px)} .msg-lock{font-size:9px;opacity:.3;line-height:1;transition:opacity .15s;flex-shrink:0} .mrow:hover .msg-lock{opacity:.6} #empty-room-splash{background:var(--bg)!important;display:none} #empty-room-splash.visible{display:flex!important} .prof-modal-card{max-width:540px;gap:0;padding:0;overflow:hidden;border-radius:20px;background:var(--sf);box-shadow:0 16px 48px rgba(0,0,0,.5)} .prof-banner{height:160px;background:linear-gradient(135deg,#1a2f4f,#1a0a2e);position:relative;flex-shrink:0;transition:background .3s ease} .prof-av{width:88px;height:88px;border-radius:50%;border:4px solid var(--bg);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;font-style:italic;flex-shrink:0;background-size:cover;background-position:center;box-shadow:0 6px 24px rgba(0,0,0,.5)} .prof-info{padding:16px 24px 28px;display:flex;flex-direction:column} .prof-dname{font-size:22px;font-weight:800;color:var(--tx);letter-spacing:-.03em;line-height:1.2} .prof-atname{font-size:13px;color:var(--mt);margin-top:3px;font-weight:500} .prof-tokens{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--ac);margin-top:6px} .prof-status{font-size:13px;color:var(--tx2);margin-top:12px;display:flex;align-items:center;gap:7px} .prof-status-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;display:none;flex-shrink:0} .prof-status-dot.on{display:inline-block} #prof-status-text{color:var(--tx2)} .prof-bio{font-size:14px;color:var(--tx2);line-height:1.7;padding:14px 16px;background:var(--bg);border-radius:12px;border:1px solid var(--bd);display:none;margin-top:14px} .prof-actions{display:flex;gap:6px;padding-bottom:8px;align-items:center} .prof-action-icon{width:36px;height:36px;border-radius:50%;border:1px solid var(--bd2);background:rgba(255,255,255,.04);color:var(--mt);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s;flex-shrink:0} .prof-action-icon:hover{background:rgba(255,255,255,.08);color:var(--tx);border-color:var(--bd)} .prof-dm-btn{height:36px;padding:0 16px;font-size:13px;font-weight:600;border-radius:24px;display:flex;align-items:center;gap:6px;flex-shrink:0} #settings-banner-wrap:hover #settings-banner-overlay{opacity:1!important} .msg-highlight{background:rgba(43,184,255,.06)!important} .msg-hidden{display:none!important} button:disabled,input:disabled{opacity:.4;cursor:not-allowed;pointer-events:none} a{color:var(--ac);text-decoration:none} a:hover{text-decoration:underline} .sb-item:focus-visible{outline:2px solid var(--ac);outline-offset:-2px} .btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .sbtn:focus-visible{outline:2px solid var(--ac);outline-offset:3px} *: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} .auth-card input:-webkit-autofill,.inp:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--sf) inset!important; -webkit-text-fill-color:var(--tx)!important} @keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}} .inp-shake{animation:shake .35s ease} @keyframes msgSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .mrow:last-child{animation:msgSlideIn .25s var(--ease)} 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} #sidebar.col{background:rgba(10,11,18,.75)} #stay-toggle-track{transition:background .2s,border-color .2s} #stay-toggle-thumb{transition:transform .2s,background .2s} input:checked+#stay-toggle-track{background:var(--ac-dim);border-color:var(--ac)} input:checked~#stay-toggle-thumb{transform:translateX(18px);background:var(--ac)} .link-text{color:var(--ac);cursor:pointer;transition:opacity .15s} .link-text:hover{opacity:.8} .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:9px 14px 11px;cursor:pointer; transition:color .2s,border-color .2s;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} .pin-item{opacity:.85} .pin-item.on{opacity:1} .set-section-hd{font-size:10px;font-weight:700;color:var(--mt); letter-spacing:.12em;text-transform:uppercase; margin:4px 0 8px} .link-preview{border-radius:12px!important;transition:border-color .2s} .link-preview:hover{border-color:var(--bd2)!important} .ic-join-btn{border-radius:10px!important;letter-spacing:.01em} .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:14px} .astep.on{display:flex;animation:up .2s var(--ease) both} #sidebar{background:rgba(13,14,21,.92)} #sidebar.col{background:rgba(10,11,18,.92)} @media(max-width:600px){.bubble{max-width:calc(100vw - 90px)!important} :root{--sb:200px} } #mob-nav{display:none} @media(max-width:680px){:root{--sb:100vw} .col-btn,#global-search-btn,#settings-btn{display:none!important} #app{flex-direction:column;height:100dvh;overflow:hidden} #sidebar{position:fixed;inset:0;z-index:50; width:100vw!important;height:100dvh; transform:translateX(0); transition:transform .3s var(--ease); border-right:none;display:flex!important;flex-direction:column} #sidebar.mob-hidden{transform:translateX(-100%);pointer-events:none} #sidebar.col{width:100vw!important} #main{position:fixed;inset:0;bottom:60px;display:none;flex-direction:column} #main.mob-active{display:flex} #chan-hd{height:52px;padding:0 8px;gap:6px} .chan-nm{font-size:15px} #mob-back{display:flex!important;font-size:24px;width:38px;height:38px;padding:0;justify-content:center;align-items:center} .chan-btn{width:34px;height:34px;font-size:15px} .msg-list{padding:8px 6px 4px} .bubble{font-size:14px;padding:9px 12px;max-width:calc(100vw - 72px)!important} .mav,.mav-spacer{width:28px;height:28px} .mrow{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .inp-wrap{padding:6px 8px 10px;gap:4px} textarea.minp{font-size:16px!important;padding:9px 12px} .sbtn{width:38px;height:38px;font-size:18px} .sb-item{padding:9px 12px;margin:2px 8px;border-radius:11px} .sb-body{padding-bottom:10px} .sb-sec{padding:14px 16px 4px} .sb-sec-lbl{font-size:10px} .sb-iname{font-size:14px} .sb-iprev{font-size:12px} #friends-sec{display:none!important} .sb-shop-card{margin-bottom:16px} .ov{padding:20px 20px calc(20px + 60px + env(safe-area-inset-bottom,0))} .modal,#confirm-box{width:100%;max-height:70dvh;overflow-y:auto} #settings-modal.ov{align-items:flex-end;padding:0 0 calc(60px + env(safe-area-inset-bottom,0))} #settings-modal .set-shell{flex-direction:column!important;max-height:calc(92dvh - 60px - env(safe-area-inset-bottom,0)); max-width:100vw;width:100vw;border-radius:16px 16px 0 0!important} #settings-modal .set-shell>.mclose{display:none!important} #settings-modal .set-side{width:100%!important;flex-shrink:0;flex-direction:column!important; padding:0 4px!important;border-right:none!important; border-bottom:1px solid var(--bd)} .set-side-hd{display:none!important} .set-sec-lbl{display:none!important} .set-side-tabs{display:flex;flex-direction:row;overflow-x:auto;padding:6px 4px;gap:2px;scrollbar-width:none} .set-side-tabs::-webkit-scrollbar{display:none} #settings-modal .set-body{padding:18px 14px calc(40px + env(safe-area-inset-bottom))} .set-nav{width:auto;padding:8px 12px;font-size:11px;gap:6px;margin:0; white-space:nowrap;border-radius:8px;border-bottom:none; flex-shrink:0} .set-nav .material-symbols-outlined{font-size:16px;width:auto} .set-nav.on{border-bottom-color:var(--ac);background:rgba(43,184,255,.08)} .auth-card{border-radius:16px;padding:24px 18px} .auth-logo{font-size:44px} #mob-nav{display:none} #app.on ~ #mob-nav{display:flex;position:fixed;bottom:0;left:0;right:0; height:60px;background:rgba(8,9,17,.97); border-top:1px solid var(--bd2);backdrop-filter:blur(24px); 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 .2s;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,9,17,.97)} #mob-fr-badge.on{display:block} *{touch-action:manipulation} input,textarea,select{font-size:16px!important} .toastify{left:10px!important;right:10px!important;top:72px!important;max-width:calc(100vw - 20px)!important} .member-panel{display:none!important} .member-panel.mob-member-sheet{display:flex!important; width:100%;border-left:none; border-radius:20px 20px 0 0; max-height:70dvh; background:linear-gradient(180deg,var(--sf2),var(--sf)); animation:slideUp .25s var(--ease) both; padding-bottom:env(safe-area-inset-bottom,0)} .sb-foot{gap:0;justify-content:center;padding:8px 0} .sb-logout{display:none!important} .msg-actions{display:none!important} .mrow.pressing{background:rgba(255,255,255,.04)} .mob-msg-sheet-ov{position:fixed;inset:0;z-index:300; background:rgba(4,5,8,.75);backdrop-filter:blur(16px); display:flex;align-items:flex-end} .mob-msg-sheet{width:100%;background:linear-gradient(180deg,var(--sf2),var(--sf)); border-radius:20px 20px 0 0; padding:14px 10px calc(20px + env(safe-area-inset-bottom,0)); display:flex;flex-direction:column;gap:2px; max-height:80dvh;overflow-y:auto; animation:slideUp .25s var(--ease) both} .mob-sheet-react-row{display:flex;justify-content:space-around; padding:4px 4px 16px;margin-bottom:6px; border-bottom:1px solid var(--bd)} .mob-sheet-react-row .action-btn{font-size:26px;padding:6px 10px} .mob-sheet-row{display:flex;align-items:center;gap:14px; width:100%;min-height:48px;padding:0 14px;border-radius:12px; background:none;border:none;color:var(--tx); font-family:var(--fn);font-size:15px;font-weight:500;text-align:left} .mob-sheet-row:active{background:rgba(255,255,255,.06)} .mob-sheet-row-danger{color:var(--rd)} .mob-sheet-row .material-symbols-outlined{font-size:19px!important} } @supports(padding-bottom:env(safe-area-inset-bottom)){@media(max-width:680px){#mob-nav{padding-bottom:env(safe-area-inset-bottom)}} } .ic-card{transition:transform .2s var(--spring),border-color .2s,box-shadow .2s} .ic-card:hover{transform:translateY(-2px); border-color:rgba(43,184,255,.32); box-shadow:0 8px 24px -8px rgba(0,0,0,.5),0 0 0 1px var(--ac-dim)} .ic-card:hover .ic-glow{opacity:1} .frame-frame_neon{animation:frameNeonPulse 2s cubic-bezier(.45,0,.55,1) infinite} @keyframes frameNeonPulse{0%,100%{box-shadow:0 0 0 2px rgba(43,184,255,.95),0 0 8px rgba(43,184,255,.55),0 0 18px rgba(43,184,255,.25);transform:scale(1)} 50%{box-shadow:0 0 0 4px rgba(43,184,255,.55),0 0 22px rgba(43,184,255,.9),0 0 38px rgba(43,184,255,.4);transform:scale(1.035)} } .frame-frame_gold{position:relative;box-shadow:0 0 0 2px #7a5410,0 0 0 3px #fbbf24,0 0 12px rgba(251,191,36,.5)} .frame-frame_gold::after{content:'';position:absolute;inset:-4px;border-radius:50%;padding:3px; background:conic-gradient(from 0deg,transparent 0deg,transparent 260deg,#fff9db 300deg,#fbbf24 320deg,transparent 340deg,transparent 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:frameSpin 2.4s linear infinite;pointer-events:none} .frame-frame_rainbow{position:relative} .frame-frame_rainbow::after{content:'';position:absolute;inset:-4px;border-radius:50%;padding:3px; background:conic-gradient(from 0deg,#ff3d71,#ffd400,#3dff9e,#3dc7ff,#a86bff,#ff3d71); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:frameSpin 3s linear infinite;pointer-events:none; filter:saturate(1.3) drop-shadow(0 0 4px rgba(255,255,255,.25))} @keyframes frameSpin{to{transform:rotate(360deg)}} .banner-fx-banner_aurora{position:relative;overflow:hidden;background:linear-gradient(160deg,#0d1526,#0a0f1c)} .banner-fx-banner_aurora::before{content:'';position:absolute;inset:0; background:linear-gradient(115deg, transparent 4%,rgba(43,184,255,.75) 26%,rgba(120,90,255,.7) 40%, rgba(255,90,200,.6) 52%,rgba(43,184,255,.7) 66%,transparent 92%); background-size:280% 100%;filter:blur(6px) saturate(1.3); animation:auroraSweep 6s ease-in-out infinite} .banner-fx-banner_aurora::after{content:'';position:absolute;inset:0; background:linear-gradient(115deg, transparent 10%,rgba(180,230,255,.5) 32%,rgba(200,160,255,.4) 50%,transparent 80%); background-size:220% 100%;mix-blend-mode:screen; animation:auroraSweep 4.2s ease-in-out infinite reverse} @keyframes auroraSweep{0%{background-position:130% 0}50%{background-position:-30% 0}100%{background-position:130% 0}} .banner-fx-banner_particles{position:relative;overflow:hidden;background:#0a0d16} .banner-fx-banner_particles::before,.banner-fx-banner_particles::after{content:'';position:absolute;inset:0;pointer-events:none} .banner-fx-banner_particles::before{background-image: radial-gradient(circle,rgba(255,255,255,.95) 1.5px,transparent 2.1px), radial-gradient(circle,rgba(255,255,255,.65) 1.2px,transparent 1.7px), radial-gradient(circle,rgba(43,184,255,.9) 1.9px,transparent 2.5px); background-size:26px 26px,34px 34px,52px 52px; background-position:0 0,10px 14px,20px 4px; animation:particleDriftA 8s linear infinite,particleTwinkle 2.8s ease-in-out infinite} .banner-fx-banner_particles::after{background-image: radial-gradient(circle,rgba(168,107,255,.85) 1.7px,transparent 2.3px), radial-gradient(circle,rgba(255,255,255,.55) 1.1px,transparent 1.6px); background-size:46px 46px,30px 30px; background-position:28px 8px,10px 22px; animation:particleDriftB 14s linear infinite,particleTwinkle 4.2s ease-in-out infinite reverse} @keyframes particleDriftA{to{background-position:26px -26px,-17px 14px,-20px 52px}} @keyframes particleDriftB{to{background-position:-23px 46px,15px -15px}} @keyframes particleTwinkle{0%,100%{opacity:.55}50%{opacity:1}} .banner-fx-banner_waves{position:relative;overflow:hidden} .banner-fx-banner_waves::before,.banner-fx-banner_waves::after{content:'';position:absolute;inset:-20% -10%;pointer-events:none} .banner-fx-banner_waves::before{background:repeating-linear-gradient(100deg, transparent 0,transparent 26px,rgba(43,184,255,.22) 40px,transparent 54px); animation:waveShiftA 5s ease-in-out infinite} .banner-fx-banner_waves::after{background:repeating-linear-gradient(80deg, transparent 0,transparent 34px,rgba(120,90,255,.2) 46px,transparent 60px); animation:waveShiftB 7s ease-in-out infinite} @keyframes waveShiftA{0%,100%{transform:translate(0,0)}50%{transform:translate(3%,2%)}} @keyframes waveShiftB{0%,100%{transform:translate(0,0)}50%{transform:translate(-4%,-1.5%)}} .banner-fx-banner_starfield{position:relative;overflow:hidden;background-color:#05060b} .banner-fx-banner_starfield::before{content:'';position:absolute;inset:0;pointer-events:none; background-image: radial-gradient(circle,#fff 1px,transparent 1.4px), radial-gradient(circle,rgba(255,255,255,.7) .8px,transparent 1.2px), radial-gradient(circle,rgba(255,255,255,.5) .6px,transparent 1px); background-size:90px 90px,55px 55px,35px 35px; background-position:10px 15px,40px 60px,70px 20px; animation:starTwinkle 3s ease-in-out infinite} .banner-fx-banner_starfield::after{content:'';position:absolute;top:-10%;left:-20%;width:45%;height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent); transform:rotate(18deg);pointer-events:none; animation:shootingStar 4.5s cubic-bezier(.3,0,.2,1) infinite; animation-delay:1.2s} @keyframes starTwinkle{0%,100%{opacity:.55}50%{opacity:1}} @keyframes shootingStar{0%{transform:translate(0,0) rotate(18deg);opacity:0} 4%{opacity:1} 16%{transform:translate(260%,220%) rotate(18deg);opacity:0} 100%{opacity:0} } .mrow .bubble.bubble-style-bubble_outline{background:transparent!important; border:1.5px solid var(--ac)!important; color:var(--tx)!important; box-shadow:none!important} .mrow.own .bubble.bubble-style-bubble_outline{color:var(--ac)!important} .mrow .bubble.bubble-style-bubble_glass{position:relative;overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 55%,rgba(120,180,255,.08))!important; border:1px solid rgba(255,255,255,.28)!important; backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4); color:var(--tx)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -12px 20px -14px rgba(120,180,255,.3),0 4px 18px rgba(0,0,0,.3)!important} .mrow .bubble.bubble-style-bubble_glass::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.35) 42%,transparent 60%); background-size:220% 100%; animation:holoSheen 5s ease-in-out infinite} .mrow .bubble.bubble-style-bubble_gradient{background:linear-gradient(120deg,#ff3d71,#a86bff,#3dc7ff,#3dff9e,#ff3d71)!important; background-size:320% 100%!important; color:#fff!important;border:none!important; animation:bubbleGradientFlow 7s ease infinite} @keyframes bubbleGradientFlow{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:0% 0}} .mrow .bubble.bubble-style-bubble_holo{position:relative;overflow:hidden; background:linear-gradient(120deg,#7b2ff7,#2b7dfa,#0891b2,#c026d3,#7b2ff7)!important; background-size:320% 100%!important; color:#fff!important;border:none!important; text-shadow:0 1px 3px rgba(0,0,0,.35); animation:bubbleGradientFlow 9s ease infinite; filter:saturate(1.3)} .mrow .bubble.bubble-style-bubble_holo::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%); background-size:250% 100%; animation:holoSheen 3.4s ease-in-out infinite} @keyframes holoSheen{0%{background-position:140% 0}100%{background-position:-40% 0}} .name-color-name_crimson{color:#ef4444!important} .name-color-name_gold{color:#facc15!important} .name-color-name_ice{background:linear-gradient(90deg,#7dd3fc,#3b82f6,#7dd3fc,#3b82f6)!important; background-size:200% 100%!important; -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important; animation:nameGradientShift 4s linear infinite} .name-color-name_prism{background:linear-gradient(90deg,#ff3d71,#ffd400,#3dff9e,#3dc7ff,#a86bff,#ff3d71,#ffd400,#3dff9e,#3dc7ff,#a86bff)!important; background-size:200% 100%!important; -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important; animation:nameGradientShift 6s linear infinite} @keyframes nameGradientShift{to{background-position:-100% 0}}