/* فونت خودمان را سرو می‌کنیم، نه CDN بیرونی.
   لینک jsdelivr رندر را بلاک می‌کرد: روی شبکه‌های کند یا فیلترشده،
   ویجت ثانیه‌ها دیر می‌آمد یا اصلا نمی‌آمد.
   نسخه variable است: یک فایل، همه وزن‌های ۴۰۰ تا ۸۰۰.
   font-display:swap یعنی متن فورا با فونت سیستم دیده می‌شود. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn.woff2') format('woff2-variations'),
       url('/fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c: #6366f1;             /* رنگ اصلی — از تنظیمات سرور override می‌شود */
  --c2: #8b5cf6;            /* انتهای گرادیان — در JS از روی رنگ اصلی ساخته می‌شود */
  --c-deep: #4f46e5;
  --ink: #101828;
  --ink-2: #667085;
  --line: #eaecf2;
  --body-bg: #f5f6fa;
  --r-panel: 24px;
}

[hidden] { display: none !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: transparent;
  font-family: Vazirmatn, -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============ دکمه شناور ============ */
#launcher {
  position: fixed;
  bottom: 14px;
  inset-inline-start: 14px;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* سایه رنگی قوی‌تر — دکمه از صفحه جدا و به‌چشم‌تر می‌شود */
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c) 45%, transparent),
              0 2px 8px rgba(16, 24, 40, .18);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
/* تا وقتی تنظیمات نرسیده، دکمه محو است.
   ظاهر شدنِ ناگهانیِ یک شکل و بعد پریدنش به شکل دیگر، بدتر از یک تاخیر
   چند صدم‌ثانیه‌ای است. با آمدن تنظیمات، کلاس ready اضافه می‌شود. */
#launcher { opacity: 0; transition: opacity .18s ease-out; }
html.lc-ready #launcher { opacity: 1; }
/* اگر جاوااسکریپت به هر دلیل اجرا نشد، دکمه نباید برای همیشه نامرئی بماند */
@media (prefers-reduced-motion: reduce) { #launcher { transition: none; } }

#launcher:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--c) 48%, transparent), 0 3px 8px rgba(16,24,40,.18);
}
#launcher:active { transform: scale(.94); }

/* هاله: به‌جای یک دیسک تو‌پُر که مثل حلقه خاکستری دیده می‌شد، از حلقه نازک
   استفاده می‌کنیم که از خود دکمه بیرون می‌زند و محو می‌شود — تمیزتر و چشم‌گیرتر.
   دو حلقه با تاخیر، حس تپش زنده می‌دهد. */
#launcher .pulse,
#launcher .pulse::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  content: '';
}
#launcher .pulse {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent);
  animation: ping 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}
#launcher .pulse::after {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 40%, transparent);
  animation: ping 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
  animation-delay: .8s;                /* موج دوم — تپش پیوسته‌تر دیده می‌شود */
}
@keyframes ping {
  0%        { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 16px transparent; }
}
/* کاربرانی که انیمیشن برایشان آزاردهنده است */
@media (prefers-reduced-motion: reduce) {
  #launcher .pulse, #launcher .pulse::after { animation: none; }
}

#badge {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 11px;
  background: #f43f5e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #fff;
  animation: badge-in .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badge-in { from { transform: scale(.3); } }

/* ============ پنجره ============ */
#panel {
  position: fixed;
  inset: 12px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(16,24,40,.28), 0 6px 18px rgba(16,24,40,.12);
  animation: rise .34s cubic-bezier(.21,1.02,.55,1);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
}
@media (max-width: 479px) {
  #panel { inset: 0; border-radius: 0; }
}

/* ============ هدر ============ */
#header {
  position: relative;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--c) 0%, var(--c2) 100%);
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
#header::before,
#header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}
#header::before { width: 190px; height: 190px; top: -120px; inset-inline-start: -50px; }
#header::after  { width: 110px; height: 110px; bottom: -70px; inset-inline-end: -25px; background: rgba(255,255,255,.09); }

.hdr-row {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  z-index: 1;
}

.hdr-team-wrap { position: relative; flex-shrink: 0; }
.team { display: flex; align-items: center; }
.team .tv {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* حلقه سفید نازک‌تر — قبلا ۲.۵ بود و آواتارها را شلوغ نشان می‌داد */
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* همپوشانی ملایم‌تر: قبلا ۱۴ پیکسل بود و چهره‌ها روی هم می‌افتادند */
  margin-inline-start: -10px;
  box-shadow: 0 2px 7px rgba(16, 24, 40, .22);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.team .tv:first-child { margin-inline-start: 0; }

/* هاور فقط روی همان آواتاری که ماوس رویش است — قبلا `.team:hover .tv` بود و
   هر پنج آواتار با هم تکان می‌خوردند که غیرحرفه‌ای به نظر می‌رسید. */
.team .tv { cursor: default; will-change: transform; }
.team .tv:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 5px 14px rgba(16, 24, 40, .32);
  z-index: 10 !important;          /* جلوتر از همسایه‌ها بیاید تا کامل دیده شود */
}
/* بقیه کمی عقب می‌نشینند تا نفرِ زیر ماوس برجسته شود — بدون جابه‌جایی */
.team:hover .tv:not(:hover) { opacity: .72; }
.team .tv { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, opacity .2s; }
.team .tv svg { width: 18px; height: 18px; display: block; opacity: .95; }
/* نشان «+N» برای بقیه اعضای تیم */
.team .tv-more {
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.3px;
}
.hdr-info { flex: 1; min-width: 0; }
#hdr-title {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* نوار وضعیت آنلاین/آفلاین — زیر ردیف اصلی هدر */
.hdr-strip {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px;
  padding: 7px 12px;
  font-size: 11.5px;
  backdrop-filter: blur(6px);
}
/* شناسه پیگیری در نوار وضعیت — سمت انتها، کم‌رنگ تا شلوغی نکند */
#hdr-ticket {
  margin-inline-start: auto;
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 7px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 600 10.5px ui-monospace, "SF Mono", Consolas, monospace;
  letter-spacing: .4px;
  cursor: pointer;
  opacity: .85;
  transition: opacity .15s, background .15s;
}
#hdr-ticket:hover { opacity: 1; background: rgba(255, 255, 255, .26); }

.hdr-strip .dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
.hdr-strip.off .dot { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, .7); animation: none; }
.hdr-strip b { font-weight: 800; flex-shrink: 0; }
.hdr-strip .sep {
  flex-shrink: 0;
  width: 1px;
  height: 13px;
  background: rgba(255,255,255,.35);
}
#hdr-subtitle {
  flex: 1;
  min-width: 0;
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hdr-actions { display: flex; gap: 3px; flex-shrink: 0; }
.hdr-actions button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 9px;
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s;
  backdrop-filter: blur(4px);
}
.hdr-actions button:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); }
#btn-close:hover { background: rgba(239, 68, 68, .55); }

