/* ═══════════════════════════════════════════════════════════════════════════
   فانوس‌چت — استایل صفحهٔ گفتگو (مشترک برای مشتری و پنل)
   assets/chat/chat.css  ·  v3
   ───────────────────────────────────────────────────────────────────────────
   • RTL-native: «خودم» سمت چپ (آینهٔ تلگرام در چیدمان راست‌به‌چپ)
   • 100dvh: تا نوار آدرس موبایل کیبورد را قطع نکند
   • safe-area: آیفون‌های نوچ‌دار
   • تم روشن/تاریک
   ═══════════════════════════════════════════════════════════════════════════ */

.fc,
.fc-scope {
  --p:  #10b981;
  --pd: #067a55;

  --fcbg:      #eef1f6;
  --fcsurface: #ffffff;
  --fcpanel:   #ffffff;
  --fctext:    #101828;
  --fctext2:   #667085;
  --fcborder:  rgba(16, 24, 40, .09);

  --fco-own-bg:  linear-gradient(135deg, var(--p), var(--pd));
  --fco-own-tx:  #ffffff;
  --fci-bg:   #ffffff;

  /* رنگِ «حساب رسمی» — عمداً ثابت و مستقل از تمِ فروشگاه؛ کاربرِ تمِ طلایی
     هم باید تیکِ آبیِ استاندارد را ببیند (نه تیکِ طلایی). */
  --fcofficial: #2aabee;

  /* رنگِ نامِ فرستنده: کمی به سمتِ رنگِ متن تیره/روشن می‌شود تا تم‌های
     روشن (مثل طلایی) روی حبابِ سفید خوانا بمانند. */
  --fcname: color-mix(in srgb, var(--p) 62%, var(--fctext));

  --fchead-h: 60px;
  --fcsafe-b: env(safe-area-inset-bottom, 0px);
  --fcsafe-t: env(safe-area-inset-top, 0px);

  --fcdanger: #e5484d;
  --fcwarn:   #d97706;
  --fcok:     #12805c;

  --fcshadow: 0 4px 20px rgba(16,24,40,.07);

  /* رنگِ متن را خودِ اسکوپ تعیین می‌کند تا رنگِ متنِ صفحهٔ میزبان (پنل)
     به داخلِ گفتگو نشت نکند — پنلِ تاریک متنِ روشن دارد و برعکس. */
  color: var(--fctext);
}

/* ── پالتِ تاریک ──────────────────────────────────────────────────────────────
   «مقادیر» فقط یک‌جا تعریف می‌شوند (تک‌منبع حقیقت) و پایین‌تر فقط یک بلوکِ
   «نقش‌دهی» دارند (کلاسِ fc--dark یا body.dark در پنل). صفحهٔ گفتگوی مشتری
   به‌طور پیش‌فرض روشن است تا با بقیهٔ پلتفرم یکدست بماند. */
.fc,
.fc-scope {
  --fcd-bg:      #0c1116;
  --fcd-surface: #141b22;
  --fcd-text:    #e7ecf1;
  --fcd-text2:   #93a1b0;
  --fcd-border:  rgba(255,255,255,.10);
  --fcd-i-bg:    #1a232c;
  --fcd-shadow:  0 4px 20px rgba(0,0,0,.4);
}

/* ── فعال‌سازی پالتِ تاریک ─────────────────────────────────────────────────
   عمداً به تنظیمِ سیستم (prefers-color-scheme) گره نخورده است:

     • صفحهٔ گفتگوی مشتری روشن می‌ماند — کلِ پلتفرم فانوس دارک‌مود ندارد و
       صفحهٔ فروشگاهی که مشتری از آن آمده هم روشن است؛ پس صفحهٔ گفتگو با
       بقیهٔ سایت یکدست می‌ماند. (اگر روزی دارک‌مودِ سراسری آمد، فقط کلاسِ
       `fc--dark` را به <body> بدهید؛ همین بلوک کافی است.)
     • پنلِ فروشنده دارک‌مودِ خودش را دارد (body.dark) و باید از آن پیروی
       کند، نه از سیستمِ گوشی؛ وگرنه پنلِ روشن یک کارتِ سیاه در دلِ خودش
       می‌بیند. */
