/* ================================================================
   صفحهٔ پخش زنده — استایل تکمیلی
   ----------------------------------------------------------------
   سه دسته:

   ۱. اجزایی که Tailwind کلاسی برایشان ندارد: نقطهٔ تپندهٔ «زنده»،
      تب‌های ستون پرسش، کادر هانی‌پات، حالت فقط صوت.

   ۲. کلاس‌هایی که جاوااسکریپت هنگام اجرا می‌سازد — Tailwind با JIT
      **حتی با بیلد مجدد هم** آن‌ها را پیدا نمی‌کند.

   ۳. ابزارهایی که در بیلد فعلی app.css ساخته نشده‌اند.

   هیچ رنگ خامی نوشته نشده؛ همه از توکن‌های قالب می‌آیند.
   ================================================================ */

/* ================================================================
   نشان «زنده»
   ----------------------------------------------------------------
   دو حالت دارد چون روی دو زمینهٔ متفاوت می‌نشیند: روی نشان قرمز
   باید سفید باشد، روی قاب تیرهٔ پخش‌کننده قرمز.

   تعریف پایه با همان مقدارهای `schedule.css` بستهٔ تقویم یکی است،
   پس اگر روزی هر دو فایل در یک صفحه بار شدند تداخلی پیش نمی‌آید.
   ================================================================ */
.jj-live-dot,
.jj-live-dot-light {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 9999px;
  animation: jj-live-pulse 1.8s infinite;
}

.jj-live-dot {
  background-color: rgb(var(--c-err));
  box-shadow: 0 0 0 0 rgb(var(--c-err) / .55);
}

.jj-live-dot-light {
  background-color: rgb(var(--c-surface));
  box-shadow: 0 0 0 0 rgb(var(--c-surface) / .6);
}

@keyframes jj-live-pulse {
  70%  { box-shadow: 0 0 0 .5rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .jj-live-dot,
  .jj-live-dot-light {
    animation: none;
  }
}

/* ================================================================
   پخش‌کننده
   ================================================================ */
.jj-live-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.jj-live-player .jj-live-cover {
  cursor: pointer;
}

/*
 * دکمهٔ شروع پخش.
 *
 * `bg-primary/70` طرح UI در بیلد فعلی ساخته نشده، و به‌جای تکیه بر
 * یک واریانت شفافیت که ممکن است نباشد، اینجا صریح نوشته شده.
 */
.jj-live-start {
  background-color: rgb(var(--c-primary) / .72);
  backdrop-filter: blur(6px);
}

.jj-live-start:hover {
  background-color: rgb(var(--c-primary) / .88);
}

/*
 * فقط صوت: قاب تصویر جمع می‌شود ولی عنصر `<video>` در DOM می‌ماند
 * و صدا ادامه پیدا می‌کند. `display:none` صدا را هم قطع می‌کرد.
 */
.jj-live-audio-only .jj-live-video {
  opacity: 0;
  pointer-events: none;
}

.jj-live-audio-only .aspect-video {
  background-color: rgb(var(--c-ink) / .92);
}

/* ================================================================
   ستون پرسش
   ================================================================ */
.jj-live-ask {
  max-height: min(78vh, 46rem);
}

@media (max-width: 1023px) {
  .jj-live-ask {
    max-height: none;
  }

  .jj-live-scroll {
    max-height: 26rem;
  }
}

.jj-live-tab {
  background-color: rgb(var(--c-ink-3) / .10);
  color: rgb(var(--c-ink-2));
  transition: background-color .2s, color .2s;
}

.jj-live-tab:hover {
  background-color: rgb(var(--c-ink-3) / .18);
}

.jj-live-tab-on,
.jj-live-tab-on:hover {
  background-color: rgb(var(--c-primary));
  color: rgb(var(--c-on-primary));
}

/*
 * نوار پیمایش باریک. طرح UI کلاس `custom-scroll` داشت که در بیلد
 * وجود ندارد.
 */
.jj-live-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--c-ink-3) / .35) transparent;
  overscroll-behavior: contain;
}

.jj-live-scroll::-webkit-scrollbar {
  width: 6px;
}

.jj-live-scroll::-webkit-scrollbar-thumb {
  background-color: rgb(var(--c-ink-3) / .35);
  border-radius: 9999px;
}

/* ================================================================
   فرم
   ----------------------------------------------------------------
   کادر هانی‌پات باید برای ربات در DOM باشد ولی برای انسان — و برای
   صفحه‌خوان — نباشد. پس نه `display:none` (که بعضی ربات‌ها
   تشخیص می‌دهند) و نه دیده‌شدن.
   ================================================================ */
.jj-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.jj-live-scope textarea,
.jj-live-scope input[type="text"] {
  font-family: inherit;
}

.jj-live-scope textarea:focus,
.jj-live-scope input[type="text"]:focus {
  outline: 2px solid rgb(var(--c-primary) / .35);
  outline-offset: 1px;
  border-color: rgb(var(--c-primary));
}

.jj-live-scope button:disabled {
  opacity: .55;
  cursor: wait;
}

/* ================================================================
   اعداد
   ================================================================ */
.jj-live-scope .jj-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ================================================================
   محتوای ویرایشگر برگه
   ================================================================ */
.jj-live-body > * + * {
  margin-top: 1em;
}

.jj-live-body p {
  line-height: 2;
  color: rgb(var(--c-ink-2));
}

.jj-live-body a {
  color: rgb(var(--c-primary));
  text-decoration: underline;
}

/* ================================================================
   ابزارهای غایب از بیلد فعلی
   ----------------------------------------------------------------
   هر کدام با ابزار بررسی کلاس تأیید شد که در app.css نیست.
   ================================================================ */
.jj-live-scope .leading-loose { line-height: 2; }

/* ================================================================
   چاپ
   ----------------------------------------------------------------
   کسی که این صفحه را چاپ می‌کند متن فراز و یادداشتش را می‌خواهد،
   نه قاب ویدیو و ستون پرسش.
   ================================================================ */
@media print {
  .jj-live-scope .jj-live-player,
  .jj-live-scope .jj-live-ask,
  .jj-live-scope aside {
    display: none;
  }

  .jj-live-scope textarea {
    border: 1px solid rgb(var(--c-ink-3) / .4);
    height: auto;
    min-height: 8rem;
  }
}