/* ============ بدنه ============ */
#body {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--body-bg);
}

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

/* ---------- پیام‌ها ---------- */
.msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 86%;
  animation: msg-in .22s ease-out;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }

.msg.me   { align-self: flex-start; flex-direction: row; margin-top: 8px; }
.msg.them { align-self: flex-end; flex-direction: row-reverse; margin-top: 8px; }
.msg.sys  { align-self: center; max-width: 92%; margin: 10px 0 4px; }

/* مرز میان مراجعه‌های قبلی — تاریخچه از چند گفتگو تشکیل شده و بدون این
   جداکننده، پیام‌های هفته‌ی پیش چسبیده به امروز دیده می‌شوند. */
.conv-divider {
  align-self: stretch; display: flex; align-items: center; gap: 10px;
  margin: 16px 2px 10px; color: var(--w-muted, #94a3b8); font-size: 11.5px;
}
.conv-divider::before, .conv-divider::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .28;
}
.conv-divider > span { white-space: nowrap; }

.msg .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(16,24,40,.15);
}
.msg .av.av-bot {
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.msg .stack { display: flex; flex-direction: column; min-width: 0; }
.me .stack   { align-items: flex-start; }
.them .stack { align-items: flex-end; }

.bubble {
  padding: 10px 14px;
  line-height: 1.75;
  font-size: 13.5px;
  word-break: break-word;
  white-space: pre-wrap;
}
.me .bubble {
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: #fff;
  border-radius: 18px 18px 18px 6px;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 30%, transparent);
}
.them .bubble {
  background: #fff;
  color: var(--ink);
  border-radius: 18px 18px 6px 18px;
  box-shadow: 0 2px 8px rgba(16,24,40,.07);
  border: 1px solid var(--line);
}
/* ----- نقل‌قول (پاسخ اپراتور به یک پیام مشخص) ----- */
/* حباب pre-wrap است؛ نقل‌قول باید normal باشد وگرنه فاصله‌های متن نقل‌شده
   ارتفاع بی‌جا می‌سازد. رنگ از currentColor می‌آید تا روی حباب رنگی «me»
   و حباب سفید «them» هر دو خوانا بماند. */
.quote {
  display: block;
  white-space: normal;
  border-inline-start: 3px solid currentColor;
  padding: 4px 8px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
  opacity: .9;
}
.quote:hover { opacity: 1; }
.quote-gone { cursor: default; font-style: italic; opacity: .65; }
.quote-who { display: block; font-weight: 700; font-size: 11px; }
.quote-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

/* هایلایت کوتاه پیام مقصد بعد از کلیک روی نقل‌قول */
@keyframes msgFlash {
  0%, 100% { background: transparent; }
  20%      { background: color-mix(in srgb, var(--c) 20%, transparent); }
}
.msg-flash { animation: msgFlash 1.5s ease-out; border-radius: 14px; }