body.fc.fc--dark,
body.dark .fc-scope {
  --fcbg:      var(--fcd-bg);
  --fcsurface: var(--fcd-surface);
  --fcpanel:   var(--fcd-surface);
  --fctext:    var(--fcd-text);
  --fctext2:   var(--fcd-text2);
  --fcborder:  var(--fcd-border);
  --fci-bg:    var(--fcd-i-bg);
  --fcshadow:  var(--fcd-shadow);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ── ویژگی hidden ─────────────────────────────────────────────────────────
   قاعدهٔ پیش‌فرض مرورگر («[hidden] { display:none }») با هر اعلانِ `display`
   در این فایل شکسته می‌شود، چون استایلِ نویسنده همیشه از استایلِ UA قوی‌تر
   است. نتیجه: عناصری که JS با `el.hidden = true` خاموششان می‌کرد، همیشه
   روی صفحه می‌ماندند:
     • .fc-lightbox  → لایهٔ تمام‌صفحه با ۹۲٪ سیاهی، روی کلِ صفحه
     • .fc-rec       → نوارِ ضبط ویس، روی کامپوزر (مشتری نمی‌توانست تایپ کند)
     • .fc-conn / .fc-jump / .fc-reply / .fc-alak / .fc-send
   این قاعده فقط داخلِ اسکوپِ چت، آن را برمی‌گرداند. JS همه‌جا فقط همین
   ویژگی را تغییر می‌دهد (هیچ کلاسی برای نمایش/پنهان استفاده نمی‌شود)، پس
   این بازگردانی هیچ رفتارِ دیگری را عوض نمی‌کند. */
.fc [hidden],
.fc-scope [hidden],
.fc-scope[hidden] { display: none !important; }

body.fc {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.fc {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--fcbg);
  color: var(--fctext);
  font-family: Vazirmatn, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}

/* ══════════════ هدر ══════════════ */
.fc-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--fcsafe-t) + 8px) 10px 8px;
  min-height: var(--fchead-h);
  background: color-mix(in srgb, var(--fcpanel) 88%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--fcborder);
  z-index: 30;
}

.fc-icon {
  appearance: none; border: 0; background: transparent; color: var(--fctext2);
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .18s, color .18s; flex: 0 0 auto;
  text-decoration: none;
}
.fc-icon:hover, .fc-icon:active { background: color-mix(in srgb, var(--fctext) 8%, transparent); color: var(--fctext); }

.fc-ava {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto; background: color-mix(in srgb, var(--p) 16%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.fc-ava img { width: 100%; height: 100%; object-fit: cover; }
.fc-ava .fc-ava-ph { display: none; font-size: 19px; }
.fc-ava--ph .fc-ava-ph { display: block; }

.fc-online-dot {
  position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--fcpanel);
}

.fc-id { flex: 1 1 auto; min-width: 0; }
.fc-id b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-id small {
  display: block; font-size: 11.5px; color: var(--fctext2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-id small.is-typing { color: var(--p); font-weight: 600; }
.fc-id small.is-online { color: #16a34a; }

/* ══════════════ نوار وضعیت اتصال ══════════════ */
.fc-conn {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--fcwarn) 15%, var(--fcpanel));
  color: var(--fcwarn); border-bottom: 1px solid var(--fcborder);
}
.fc-conn span { flex: 1 1 auto; }
.fc-conn button {
  appearance: none; border: 1px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-size: 11.5px; padding: 3px 10px;
  border-radius: 999px; cursor: pointer;
}

/* ══════════════ بدنه ══════════════ */
.fc-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px 14px;
  display: flex; flex-direction: column;
}

.fc-msgs { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }

.fc-loadmore { text-align: center; padding: 8px; color: var(--fctext2); font-size: 16px; }

/* جداکنندهٔ تاریخ */
.fc-day {
  align-self: center; margin: 12px 0 8px; padding: 3px 12px;
  font-size: 11px; font-weight: 600; color: var(--fctext2);
  background: color-mix(in srgb, var(--fctext) 7%, transparent);
  border-radius: 999px;
}

/* ══════════════ حباب پیام ══════════════ */
.fc-msg {
  max-width: min(78%, 520px);
  align-self: flex-start;              /* طرف مقابل = راست (start در RTL) */
  background: var(--fci-bg);
  border: 1px solid var(--fcborder);
  border-radius: 16px 16px 16px 5px;
  padding: 7px 11px 5px;
  box-shadow: var(--fcshadow);
  word-break: break-word;
  overflow-wrap: anywhere;
  position: relative;
  animation: fc-in .18s ease-out;
}
@keyframes fc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* خودم — در RTL سمت چپ */
.fc-msg.fc-own {
  align-self: flex-end;
  background: var(--fco-own-bg);
  color: var(--fco-own-tx);
  border-color: transparent;
  border-radius: 16px 16px 5px 16px;
}
body.fc--own-right .fc-msg { align-self: flex-end; border-radius: 16px 16px 5px 16px; }
body.fc--own-right .fc-msg.fc-own { align-self: flex-start; border-radius: 16px 16px 16px 5px; }

.fc-msg.fc-msg--pending { opacity: .62; }
.fc-msg.fc-msg--failed  { border-color: var(--fcdanger); }
.fc-msg.fc-msg--flash   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 35%, transparent); }

