/* قابِ گوشی و ظاهرِ چتِ تلگرام — هرچه اینجاست باید عینِ اسکرین‌شاتِ واقعی باشد. */
:root{
  --pat:url(/assets/pattern.svg);
  --tail-l:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="20" viewBox="0 0 11 20"><path d="M11 20V0c0 11-4.8 17.6-11 20z"/></svg>');
  --tail-r:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="20" viewBox="0 0 11 20"><path d="M0 20V0c0 11 4.8 17.6 11 20z"/></svg>');
  --w:430px; --h:932px;
  --bg:#000;
  --in-bg:#1F2534;
  --out-top:#9471F5; --out-bot:#7A50EC;
  --txt:#fff; --txt2:rgba(255,255,255,.55);
  --in-time:rgba(255,255,255,.45); --out-time:rgba(255,255,255,.7);
  --accent:#3E9BFF; --link:#62A0FF;
  --panel:rgba(34,30,36,.9);
  --field:#1C1C1E;
  --serv:rgba(0,0,0,.35);
}
.phone.light{
  --bg:#E7DFF6; --in-bg:#fff; --txt:#000;
  --in-time:rgba(0,0,0,.35); --panel:rgba(245,245,247,.86);
  --field:#fff; --serv:rgba(0,0,0,.22);
}
.phone{
  position:relative; width:var(--w); height:var(--h); overflow:hidden;
  background:var(--bg); color:var(--txt); isolation:isolate;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","SF Arabic","Inter","Vazirmatn","Apple Color Emoji","Noto Color Emoji","Segoe UI Emoji",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  direction:ltr;
}
/* ── کاغذدیواری ───────────────────────────────── */
.wall{position:absolute; inset:0; z-index:0; background:var(--bg); overflow:hidden}
.wall .doodle.mesh{
  background:
    radial-gradient(95% 62% at 100% 60%, #2f2829 0%, rgba(47,40,41,0) 72%),
    radial-gradient(85% 58% at 0% 90%, #1b222f 0%, rgba(27,34,47,0) 74%),
    linear-gradient(180deg, #221d2d 0%, #231f2f 45%, #1e2029 100%);
}
.wall .doodle{
  position:absolute; inset:0;
  -webkit-mask-image:var(--pat); mask-image:var(--pat);
  -webkit-mask-size:560px auto; mask-size:560px auto;
  -webkit-mask-repeat:repeat; mask-repeat:repeat;
  background:var(--tint,#7E5BE8); opacity:.5;
}
.wall .photo{position:absolute; inset:0; background-size:cover; background-position:center}
.wall .dim{position:absolute; inset:0; background:rgba(0,0,0,.25)}

/* آیکون‌های اصلِ تلگرام (از مخزنِ Telegram-iOS) به‌شکلِ ماسک، تا رنگ بگیرند */
.tgic{display:block; background:currentColor; flex:none;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain}
.tgic.airplane{width:19px; height:16px; -webkit-mask-image:url(/assets/tg/airplane.svg); mask-image:url(/assets/tg/airplane.svg)}
.tgic.clip{width:26px; height:26px; -webkit-mask-image:url(/assets/tg/attach.png); mask-image:url(/assets/tg/attach.png)}
.tgic.mic{width:27px; height:27px; -webkit-mask-image:url(/assets/tg/mic.png); mask-image:url(/assets/tg/mic.png)}
.tgic.sticker{width:19px; height:19px; -webkit-mask-image:url(/assets/tg/sticker.png); mask-image:url(/assets/tg/sticker.png)}
.tgic.down{width:26px; height:26px; -webkit-mask-image:url(/assets/tg/down.svg); mask-image:url(/assets/tg/down.svg)}
.tgic.callout{width:11px; height:11px; -webkit-mask-image:url(/assets/tg/callout.png); mask-image:url(/assets/tg/callout.png)}
.tgic.callin{width:11px; height:11px; -webkit-mask-image:url(/assets/tg/callin.png); mask-image:url(/assets/tg/callin.png)}
.tgic.qmark{width:9px; height:7px; -webkit-mask-image:url(/assets/tg/quote.svg); mask-image:url(/assets/tg/quote.svg)}
.tgic.verified{position:relative; width:17px; height:17px; background:#007AFF;
  -webkit-mask-image:url(/assets/tg/verified_bg.svg); mask-image:url(/assets/tg/verified_bg.svg)}
.tgic.verified > i{position:absolute; inset:0; background:#fff;
  -webkit-mask-image:url(/assets/tg/verified_fg.svg); mask-image:url(/assets/tg/verified_fg.svg);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}

/* ── نوار وضعیت ───────────────────────────────── */
.statusbar{
  position:absolute; top:0; left:0; right:0; height:55.5px; z-index:6;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 9.4% 0 10.9%; font-weight:600; font-size:18.3px; letter-spacing:.7px;
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
}
.statusbar .left{display:flex; align-items:center; gap:4px}
.statusbar .right{display:flex; align-items:center; gap:7px}
.statusbar svg{display:block}
.topglass{
  position:absolute; top:0; left:0; right:0; z-index:3; overflow:hidden;
  background:var(--bg);
}
.topglass .inner{
  position:absolute; top:0; left:0; width:var(--w); height:var(--h);
  filter:blur(13px) saturate(1.2) brightness(.78);
}
.topglass .tint{position:absolute; inset:0; background:rgba(0,0,0,.28)}
.botglass{position:absolute; bottom:0; left:0; right:0; z-index:3; overflow:hidden; background:var(--bg)}
.botglass .inner{position:absolute; left:0; bottom:0; width:var(--w); height:var(--h);
  filter:blur(11px) saturate(1.15) brightness(.72)}
.botglass .tint{position:absolute; inset:0; background:rgba(0,0,0,.22)}
.phone.light .topglass .tint{background:rgba(255,255,255,.25)}
.island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:126px; height:37px; border-radius:20px; background:#000; z-index:7;
}
.phone.notch-none .topglass{
  position:absolute; top:0; left:0; right:0; z-index:3; overflow:hidden;
  background:var(--bg);
}
.topglass .inner{
  position:absolute; top:0; left:0; width:var(--w); height:var(--h);
  filter:blur(13px) saturate(1.2) brightness(.78);
}
.topglass .tint{position:absolute; inset:0; background:rgba(0,0,0,.28)}
.botglass{position:absolute; bottom:0; left:0; right:0; z-index:3; overflow:hidden; background:var(--bg)}
.botglass .inner{position:absolute; left:0; bottom:0; width:var(--w); height:var(--h);
  filter:blur(11px) saturate(1.15) brightness(.72)}
.botglass .tint{position:absolute; inset:0; background:rgba(0,0,0,.22)}
.phone.light .topglass .tint{background:rgba(255,255,255,.25)}
.island{display:none}

/* ── هدرِ چت ──────────────────────────────────── */
.header{
  position:absolute; top:59px; left:0; right:0; z-index:5; height:48px;
  display:flex; align-items:flex-start; gap:8px; padding:0 10px 0 15px;
}
.hpill{
  display:flex; align-items:center; background:var(--panel); border-radius:22px;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.back{gap:3px; padding:0 10px 0 14px; height:40px; font-size:17px; font-weight:400}
.back .cnt{box-sizing:border-box; min-width:16px; height:16px; border-radius:8px; background:#fff;
  color:#0D0D0F; font-size:11.5px; font-weight:600; display:flex; align-items:center;
  justify-content:center; padding:0 1px}
.phone.light .back .cnt{background:#0D0D0F; color:#fff}
.center{flex:0 1 auto; margin:0 auto; max-width:64%; flex-direction:column; align-items:center;
  padding:4px 18px; justify-content:center; min-width:0}
.center .line{display:flex; align-items:center; gap:5px; max-width:100%}
.center .title{font-size:17px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.center .sub{font-size:13px; color:var(--accent); margin-top:1px}
.center .sub.grey{color:var(--txt2)}
.havatar{width:43px; height:43px; align-self:center; border-radius:50%; object-fit:cover; background:#48484A; flex:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.42)}
.hplain{background:none; backdrop-filter:none; -webkit-backdrop-filter:none}

/* بنرِ «ربات این چت را می‌گرداند» و نوارِ ترجمه */
.banners{position:absolute; top:113px; left:12px; right:12px; z-index:5;
  background:var(--panel); border-radius:20px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overflow:hidden}
.banner{display:flex; align-items:center; gap:10px; padding:9px 12px}
.banner .av{width:34px; height:34px; border-radius:50%; background:linear-gradient(#FFB158,#F0862E);
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; color:#fff; flex:none}
.banner .txt{flex:1; min-width:0}
.banner .n{font-size:15px; font-weight:600}
.banner .d{font-size:14px; color:var(--txt2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.banner .stop{background:#2E7DF6; color:#fff; font-size:14px; font-weight:700; padding:7px 16px; border-radius:16px}
.banner .dots{color:var(--txt2)}
.translate{display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 12px;
  border-top:.5px solid rgba(255,255,255,.12); font-size:16px}
.translate .more{position:absolute; right:14px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:13px}
.trwrap{position:relative; display:flex; align-items:center; justify-content:center}

/* ── لیستِ پیام‌ها ────────────────────────────── */
.messages{
  position:absolute; left:0; right:0; z-index:2; display:flex; flex-direction:column;
  justify-content:flex-end; gap:2px; padding:0 8px 6px;
  overflow:hidden;
}
.row{display:flex; align-items:flex-end; gap:6px; margin-top:2px}
.row.out{justify-content:flex-end}
.row.tail{margin-bottom:6px}
.row+.row.first{margin-top:6px}
.ravatar{width:31px; height:31px; border-radius:50%; object-fit:cover; background:#5B5B60; flex:none; margin-bottom:1px}

.bubble{
  position:relative; max-width:88%; border-radius:18px; padding:6px 11px 7px;
  font-size:15.7px; line-height:20.3px; word-wrap:break-word; white-space:pre-wrap;
}
.row.in .bubble{background:var(--in-bg); border-bottom-left-radius:18px}
.row.out .bubble{background:linear-gradient(180deg,var(--out-top),var(--out-bot)); color:#fff}
.row.in.tail .bubble{border-bottom-left-radius:7px}
.row.out.tail .bubble{border-bottom-right-radius:7px}
.row.tail .bubble::after{
  content:""; position:absolute; bottom:0; width:7px; height:10px;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.row.in.tail .bubble::after{
  left:-4px; background:var(--in-bg);
  -webkit-mask-image:var(--tail-l); mask-image:var(--tail-l);
}
.row.out.tail .bubble::after{
  right:-4px; background:var(--out-bot);
  -webkit-mask-image:var(--tail-r); mask-image:var(--tail-r);
}
.link{color:var(--link)}
.row.out .link{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.5)}

/* ری‌اکشن‌ها */
.reactions{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:5px 0 1px}
.rchip{display:flex; align-items:center; gap:4px; height:28px; padding:0 7px; border-radius:14px;
  background:rgba(62,155,255,.22)}
.row.out .rchip{background:rgba(255,255,255,.22)}
.rchip.mine{background:#3E86EC}
.rchip.mine .cnt{color:#fff}
.rchip .em{font-size:16px; line-height:1}
.rchip .cnt{font-size:13px; font-weight:600; color:var(--accent)}
.row.out .rchip .cnt{color:#fff}
.rchip .ravs{display:flex}
.rchip .ravs img{width:20px; height:20px; border-radius:50%; object-fit:cover; background:#48484A;
  margin-left:-5px; border:1.5px solid transparent}
.rchip .ravs img:first-child{margin-left:0}
.meta.inrx{float:none; margin:0 0 0 auto; align-self:flex-end}

/* کوتِ جعبه‌ای (نقل‌قولِ تکه‌ای) */
.reply.quote{background:rgba(255,255,255,.09); border-radius:10px; padding:5px 10px 5px 0; position:relative}
.reply.quote .bar{background:linear-gradient(180deg,#5AC8FA,#34C7A0); border-radius:0 2px 2px 0}
.reply.quote .rx{opacity:.95}
.reply.quote .qmark{position:absolute; top:5px; right:6px; opacity:.55}
.reply.quote.rtl .qmark{right:auto; left:6px; transform:scaleX(-1)}

.bubble .meta{
  float:right; display:inline-flex; align-items:center; gap:3px; height:12px;
  font-size:10.2px; line-height:11px; margin:7px -3px -2px 7px; white-space:nowrap;
}
.row.in .meta{color:var(--in-time)}
.row.out .meta{color:var(--out-time)}
.meta .tick{display:block}
.bubble.rtl{direction:rtl; text-align:right}
.bubble.rtl > span{display:block}
.bubble.rtl .meta, .caption.rtl .meta{
  float:none; display:block; direction:ltr; text-align:right; height:auto; margin:1px 0 -1px}
.bubble.rtl .meta svg, .caption.rtl .meta svg{display:inline-block; vertical-align:-2px; margin-left:3px}
.caption.rtl{direction:rtl; text-align:right}
.meta .edited{opacity:.8}

/* نقل‌قولِ ریپلای — طبقِ قاعده: کوتاه، بدون بازشوندگی */
.reply{
  display:flex; gap:7px; margin:1px 0 4px; padding:3px 8px 3px 0; position:relative;
  border-radius:4px; overflow:hidden; max-width:290px;
}
.reply.ltr{direction:ltr; text-align:left}
.reply.rtl{direction:rtl; text-align:right}
.reply .bar{width:3px; border-radius:2px; background:currentColor; flex:none}
.row.in .reply{color:#7BCBFF} .row.out .reply{color:#fff}
.reply .rt{min-width:0}
.reply .rn{font-size:14px; font-weight:600; line-height:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.reply .rx{font-size:14px; line-height:17px; color:var(--txt); opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row.out .reply .rx{color:#fff}
.reply .thumb{width:30px; height:30px; border-radius:4px; object-fit:cover; flex:none}
.fwd{font-size:14px; line-height:17.5px; margin:0 0 3px; direction:ltr; text-align:left}
.fwd .fl{opacity:.92}
.fwd .fn{display:flex; align-items:center; gap:5px; font-weight:600; margin-top:1px}
.fwd .fn img{width:17px; height:17px; border-radius:50%; object-fit:cover; background:#48484A; flex:none}
.row.in .fwd{color:#7BCBFF}
.album .cell.blur img{filter:blur(18px); transform:scale(1.25)}
.album .cell .dl{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.album .cell .dl i{width:62px; height:62px; border-radius:50%; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}

/* اموجیِ بزرگ و استیکر */
.bigemoji{font-size:64px; line-height:72px; letter-spacing:2px}
.sticker img{width:180px; height:180px; object-fit:contain; display:block}
.outmeta{
  display:inline-flex; align-items:center; gap:3px; background:var(--serv); color:#fff;
  font-size:10.2px; padding:3px 7px; border-radius:10px; margin-top:4px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.stack{display:flex; flex-direction:column; align-items:flex-end}
.row.in .stack{align-items:flex-start}

/* عکس و آلبوم */
.media.nocap{background:none !important; padding:0}
.media.nocap::after{display:none}
.media{padding:2px; border-radius:18px; overflow:hidden; max-width:88%; position:relative}
.row.in.tail .media{border-bottom-left-radius:8px}
.row.out.tail .media{border-bottom-right-radius:8px}
.album{display:grid; gap:2px; border-radius:16px; overflow:hidden}
.album img{width:100%; height:100%; object-fit:cover; display:block; background:#1C1C1E}
.album .cell{position:relative; overflow:hidden}
.media .stamp{position:absolute; right:10px; bottom:9px; display:flex; align-items:center; gap:3px;
  background:var(--serv); color:#fff; font-size:10.2px; padding:3px 7px; border-radius:10px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.caption{padding:4px 10px 2px; font-size:15.7px; line-height:20.3px}

/* ویس */
.voice{display:flex; align-items:center; gap:10px; padding:8px 10px 8px 8px; min-width:200px}
.play{width:40px; height:40px; border-radius:50%; background:var(--accent); flex:none;
  display:flex; align-items:center; justify-content:center; position:relative}
.row.out .play{background:#fff}
.play svg{fill:#fff} .row.out .play svg{fill:var(--out-bot)}
.play .dot{position:absolute; right:1px; top:1px; width:8px; height:8px; border-radius:50%; background:var(--accent);
  border:2px solid var(--in-bg)}
.vwave{flex:1; display:flex; align-items:center; gap:2px; height:24px}
.vwave i{display:block; width:2px; border-radius:1px; background:currentColor; opacity:.35}
.vwave i.on{opacity:1}
.row.in .voice{color:var(--accent)} .row.out .voice{color:#fff}
.vmeta{display:flex; align-items:center; gap:6px; margin-top:3px; font-size:12px; color:var(--txt2)}
.row.out .vmeta{color:rgba(255,255,255,.75)}
.vcol{display:flex; flex-direction:column; justify-content:center; flex:1}
.a2t{width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.12); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--txt)}
.row.out .a2t{background:rgba(255,255,255,.22)}

/* تماس */
.call{display:flex; align-items:center; gap:14px; padding:7px 4px 7px 6px; min-width:190px}
.call .ct{font-size:15.7px; font-weight:400; line-height:19.5px}
.call .cd{display:flex; align-items:center; gap:4px; font-size:12px; opacity:.8; margin-top:1px}
.call .icon{margin-left:auto}

/* پیام‌های سرویس */
.service{align-self:center; background:var(--serv); color:#fff; font-size:13px; font-weight:500;
  padding:5px 11px; border-radius:14px; margin:8px auto;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.unreadbar{align-self:stretch; text-align:center; background:var(--serv); color:#fff; font-size:13px;
  padding:5px 0; margin:8px -8px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}

/* دکمهٔ پایین‌رفتن */
.scrolldown{
  position:absolute; right:12px; z-index:4; width:44px; height:44px; border-radius:50%;
  background:var(--panel); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.scrolldown .badge{position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  min-width:20px; height:20px; border-radius:10px; background:#2E7DF6; color:#fff; font-size:12px;
  font-weight:600; display:flex; align-items:center; justify-content:center; padding:0 6px}

/* نوارِ نوشتن */
.inputbar{position:absolute; left:0; right:0; bottom:0; z-index:5; padding:0 24px 6px}
.inputrow{display:flex; align-items:center; gap:6px; height:37px}
.circle{width:36px; height:36px; border-radius:50%; background:rgba(25,25,25,.94); flex:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.field{flex:1; height:37px; border-radius:18.5px; background:rgba(25,25,25,.94); display:flex; align-items:center;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07);
  padding:0 12px 0 14px; gap:7px; color:#767677; font-size:17px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.field .ph{flex:1; font-size:16px; color:#7b7b7b}
.homebar{height:20px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:0}
.homebar.on{height:26px; padding-bottom:7px}
.homebar i{width:139px; height:5px; border-radius:3px; background:#fff; opacity:.95; display:block}
.phone.light .homebar i{background:#000}