/* ----- واکنش اپراتور (فقط نمایشی) ----- */
.reactions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.reaction {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
}
.reaction-n { font-size: 10.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.sys .bubble {
  background: color-mix(in srgb, var(--c) 9%, #fff);
  color: var(--c-deep);
  font-size: 12.5px;
  text-align: center;
  border-radius: 12px;
  padding: 8px 14px;
}
.bubble a { color: inherit; text-decoration: underline; }
.bubble img {
  max-width: 220px;
  max-height: 200px;
  border-radius: 12px;
  display: block;
  cursor: zoom-in;
}
.file-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.bubble audio { width: 210px; height: 40px; display: block; }
.bubble .transcript {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed rgba(255,255,255,.35);
  font-size: 12.5px;
  line-height: 1.7;
  opacity: .95;
}
.them .bubble .transcript { border-top-color: var(--line); color: var(--ink-2); }
.bubble video { max-width: 230px; max-height: 200px; border-radius: 10px; display: block; }
.bubble pre.code {
  direction: ltr;
  text-align: left;
  background: rgba(0,0,0,.35);
  color: #e2f6ff;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px 0;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.them .bubble pre.code { background: #0f172a; }
.bubble code {
  direction: ltr;
  display: inline-block;
  background: rgba(0,0,0,.18);
  border-radius: 5px;
  padding: 0 5px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
}
.them .bubble code { background: #eef1f6; color: #334155; }

/* ---------- کادر اعلان (زیر هدر) ----------
   برای خبر فوری، اعلام اختلال، یا کد تخفیف. سه حالت رنگی دارد که خودِ رنگ
   پیام را منتقل می‌کند. عمدا از رنگ اصلی ویجت مستقل است تا «هشدار» واقعا
   شبیه هشدار دیده شود، نه بخشی از برند. */
.announce {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.65;
  border-bottom: 1px solid var(--an-line, #e3e8ef);
  background: var(--an-bg, #eef4ff);
  color: var(--an-ink, #1e3a8a);
  flex-shrink: 0;
  animation: anIn .28s cubic-bezier(.22, .61, .36, 1);
}
@keyframes anIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .announce { animation: none; } }

.announce .an-ico {
  font-size: 14px;
  line-height: 1.4;
  flex-shrink: 0;
}
.announce .an-body { flex: 1; min-width: 0; }
.announce p {
  margin: 0;
  font-weight: 600;
  word-wrap: break-word;
  overflow-wrap: anywhere;   /* متن طولانی نباید کادر را بشکند */
}

/* کد تخفیف — قابل کپی */
.announce .an-code {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.announce .an-code code {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px dashed var(--an-code-line, #93b4f7);
  background: var(--an-code-bg, rgba(255, 255, 255, .75));
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.announce .an-code button {
  flex-shrink: 0;
  padding: 5px 11px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: 700 12px inherit;
  font-family: inherit;
  background: var(--an-btn-bg, #1d4ed8);
  color: #fff;
  transition: opacity .15s, transform .15s;
}
.announce .an-code button:hover { opacity: .88; }
.announce .an-code button:active { transform: scale(.96); }
.announce .an-code button.done { background: #16a34a; }

.announce #an-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: .5;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.announce #an-close:hover { opacity: 1; background: rgba(0, 0, 0, .07); }

/* سه حالت: خبر / هشدار / تخفیف */
.announce.info {
  --an-bg: #eef4ff; --an-ink: #1e3a8a; --an-line: #cddcfb;
  --an-code-line: #93b4f7; --an-btn-bg: #1d4ed8;
}
.announce.warning {
  --an-bg: #fff5e8; --an-ink: #7c3a03; --an-line: #fcd9a6;
  --an-code-line: #f0b45f; --an-btn-bg: #c2620a;
}
.announce.promo {
  --an-bg: #eafaf0; --an-ink: #10502f; --an-line: #b6ecca;
  --an-code-line: #6dcf95; --an-btn-bg: #15803d;
}

/* نوار اشتراک صفحه */
#screen-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
#screen-bar .scr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: dotPulse 1.4s ease-in-out infinite;
}
#screen-bar button {
  margin-inline-start: auto;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
}
#screen-bar button:hover { background: rgba(239,68,68,.55); }

/* نوار تماس صوتی — همان زبان بصری نوار اشتراک صفحه با لهجه سبز */
#call-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #064e3b;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
#call-bar .scr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: dotPulse 1.4s ease-in-out infinite;
}
#call-bar b { font-weight: 700; direction: ltr; }
#call-bar button {
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
}
#call-bar #btn-call-mute.muted { background: #b91c1c; border-color: #b91c1c; }
#call-bar #btn-call-end { margin-inline-start: auto; }
#call-bar #btn-call-end:hover { background: rgba(239,68,68,.55); }
.scr-note { font-size: 11.5px; color: #64748b; line-height: 1.8; margin-bottom: 9px; }

/* کارت تأیید انتقال به صفحه */
.nav-card {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c) 7%, #fff),
    color-mix(in srgb, var(--c2) 11%, #fff));
  border: 1.5px solid color-mix(in srgb, var(--c) 24%, transparent);
  border-radius: 13px;
  padding: 11px 13px;
  margin-top: 8px;
  animation: choiceIn .32s cubic-bezier(.2, .9, .3, 1.15) both;
}
.nav-q { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 9px; }
.nav-btns { display: flex; gap: 7px; }
.nav-go {
  flex: 1;
  border: none;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 30%, transparent);
}
.nav-go:hover { transform: translateY(-1px); }
.nav-no {
  border: 1.5px solid var(--line, #e2e8f0);
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
}
.nav-done { font-size: 12.5px; font-weight: 700; color: #15803d; }

/* کارت کد دوعاملی زنده */
.totp-card {
  background: #0f172a;
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  min-width: 200px;
  animation: choiceIn .32s cubic-bezier(.2, .9, .3, 1.15) both;
}
.totp-label { font-size: 11.5px; opacity: .75; margin-bottom: 8px; font-weight: 700; }
.totp-code {
  direction: ltr;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #a5b4fc;
  text-shadow: 0 0 18px rgba(129, 140, 248, .45);
  margin-bottom: 10px;
}
.totp-bar {
  height: 4px;
  background: rgba(255,255,255,.14);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.totp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--c), var(--c2));
  border-radius: 4px;
  transition: width 1s linear;
}
.totp-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background .15s;
}
.totp-copy:hover { background: rgba(255,255,255,.22); }
.totp-exp { font-size: 10.5px; opacity: .6; }

/* کارت‌های خبر */
.news-head {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--c);
  margin-bottom: 2px;
}
.news-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
/* پیام خبری تمام‌عرض می‌شود تا کارت‌ها جا داشته باشند */
.msg:has(.news-cards) .stack { flex: 1; width: 100%; }
.bubble:has(.news-cards) { width: 100%; white-space: normal; }
.news-card {
  position: relative;
  padding: 11px 14px;
  padding-inline-start: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c) 5%, #fff),
    color-mix(in srgb, var(--c2) 8%, #fff));
  border: 1px solid color-mix(in srgb, var(--c) 16%, transparent);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.9;
  color: #1e293b;
  text-align: justify;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
  animation: choiceIn .32s cubic-bezier(.2, .9, .3, 1.15) both;
}
.news-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 3.5px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--c), var(--c2));
}
.news-card:nth-child(1) { animation-delay: .04s; }
.news-card:nth-child(2) { animation-delay: .12s; }
.news-card:nth-child(3) { animation-delay: .2s; }
.news-card:nth-child(4) { animation-delay: .28s; }
.news-card:nth-child(5) { animation-delay: .36s; }

/* دکمه‌های تعاملی (پاسخ سریع) — منوی کارتی */
.choices { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.choice-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 11px 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c) 7%, #fff),
    color-mix(in srgb, var(--c2) 11%, #fff));
  border: 1.5px solid color-mix(in srgb, var(--c) 24%, transparent);
  color: #1e293b;
  border-radius: 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s, color .16s;
  animation: choiceIn .32s cubic-bezier(.2, .9, .3, 1.15) both;
}
.choice-btn:nth-child(1) { animation-delay: .04s; }
.choice-btn:nth-child(2) { animation-delay: .1s; }
.choice-btn:nth-child(3) { animation-delay: .16s; }
.choice-btn:nth-child(4) { animation-delay: .22s; }
.choice-btn:nth-child(5) { animation-delay: .28s; }
.choice-btn:nth-child(6) { animation-delay: .34s; }
@keyframes choiceIn {
  from { opacity: 0; transform: translateY(7px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.choice-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--c), var(--c2));
  border-color: transparent;
  color: #fff;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 36%, transparent);
}
.choice-btn:active:not(:disabled) { transform: scale(.975); }
.choice-btn:disabled { opacity: .38; cursor: default; }
.choice-btn.picked {
  background: linear-gradient(135deg, var(--c), var(--c2));
  border-color: transparent;
  color: #fff;
  opacity: 1;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 32%, transparent);
}
.choice-btn.picked::after { content: '✓'; margin-inline-start: auto; font-size: 13px; }

/* دکمه لینک — با افکت درخشش */
.links { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.link-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: #fff !important;
  border-radius: 15px;
  text-decoration: none !important;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--c) 34%, transparent);
  transition: transform .13s, box-shadow .13s;
  animation: choiceIn .32s cubic-bezier(.2, .9, .3, 1.15) both;
}
.link-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.link-tx b {
  font-size: 13px; font-weight: 800; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.link-tx i { font-style: normal; font-size: 10.5px; opacity: .9; font-weight: 600; }
.link-go {
  flex: none; font-size: 19px; font-weight: 700; opacity: .85;
  transition: transform .18s;
}
.link-btn:hover .link-go { transform: translateX(-3px); }
.link-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  animation: sheen 3.4s ease-in-out infinite;
}
@keyframes sheen {
  0%, 55% { left: -70%; }
  80%, 100% { left: 140%; }
}
.link-btn:hover { transform: translateY(-1.5px); box-shadow: 0 9px 22px color-mix(in srgb, var(--c) 46%, transparent); }
.link-btn:active { transform: scale(.985); }
.link-ic {
  flex: none; font-size: 17px;
  width: 36px; height: 36px; border-radius: 11px;
  background: rgba(255,255,255,.2);
  display: grid; place-items: center;
}
.them .bubble .link-btn { margin-top: 2px; }

