/* 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:left}
#login .field{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:ltr;text-align:left}
#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;right:1px;width:13px;height:13px;border-radius:50%;background:var(--ok);border:2.5px solid var(--panel)}
.fab{position:absolute;bottom:20px;right: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-end;flex-direction:row}
.row.in{align-self:flex-start;flex-direction:row}
.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:right;padding-left:10px;direction:ltr;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-left: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;right:10px;left:auto;padding:0 8px;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:left}
.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;right: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;right: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-left: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-end;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:left}
.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:ltr;text-align:left;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:left}
.mitem{display:flex;align-items:center;gap:16px;padding:13px 18px;width:100%;text-align:left}.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{text-align:left;word-break:break-word;white-space:pre-line}.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:left;align-items:center;text-align:left}
.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}
.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;flex-wrap:wrap;gap:6px;margin:6px 0 10px}.seg button{flex:1 1 auto;min-width:64px;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)}

/* ===================== 1.2 ===================== */
/* Telegram-style layout: the chrome runs left-to-right, Persian text itself still reads right-to-left (dir=auto) */
#ov,.menu,.toasts,#lb,.modal{direction:ltr;text-align:left}
.toasts{text-align:center}
.lm,.pinbar span,.ctx span,.ctx b,.rq b,.rq span,.mid small,.mid b{text-align:left}
.bub .txt{text-align:start}
.bub .nm{display:flex;align-items:center;gap:5px;text-align:left;flex-wrap:wrap}
.bub.rtl .meta{float:left;padding-left:0;padding-right:10px}
.bub.mo.rtl .meta{right:10px;left:auto}
.avs{cursor:pointer}
.ci .tt{direction:ltr}
.vipb{font-size:13px;line-height:1}
.abadge{display:inline-block;background:rgba(61,156,244,.18);color:var(--acc);border-radius:9px;padding:0 7px;font-size:11.5px;font-weight:700;line-height:1.6}
.abadge.ow{background:rgba(255,196,0,.2);color:#b07a00}
:root[data-theme=dark] .abadge.ow,:root[data-theme=dark] .chip.v{color:#ffd45e}
.chip.v{background:rgba(255,196,0,.18);color:#a86f00}.chip.a{background:rgba(61,156,244,.16);color:var(--acc)}
.pinbar{position:relative;z-index:3;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;background:var(--panel);border-bottom:1px solid var(--line);cursor:pointer;min-height:48px}
.pinbar>svg{color:var(--acc);width:22px;height:22px}
.pinbar .pt{flex:1;min-width:0}.pinbar b{display:block;color:var(--acc);font-size:13px;line-height:1.3}
.pinbar .pt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:var(--sub);line-height:1.35}
.cnote{align-self:center;max-width:100%;background:rgba(12,44,110,.46);color:#fff;border-radius:14px;padding:3px 12px;font-size:12.5px;text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sendb.wait{background:linear-gradient(135deg,#8aa0bd,#5f7897);box-shadow:none;font-weight:700;font-size:17px}
.sendb .cd{display:block;line-height:1}
.ro svg.i{color:var(--acc)}
.swlist{margin:2px 0 6px}
.swrow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.swrow:last-child{border-bottom:0}.swrow:focus-visible{outline:2px solid var(--b2);border-radius:8px}
.swrow .se{font-size:20px;width:28px;text-align:center;flex:none}
.swrow .sl{flex:1;min-width:0}.swrow .sl small{display:block;color:var(--sub);font-size:12.5px;line-height:1.5;margin-top:1px}
.sec0{padding:16px 0 6px;color:var(--acc);font-weight:700;font-size:14px}.sec0:first-child{padding-top:2px}
.hint{color:var(--sub);font-size:13px;margin:4px 0 10px;line-height:1.8;white-space:pre-line}
.hint.warn{background:rgba(255,170,60,.16);color:var(--text);border-radius:12px;padding:8px 12px}
.trow{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.trow input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel2);color:var(--text);direction:ltr;text-align:center}
.trow span{color:var(--sub);font-size:14px}
.mact.on{background:var(--active);border-color:var(--b2);color:var(--acc);font-weight:700}
.mact.dng.on{color:var(--danger)}
.bio{color:var(--sub);font-size:14px;margin-top:4px;max-width:100%;white-space:pre-line;word-break:break-word}
.prof .tt{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap}
.mlist{margin:6px -8px 0;max-height:46vh;overflow:auto}
.mrow .ibtn{width:38px;height:38px}
.mrow .mid b{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
/* chat-list tabs */
.ftabs{display:flex;gap:2px;padding:0 6px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none}
.ftabs::-webkit-scrollbar{display:none}
.ftabs button{position:relative;display:flex;align-items:center;gap:6px;padding:11px 14px 12px;color:var(--sub);font-weight:700;font-size:14.5px;white-space:nowrap;flex:none}
.ftabs button:hover{color:var(--acc)}
.ftabs button.on{color:var(--acc)}
.ftabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--acc)}
.ftabs .fb{font-style:normal;background:var(--sub);color:#fff;border-radius:10px;min-width:20px;height:20px;padding:0 6px;font-size:12px;display:grid;place-items:center;line-height:1}
.ftabs button.on .fb{background:var(--acc)}
/* status + cleanup */
.stbox{direction:ltr;text-align:left}
.meter{position:relative;height:24px;border-radius:12px;background:var(--panel2);overflow:hidden;margin:4px 0 8px}
.meter i{position:absolute;top:0;bottom:0;left:0;background:linear-gradient(90deg,#2a86ee,#52b6ff);border-radius:12px;transition:width .5s}
.meter.warn i{background:linear-gradient(90deg,#ff9a3c,#ff5a4f)}
.meter span{position:relative;font-size:12.5px;line-height:24px;padding:0 12px;color:var(--text);font-weight:600}
.srow{display:flex;justify-content:space-between;gap:12px;padding:6px 2px;font-size:13.5px;border-bottom:1px solid var(--line)}
.srow span{color:var(--sub);min-width:0}.srow b{font-weight:600;white-space:nowrap}
.days{display:flex;gap:4px;margin:6px 0 10px;overflow-x:auto}
.days>div{flex:1 0 74px;background:var(--panel2);border-radius:12px;padding:7px 6px;text-align:center;display:flex;flex-direction:column;gap:2px;font-size:11.5px}
.days small{color:var(--sub)}.days b{font-weight:600}.days i{font-style:normal;color:var(--sub)}
.cinfo{margin:10px 0;padding:10px 12px;border-radius:12px;background:var(--panel2);font-weight:600;font-size:14px;text-align:left}
.gone{color:var(--sub);font-style:italic;padding:6px 2px;font-size:13.5px}
.stbox .meter span{direction:rtl}

/* ================= 1.3 : controls, cards, sheets, dashboard ================= */
:root{--on:linear-gradient(135deg,#3fc6ff 0%,#2a7df0 100%);--off:#ccd8e8;--off-line:#a9b9d0;--card:#f2f7fd;--card-line:rgba(26,70,130,.08);--ok-soft:rgba(47,184,107,.14)}
:root[data-theme=dark]{--off:#22385a;--off-line:#4a6a98;--card:#13294a;--card-line:rgba(130,180,255,.10)}
/* the switch: colour + check mark + knob position all say on/off, in both themes */
.sw{position:relative;display:block;flex:none;width:52px;height:30px;border-radius:15px;background:var(--off);box-shadow:inset 0 0 0 1.5px var(--off-line);transition:background .2s,box-shadow .2s}
.sw::after{content:"";position:absolute;z-index:1;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.3,.9,.3,1.2)}
.sw::before{content:"";position:absolute;z-index:2;top:9px;left:31px;width:11px;height:6px;border-left:2.6px solid #2a7df0;border-bottom:2.6px solid #2a7df0;transform:rotate(-45deg) scale(.4);opacity:0;transition:opacity .15s,transform .2s}
.sw.on{background:var(--on);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25),0 0 0 3px rgba(42,125,240,.16)}
.sw.on::after{transform:translateX(22px)}
.sw.on::before{opacity:1;transform:rotate(-45deg) scale(1)}
:root[data-theme=dark] .sw.on{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),0 0 0 3px rgba(88,170,255,.2)}
.swrow:active .sw::after{width:28px}.swrow:active .sw.on::after{transform:translateX(18px)}
/* settings cards (iOS/Telegram-style grouped lists) with coloured icon tiles */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:18px;margin:6px 0 14px;overflow:hidden}
.card .swrow{padding:11px 14px;border-bottom:0;position:relative;gap:13px}
.card .swrow+.swrow::before{content:"";position:absolute;top:0;left:61px;right:0;border-top:1px solid var(--card-line)}
.card .swrow:hover{background:var(--hover)}
.card .kv{padding:12px 14px}
.card>.hint,.card>.field{margin-left:14px;margin-right:14px}
.swrow .se{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-size:19px;background:rgba(var(--tc,61,156,244),.16);box-shadow:inset 0 0 0 1px rgba(var(--tc,61,156,244),.18)}
.swrow .sl{font-weight:600}.swrow .sl small{font-weight:400}
.sec0{font-size:13px;font-weight:700;color:var(--acc);margin:14px 4px 2px;padding:0}
.stabs{display:flex;gap:2px;margin:2px -4px 10px;padding:3px;background:var(--card);border:1px solid var(--card-line);border-radius:14px;position:sticky;top:0;z-index:3}
.stabs button{flex:1;padding:8px 4px;border-radius:11px;font-size:14px;font-weight:600;color:var(--sub);transition:background .15s,color .15s;white-space:nowrap}
.stabs button.on{background:var(--panel);color:var(--acc);box-shadow:0 1px 4px rgba(20,60,120,.18)}
:root[data-theme=dark] .stabs button.on{background:#1f4170;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.pane.hide{display:none!important}
.tabs button{border:1.5px solid transparent;transition:background .15s}
.tabs button.on{box-shadow:0 2px 8px rgba(42,125,240,.35)}
.mf .btn.primary,.mf .btn:not(.ghost):not(.danger){box-shadow:0 4px 14px rgba(42,125,240,.35)}
.mf{border-top:1px solid var(--line);background:var(--panel)}
.avedit{position:relative;display:flex;justify-content:center;margin:4px 0 14px}
.avedit .cam{position:absolute;bottom:-2px;left:calc(50% + 18px);width:32px;height:32px;border-radius:50%;background:var(--on);color:#fff;display:grid;place-items:center;border:3px solid var(--panel);pointer-events:none}
.avedit .cam svg{width:16px;height:16px}
.wordbox{width:100%;min-height:78px;resize:vertical;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--text);line-height:1.8;margin:4px 0 2px}
/* bottom sheet on phones */
@media (max-width:640px){
  .modal,.modal.wide{top:auto;bottom:0;left:0;width:100%;max-height:92dvh;transform:none;border-radius:26px 26px 0 0;animation:sheet .28s cubic-bezier(.2,.9,.3,1)}
  .modal::before{content:"";display:block;flex:none;width:42px;height:5px;border-radius:3px;background:var(--line);margin:9px auto 0}
  .mh{padding-top:8px}.mf{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .mf .btn{flex:1;justify-content:center;padding-top:12px;padding-bottom:12px}
}
@keyframes sheet{from{transform:translateY(60px);opacity:0}}
/* owner dashboard */
.dash{max-width:760px;margin:0 auto;padding:28px 22px 40px;direction:ltr;text-align:left}
.dash .hello{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.dash .hello .lg{width:62px;height:62px;border-radius:20px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 10px 26px rgba(42,125,240,.35)}
.dash .hello .lg svg{width:34px;height:34px;animation:beat 3.2s infinite}
.dash .hello h2{margin:0;font-size:24px}.dash .hello small{color:var(--sub);display:block;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:12px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--card-line);border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.stat b{font-size:30px;line-height:1.15;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stat span{color:var(--sub);font-size:13.5px}.stat.warn b{background:linear-gradient(135deg,#ffb347,#ff5a4f);-webkit-background-clip:text;background-clip:text}
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.act{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--card-line);border-radius:18px;padding:13px 14px;text-align:left;transition:transform .12s,background .15s}
.act:hover{background:var(--hover);transform:translateY(-1px)}
.act .ti{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:rgba(var(--tc,61,156,244),.16);color:rgb(var(--tc,61,156,244));flex:none}
.act b{font-weight:700;font-size:14.5px}.act small{display:block;color:var(--sub);font-size:12px;line-height:1.4}
.dash h4{margin:0 0 8px 4px;color:var(--acc);font-size:14px}
.dash .ci{border-radius:16px}
/* chat list extras */
.ci .pinic,.ci .muteic{width:14px;height:14px;color:var(--sub);margin-left:4px;opacity:.85}
.ci .tagc{font-size:11.5px;background:var(--active);color:var(--acc);border-radius:9px;padding:0 7px;margin-left:6px;white-space:nowrap}
.badge.sil{background:var(--sub)}
.cmark{color:var(--acc);font-weight:700}
.gone2{opacity:.6}
.qrl{max-height:50vh;overflow:auto;margin:4px -6px}
.qrl .mrow b{white-space:normal}
.qrow{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.qrow input,.qrow textarea{width:100%;padding:9px 11px;border-radius:11px;border:1.5px solid var(--line);background:var(--panel);color:var(--text)}
.bprog{height:10px;border-radius:6px;background:var(--line);overflow:hidden;margin:10px 0}.bprog i{display:block;height:100%;width:0;background:var(--on);transition:width .3s}
.dev{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}.dev:last-child{border:0}
.dev .di{width:38px;height:38px;border-radius:12px;background:var(--card);display:grid;place-items:center;font-size:19px}
.dev .dm{flex:1;min-width:0}.dev small{color:var(--sub);display:block}
.tagbar{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.tagbar button{padding:4px 11px;border-radius:13px;background:var(--panel2);font-size:13px;border:1.5px solid transparent}.tagbar button.on{border-color:var(--b2);color:var(--acc);font-weight:700}
.notebox{width:100%;min-height:70px;resize:vertical;padding:9px 11px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--text);line-height:1.7}
.sresult{display:flex;flex-direction:column;padding:8px 14px;gap:1px;cursor:pointer;border-radius:12px}.sresult:hover{background:var(--hover)}
.sresult b{font-size:14px}.sresult span{color:var(--sub);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sresult mark{background:rgba(255,200,60,.4);color:inherit;border-radius:3px}
.dashwrap{position:relative;z-index:1;height:100%;overflow:auto;background:var(--bg)}
.mdiv{height:1px;background:var(--line);margin:6px 18px}
.modal input[dir=auto]:placeholder-shown,.modal textarea[dir=auto]:placeholder-shown{direction:rtl;text-align:right}
.tabs button{background-origin:border-box}
.modal .dash{padding:0 0 8px;max-width:none}
.stats .stat:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:900px){.stats .stat:last-child:nth-child(odd){grid-column:auto}}
.btn.danger{color:#fff}
.btn.ghost.danger{background:rgba(229,72,77,.12);color:#e5484d;box-shadow:none}
:root[data-theme=dark] .btn.ghost.danger{background:rgba(255,100,105,.14);color:#ff8a8f}
.stabs::before{content:"";position:absolute;left:-4px;right:-4px;top:-10px;bottom:-8px;background:var(--panel);z-index:-1;border-radius:0 0 16px 16px}
.stabs{margin-bottom:14px}
.stat b{background:linear-gradient(135deg,#2f8bff,#1b5fd1);-webkit-background-clip:text;background-clip:text}
:root[data-theme=dark] .stat b{background:linear-gradient(135deg,#6cc4ff,#3d9cf4);-webkit-background-clip:text;background-clip:text}
.stat.warn b,:root[data-theme=dark] .stat.warn b{background:linear-gradient(135deg,#ffb347,#ff5a4f);-webkit-background-clip:text;background-clip:text}

/* ================= 1.3 refine: calmer surfaces, hairlines, tonal avatars, glass headers ================= */
:root{
  --grad:linear-gradient(160deg,#4ba0f6 0%,#2a76e4 100%);--out:linear-gradient(160deg,#4aa0f5 0%,#2a72e0 100%);
  --bg:#f4f7fb;--panel2:#f1f5fa;--line:rgba(16,35,61,.085);--hover:rgba(42,118,228,.06);--active:rgba(42,118,228,.12);
  --glass:rgba(255,255,255,.80);--acc:#2a76e4;--shadow:0 1px 2px rgba(16,35,61,.10);
  --shadow-lg:0 14px 44px -10px rgba(16,35,61,.32),0 2px 8px rgba(16,35,61,.08);
  --card:#f6f9fd;--card-line:rgba(16,35,61,.07);
}
:root[data-theme=dark]{
  --grad:linear-gradient(160deg,#3f8ef0 0%,#2461d4 100%);--out:linear-gradient(160deg,#2f7fe6 0%,#1f55c2 100%);
  --bg:#0b1522;--panel:#101c2e;--panel2:#15243a;--line:rgba(255,255,255,.075);--hover:rgba(120,180,255,.07);--active:rgba(90,160,255,.17);
  --glass:rgba(16,28,46,.76);--acc:#66aeff;--in:#182a42;--card:#132339;--card-line:rgba(255,255,255,.07);
  --shadow-lg:0 14px 44px -10px rgba(0,0,0,.65),0 2px 8px rgba(0,0,0,.3);
}
.av{background:hsl(var(--h,208) 92% 93%);color:hsl(var(--h,208) 62% 36%);font-weight:650}
:root[data-theme=dark] .av{background:hsl(var(--h,208) 44% 25%);color:hsl(var(--h,208) 92% 84%)}
.btn{box-shadow:0 1px 2px rgba(20,70,160,.35),0 6px 14px -4px rgba(32,100,220,.45);font-weight:650;border-radius:13px}
.btn.danger{box-shadow:0 1px 2px rgba(190,40,50,.3),0 6px 14px -4px rgba(229,72,77,.4)}
.fab{box-shadow:0 2px 4px rgba(20,70,160,.3),0 10px 22px -6px rgba(32,100,220,.5)}
.sendb{box-shadow:0 1px 3px rgba(20,70,160,.35),0 6px 14px -4px rgba(32,100,220,.45)}
.badge{min-width:21px;height:21px;font-size:12px;font-weight:650;padding:0 6px}
/* chat list */
.ci{padding:10px 10px;border-radius:13px}
.ci .tt{font-weight:650;font-size:15.5px}
.ci .ct{font-size:12px}
.ci.act,.ci.act:hover,#chatlist .ci.act:hover{background:var(--active);color:var(--text)}
.ci.act::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}
.ci.act .sub,.ci.act .ct,.ci.act .lm{color:var(--sub)}.ci.act .lm b{color:var(--acc)}
.ci.act .badge{background:var(--grad);color:#fff}.ci.act .tick{fill:var(--sub)}.ci.act .tick.rd{fill:var(--acc)}
/* glass headers */
.chead,.dhead{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);color:var(--text);box-shadow:0 1px 0 var(--line);min-height:58px}
.chead .tt{font-weight:650;font-size:16.5px}.chead .st{color:var(--sub);opacity:1;font-size:12.5px}.chead .st.typing{color:var(--acc);font-weight:600}
.chead .ibtn.light,.dhead .ibtn.light{color:var(--sub)}.chead .ibtn.light:hover,.dhead .ibtn.light:hover{background:var(--hover);color:var(--acc)}
.dhead{background:var(--panel);box-shadow:none;border-bottom:1px solid var(--line)}.dhead h3{font-size:16.5px;font-weight:650}
/* side menu */
#menu{width:min(316px,86vw)}
.mhead{background:radial-gradient(130% 100% at 0% 0%,rgba(61,156,244,.17),rgba(61,156,244,0) 64%);color:var(--text);padding:20px 18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;position:relative;border-bottom:1px solid var(--line)}
.mhead .mtheme{position:absolute;top:10px;right:10px;width:40px;height:40px;color:var(--sub)}
.mav{position:relative;border-radius:50%;margin-bottom:6px;padding:3px;background:var(--panel);box-shadow:0 0 0 1.5px var(--line),0 8px 18px -8px rgba(16,35,61,.35);display:block}
.mav .cam{position:absolute;bottom:0;right:0;width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;border:2.5px solid var(--panel)}.mav .cam svg{width:13px;height:13px}
.mhead .nm{font-weight:650;font-size:18px;line-height:1.35;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mhead .sb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--sub);font-size:13.5px;min-height:24px;opacity:1}
.mhead .ph{direction:ltr}
.chip.own{background:rgba(245,158,11,.15);color:#b4720a;margin:0}:root[data-theme=dark] .chip.own{background:rgba(245,176,60,.16);color:#f2c26a}
.chip.v{margin:0}
.mbody{flex:1;overflow:auto;padding:6px 8px 8px;min-height:0}
.mgrp{padding:14px 12px 4px;font-size:12px;color:var(--sub);font-weight:600}
.mitem{padding:11px 12px;border-radius:12px;gap:14px;font-size:15px}
.mitem svg{width:22px;height:22px;color:var(--sub);transition:color .15s}.mitem:hover svg{color:var(--acc)}
.mitem.out,.mitem.out svg{color:var(--danger)}
.mdiv{height:1px;background:var(--line);margin:8px 10px}
.mfoot{padding:12px 18px 16px;color:var(--sub);font-size:12.5px;display:flex;align-items:center;gap:7px;border-top:1px solid var(--line)}.mfoot small{margin-inline-start:auto;opacity:.85;font-size:12px}
.mhead{padding:16px 18px 13px}.mhead .mav .av{width:68px!important;height:68px!important;font-size:29px!important}
.mitem{padding:9px 12px}.mgrp{padding:10px 12px 2px}.mdiv{margin:6px 10px}

/* drawer header: blurred profile photo (Telegram-like) */
.mhead{overflow:hidden;color:#fff;background:#0f2a52;border-bottom:0;padding:18px 18px 15px;min-height:178px;justify-content:flex-end}
.mhead .mbg{position:absolute;inset:-34px;background:linear-gradient(145deg,hsl(var(--h,208) 72% 46%),hsl(var(--h,208) 64% 26%));background-size:cover;background-position:center;filter:blur(20px) saturate(1.4) brightness(.97);transform:scale(1.12)}
.mhead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,38,.04) 0%,rgba(6,16,38,.55) 100%);pointer-events:none}
.mhead>*:not(.mbg){position:relative;z-index:1}
.mhead .mtheme{position:absolute;color:rgba(255,255,255,.92);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:38px;height:38px}
.mhead .mtheme:hover{background:rgba(255,255,255,.26);color:#fff}
.mhead .nm{color:#fff;text-shadow:0 1px 8px rgba(0,10,40,.55);font-size:19px}
.mhead .sb{color:rgba(255,255,255,.9)}
.mav{padding:0;background:none;box-shadow:0 0 0 2.5px rgba(255,255,255,.75),0 8px 20px -6px rgba(0,0,0,.55)}
.mav .cam{border:2px solid #fff}
.mhead .chip{background:rgba(255,255,255,.18);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mhead .chip.own,:root[data-theme=dark] .mhead .chip.own{background:rgba(255,196,80,.28);color:#ffe3a8}

/* ================= 1.3b: Telegram extras — selection, forward label, polls, shared media, scheduled ================= */
.ftabs{scroll-snap-type:x proximity}
.ftabs button{scroll-snap-align:start}
.ftabs button .fb.w{background:var(--danger)}
.bub .fwd{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--acc);font-weight:600;margin-bottom:3px;direction:ltr;text-align:left}
.bub .fwd svg{width:15px;height:15px;opacity:.85}
.row.out .bub .fwd{color:rgba(255,255,255,.92)}
#msgs.selecting .row{cursor:pointer;-webkit-user-select:none;user-select:none}
#msgs.selecting .row .bub{transition:box-shadow .15s}
#msgs.selecting .row::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--sub);opacity:.75;align-self:center;order:-1;margin:0 4px;background:transparent;transition:all .15s}
#msgs.selecting .row.out::before{order:-1}
#msgs.selecting .row.sel::before{background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.2 16.6 4.9 12.3l-1.4 1.4 5.7 5.7L20.5 7.1l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--acc);opacity:1}
#msgs.selecting .row.sel .bub{box-shadow:0 0 0 2px var(--acc),0 4px 16px -6px rgba(30,100,220,.45)}
#msgs.selecting .bub .more{display:none!important}
.chead .selbar{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--panel);color:var(--text);z-index:4;border-bottom:1px solid var(--line);animation:selin .16s ease-out}
@keyframes selin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.selbar b{font-size:16px;font-weight:650}
.selbar .sp{flex:1}
.selbar .ibtn{color:var(--sub)}.selbar .ibtn:hover{color:var(--acc);background:var(--hover)}.selbar .ibtn.dng{color:var(--danger)}
.fwdlist{max-height:52vh;overflow:auto;margin:8px -6px 0}
.fwdlist .mrow{padding:8px 10px}
/* polls */
.bub.pollb{min-width:min(300px,72vw)}
.poll{padding:2px 0 4px;min-width:min(260px,66vw);text-align:start}
.poll .pq{font-weight:650;font-size:16px;line-height:1.55;margin-bottom:2px;white-space:pre-wrap}
.poll .psub{font-size:12.5px;opacity:.72;margin:1px 0 8px}
.popt{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:8px 8px;margin:2px 0;border-radius:11px;text-align:start;overflow:hidden;color:inherit;direction:inherit}
.popt:hover{background:rgba(120,160,210,.12)}
.popt .pk{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid currentColor;opacity:.5;display:grid;place-items:center;position:relative;z-index:1;transition:all .15s}
.popt .pk.sq{border-radius:6px}
.popt .pk svg{width:14px;height:14px;fill:#fff}
.popt.on .pk{background:var(--acc);border-color:var(--acc);opacity:1}
.row.out .popt.on .pk{background:#fff;border-color:#fff}.row.out .popt.on .pk svg{fill:var(--b3)}
.popt .pt{flex:1;min-width:0;position:relative;z-index:1;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.popt .pp{position:relative;z-index:1;font-size:13px;font-weight:650;opacity:.85;flex:none;min-width:36px;text-align:end;unicode-bidi:plaintext}
.popt .pbar{position:absolute;inset-inline-start:0;top:0;bottom:0;background:rgba(61,156,244,.16);border-radius:11px;z-index:0;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.row.out .popt .pbar{background:rgba(255,255,255,.2)}
.row.out .popt:hover{background:rgba(255,255,255,.12)}
.optrow{margin:0 0 8px}.optrow input{width:100%}
/* scheduled list */
.srow2{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin:0 0 10px}
.srow2 .mid{flex:1;min-width:0}.srow2 .mid b{display:block}
.srow2 .st2{font-size:12.5px;color:var(--acc);font-weight:600;margin:1px 0 4px}
.srow2 .tx2{font-size:14px;color:var(--sub);white-space:pre-wrap;overflow-wrap:anywhere;max-height:5.2em;overflow:hidden}
.srow2 .ibtn.dng{color:var(--danger);flex:none}
/* shared media */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:6px 14px 4px}
.mgrid.list{display:block}
.mth{position:relative;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--panel2);cursor:pointer}
.mth img,.mth video{width:100%;height:100%;object-fit:cover;display:block}
.mth.vid svg{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);padding:7px;border-radius:50%;background:rgba(0,0,0,.5);fill:#fff;color:#fff}
.mlink{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:12px;cursor:pointer}.mlink:hover{background:var(--hover)}
.mlink>svg{color:var(--acc);flex:none}
.mlink .mid{flex:1;min-width:0}.mlink .mid b{display:block;font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlink .mid small{display:block;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mlink .ibtn{width:34px;height:34px;color:var(--sub)}
.rulestx{white-space:pre-wrap;line-height:1.9;font-size:15px;padding:2px 2px 6px;max-height:55vh;overflow:auto}
.kv.rulesk>div{flex:1;min-width:0}

.optrow input,.modal input[type=datetime-local],.msearch{width:100%;padding:12px 15px;border-radius:14px;border:1.5px solid var(--line);background:var(--panel2);transition:.15s;color:var(--text)}
.optrow input:focus,.modal input[type=datetime-local]:focus,.msearch:focus{border-color:var(--b2);background:var(--panel);box-shadow:0 0 0 4px rgba(61,156,244,.18)}
.modal input[type=datetime-local]{margin:2px 0 4px;min-height:46px}
.fwdlist .mrow .mid b,.fwdlist .mrow .mid small{text-align:left}
.prof.pub{padding:26px 20px 18px;gap:8px}
.prof.pub .tt{font-size:20px;font-weight:650;margin-top:6px}
.prof.pub .bio{color:var(--sub);font-size:15px;line-height:1.85;max-width:320px;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}

/* ================= language switch + English typography ================= */
.langbtn{position:fixed;top:14px;right:14px;z-index:60;padding:7px 15px;border-radius:20px;background:rgba(255,255,255,.16);color:#fff;font-weight:600;font-size:13.5px;letter-spacing:.2px;border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .15s}
.langbtn:hover{background:rgba(255,255,255,.28)}
.mhead .mlang{position:absolute;top:10px;right:54px;width:38px;height:38px;font-size:13px;font-weight:700;color:rgba(255,255,255,.95);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.3px}
.mhead .mlang:hover{background:rgba(255,255,255,.26)}
@font-face{font-family:"Inter";src:url(/s/fonts/Inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html[lang=en]{--font:"BlueGlyph","Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Vazirmatn",sans-serif}
html[lang=en] body{direction:ltr;letter-spacing:-.003em;font-size:15.5px}
html[lang=en] #login .field{text-align:left}
html[lang=en] .modal input[dir=auto]:placeholder-shown,html[lang=en] .modal textarea[dir=auto]:placeholder-shown{direction:ltr;text-align:left}
html[lang=en] .ftabs button{font-size:14px;font-weight:600}
html[lang=en] .ci .tt{font-weight:600}
html[lang=en] .sec,html[lang=en] .sec0,html[lang=en] .mgrp{letter-spacing:.02em}
html[lang=en] .mitem{font-size:14.5px}
html[lang=en] .btn{font-weight:600;letter-spacing:.01em}
html[lang=en] .hint,html[lang=en] .cnote{line-height:1.6}

/* ===== 1.4: tab editor, games section, reminders ===== */
.ftabs .tabedit{position:sticky;right:0;margin-left:auto;padding:0 12px 0 24px;color:var(--sub);scroll-snap-align:none;background:linear-gradient(90deg,transparent,var(--panel) 40%)}
.ftabs .tabedit svg{width:20px;height:20px}
.ftabs .tabedit:hover{color:var(--acc)}
.tedit{display:flex;flex-direction:column;gap:7px;margin:4px 0 2px}
.trow{display:flex;align-items:center;gap:2px;padding:6px 10px 6px 3px;border-radius:15px;background:var(--panel2);border:1px solid var(--line);transition:opacity .15s,box-shadow .15s,background .15s,border-color .15s,transform .16s ease}
.trow.off{opacity:.55}
.trow.drag{position:relative;z-index:6;opacity:1;background:var(--panel);box-shadow:0 12px 30px rgba(10,40,100,.3);border-color:var(--acc);transition:box-shadow .15s}
.tgrip{display:grid;place-items:center;width:34px;height:40px;color:var(--sub);cursor:grab;touch-action:none;flex:none;border-radius:10px;user-select:none}
.tgrip:hover{color:var(--acc);background:var(--hover)}.trow.drag .tgrip{cursor:grabbing;color:var(--acc)}
.tl{flex:1;min-width:0;padding:0 6px;text-align:left}.tl b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl b[dir=rtl]{text-align:right}
.tl small{display:block;color:var(--sub);font-size:12px;line-height:1.4;margin-top:1px}
.trow .ibtn{width:34px;height:34px}.trow .ibtn svg{width:22px;height:22px}.trow .ibtn[disabled]{opacity:.22;pointer-events:none}
.trow .sw{margin-left:4px;cursor:pointer}.trow.lock .sw{opacity:.5;cursor:default}
.trow .sw:focus-visible{outline:2px solid var(--b2);outline-offset:3px}

.gamesv{padding:10px 10px 96px;display:flex;flex-direction:column;gap:10px}
.ghead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 2px}
.ghead .gt b{display:block;font-size:17px;font-weight:800}.ghead .gt small{display:block;color:var(--sub);font-size:13px}
.gcard{display:flex;align-items:center;gap:13px;padding:12px;border-radius:20px;background:var(--panel);border:1px solid var(--line);color:var(--text);text-decoration:none!important;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;overflow:hidden}
.gcard::before{content:"";position:absolute;inset:0;background:radial-gradient(150px 90px at 0% 50%,hsl(var(--gh) 90% 60%/.16),transparent 70%);pointer-events:none}
.gcard:hover{transform:translateY(-1px);border-color:hsl(var(--gh) 80% 62%/.6);box-shadow:var(--shadow-lg)}
.gcard:active{transform:scale(.985)}
.gi{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:28px;flex:none;background:linear-gradient(145deg,hsl(var(--gh) 95% 68%),hsl(calc(var(--gh) + 28) 85% 52%));box-shadow:0 6px 16px hsl(var(--gh) 85% 50%/.32),inset 0 1px 0 rgba(255,255,255,.45)}
.gm{flex:1;min-width:0;position:relative;text-align:left}.gm b{display:block;font-size:16.5px;font-weight:800}.gm small{display:block;color:var(--sub);font-size:13px;line-height:1.55;margin-top:2px}
.gm b[dir=rtl],.gm small[dir=rtl]{text-align:right}
.gplay{display:inline-flex;align-items:center;gap:2px;padding:7px 14px 7px 8px;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:14px;flex:none;position:relative;box-shadow:0 4px 12px rgba(42,134,238,.35)}
.gplay svg{width:18px;height:18px}
.gedit{padding:10px 12px;overflow:visible}.gedit.off{opacity:.62}
.gedit .qrow{margin-bottom:8px}.gedit>input{width:100%;margin-bottom:8px;padding:9px 11px;border-radius:11px;border:1.5px solid var(--line);background:var(--panel);color:var(--text)}
.gic{width:62px!important;flex:none;text-align:center;font-size:20px}
.gbar{display:flex;align-items:center;gap:2px}.gbar .swrow{flex:1;border:0;padding:4px 2px}
.gbar .ibtn{width:36px;height:36px}.gbar .ibtn[disabled]{opacity:.25;pointer-events:none}.gbar .ibtn.dng{color:var(--danger)}

.rembar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:linear-gradient(90deg,rgba(245,158,11,.22),rgba(245,158,11,.08));border-bottom:1px solid rgba(245,158,11,.38);cursor:pointer;flex:none}
.rembar>svg{color:#f59e0b;width:22px;height:22px;animation:ring 2.4s ease-in-out 3}
@keyframes ring{0%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(9deg)}40%{transform:rotate(-6deg)}50%{transform:rotate(0)}}
.rembar .rt{flex:1;min-width:0;text-align:left}.rembar .rt b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rembar .rt b[dir=rtl]{text-align:right}
.rembar .rt small{display:block;color:var(--sub);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rembar .rt small[dir=rtl]{text-align:right}
.rembar .rgo{font-weight:700;color:#d97706;font-size:13.5px;flex:none}
:root[data-theme=dark] .rembar .rgo{color:#fbbf24}
.ci .remic{width:16px;height:16px;color:var(--acc);opacity:.85;flex:none}.ci .remic.due{color:#f59e0b;opacity:1}
.ci.act .remic{color:#fff}
.mitem .mbadge{margin-left:auto;font-style:normal;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--acc);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.mitem .mbadge.due{background:#f59e0b}
.srow2.due{border-color:rgba(245,158,11,.6);background:linear-gradient(90deg,rgba(245,158,11,.10),transparent 60%),var(--card)}
.rbtns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
html[lang=en] .tl,html[lang=en] .gm{font-size:15px}
.voice .spd{font-size:11.5px;font-weight:800;padding:3px 7px;border-radius:10px;background:rgba(120,160,210,.24);color:inherit;flex:none;min-width:36px;direction:ltr;line-height:1.4;transition:background .15s}
.voice .spd:hover{background:rgba(120,160,210,.4)}.row.out .voice .spd{background:rgba(255,255,255,.26)}.row.out .voice .spd:hover{background:rgba(255,255,255,.4)}

/* 1.4: add a customer who was never in the bot */
.newid{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
.newid .ni{min-width:0}.newid .ni b{display:block}.newid .ni small{display:block;color:var(--sub);direction:ltr;text-align:left}
.idbox{cursor:pointer;text-align:center;padding:14px 10px 12px;border-radius:16px;background:var(--active);border:1.5px dashed var(--b2);margin-bottom:10px;transition:border-color .15s}
.idbox:hover{border-color:var(--acc)}
.idbox small{display:block;color:var(--sub);font-size:12.5px;margin-bottom:2px}
.idbox b{display:block;font-size:30px;line-height:1.3;letter-spacing:2px;color:var(--acc);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;user-select:all}
.invmsg{min-height:150px;font-size:14px;line-height:1.9}

/* 1.4: word filter */
.sysrow{align-self:stretch;display:flex;justify-content:center;padding:4px 10px;margin:2px 0}
.sysln{max-width:min(86%,520px);text-align:center;color:#fff;background:rgba(12,44,110,.46);font-size:13px;line-height:1.75;padding:5px 14px;border-radius:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow-wrap:anywhere}
.sysln .mention{display:inline;background:none;border:0;padding:0;font:inherit;font-weight:700;color:#ffd98a;unicode-bidi:isolate}
.sysln button.mention{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.wadd{display:flex;gap:8px;align-items:center;margin:6px 0 4px}
.wadd .winp{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--text)}
.wchips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 4px}
.wchip{display:inline-flex;align-items:center;max-width:100%;background:var(--active);color:var(--acc);border:1.5px solid transparent;border-radius:14px;overflow:hidden}
.wchip .wt{padding:5px 4px 5px 12px;font-size:14px;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-weight:600;cursor:text}
.wchip .wx{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:var(--sub);border-radius:50%;margin-inline-end:2px}
.wchip .wx:hover{color:var(--danger);background:rgba(229,72,77,.12)}.wchip .wx svg{width:15px;height:15px}
.wchip.ed{border-color:var(--acc);background:var(--panel)}
.wchip .wei{width:150px;max-width:60vw;padding:5px 10px;border:0;background:transparent;color:var(--text);font-size:14px;outline:0}
.wcnt{margin-top:2px}
.fopts{margin-top:6px}.fopts .tabs{margin:4px 0 6px}
.hrow{display:flex;align-items:center;gap:8px;margin:6px 0 8px;color:var(--sub);font-size:14px}
.hrow .hin{width:96px;padding:8px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--text);text-align:center}
.fsum{margin:12px 0 4px;padding:10px 12px;border-radius:12px;background:var(--panel2);border:1px dashed var(--b2);font-size:13.5px;line-height:1.85}
.racts{display:flex;flex-direction:column;gap:6px;flex:none}.racts .btn{white-space:nowrap}
.stabs{overflow-x:auto;scrollbar-width:none}.stabs::-webkit-scrollbar{display:none}

/* ---- announcement box (owner -> customers, shown each time they open the app) ---- */
.nbx{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(404px,calc(100vw - 32px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:var(--panel);color:var(--text);border-radius:28px;overflow:hidden;box-shadow:0 34px 90px rgba(6,26,70,.5),0 0 0 1px rgba(255,255,255,.07);animation:npop .42s cubic-bezier(.2,.9,.3,1.08)}
@keyframes npop{from{opacity:0;transform:translate(-50%,-45%) scale(.93)}}
.nhead{position:relative;flex:none;height:118px;display:grid;place-items:center;background:var(--grad);overflow:hidden}
.nhead::before{content:"";position:absolute;inset:0;background:radial-gradient(110% 100% at 15% -10%,rgba(255,255,255,.42),transparent 58%),radial-gradient(90% 90% at 105% 115%,rgba(10,45,130,.5),transparent 62%)}
:root[data-theme=dark] .nhead{background:linear-gradient(135deg,#3a8fe8 0%,#1f5cc4 52%,#0f3a8f 100%)}
.nhead .nh{position:absolute;fill:#fff;opacity:.17}
.nico{position:relative;width:68px;height:68px;border-radius:24px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 12px 28px rgba(6,40,120,.38);transform:rotate(-6deg)}
.nico svg{width:34px;height:34px;fill:currentColor;transform:rotate(6deg)}
.nx{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.2);transition:background .15s}
.nx:hover{background:rgba(255,255,255,.36)}.nx:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:2px}.nbx .btn:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.nx svg{width:20px;height:20px;fill:currentColor}
.nbody{flex:1;min-height:0;overflow:auto;padding:20px 24px 6px}
.nbody h3{margin:0 0 10px;font-size:21px;line-height:1.55;font-weight:800;text-align:center;overflow-wrap:anywhere}
.nbody p{margin:0 0 6px;font-size:15.5px;line-height:1.9;text-align:start;overflow-wrap:anywhere}
.nbody p.gap{height:10px;margin:0}
.nprev{margin:0 0 12px;padding:6px 12px;border-radius:12px;background:var(--panel2);color:var(--sub);font-size:12.5px;text-align:center}
.nfoot{flex:none;padding:14px 24px calc(22px + env(safe-area-inset-bottom))}
.nfoot .btn{padding:14px 18px;font-size:16px;border-radius:16px;box-shadow:0 8px 22px rgba(42,125,240,.38)}
.nbtns{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 6px}
@media (prefers-reduced-motion:reduce){.nbx{animation:none}}