/* =========================================================
   پشتیبانی داخل سایت — دکمه‌ی شناور و پنل گفتگو.
   تم کهکشانی: هاله‌ی نبض‌دار، سحابی محو، و همان ستاره‌ی چهارپر سایت.
   ========================================================= */

/* ── دکمه‌ی شناور ───────────────────────────────────────────
   inset-inline-start در راست‌چین به سمت راست صفحه می‌افتد، که همان
   جایی است که کاربر فارسی‌زبان دنبالش می‌گردد. */
.chat-fab{
  position:fixed; z-index:60;
  inset-block-end:clamp(16px, 4vw, 28px);
  inset-inline-start:clamp(16px, 4vw, 28px);
  inline-size:58px; block-size:58px;
  display:grid; place-items:center;
  border:0; border-radius:var(--r-full);
  cursor:pointer;
  background:linear-gradient(140deg, var(--indigo), var(--violet));
  box-shadow:0 6px 18px rgba(11,11,16,.28), 0 2px 6px rgba(11,11,16,.2);
  transition:transform .18s ease, box-shadow .18s ease;
}
.chat-fab:hover{ transform:translateY(-2px); }
.chat-fab:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; }

/* هاله‌ی نبض‌دار پشت دکمه */
.chat-fab__halo{
  position:absolute; inset:-6px; border-radius:inherit;
  background:radial-gradient(circle, color-mix(in oklch, var(--violet) 55%, transparent), transparent 70%);
  opacity:.5; animation:chat-pulse 3.4s ease-in-out infinite;
}
@keyframes chat-pulse{
  0%,100%{ transform:scale(1);   opacity:.42; }
  50%    { transform:scale(1.18); opacity:.16; }
}

.chat-fab__ico{
  position:relative; z-index:1;
  inline-size:26px; block-size:26px;
  /* color و نه stroke: symbol اسپرایت stroke="currentColor" روی خودش دارد
     و آن صفت از مقدار به‌ارث‌رسیده قوی‌تر است. دکمه زمینه‌ی بنفش تیره دارد،
     پس سفید اینجا درست است و به تم بستگی ندارد. */
  color:#fff;
}
/* ستاره‌ی کوچک روی شانه‌ی دکمه */
.chat-fab__star{
  position:absolute; z-index:1;
  inset-block-start:6px; inset-inline-end:6px;
  inline-size:13px; block-size:13px;
  fill:#fff; opacity:.9;
  animation:chat-twinkle 2.8s ease-in-out infinite;
}
@keyframes chat-twinkle{ 0%,100%{opacity:.35} 50%{opacity:1} }

.chat-fab.is-open .chat-fab__ico{ transform:rotate(90deg); }

/* نشان پیام خوانده‌نشده */
.chat-fab[data-unread]:not([data-unread="0"])::after{
  content:attr(data-unread);
  position:absolute; z-index:2;
  inset-block-start:-2px; inset-inline-start:-2px;
  min-inline-size:20px; block-size:20px;
  display:grid; place-items:center;
  padding:0 5px;
  font-size:.6875rem; font-weight:900; color:var(--on-ink);
  background:var(--pink); border-radius:var(--r-full);
  box-shadow:0 0 0 2px var(--bg);
}

/* ── پنل ───────────────────────────────────────────────────── */
.chat{
  position:fixed; z-index:61;
  inset-block-end:calc(clamp(16px, 4vw, 28px) + 68px);
  inset-inline-start:clamp(16px, 4vw, 28px);
  inline-size:min(360px, calc(100vw - 32px));
  max-block-size:min(560px, calc(100vh - 140px));
  display:flex; flex-direction:column;
  overflow:hidden; isolation:isolate;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--e-3);
}
.chat[hidden]{ display:none; }

.chat__sky{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.chat__neb{
  position:absolute; inset-block-start:-30%; inset-inline-end:-25%;
  inline-size:75%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--violet), transparent 68%);
  filter:blur(45px);
  opacity:var(--xtra-neb, .2);
}

