/* BlueMsg — light-blue → deep-blue, Telegram-style */
@font-face{font-family:"BlueGlyph";src:url(/s/fonts/TaiViet.woff2) format("woff2");unicode-range:U+AA80-AADF;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url(/s/fonts/Vazirmatn.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --wash:linear-gradient(180deg,rgba(90,175,255,.10) 0%,rgba(25,90,200,.18) 55%,rgba(10,50,140,.32) 100%);
  --font:"BlueGlyph","Nazanin","B Nazanin","Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --b1:#8fd3ff;--b2:#3d9cf4;--b3:#1b5fd1;--b4:#0e3a8c;
  --grad:linear-gradient(135deg,#8fd3ff 0%,#3d9cf4 48%,#1b5fd1 100%);
  --grad-soft:linear-gradient(160deg,#eaf6ff 0%,#d6ebff 55%,#c5e0ff 100%);
  --bg:#f3f8fe;--panel:#fff;--panel2:#f2f7fd;--line:#e1ebf7;--text:#10233d;--sub:#6b819c;--hover:#eef5fd;--active:#dcecff;
  --in:#fff;--in-text:#10233d;--out:linear-gradient(145deg,#52b4ff,#2370e6);--out-text:#fff;
  --acc:#2a86ee;--danger:#e5484d;--ok:#2fb86b;--shadow:0 1px 2px rgba(20,60,120,.14);--shadow-lg:0 10px 40px rgba(14,58,140,.22);
  --chat-bg:var(--grad-soft);--dot:rgba(42,134,238,.10);
  --sidew:380px;--r:18px;
}
:root[data-theme=dark]{
  --wash:linear-gradient(180deg,rgba(6,18,40,.50) 0%,rgba(5,14,32,.62) 100%);
  --bg:#0a1626;--panel:#0f2036;--panel2:#13294a;--line:#1b3558;--text:#e8f1fc;--sub:#8ba5c6;--hover:#15294a;--active:#1b3a66;
  --in:#17304f;--in-text:#e8f1fc;--out:linear-gradient(145deg,#2c82e4,#1a4fb3);--out-text:#fff;--acc:#58aaff;
  --chat-bg:linear-gradient(160deg,#0b1d36 0%,#0a1830 55%,#08142a 100%);--dot:rgba(120,180,255,.06);--shadow:0 1px 2px rgba(0,0,0,.4);--shadow-lg:0 10px 40px rgba(0,0,0,.55);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:16px;line-height:1.55;overflow:hidden;direction:rtl;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
input,textarea{outline:none}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
svg.i{width:24px;height:24px;fill:currentColor;flex:none;display:block}
.hide{display:none!important}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgba(120,160,210,.35);border-radius:8px}::-webkit-scrollbar-track{background:transparent}

/* ---------- landing / login ---------- */
#login{position:fixed;inset:0;overflow-x:hidden;overflow-y:auto;z-index:50;color:#fff;-webkit-overflow-scrolling:touch;background:radial-gradient(1100px 700px at 88% -10%,#3b8ff5 0%,rgba(59,143,245,0) 60%),linear-gradient(160deg,#1769e0 0%,#0d3f9f 52%,#08245f 100%)}
.lhero{position:fixed;top:0;bottom:0;left:0;width:54%;overflow:hidden;background:#12306a;z-index:0}
.lhero img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;animation:kb 40s ease-in-out infinite alternate;user-select:none}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.05)}}
.lhero::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,#0d3f9f 0%,rgba(13,63,159,.6) 12%,rgba(13,63,159,0) 36%),linear-gradient(to top,rgba(4,18,58,.5),rgba(4,18,58,0) 32%)}
.lhearts{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.lhearts i{position:absolute;bottom:-60px;width:var(--s,22px);height:var(--s,22px);opacity:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23d6ecff' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(120,190,255,.8));animation:rise var(--d,14s) linear var(--dl,0s) infinite;left:var(--x,50%)}
.lhearts i:nth-child(1){--x:6%;--s:16px;--d:15s;--dl:-2s}.lhearts i:nth-child(2){--x:16%;--s:26px;--d:19s;--dl:-9s}.lhearts i:nth-child(3){--x:27%;--s:14px;--d:13s;--dl:-5s}
.lhearts i:nth-child(4){--x:38%;--s:22px;--d:17s;--dl:-12s}.lhearts i:nth-child(5){--x:52%;--s:15px;--d:16s;--dl:-1s}.lhearts i:nth-child(6){--x:63%;--s:28px;--d:21s;--dl:-14s}
.lhearts i:nth-child(7){--x:75%;--s:18px;--d:14s;--dl:-7s}.lhearts i:nth-child(8){--x:86%;--s:24px;--d:18s;--dl:-3s}.lhearts i:nth-child(9){--x:94%;--s:14px;--d:12s;--dl:-10s}
@keyframes rise{0%{transform:translateY(0) scale(.7) rotate(-10deg);opacity:0}10%{opacity:.8}85%{opacity:.5}100%{transform:translateY(-112vh) scale(1.15) rotate(12deg);opacity:0}}
.lwrap{position:relative;z-index:2;margin-left:54%;min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;padding:36px 32px}
.lbrand{text-align:center;max-width:560px}
.lmark{width:92px;height:92px;margin:0 auto 16px;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;box-shadow:0 16px 44px rgba(2,20,70,.5),inset 0 1px 0 rgba(255,255,255,.55);animation:beat 3s ease-in-out infinite}
.lmark svg{width:50px;height:50px;fill:#fff;filter:drop-shadow(0 4px 10px rgba(0,50,160,.55))}
@keyframes beat{0%,40%,100%{transform:scale(1)}8%{transform:scale(1.09)}16%{transform:scale(1)}24%{transform:scale(1.06)}}
.lbrand h1{margin:0;line-height:1.18;font-weight:500}
.lbrand h1 span{display:block;font-size:clamp(20px,2.3vw,27px);letter-spacing:.4px;opacity:.94;text-shadow:0 2px 14px rgba(0,30,100,.5)}
.lbrand h1 b{display:block;font-size:clamp(42px,5.4vw,66px);font-weight:800;background:linear-gradient(180deg,#fff 8%,#a6d6ff 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 4px 18px rgba(0,40,130,.6));padding:2px 0}
.ltag{margin:10px auto 0;max-width:390px;color:rgba(235,246,255,.92);font-size:16px;text-shadow:0 1px 10px rgba(0,25,90,.55)}
.lfeat{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lfeat li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:20px;padding:5px 13px;font-size:13.5px;white-space:nowrap}
.lcard{position:relative;z-index:1;width:100%;max-width:380px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-radius:24px;padding:18px 18px 12px;box-shadow:0 26px 70px rgba(2,18,64,.55),inset 0 1px 0 #fff;color:#10233d;text-align:center;animation:cardin .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
:root[data-theme=dark] .lcard{background:rgba(12,28,52,.88);color:#e8f1fc;box-shadow:0 26px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.lcard h2{margin:0 0 2px;font-size:19px}
.lcard p.sub{margin:0 0 10px;color:var(--sub);font-size:13.5px}
.lcard .lfoot{margin-top:6px;display:flex;gap:6px 14px;justify-content:center;flex-wrap:wrap}
.lcard .linkbtn{margin-top:6px}
.lnote{background:rgba(61,156,244,.12);border:1px solid rgba(61,156,244,.3);color:var(--text);border-radius:14px;padding:10px 12px;font-size:14px;margin:0 0 12px}
.lclosed{padding:6px 2px 4px}.lclosed .lz{font-size:46px;line-height:1;margin:2px 0 8px;animation:beat 3s ease-in-out infinite}.lclosed p{margin:6px 0 14px;color:var(--text);font-size:16px;white-space:pre-line}
.lcard .field input[readonly]{opacity:.7;background:var(--panel2)}
.lcard .field{margin:0 0 9px}.lcard .field span{font-size:12.5px;margin:0 3px 3px}.lcard .field input{padding:10px 14px;font-size:15px;border-radius:12px}.lcard .btn{min-height:44px;padding:10px 18px;border-radius:13px}.lcard .lerr{min-height:0;margin:0 0 6px}
.logo{width:84px;height:84px;margin:0 auto 14px;border-radius:26px;background:var(--grad);display:grid;place-items:center;box-shadow:0 12px 30px rgba(27,95,209,.45)}
.logo svg{width:46px;height:46px;fill:#fff}
@media (max-width:900px){
  .lhero{width:100%;bottom:auto;height:66vh;height:66svh}
  .lhero img{object-position:50% 36%}
  .lhero::after{background:linear-gradient(to bottom,rgba(5,22,70,.6) 0%,rgba(5,22,70,0) 30%,rgba(10,44,118,0) 50%,#0b3490 100%)}
  .lwrap{margin-left:0;justify-content:space-between;gap:14px;padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom))}
  .lmark{width:60px;height:60px;border-radius:19px;margin-bottom:6px}.lmark svg{width:32px;height:32px}
  .lbrand h1 span{font-size:19px}.lbrand h1 b{font-size:44px}
  .ltag,.lfeat{display:none}
  .lcard{max-width:400px;padding:12px 14px 6px;border-radius:22px}.lcard h2{font-size:17px}.lcard p.sub{font-size:12.5px;margin:0 0 8px}.lcard .field{margin:0 0 7px}.lcard .field input{padding:8px 13px}.lcard .btn{min-height:42px;padding:8px 16px}
}
@media (min-width:901px) and (max-height:900px){.lfeat{display:none}.lwrap{gap:18px;padding:24px 32px}.lmark{width:72px;height:72px;margin-bottom:8px;border-radius:24px}.lmark svg{width:40px;height:40px}}
@media (min-width:901px) and (max-height:760px){.ltag{display:none}}
@media (max-height:560px){.lmark{display:none}}
@media (prefers-reduced-motion:reduce){.lhero img,.lhearts i,.lmark,.lcard,.lclosed .lz{animation:none}.lhearts{display:none}}
.field{display:block;margin:0 0 12px;text-align:right}
.field span{display:block;font-size:13px;color:var(--sub);margin:0 4px 5px}
.field input,.field textarea{width:100%;padding:13px 15px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel2);transition:.15s}
.field input:focus,.field textarea:focus{border-color:var(--b2);background:var(--panel);box-shadow:0 0 0 4px rgba(61,156,244,.18)}
.field input.ltr{direction:ltr;text-align:left;letter-spacing:.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:14px;font-weight:700;background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(27,95,209,.35);transition:.15s;min-height:48px}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:scale(.98)}.btn[disabled]{opacity:.6;pointer-events:none}
.btn.block{width:100%}.btn.ghost{background:var(--panel2);color:var(--acc);box-shadow:none}.btn.danger{background:linear-gradient(135deg,#ff8a8f,#e5484d);box-shadow:0 6px 18px rgba(229,72,77,.3)}
.btn.sm{padding:8px 14px;min-height:36px;border-radius:11px;font-size:14px}
.lerr{min-height:12px;color:var(--danger);font-size:14px;margin:2px 0 8px}
.linkbtn{color:var(--acc);font-size:14px;margin-top:10px;padding:6px}
.steps{display:flex;gap:6px;justify-content:center;margin-bottom:16px}.steps i{width:26px;height:5px;border-radius:5px;background:var(--line)}.steps i.on{background:var(--grad)}

/* ---------- shell ---------- */
#app{position:fixed;inset:0;display:grid;grid-template-columns:var(--sidew) 1fr;direction:ltr;background:var(--bg)}
#app>*{direction:rtl}
#side{z-index:1;background:var(--panel);display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);position:relative;height:100%;min-height:0}
#main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;background:#0d2c58 url(/s/bg.jpg) center/cover no-repeat;overflow:hidden}
#main::before{content:"";position:absolute;inset:0;background:var(--wash);pointer-events:none}
#main>.empty{color:#fff;text-shadow:0 1px 10px rgba(0,20,60,.55)}#main>.empty b{color:#fff}
.sbar{display:flex;align-items:center;gap:6px;padding:10px 10px 8px;background:var(--panel)}
.ibtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--sub);transition:.15s;flex:none;position:relative}
.ibtn:hover{background:var(--hover);color:var(--acc)}
.ibtn.light{color:#fff}.ibtn.light:hover{background:rgba(255,255,255,.18);color:#fff}
.search{flex:1;display:flex;align-items:center;background:var(--panel2);border-radius:24px;padding:0 14px;gap:8px;height:44px;border:1.5px solid transparent;color:var(--sub)}
.search:focus-within{border-color:var(--b2);background:var(--panel)}
.search input{flex:1;background:none;border:0;min-width:0;height:100%;color:var(--text)}
.conn{background:linear-gradient(90deg,#ffb454,#ff8a3d);color:#fff;text-align:center;padding:5px;font-size:13.5px;font-weight:700}
#chatlist{flex:1;overflow:auto;min-height:0;padding:2px 6px 90px}
.sect{font-size:13px;color:var(--acc);font-weight:700;padding:10px 12px 4px}
.ci{display:flex;gap:11px;align-items:center;padding:9px 10px;border-radius:14px;cursor:pointer;transition:background .12s;position:relative}
.ci:hover{background:var(--hover)}.ci.act{background:var(--grad);color:#fff}
.ci.act .sub,.ci.act .ct,.ci.act .lm{color:rgba(255,255,255,.88)}
.ci .mid{flex:1;min-width:0}
.ci .r1,.ci .r2{display:flex;align-items:center;gap:6px}
.ci .r1{justify-content:space-between}
.ci .tt{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px;min-width:0}
.ci .tt svg{width:16px;height:16px;opacity:.7}
.ci .ct{font-size:12.5px;color:var(--sub);flex:none;display:flex;align-items:center;gap:3px}
.ci .lm{color:var(--sub);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ci .lm b{font-weight:600;color:var(--acc)}.ci.act .lm b{color:#fff}
.badge{background:var(--grad);color:#fff;border-radius:12px;min-width:23px;height:23px;padding:0 7px;font-size:13px;font-weight:700;display:grid;place-items:center;flex:none}
.ci.act .badge{background:#fff;color:var(--b3)}
.tick{width:17px;height:17px;fill:var(--sub);flex:none}.tick.rd{fill:var(--acc)}.ci.act .tick{fill:#fff}
.av{border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;overflow:hidden;position:relative;user-select:none;background:var(--grad)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av .dot{position:absolute;bottom:1px;left:1px;width:13px;height:13px;border-radius:50%;background:var(--ok);border:2.5px solid var(--panel)}
.fab{position:absolute;bottom:20px;left:20px;width:58px;height:58px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(27,95,209,.45);z-index:5;transition:.15s}
.fab:hover{transform:scale(1.06)}
.empty{margin:auto;text-align:center;color:var(--sub);position:relative;padding:20px;white-space:pre-line}
.empty .logo{margin:0 auto 12px;opacity:.95}
.empty b{display:block;color:var(--text);font-size:19px;margin-bottom:4px}

/* ---------- chat header ---------- */
.chead{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--grad);color:#fff;position:relative;z-index:3;box-shadow:0 2px 12px rgba(27,95,209,.25);min-height:62px}
.chead .who{flex:1;min-width:0;cursor:pointer;display:flex;align-items:center;gap:11px;padding:2px 4px;border-radius:12px}
.chead .tt{font-weight:700;font-size:17.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead .st{font-size:13px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead .st.typing{font-weight:700}
.back{display:none}

/* ---------- messages ---------- */
#msgs{flex:1;overflow:auto;min-height:0;padding:12px 14px 10px;position:relative;z-index:1;display:flex;flex-direction:column;scroll-behavior:auto;overscroll-behavior:contain}
#msgs .spacer{flex:1}
.day{align-self:center;background:rgba(12,44,110,.42);color:#fff;padding:3px 14px;border-radius:14px;font-size:13px;margin:10px 0 8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:sticky;top:2px;z-index:2;box-shadow:0 1px 6px rgba(0,20,60,.18)}
.unrd{align-self:stretch;text-align:center;background:rgba(12,44,110,.38);color:#fff;padding:4px;margin:8px -14px;font-size:13.5px;font-weight:700;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.row{display:flex;gap:8px;align-items:flex-end;margin:2px 0;max-width:100%;animation:rin .18s ease-out}
@keyframes rin{from{opacity:0;transform:translateY(6px)}}
.row.out{align-self:flex-start;flex-direction:row}
.row.in{align-self:flex-end;flex-direction:row-reverse}
.row .avs{width:36px;flex:none}
.bub{position:relative;max-width:min(560px,78vw);min-width:84px;padding:7px 11px 5px;border-radius:var(--r);box-shadow:var(--shadow);word-break:break-word;overflow-wrap:anywhere}
.row.out .bub{background:var(--out);color:var(--out-text);border-bottom-right-radius:5px;box-shadow:0 1px 3px rgba(0,20,60,.35)}
.row.in .bub{background:var(--in);color:var(--in-text);border-bottom-left-radius:5px;box-shadow:0 1px 3px rgba(0,20,60,.28)}
.row.cont .bub{margin-top:0}
.bub .nm{font-weight:700;font-size:14px;color:var(--acc);margin-bottom:1px;cursor:pointer}
.bub .nm.own{color:#d8ecff}
.bub .txt{white-space:pre-wrap;line-height:1.7}
.bub .txt a{color:inherit;text-decoration:underline}
.row.out .bub .txt a{color:#fff}
.meta{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:12px;opacity:.78;margin-top:1px;float:left;margin-right:0;padding-right:10px;direction:rtl;height:18px;position:relative;top:3px}
.bub::after{content:"";display:block;clear:both}
.meta .tick{width:16px;height:16px;fill:currentColor}.meta .tick.rd{fill:#bfe6ff}
.row.in .meta .tick.rd{fill:var(--acc)}
.rq{border-right:3px solid var(--b2);background:rgba(61,156,244,.14);border-radius:8px;padding:3px 9px;margin:2px 0 5px;cursor:pointer;font-size:14px;max-width:100%}
.row.out .rq{border-color:#fff;background:rgba(255,255,255,.2)}
.rq b{display:block;font-size:13px;color:var(--acc)}.row.out .rq b{color:#fff}
.rq span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.media{margin:2px 0 5px;border-radius:12px;overflow:hidden;cursor:zoom-in;background:rgba(0,0,0,.06);line-height:0}
.bub>.media:first-child{margin:-7px -11px 6px;border-radius:var(--r) var(--r) 8px 8px}
.bub.mo{padding:3px;min-width:0}.bub.mo>.media:first-child{margin:0;border-radius:15px}.bub.mo::after{display:none}
.bub.mo .meta{position:absolute;bottom:9px;left:10px;float:none;background:rgba(0,0,0,.42);color:#fff;border-radius:11px;padding:0 8px;opacity:1;top:auto;height:20px;backdrop-filter:blur(4px)}
.bub.mo .meta .tick,.bub.mo .meta .tick.rd{fill:#fff}
.bub.mo .rx{padding:2px 6px 4px}
.media img,.media video{max-width:100%;max-height:420px;display:block;width:auto;height:auto;min-width:160px;object-fit:cover}
.media video{cursor:default}
.fcard{display:flex;gap:10px;align-items:center;padding:4px 2px 6px;min-width:220px;max-width:100%}
.fcard .fi{width:46px;height:46px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;flex:none}
.row.out .fcard .fi{background:rgba(255,255,255,.28)}
.fcard .fn{font-weight:700;font-size:14.5px;word-break:break-all;direction:ltr;text-align:right}
.fcard .fs{font-size:12.5px;opacity:.75}
.voice{display:flex;align-items:center;gap:10px;min-width:230px;padding:4px 0 6px}
.voice .pp{width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none}
.row.out .voice .pp{background:rgba(255,255,255,.3)}
.voice .bar{flex:1;height:5px;border-radius:5px;background:rgba(120,160,210,.35);position:relative;overflow:hidden;cursor:pointer}
.voice .bar i{position:absolute;inset:0 auto 0 0;background:var(--acc);width:0}
.row.out .voice .bar i{background:#fff}
.voice .dur{font-size:12.5px;opacity:.8;min-width:36px;direction:ltr}
.rx{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0 2px;clear:both}
.rx button{background:rgba(61,156,244,.16);border-radius:13px;padding:1px 8px;font-size:14px;display:flex;gap:4px;align-items:center}
.rx button.mine{background:var(--acc);color:#fff}
.row.out .rx button{background:rgba(255,255,255,.22);color:#fff}.row.out .rx button.mine{background:#fff;color:var(--b3)}
.bub .more{position:absolute;top:2px;left:4px;width:26px;height:26px;border-radius:50%;display:none;place-items:center;color:inherit;opacity:.7;background:rgba(255,255,255,.18)}
.bub:hover .more{display:grid}
.hl .bub{animation:hl 1.6s}@keyframes hl{0%,60%{box-shadow:0 0 0 4px rgba(255,200,60,.8)}100%{box-shadow:var(--shadow)}}
.row.pending .bub{opacity:.65}
.sysmsg{align-self:center;color:#fff;background:rgba(12,44,110,.42);font-size:13px;margin:6px;padding:3px 14px;border-radius:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:center}
.tofab{position:absolute;bottom:92px;left:18px;width:46px;height:46px;border-radius:50%;background:var(--panel);color:var(--acc);box-shadow:var(--shadow-lg);display:none;place-items:center;z-index:4}
.tofab.on{display:grid}.tofab .badge{position:absolute;top:-8px;right:-4px}

/* ---------- composer ---------- */
.comp{position:relative;z-index:3;padding:8px 10px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.cbar{display:flex;align-items:flex-end;gap:6px}
.cbox{flex:1;display:flex;align-items:flex-end;background:var(--panel);border-radius:24px;padding:3px 4px;box-shadow:var(--shadow);min-width:0}
.cbox textarea{flex:1;border:0;background:none;resize:none;max-height:150px;min-height:42px;padding:9px 6px;line-height:1.55;min-width:0;color:var(--text)}
.cbox .ibtn{width:42px;height:42px}
.sendb{width:50px;height:50px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(27,95,209,.4);flex:none;transition:.15s}
.sendb:hover{filter:brightness(1.08)}.sendb.rec{background:linear-gradient(135deg,#ff8a8f,#e5484d)}
.ctx{display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:16px;padding:6px 10px;box-shadow:var(--shadow);border-right:4px solid var(--b2)}
.ctx .tx{flex:1;min-width:0}.ctx b{display:block;color:var(--acc);font-size:13.5px}.ctx span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sub);font-size:14px}
.ro{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--panel);color:var(--sub);text-align:center;padding:14px;border-radius:16px;box-shadow:var(--shadow);opacity:.97}
.recbar{flex:1;display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:24px;padding:0 16px;height:50px;box-shadow:var(--shadow)}
.recbar i{width:11px;height:11px;border-radius:50%;background:var(--danger);animation:blink 1s infinite}@keyframes blink{50%{opacity:.25}}
.upl{height:5px;background:var(--line);border-radius:5px;overflow:hidden}.upl i{display:block;height:100%;background:var(--grad);width:0;transition:width .15s}
.emo{background:var(--panel);border-radius:18px;box-shadow:var(--shadow-lg);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:230px;overflow:auto}
.emo button{font-size:24px;padding:5px;border-radius:10px;line-height:1.2}.emo button:hover{background:var(--hover)}

/* ---------- overlays ---------- */
#ov{position:fixed;inset:0;z-index:60;display:none}
#ov.on{display:block}
.scrim{position:absolute;inset:0;background:rgba(8,28,64,.5);backdrop-filter:blur(3px);animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--panel);border-radius:22px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:pop .18s}
@keyframes pop{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}}
.modal.wide{width:min(520px,calc(100vw - 24px))}
.mh{display:flex;align-items:center;gap:8px;padding:14px 16px 8px}.mh h3{margin:0;flex:1;font-size:18px}
.mb{padding:6px 16px 14px;overflow:auto;flex:1;min-height:0}
.mf{display:flex;gap:8px;justify-content:flex-start;padding:10px 16px 16px}
.menu{position:fixed;z-index:70;background:var(--panel);border-radius:16px;box-shadow:var(--shadow-lg);padding:6px;min-width:200px;max-width:92vw;animation:pop2 .12s}
@keyframes pop2{from{opacity:0;transform:scale(.96)}}
.menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:11px;text-align:right}
.menu button:hover{background:var(--hover)}.menu button.dng{color:var(--danger)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.qr{display:flex;gap:2px;padding:4px 4px 6px;justify-content:space-between}.qr button{width:auto;font-size:24px;padding:4px 7px}
.drawer{position:absolute;top:0;bottom:0;right:0;width:min(340px,100%);background:var(--panel);z-index:6;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s;min-height:0}
.drawer.on{transform:none}
#menu{position:fixed;top:0;bottom:0;right:auto;left:0;width:min(330px,88vw);z-index:65;background:var(--panel);transform:translateX(-102%);transition:transform .22s,box-shadow .22s;display:flex;flex-direction:column;box-shadow:none;direction:rtl;visibility:hidden}
#menu.on{transform:none;box-shadow:var(--shadow-lg);visibility:visible}
#menuscrim{position:fixed;inset:0;z-index:64;background:rgba(8,28,64,.45);display:none}#menuscrim.on{display:block}
.mhead{background:var(--grad);color:#fff;padding:22px 18px 16px;display:flex;flex-direction:column;gap:8px}
.mhead .nm{font-weight:700;font-size:19px}.mhead .sb{opacity:.88;font-size:14px;direction:ltr;text-align:right}
.mitem{display:flex;align-items:center;gap:16px;padding:13px 18px;width:100%;text-align:right}.mitem:hover{background:var(--hover)}.mitem svg{color:var(--sub)}
.dhead{display:flex;align-items:center;gap:6px;padding:10px;background:var(--grad);color:#fff;min-height:62px}.dhead h3{margin:0;flex:1;font-size:18px}
.dbody{flex:1;overflow:auto;min-height:0}
.prof{display:flex;flex-direction:column;align-items:center;padding:20px 16px 12px;text-align:center;gap:4px}
.prof .tt{font-size:21px;font-weight:700}.prof .sb{color:var(--sub);font-size:14px}
.kv{display:flex;align-items:center;gap:14px;padding:10px 18px;cursor:pointer}.kv:hover{background:var(--hover)}
.kv svg{color:var(--sub)}.kv .v{direction:ltr;text-align:right;word-break:break-all}.kv small{display:block;color:var(--sub);font-size:12.5px}
.sec{padding:8px 18px 4px;color:var(--acc);font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.mrow{display:flex;align-items:center;gap:11px;padding:7px 14px;cursor:pointer;border-radius:12px}.mrow:hover{background:var(--hover)}
.mrow .mid{flex:1;min-width:0}.mrow .mid b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mrow .mid small{color:var(--sub);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--active);color:var(--acc);border-radius:14px;padding:2px 10px;font-size:13px;margin:2px}
.chip.g{background:rgba(47,184,107,.16);color:var(--ok)}.chip.r{background:rgba(229,72,77,.14);color:var(--danger)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px}.tabs button{padding:5px 13px;border-radius:14px;background:var(--panel2);font-size:14px;color:var(--sub)}.tabs button.on{background:var(--grad);color:#fff}
.seg{display:flex;gap:6px;margin:6px 0 10px}.seg button{flex:1;padding:10px;border-radius:12px;background:var(--panel2);border:1.5px solid transparent}.seg button.on{border-color:var(--b2);color:var(--acc);font-weight:700}
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
.toast{background:#10233d;color:#fff;padding:10px 18px;border-radius:14px;box-shadow:var(--shadow-lg);animation:pop2 .15s;font-size:15px}.toast.err{background:var(--danger)}
#lb{position:fixed;inset:0;z-index:80;background:rgba(3,10,24,.92);display:none;align-items:center;justify-content:center}#lb.on{display:flex}
#lb img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:6px}
#lb .x{position:absolute;top:14px;right:14px;color:#fff;background:rgba(255,255,255,.14)}#lb .dl{position:absolute;top:14px;right:68px;color:#fff;background:rgba(255,255,255,.14)}
.drop{position:absolute;inset:0;z-index:20;background:rgba(61,156,244,.28);border:3px dashed var(--b2);display:none;place-items:center;font-size:22px;font-weight:700;color:var(--b3);backdrop-filter:blur(3px)}.drop.on{display:grid}
.crop{display:flex;flex-direction:column;align-items:center;gap:10px}.crop canvas{width:220px;height:220px;border-radius:50%;background:var(--panel2)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  #side,#main{grid-area:1/1}
  .drawer{width:100%}
  #main{transform:translateX(100%);transition:transform .22s;z-index:4}
  #app.chat #main{transform:none}
  .back{display:grid}
  .bub{max-width:84vw}
  .fab{bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media (min-width:901px){.drawer{position:absolute}}
@media (max-width:420px){.emo{grid-template-columns:repeat(7,1fr)}}

/* moderation modal */
.macts{display:flex;flex-wrap:wrap;gap:8px}
.mact{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;background:var(--panel2);border:1.5px solid transparent;font-size:14.5px}
.mact svg.i{width:19px;height:19px}.mact:hover{border-color:var(--b2)}.mact.dng{color:var(--danger)}.mact.ok{color:var(--ok)}