.meta .edited { font-style: italic; opacity: .8; }
.meta {
  font-size: 10px;
  color: #98a2b3;
  margin-top: 3px;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 4px;
}
.meta .seen { color: var(--c); font-weight: 700; }
.sender-name { font-size: 10.5px; color: var(--ink-2); margin-bottom: 3px; padding: 0 4px; }

/* ---------- تایپینگ ---------- */
#typing-bar { padding: 6px 16px 10px; align-self: flex-end; }
.typing-bubble {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px 16px 6px 16px;
  padding: 11px 14px;
  box-shadow: 0 2px 8px rgba(16,24,40,.07);
}
.typing-bubble i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  animation: tp 1.2s infinite;
}
.typing-bubble i:nth-child(2) { animation-delay: .18s; }
.typing-bubble i:nth-child(3) { animation-delay: .36s; }
@keyframes tp {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ============ اورلی‌ها (پیش‌چت / امتیاز) ============ */
.overlay {
  position: absolute;
  inset: 0;
  background: var(--body-bg);
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  z-index: 4;
}
.overlay[hidden] { display: none !important; }

.ov-card {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: 0 10px 34px rgba(16,24,40,.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  animation: rise .3s cubic-bezier(.21,1.02,.55,1);
}
.ov-emoji { font-size: 38px; }
.ov-card h2 { font-size: 17px; font-weight: 800; }
.ov-card p { font-size: 12.5px; color: var(--ink-2); margin-top: -6px; }

/* فیلد شناور */
.field { position: relative; text-align: right; }
.field input {
  width: 100%;
  padding: 15px 13px 7px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 13.5px;
  outline: none;
  background: #fafbfc;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  border-color: var(--c);
  background: #fff;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--c) 13%, transparent);
}
.field label {
  position: absolute;
  top: 11px;
  inset-inline-start: 13px;
  font-size: 13px;
  color: #98a2b3;
  pointer-events: none;
  transition: all .13s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: 4px;
  font-size: 10px;
  color: var(--c);
  font-weight: 600;
}
.field input.err { border-color: #f43f5e; }

#pc-department {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 13.5px;
  background: #fafbfc;
  color: var(--ink);
  outline: none;
}
#pc-department:focus { border-color: var(--c); }

.btn-grad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: #fff;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--c) 35%, transparent);
  transition: transform .14s, box-shadow .14s;
}
.btn-grad:hover { transform: translateY(-1.5px); box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 45%, transparent); }
.btn-grad:active { transform: scale(.97); }

.btn-line {
  padding: 10px;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .14s;
}
.btn-line:hover { border-color: var(--c); color: var(--c); }

/* امتیاز */
#stars { display: flex; justify-content: center; gap: 6px; direction: ltr; }
#stars button {
  font-size: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: #e4e7ec;
  transition: color .12s, transform .12s;
  line-height: 1;
}
#stars button.on { color: #fbbf24; text-shadow: 0 2px 10px rgba(251,191,36,.45); }
#stars button:hover { transform: scale(1.2) rotate(8deg); }
#rating textarea {
  padding: 10px 13px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  resize: none;
  outline: none;
  background: #fafbfc;
}
#rating textarea:focus { border-color: var(--c); background: #fff; }
.thanks { font-size: 14px !important; color: var(--ink) !important; font-weight: 700; }

/* ============ ایموجی ============ */
#emoji-pop {
  position: absolute;
  bottom: 10px;
  inset-inline-start: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(16,24,40,.16);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  z-index: 6;
  animation: rise .2s ease-out;
}
#emoji-pop button {
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 8px;
  transition: transform .1s, background .1s;
}
#emoji-pop button:hover { background: var(--body-bg); transform: scale(1.18); }

/* ============ ورودی ============ */
#composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 14px;
  background: #fff;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.pill {
  flex: 1;
  /* بدون این، عرضِ حداقلی pill به اندازه محتوایش (آیکن‌ها + متن placeholder) قفل
     می‌شود و در موبایل دکمه ارسال را از کادر بیرون می‌راند — دکمه نصفه دیده می‌شد */
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  background: #f3f4f8;
  border: 1.5px solid transparent;
  border-radius: 22px;
  padding: 5px 8px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.pill:focus-within {
  background: #fff;
  border-color: var(--c);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--c) 12%, transparent);
}
.pill button {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  color: #98a2b3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.pill button:hover { color: var(--c); background: #fff; }
.pill button.recording {
  color: #f43f5e;
  animation: rec-pulse 1s infinite;
}
@keyframes rec-pulse { 50% { opacity: .4; } }
#rec-indicator {
  align-self: center;
  color: #f43f5e;
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
  white-space: nowrap;
}
#input {
  flex: 1;
  /* textarea عرض ذاتی cols-محور دارد؛ بدون min-width:0 اجازه کوچک‌شدن نمی‌دهد */
  min-width: 0;
  border: none;
  outline: none;
  font: inherit;
  font-size: 13.5px;
  resize: none;
  max-height: 110px;
  padding: 8px 4px;
  line-height: 1.6;
  background: transparent;
}
#btn-send {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--c) 40%, transparent);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s;
}
#btn-send:hover { transform: scale(1.08); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 50%, transparent); }
#btn-send:active { transform: scale(.92); }

/* اسکرول‌بار */
#messages::-webkit-scrollbar { width: 5px; }
#messages::-webkit-scrollbar-thumb { background: #d6dae1; border-radius: 3px; }
#messages::-webkit-scrollbar-thumb:hover { background: #b9bfc9; }