.fc-msg.fc-official { border-inline-start: 3px solid var(--p); }

.fc-txt { font-size: 14px; line-height: 1.72; white-space: pre-wrap; }
.fc-txt a { color: inherit; text-decoration: underline; }

.fc-meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 2px; font-size: 10px; opacity: .62; line-height: 1;
}
.fc-own .fc-meta { opacity: .82; }

/* تیک وضعیت */
.fc-tick { font-size: 11px; }
.fc-tick.seen { color: #9fe8ff; }

/* تیک آبی مقام رسمی (بیسکویت تلگرام) */
.fc-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--fcname, var(--p));
  margin-bottom: 2px;
}
.fc-verified svg { flex: 0 0 auto; color: var(--fcofficial); }
body.fc--fcpanel .fc-own .fc-verified { color: currentColor; }

/* پاسخ‌ارجاعی داخل حباب */
.fc-quote {
  display: block; margin: 0 0 5px; padding: 5px 8px;
  border-inline-start: 3px solid var(--p);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fctext) 6%, transparent);
  font-size: 12px; text-align: start;
}
.fc-own .fc-quote { background: rgba(255,255,255,.18); border-inline-start-color: rgba(255,255,255,.85); }
.fc-quote b { display: block; font-size: 11px; opacity: .85; font-weight: 700; }
.fc-quote small { display: block; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══════════════ تصویر ══════════════ */
.fc-img {
  display: block; margin: 0 -11px 4px; max-width: calc(100% + 22px);
  border-radius: 12px; cursor: zoom-in; background: color-mix(in srgb, var(--fctext) 8%, transparent);
}
.fc-img img { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: 12px; }
.fc-msg:has(.fc-txt:empty) { padding-bottom: 7px; }

/* ══════════════ ویس ══════════════ */
.fc-voice { display: flex; align-items: center; gap: 9px; min-width: 190px; padding: 3px 0; }
.fc-vplay {
  appearance: none; border: 0; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--fctext) 10%, transparent); color: var(--fctext);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto; font-size: 13px;
}
.fc-own .fc-vplay { background: rgba(255,255,255,.24); color: #fff; }
.fc-vwave { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; height: 26px; cursor: pointer; }
.fc-vwave i {
  display: block; width: 2.5px; border-radius: 2px; min-height: 3px;
  background: color-mix(in srgb, var(--fctext) 34%, transparent);
}
.fc-own .fc-vwave i { background: rgba(255,255,255,.5); }
.fc-vwave i.on { background: var(--p); }
.fc-own .fc-vwave i.on { background: #fff; }
.fc-vtime { font-size: 10.5px; opacity: .68; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ══════════════ خالی ══════════════ */
.fc-empty {
  margin: auto; text-align: center; padding: 30px 22px; color: var(--fctext2);
  max-width: 320px;
}
.fc-empty-ic {
  width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--p) 13%, transparent); color: var(--p);
}
.fc-empty p { font-size: 15px; font-weight: 700; color: var(--fctext); margin: 0 0 6px; }
.fc-empty small { font-size: 12px; line-height: 1.9; display: block; }

/* ══════════════ پرش به پیام جدید ══════════════ */
.fc-jump {
  position: fixed; inset-block-end: calc(74px + var(--fcsafe-b)); inset-inline-start: 50%;
  transform: translateX(50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--p); color: #fff; font: inherit; font-size: 12px; font-weight: 700;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--p) 45%, transparent);
  z-index: 25; animation: fc-in .2s ease-out;
}

/* ══════════════ هشدار الک ══════════════ */
.fc-alak {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 12px; font-weight: 600;
  border-top: 1px solid var(--fcborder);
  animation: fc-in .18s ease-out;
}
.fc-alak svg { flex: 0 0 auto; }
.fc-alak span { flex: 1 1 auto; }
.fc-alak.warn   { background: color-mix(in srgb, var(--fcwarn) 14%, var(--fcpanel));   color: var(--fcwarn); }
.fc-alak.block  { background: color-mix(in srgb, var(--fcdanger) 14%, var(--fcpanel)); color: var(--fcdanger); }
.fc-alak button { appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 4px; }

/* ══════════════ نوار پاسخ ══════════════ */
.fc-reply {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: var(--fcpanel); border-top: 1px solid var(--fcborder);
}
.fc-reply-bar { width: 3px; align-self: stretch; border-radius: 3px; background: var(--p); }
.fc-reply-body { flex: 1 1 auto; min-width: 0; }
.fc-reply-body b { display: block; font-size: 11.5px; color: var(--p); }
.fc-reply-body small { display: block; font-size: 12px; color: var(--fctext2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══════════════ کامپوزر ══════════════ */
.fc-compose {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 8px calc(8px + var(--fcsafe-b));
  background: color-mix(in srgb, var(--fcpanel) 92%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-top: 1px solid var(--fcborder);
  z-index: 30;
}

.fc-inputwrap {
  flex: 1 1 auto; min-width: 0;
  background: color-mix(in srgb, var(--fctext) 6%, transparent);
  border-radius: 20px; padding: 3px 6px;
}
.fc-inputwrap textarea {
  display: block; width: 100%; border: 0; background: transparent; resize: none;
  font: inherit; font-size: 14px; line-height: 1.7; color: var(--fctext);
  padding: 6px 6px; max-height: 118px; outline: none;
}
.fc-inputwrap textarea::placeholder { color: var(--fctext2); }

.fc-send {
  appearance: none; border: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--fco-own-bg); color: #fff; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--p) 38%, transparent);
  transition: transform .15s;
}
.fc-send:active { transform: scale(.92); }

/* ══════════════ ضبط ویس ══════════════ */
.fc-rec {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px calc(12px + var(--fcsafe-b));
  background: var(--fcpanel); border-top: 1px solid var(--fcborder);
  box-shadow: 0 -8px 28px rgba(0,0,0,.12);
}
.fc-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fcdanger); animation: fc-blink 1s infinite; }
@keyframes fc-blink { 50% { opacity: .25; } }
.fc-rec b { font-variant-numeric: tabular-nums; font-size: 13px; }
.fc-rec-wave { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; height: 24px; overflow: hidden; }
.fc-rec-wave i { display: block; width: 2.5px; border-radius: 2px; background: var(--p); min-height: 3px; }
.fc-rec-hint { font-size: 10.5px; color: var(--fctext2); }
.fc-rec-cancel { appearance: none; border: 0; background: transparent; color: var(--fcdanger); font-size: 16px; cursor: pointer; padding: 6px; }

/* ══════════════ لایت‌باکس ══════════════ */
.fc-lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.fc-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.fc-box-close {
  position: absolute; inset-block-start: calc(14px + var(--fcsafe-t)); inset-inline-start: 14px;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 17px;
}

/* ══════════════ منوی زمینه ══════════════ */
.fc-menu {
  position: fixed; z-index: 80; min-width: 168px; padding: 5px;
  background: var(--fcpanel); border: 1px solid var(--fcborder); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22); animation: fc-in .13s ease-out;
}
.fc-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 10px; background: transparent;
  color: var(--fctext); font: inherit; font-size: 13px; cursor: pointer; text-align: start;
}
.fc-menu button:hover { background: color-mix(in srgb, var(--fctext) 8%, transparent); }
.fc-menu button i { width: 16px; text-align: center; color: var(--fctext2); }

/* ══════════════ توست ══════════════ */
.fc-toast {
  position: fixed; inset-block-end: calc(96px + var(--fcsafe-b)); inset-inline: 16px;
  z-index: 95; margin: 0 auto; max-width: 420px;
  padding: 10px 14px; border-radius: 14px; font-size: 12.5px; font-weight: 600;
  background: color-mix(in srgb, var(--fctext) 92%, transparent); color: var(--fcsurface);
  box-shadow: 0 10px 30px rgba(0,0,0,.3); text-align: center;
}

/* ══════════════ دسکتاپ ══════════════ */
@media (min-width: 720px) {
  .fc-msgs, .fc-head, .fc-compose, .fc-alak, .fc-reply { max-width: 860px; margin-inline: auto; width: 100%; }
  .fc-msg { max-width: min(64%, 520px); }
  .fc-body { padding-inline: 16px; }
}

/* ══════════════ چاپ‌نشدنی ══════════════ */
@media print { .fc-head, .fc-compose, .fc-jump { display: none; } }

/* ══════════════ چرخاننده (اسپینر درون‌خط) ══════════════ */
.fc-spin { animation: fc-spin 1s linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fc-spin { animation-duration: 2.4s; } }