.chat__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  border-block-end:1px solid var(--line);
}
.chat__head strong{ display:block; font-size:var(--t-base); font-weight:900; }
.chat__head span{ display:block; font-size:.75rem; color:var(--text-muted); }
.chat__close{
  border:0; background:transparent; cursor:pointer; padding:6px;
  color:var(--text-muted); border-radius:var(--r-sm);
}
.chat__close svg{ inline-size:18px; block-size:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.chat__close:hover{ color:var(--text); }

.chat__log{
  flex:1; min-block-size:120px;
  overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s-4);
  display:flex; flex-direction:column; gap:var(--s-2);
  /* اسکرول با انگشت/چرخ موس همچنان کار می‌کند؛ فقط نوار دیداری که
     چون کانتینر RTL است سمت چپ می‌نشست و جا می‌گرفت را برمی‌داریم. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.chat__log::-webkit-scrollbar{ display:none; }
.chat__hint{ margin:0; font-size:var(--t-sm); color:var(--text-muted); text-align:center; }

.chat__msg{
  max-inline-size:82%;
  padding:.6em .9em;
  border-radius:14px;
  font-size:var(--t-sm); line-height:1.7;
  white-space:pre-wrap; word-break:break-word;
}
/* پیام کاربر: سمت شروع (راست در فارسی) */
/* رنگ متن روی زمینه‌ی تأکیدی: var(--on-ink) و نه #fff.
   توکن‌های تأکیدی در تم تیره روشن‌اند (برای متن روی زمینه‌ی تیره طراحی
   شده‌اند)، پس متن سفید روی آن‌ها به ۲٫۶۵:۱ تا ۲٫۹۸:۱ می‌رسید — زیر حد
   ۴٫۵:۱ استاندارد WCAG AA. --on-ink در تم روشن سفید و در تم تیره نزدیک
   مشکی است، پس هر دو حالت را با یک توکن درست می‌کند (۶:۱ به بالا). */
.chat__msg--me{
  align-self:flex-start;
  background:linear-gradient(140deg, var(--indigo), var(--violet));
  color:var(--on-ink);
  border-start-start-radius:4px;
}
.chat__msg--staff{
  align-self:flex-end;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-start-end-radius:4px;
}
/* ۱۰ پیکسل به‌علاوه‌ی opacity ۰٫۶۵ دو ضعف است که روی هم جمع می‌شوند: هم
   ریز و هم کم‌کنتراست. اندازه به ۱۱ و شفافیت به ۰٫۸ می‌رود — هنوز واضح
   فرعی دیده می‌شود ولی قابل خواندن است. */
.chat__time{ display:block; margin-block-start:.3em; font-size:.6875rem; opacity:.8; }

/* نشانگر «در حال تایپ»: همان حباب سمت ربات، فقط با سه نقطه‌ی ضربان‌دار */
.chat__typing{ display:flex; align-items:center; gap:4px; padding-block:.85em; }
.chat__typing span{
  inline-size:6px; block-size:6px; border-radius:50%;
  background:currentColor; opacity:.35;
  animation:chat-typing-dot 1.2s ease-in-out infinite;
}
.chat__typing span:nth-child(2){ animation-delay:.15s; }
.chat__typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chat-typing-dot{
  0%, 60%, 100%{ transform:translateY(0); opacity:.35; }
  30%{ transform:translateY(-4px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .chat__typing span{ animation:none; opacity:.7; }
}

.chat__form{
  display:flex; align-items:flex-end; gap:var(--s-2);
  padding:var(--s-3);
  border-block-start:1px solid var(--line);
}
.chat__text{
  flex:1; resize:none;
  max-block-size:120px;
  padding:.6em .8em;
  font:inherit; font-size:var(--t-sm);
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px;
  /* بزرگ‌شدن خودکار با JS انجام می‌شود، ولی وقتی متن به سقف ۱۲۰px
     می‌رسد مرورگر خودش دکمه‌های بالا/پایین اسکرول را روی textarea
     نشان می‌دهد؛ همان که شکلش «دو مثلث با یک خط بینشان» است. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.chat__text::-webkit-scrollbar{ display:none; }
.chat__text:focus-visible{ outline:2px solid var(--violet); outline-offset:1px; }
.chat__send{
  flex:none; inline-size:38px; block-size:38px;
  display:grid; place-items:center;
  border:0; border-radius:var(--r-full); cursor:pointer;
  background:linear-gradient(140deg, var(--indigo), var(--violet));
}
.chat__send svg{ inline-size:17px; block-size:17px; fill:#fff; }
.chat__send:disabled{ opacity:.5; cursor:default; }

.chat__err{
  margin:0; padding:0 var(--s-3) var(--s-3);
  font-size:.75rem; color:var(--pink);
}

@media (prefers-reduced-motion: reduce){
  .chat-fab__halo, .chat-fab__star{ animation:none; }
}

/* =========================================================
   ویدیوی معرفی داخل کادر محصول.
   ========================================================= */

/* روی همان کادر ۴:۳ و با همان برش تصویرها، تا موقع جایگزینی
   ویدیو با فریم آخرش هیچ پرشی دیده نشود. */
.frame__video{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%;
  object-fit:cover;
  opacity:0; transition:opacity .5s ease;
  pointer-events:none;
}
.frame__video.is-on{ opacity:1; }

/* بندانگشتی ویدیو */
.shot--video .shot__vidph{
  display:grid; place-items:center;
  inline-size:100%; block-size:100%;
  background:linear-gradient(140deg, var(--indigo), var(--violet));
  background-size:cover; background-position:center;
  border-radius:inherit;
}
.shot--video .shot__vidph svg{
  inline-size:18px; block-size:18px;
  fill:#fff; opacity:.92;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));
}

@media (prefers-reduced-motion: reduce){
  .frame__video{ transition:none; }
}

/* ── تداخل با نوار خرید چسبان ───────────────────────────────
   روی موبایل، وقتی نوار خرید بالا می‌آید دقیقاً همان‌جایی می‌نشیند
   که دکمه‌ی چت است و روی «افزودن به سبد خرید» می‌افتد.

   :has() اجازه می‌دهد دکمه‌ی چت به وضعیت عنصری واکنش نشان دهد که
   نه والدش است نه هم‌نیایش — بدون این، تنها راه دست بردن از JS بود.

   ارتفاع نوار با متغیر می‌آید تا اگر روزی محتوایش عوض شد، عدد در
   یک جا باشد. --buybar-h را pdp.js از اندازه‌ی واقعی نوار ست می‌کند. */
body:has(.buybar.is-on) .chat-fab{
  transform:translateY(calc(-1 * var(--buybar-h, 76px)));
}
body:has(.buybar.is-on) .chat-fab:hover{
  transform:translateY(calc(-1 * var(--buybar-h, 76px) - 2px));
}

/* پنجره‌ی باز چت هم نباید زیر نوار برود */
body:has(.buybar.is-on) .chat-panel{
  inset-block-end:calc(clamp(16px, 4vw, 28px) + var(--buybar-h, 76px));
}

/* اگر مرورگر :has() نداشت، دست‌کم دکمه بالای نوار بماند:
   z-index بالاتر یعنی روی نوار دیده می‌شود، نه پشتش. */
@supports not selector(:has(*)){
  .chat-fab{ inset-block-end:calc(clamp(16px, 4vw, 28px) + 76px); }
}