/* ---------- انتخاب مسیر: گفتگو یا درخواست تماس ---------- */
/* صفحه انتخاب مسیر دو گزینه بزرگ دارد و با عرض ۳۰۰ تنگ به نظر می‌رسد */
#choose .ov-card { max-width: 340px; }
.pick {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fafbfc;
  cursor: pointer;
  font: inherit;
  text-align: right;
  transition: border-color .18s, background .18s, transform .12s;
}
.pick:hover { border-color: var(--c); background: #fff; }
.pick:active { transform: scale(.985); }
.pick-ic {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 20px;
  border-radius: 11px;
  background: var(--c-soft, rgba(99,102,241,.1));
}
.pick-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick-tx b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pick-tx i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
/* وقتی اپراتوری آنلاین نیست، گزینه چت کم‌رنگ می‌شود ولی غیرفعال نه */
.pick.dim { opacity: .62; }

.sel {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  background: #fafbfc;
  color: var(--ink);
  outline: none;
  cursor: pointer;
}
.sel:focus { border-color: var(--c); background: #fff; }
.cb-err {
  font-size: 12px !important;
  color: #dc2626 !important;
  margin: 0 !important;
  text-align: right;
}
.cb-ok-sub { font-size: 12px !important; color: var(--ink-2) !important; }

/* دکمه درخواست تماس در هدر — کمی برجسته‌تر از بقیه چون یک «کار» است نه تنظیم */
#btn-callback { background: rgba(255,255,255,.22); }
#btn-callback:hover { background: rgba(255,255,255,.38); }

/* راهنمای ساعت کاری در فرم درخواست تماس */
.cb-hours {
  font-size: 11.5px !important;
  line-height: 1.9;
  color: var(--ink-2) !important;
  background: #fafbfc;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  margin: 0 !important;
  text-align: right;
}

/* =================================================================
   قالب‌های ظاهری ویجت
   امکانات همه یکسان است؛ فقط طراحی فرق می‌کند.
   قالب پیش‌فرض (classic) همان استایل بالاست و نیازی به override ندارد.
   ================================================================= */

/* ---------- ۲) شیشه‌ای (Glass) — مدرن، محو و سبک ---------- */
[data-theme="glass"] {
  --r-panel: 26px;
  /* نکته مهم: --body-bg نباید شفاف باشد.
     .overlay (فرم‌های انتخاب مسیر/پیش از چت/امتیاز) از همین متغیر برای
     پوشاندن گفتگوی پشتش استفاده می‌کند؛ با رنگ نیمه‌شفاف، پیام‌ها از
     پشت کارت دیده می‌شوند و صفحه به‌هم‌ریخته به نظر می‌رسد. */
  --body-bg: #f6f7fc;
}
[data-theme="glass"] #panel {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 20px 60px rgba(16, 24, 40, .18);
}
[data-theme="glass"] #header {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c) 88%, transparent),
    color-mix(in srgb, var(--c2) 88%, transparent));
  backdrop-filter: blur(10px);
}
/* بدنه شفاف است تا شیشه‌بودن پنل دیده شود… */
[data-theme="glass"] #body { background: transparent; }
/* …ولی روکش‌ها (انتخاب مسیر، فرم تماس، امتیازدهی) باید مات باشند
   وگرنه گفتگوی پشتشان از لای کارت دیده می‌شود. */
[data-theme="glass"] .overlay {
  background: rgba(246, 247, 252, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-theme="glass"] .ov-card {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 14px 44px rgba(16, 24, 40, .16);
}
[data-theme="glass"] .bubble {
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .55);
}
[data-theme="glass"] .them .bubble { background: rgba(255, 255, 255, .78); }
[data-theme="glass"] #composer { background: rgba(255, 255, 255, .6); backdrop-filter: blur(14px); }
[data-theme="glass"] .pill { background: rgba(255, 255, 255, .75); }
[data-theme="glass"] #launcher {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c) 90%, transparent),
    color-mix(in srgb, var(--c2) 90%, transparent));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .35);
}

/* ---------- ۳) مینیمال (Minimal) — تخت، جدی، بدون گرادیان ---------- */
[data-theme="minimal"] {
  --r-panel: 12px;
  --body-bg: #fff;
}
[data-theme="minimal"] #panel {
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 0 12px 34px rgba(16, 24, 40, .12);
}
[data-theme="minimal"] #header {
  background: var(--c);              /* بدون گرادیان */
  padding-bottom: 12px;
}
[data-theme="minimal"] #header::before,
[data-theme="minimal"] #header::after { display: none; }  /* حباب‌های تزئینی حذف */
[data-theme="minimal"] .bubble {
  border-radius: 10px;
  box-shadow: none;
  border: 1.5px solid var(--line);
}
[data-theme="minimal"] .me .bubble {
  background: var(--c);
  border-color: var(--c);
}
[data-theme="minimal"] .them .bubble { background: #fff; }
[data-theme="minimal"] #launcher {
  border-radius: 18px;               /* مربع گردشده — با placeholder در embed.js یکسان */
  background: var(--c);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .2);
}
[data-theme="minimal"] #launcher .pulse { display: none; }
[data-theme="minimal"] .link-btn,
[data-theme="minimal"] .btn-grad {
  background: var(--c);
  border-radius: 10px;
}
[data-theme="minimal"] .link-btn::after { display: none; }  /* بدون افکت درخشش */
[data-theme="minimal"] .pill { border-radius: 10px; }
[data-theme="minimal"] .ov-card { border-radius: 12px; }
/* اعلان در قالب مینیمال: تخت و بدون گردی زیاد */
[data-theme="minimal"] .announce .an-code code,
[data-theme="minimal"] .announce .an-code button { border-radius: 6px; }
/* در قالب شیشه‌ای پس‌زمینه کمی شفاف می‌شود تا با بقیه بخواند */
[data-theme="glass"] .announce { backdrop-filter: blur(10px); }

/* ---------- تأیید پایان گفتگو ---------- */
.end-ask {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 24, 40, .38);
  backdrop-filter: blur(3px);
  animation: fadeIn .16s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } }
.end-card {
  width: 100%;
  max-width: 290px;
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(16, 24, 40, .26);
  animation: rise .26s cubic-bezier(.21, 1.02, .55, 1);
}
.end-card b { font-size: 14.5px; font-weight: 800; display: block; margin-bottom: 6px; }
.end-card p { font-size: 12px; color: var(--ink-2); line-height: 1.9; margin-bottom: 14px; }
.end-btns { display: flex; flex-direction: column; gap: 8px; }
.end-btns button {
  padding: 11px 14px;
  border-radius: 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  transition: transform .12s, border-color .15s;
}
.end-btns button:active { transform: scale(.985); }
.end-yes { background: var(--c) !important; border-color: var(--c) !important; color: #fff !important; }
.end-no:hover { border-color: var(--c); color: var(--c); }

/* ---------- وضعیت درخواست تماس (سمت کاربر) ---------- */
/* داخل فرم فقط یک دکمه کوتاه است؛ جزئیات در مودال باز می‌شود
   تا فرم هیچ‌وقت بلند و اسکرول‌دار نشود. */
.cb-status-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: #fafbfc;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: right;
  transition: border-color .15s, background .15s;
}
.cb-status-btn:hover { border-color: var(--c); background: #fff; }
.csb-ic { font-size: 14px; line-height: 1; flex: none; }
.csb-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csb-go { flex: none; font-size: 10.5px; font-weight: 700; color: var(--c); }
/* نوار رنگی کناری — وضعیت در یک نگاه */
.cbs-new         { border-inline-start: 4px solid #6366f1; }
.cbs-in_progress { border-inline-start: 4px solid #f59e0b; }
.cbs-no_answer   { border-inline-start: 4px solid #ef4444; }
.cbs-done        { border-inline-start: 4px solid #10b981; }
.cbs-canceled    { border-inline-start: 4px solid #94a3b8; }

/* مودال وضعیت */
.status-card { max-width: 300px; }
.stm-ic { font-size: 34px; line-height: 1; margin-bottom: 4px; }
.stm-rows {
  margin: 12px 0 4px;
  border-top: 1px solid var(--line);
}
.stm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.stm-row span { color: var(--ink-2); flex: none; }
.stm-row b { font-weight: 700; color: var(--ink); text-align: left; }

/* فرم درخواست تماس فیلد بیشتری از بقیه روکش‌ها دارد؛ بدون فشرده‌کردن
   مخصوصِ همین فرم، محتوا از پنل بیرون می‌زند و کل صفحه به‌هم می‌ریزد. */
#cbform .ov-card { gap: 9px; padding: 20px 20px; max-width: 320px; }
#cbform .ov-emoji { font-size: 30px; }
#cbform h2 { font-size: 16px; }
/* توضیح زیر عنوان حذف می‌شود: خودِ برچسب فیلدها همان را می‌گویند و
   نگه‌داشتنش فرم را از ارتفاع پنل بیرون می‌زد. */
#cbform .ov-card > p:not(.cb-hours):not(.cb-err):not(.thanks):not(.cb-ok-sub) { display: none; }
#cbform .field input { padding: 13px 12px 6px; font-size: 13px; }
#cbform .sel { padding: 10px 12px; }
#cbform .btn-grad, #cbform .btn-line { padding: 11px 14px; }
/* راهنمای ساعت کاری فقط یک خط باشد — دو خطی شدنش فرم را از پنل بیرون می‌زد */
#cbform .cb-hours {
  padding: 7px 10px;
  line-height: 1.7;
  font-size: 10.5px !important;
  border-radius: 9px;
}

/* وقتی محتوا از ارتفاع بیشتر شود، align-items:center بالای کارت را می‌بُرد
   و اسکرول هم به آن نمی‌رسد. به‌جای center از margin:auto استفاده می‌کنیم که
   همه‌جا پشتیبانی می‌شود: وسط می‌ماند ولی موقع سرریز، بالا را نمی‌بُرد. */
.overlay { align-items: flex-start; padding: 14px; }
.overlay > * { margin-block: auto; }

/* دکمه بارگذاری پیام‌های قدیمی */
.load-more {
  flex: none;
  align-self: center;
  margin: 8px auto 0;
  padding: 6px 16px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.load-more:hover:not(:disabled) { border-color: var(--c); color: var(--c); }
.load-more:disabled { opacity: .6; cursor: default; }

/* ---------- فهرست‌های داخل حباب پیام (پاسخ‌های ساخت‌یافته AI) ---------- */
.bubble ul.blist, .bubble ol.blist {
  margin: 6px 0;
  padding: 0;
  white-space: normal;
  list-style: none;
}
.bubble .blist li {
  position: relative;
  margin: 7px 0;
  padding-inline-start: 20px;
  line-height: 1.7;
}
.bubble ul.blist li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 4px;
  top: 0;
  color: var(--c);
  font-weight: 800;
  font-size: 15px;
}
.bubble ol.blist { counter-reset: bl; }
.bubble ol.blist li { counter-increment: bl; }
.bubble ol.blist li::before {
  content: counter(bl) '.';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--c);
  font-weight: 800;
  font-size: 12.5px;
}
/* حباب کاربر (پس‌زمینه گرادیان): بولت سفید */
.me .bubble ul.blist li::before, .me .bubble ol.blist li::before { color: #fff; }
.bubble b { font-weight: 800; }

/* ============ جشنواره تخفیف‌ها ============ */
/* دکمه جشنواره در صفحه انتخاب — باید از دو گزینه دیگر متمایز باشد
   ولی با رنگ اصلی ویجت هماهنگ بماند، نه یک وصله‌ی بی‌ربط. */
.pick-fest {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background: linear-gradient(135deg, #fff7ed, #fef2f2);
  box-shadow: 0 2px 10px rgba(249,115,22,.13);
}
.pick-fest::before {
  /* حاشیه گرادیانی بدون افزودن المان اضافه */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #fb923c, #f43f5e, #a855f7);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.pick-fest .pick-ic {
  background: linear-gradient(135deg, #fb923c, #f43f5e);
  color: #fff;
  animation: festPop 2.6s ease-in-out infinite;
}
.pick-fest b { color: #b45309; }
.fest-arrow {
  margin-inline-start: auto;
  color: #f43f5e;
  display: flex;
  flex: none;
}
/* براقی که آرام روی دکمه رد می‌شود — نشانه‌ی «تازه/ویژه» بدون سروصدا */
.fest-shine {
  position: absolute;
  top: 0;
  inset-inline-start: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg);
  animation: festShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes festShine {
  0%, 62% { inset-inline-start: -60%; }
  100%    { inset-inline-start: 130%; }
}
@keyframes festPop {
  0%, 88%, 100% { transform: scale(1); }
  93%           { transform: scale(1.14) rotate(-7deg); }
}

/* ---- صفحه جشنواره ---- */
.fest-overlay {
  /* position را اینجا دست نمی‌زنیم: قانون پایه‌ی .overlay مقدار
     absolute + inset:0 دارد و بازنویسی‌اش با relative باعث می‌شد پنل
     تمام‌قد نشود و از بالا پایین بیفتد (همان فضای خاکستری بالای صفحه).
     absolute خودش برای مهارکردن لایه تزئینی کافی است. */
  padding: 0;
  align-items: stretch;
  overflow: hidden;
  /* یک پس‌زمینه‌ی پیوسته برای کل صفحه. قبلا گرادیان تا ۳۰٪ تمام می‌شد و
     هدرِ مات روی قسمت خاکستری می‌افتاد — همان خط دو رنگ. */
  background:
    radial-gradient(120% 70% at 100% 0%, #ffe9d6 0%, rgba(255,233,214,0) 55%),
    radial-gradient(110% 60% at 0% 8%,  #ffe4ec 0%, rgba(255,228,236,0) 50%),
    linear-gradient(180deg, #fff8f1 0%, #fdf6f8 45%, #f7f5fb 100%);
}
.fest-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 1;          /* روی لایه تزئینی */
}
.fest-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  flex: none;
  /* هدر باید روی فهرستِ اسکرول‌شونده بماند تا کارت‌ها از زیرش رد شوند،
     نه اینکه برچسب روی عنوان بیفتد. */
  position: relative;
  z-index: 2;
  /* پس‌زمینه‌ی مات نمی‌خواهد: پس‌زمینه‌ی صفحه یکدست است و کارت‌ها با
     محوکردنِ نرمِ زیرِ هدر (mask) از زیرش رد می‌شوند، بدون خطِ برش. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.fest-back {
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16,24,40,.09);
  transition: transform .15s, background .15s;
}
.fest-back:hover { transform: translateX(2px); background: #f8fafc; }
.fest-head-tx h2 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -.3px;
}
/* ایموجی جدا از متن است تا گرادیانِ متن رنگش را نخورد */
.fest-title-ico {
  font-size: 20px;
  line-height: 1;
  flex: none;
  animation: festTitlePop 3s ease-in-out infinite;
}
@keyframes festTitlePop {
  0%, 82%, 100% { transform: rotate(0deg) scale(1); }
  88%           { transform: rotate(-12deg) scale(1.15); }
  94%           { transform: rotate(9deg) scale(1.1); }
}
/* متن گرادیانی + برقی که آرام از رویش رد می‌شود.
   رنگ پایه (color) عمدا ست شده تا اگر مرورگر background-clip:text را
   پشتیبانی نکند، عنوان بی‌رنگ و نامرئی نشود. */
.fest-title-tx {
  position: relative;
  color: #b91c1c;
  background: linear-gradient(95deg, #f97316 0%, #e11d48 42%, #a855f7 72%, #f97316 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: festTitleFlow 6s linear infinite;
}
@keyframes festTitleFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
/* خط تزئینی زیر عنوان — کوتاه و گرادیانی، مثل زیرخطِ سرفصل‌های کمپین */
.fest-head-tx { position: relative; }
/* زیرخط به خودِ متن چسبیده، نه به فاصله‌ای حدسی از لبه‌ی h2 —
   وگرنه با عوض‌شدن ایموجی (یا نبودنش) جای خط به هم می‌ریخت. */
.fest-title-tx::after {
  content: '';
  position: absolute;
  bottom: -5px;
  inset-inline-start: 0;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f97316, #e11d48);
  opacity: .9;
}
@media (prefers-reduced-motion: reduce) {
  .fest-title-tx, .fest-title-ico { animation: none; }
}
/* روی پس‌زمینه‌ی رنگی، خاکستریِ ملایمِ پیش‌فرض (#667085) با نسبت کنتراست ۴.۵
   درست روی مرز استاندارد می‌افتاد و در ۱۲px واقعا سخت خوانده می‌شد.
   تیره‌تر و کمی بزرگ‌تر شد: نسبت ۶.۹ — راحت خوانا. */
.fest-head-tx p  { font-size: 12.5px; color: #4b5563; margin-top: 2px; font-weight: 500; }

.fest-list {
  flex: 1;
  overflow-y: auto;
  /* برچسب تخفیف ۷px بالای کارت می‌نشیند و کارت موقع hover هم ۲px بالا می‌رود.
     بدون این فضای بالا، ظرفِ اسکرول‌دار سرِ برچسب را می‌برد. */
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* کارت محصول */
.fest-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(16,24,40,.05);
  transition: transform .16s cubic-bezier(.21,1.02,.55,1), box-shadow .16s, border-color .16s;
  /* ورود پلکانی؛ تاخیر هر کارت در JS ست می‌شود */
  animation: festIn .42s cubic-bezier(.21,1.02,.55,1) backwards;
}
.fest-card:hover {
  transform: translateY(-2px);
  border-color: #fdba74;
  box-shadow: 0 8px 22px rgba(249,115,22,.16);
}
.fest-card:active { transform: translateY(0) scale(.99); }

.fest-ic {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(135deg, #fff1e6, #ffe4e6);
  border: 1px solid #fde3cf;
}
.fest-tx { min-width: 0; flex: 1; }
.fest-tx b {
  display: block;
  font-size: 13.8px;
  font-weight: 700;
  line-height: 1.5;
  /* عنوان بلند نباید کارت را بشکند */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fest-tx i {
  display: block;
  font-style: normal;
  font-size: 12.2px;
  color: #475467;          /* نسبت ۷.۷ روی کارت سفید */
  font-weight: 500;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fest-go {
  flex: none;
  color: #f43f5e;
  display: flex;
  opacity: .75;
  transition: transform .16s, opacity .16s;
}
.fest-card:hover .fest-go { opacity: 1; transform: translateX(-3px); }

/* برچسب گوشه — «٪۵۰»، «جدید»، ... */
.fest-badge {
  position: absolute;
  z-index: 1;
  top: -7px;
  inset-inline-start: 12px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2.5px 8px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(244,63,94,.35);
  letter-spacing: .2px;
  /* برچسب‌های بلند («۲۰ درصد تخفیف») نباید دو خطی شوند و شکل قرص را بشکنند،
     و نباید از لبه کارت بیرون بزنند. */
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.fest-empty {
  text-align: center;
  color: var(--ink-2);
  font-size: 12.5px;
  padding: 30px 10px;
}

@keyframes festIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* کاربری که حرکت را دوست ندارد، نباید مجبور به تحملش شود */
@media (prefers-reduced-motion: reduce) {
  .fest-shine, .pick-fest .pick-ic { animation: none; }
  .fest-card { animation: none; }
}

/* لوگوی آپلودشده داخل کارت جشنواره — قاب همان اندازه می‌ماند، فقط محتوا عوض می‌شود */
.fest-ic.has-img {
  background: #fff;
  padding: 5px;
  overflow: hidden;
}
.fest-ic.has-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* لوگوی کشیده‌نشده، هر نسبتی که داشته باشد */
  display: block;
  border-radius: 8px;
}

/* ---- لایه تزئینی صفحه جشنواره ---- */
/* پشت همه‌چیز می‌نشیند و هیچ کلیکی را نمی‌گیرد. */
.fest-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* لکه‌های رنگی محو — عمق می‌دهند بدون اینکه متن را کم‌خوان کنند */
.fest-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  opacity: .5;
}
.fest-blob-1 {
  width: 210px; height: 210px;
  top: -70px; inset-inline-end: -60px;
  background: radial-gradient(circle, #fdba74, transparent 70%);
}
.fest-blob-2 {
  width: 180px; height: 180px;
  top: 38%; inset-inline-start: -70px;
  background: radial-gradient(circle, #f9a8d4, transparent 70%);
}
.fest-blob-3 {
  width: 200px; height: 200px;
  bottom: -80px; inset-inline-end: -50px;
  background: radial-gradient(circle, #c4b5fd, transparent 70%);
}

/* آیکون‌های شناور. موقعیت و اندازه و تاخیر هرکدام از HTML می‌آید تا
   پراکندگی طبیعی باشد، نه یک الگوی تکراری. */
.fest-deco {
  position: absolute;
  top: var(--y);
  inset-inline-start: var(--x);
  font-size: 22px;
  line-height: 1;
  opacity: .16;
  transform: scale(var(--s));
  animation: festFloat 7s ease-in-out infinite;
  animation-delay: var(--d);
  will-change: transform;
}
@keyframes festFloat {
  0%, 100% { transform: scale(var(--s)) translateY(0) rotate(0deg); }
  50%      { transform: scale(var(--s)) translateY(-11px) rotate(7deg); }
}

/* کارت‌ها روی این پس‌زمینه باید کمی شفاف باشند تا رنگ از پشتشان حس شود،
   ولی متن کاملا خوانا بماند. */
.fest-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-color: rgba(255,255,255,.9);
}
.fest-card:hover { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .fest-deco { animation: none; }
}

/* ============ رفتار درست در موبایل ============ */
/* «زنجیره‌ی اسکرول»: وقتی کاربر به انتهای فهرست پیام‌ها می‌رسد و باز هم
   می‌کشد، مرورگر اسکرول را به صفحه‌ی میزبان پاس می‌دهد و سایت زیرِ چت
   بالا و پایین می‌رود. contain جلوی این پاس‌دادن را می‌گیرد. */
#messages,
.overlay,
.fest-list,
.bubble pre.code {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html, body {
  overscroll-behavior: none;
}

/* ---- آیکون جشنواره در هدر ---- */
/* باید بین آیکون‌های هدر پیدا باشد ولی داد نزند: یک نقطه‌ی کوچکِ پالس‌دار
   کافی است تا چشم را بگیرد، بدون اینکه هدر شلوغ شود. */
.hdr-fest { position: relative; }
.hdr-fest-dot {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85);
  animation: hdrFestDot 2.2s ease-in-out infinite;
}
@keyframes hdrFestDot {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr-fest-dot { animation: none; }
}


/* استیکر اپراتور — بزرگ و بدون قاب حباب */
.lc-sticker { font-size: 52px; line-height: 1.15; display: inline-block; }

/* ============ اصلاحات موبایل: کیبورد، زوم و لمس ============ */
/* iOS با فوکوس روی ورودیِ زیر 16px کل صفحه را زوم می‌کند و بعد از بسته شدن
   کیبورد، ویجت بریده/نصفه می‌ماند. 16px جلوی این زوم خودکار را می‌گیرد. */
@media (pointer: coarse), (max-width: 479px) {
  #input,
  .field input,
  #cbform .field input,
  #rating-comment { font-size: 16px; }
}

/* دابل‌تپ روی دکمه‌ها نباید زوم کند و تاخیر لمس هم حذف می‌شود */
button, .pick, .nav-go, .nav-no { touch-action: manipulation; }

/* اسکرول داخل ویجت نباید به صفحه‌ی سایت پشتش زنجیر شود (rubber-band در iOS) */
#messages, .overlay, #fest-list { overscroll-behavior: contain; }
#messages { -webkit-overflow-scrolling: touch; }

/* آیفون: باکس نوشتن نباید زیر نوار home برود */
@media (max-width: 479px) {
  #composer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- نوار تبلیغ محصول ---------- */
/* هم‌خانواده‌ی کادر اعلان است ولی کل نوار یک لینک است، پس باید کاملا کلیک‌پذیر
   و بدون زیرخط باشد. ارتفاعش عمدا کم است تا از فضای گفتگو کم نکند. */
.promo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  text-decoration: none;
  border-bottom: 1px solid #e9ddf6;
  background: linear-gradient(135deg, #f6f1fe 0%, #eef4ff 100%);
  color: #4c2f8f;
  flex-shrink: 0;
  transition: background .18s;
  animation: anIn .28s cubic-bezier(.22, .61, .36, 1);
}
.promo:hover { background: linear-gradient(135deg, #efe6fd 0%, #e6eeff 100%); }
.promo:active { transform: scale(.995); }
@media (prefers-reduced-motion: reduce) { .promo { animation: none; } }

/* هنگام تعویض محصول، محو و دوباره ظاهر می‌شود */
.promo.swap { opacity: 0; transition: opacity .22s; }

.promo .pr-ico {
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
  overflow: hidden;
}
.promo .pr-ico img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }

.promo .pr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.promo .pr-title {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promo .pr-sub {
  font-size: 11px;
  opacity: .78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo .pr-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: #ffc978;
  color: #7c4a03;
}

.promo .pr-cta {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 8px;
  background: #4c2f8f;
  color: #fff;
  white-space: nowrap;
}

/* روی عرض خیلی کم، توضیح کوتاه جا نمی‌شود — حذفش می‌کنیم نه اینکه بشکند */
@media (max-width: 330px) {
  .promo .pr-sub { display: none; }
  .promo .pr-cta { padding: 5px 8px; }
}

/* نشان درصد تخفیف — عمدا پررنگ‌تر از برچسب معمولی تا اول به چشم بیاید */
.promo .pr-off {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
  color: #fff;
  box-shadow: 0 1px 4px rgba(190, 18, 60, .3);
  white-space: nowrap;
}
.promo .pr-off .off-n { font-size: 13px; line-height: 1; }
.promo .pr-off .off-p { font-size: 9.5px; opacity: .92; }

@media (max-width: 330px) {
  .promo .pr-off { padding: 3px 6px; }
  .promo .pr-off .off-p { display: none; }
}

/* ---------- آواتار با حرف اول نام ---------- */
/* قبلا همه‌ی اپراتورها یک آدمک یکسان بودند و تیم «قالبی» به نظر می‌رسید */
.team .tv-ini {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1;
  /* حرف فارسی کمی پایین‌تر می‌نشیند — با پدینگ بالا وسط‌چین واقعی می‌شود */
  padding-top: 1px;
  text-shadow: 0 1px 2px rgba(16, 24, 40, .18);
}
/* حالت بدون اپراتور: نشان مرکز پشتیبانی به‌جای آدمک خاکستری */
.team .tv-cc {
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(4px);
}
.team .tv-cc svg { width: 19px; height: 19px; }

/* ---------- آیکون مرکز پشتیبانی کنار عنوان ---------- */
#hdr-title { display: flex; align-items: center; gap: 6px; }
#hdr-title .cc-ico {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  opacity: .92;
  display: inline-flex;
}
#hdr-title .cc-ico svg { width: 100%; height: 100%; display: block; }
#hdr-title-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- نام اپراتور هنگام هاور ---------- */
/* حباب سفارشی امتحان شد و کنار گذاشته شد: هدر برای حباب‌های تزئینی‌اش
   `overflow:hidden` دارد و هر tooltipی که از لبه‌ی پایین بیرون بزند بریده
   می‌شود. برداشتنِ آن overflow، طرح خود هدر را خراب می‌کند. پس نام را به
   tooltip خود مرورگر (title) سپردیم — بدون بریدگی و روی همه‌ی دستگاه‌ها. */

/* روی دستگاه لمسی hover معنی ندارد */
@media (hover: none) {
  .team .tv:hover { transform: none; box-shadow: 0 2px 7px rgba(16, 24, 40, .22); }
  .team:hover .tv:not(:hover) { opacity: 1; }
}