/* =====================================================================
   🧵 [STORY-WEAVE 2026-07-18] طبقة 115 — الفيديو التفاعلي (الطالب)
   مستقلة بعد 114 (ترتيب المصدر يغلب) — لا لمس bundle-core (CRLF/G-16).
   قيود صلبة: بطاقات صلبة بلا أي ضبابية خلفية (طبقة 100 تقتلها — G-10)،
   حركة opacity/transform فقط 140–220ms، سلم z فوق #videoWrapper:
   stations 17 · banner 18 · donebadge 22 · pulse 24 · gate 25 · weave/tap 26
   · takeover 27 (الاحتفال 30 وhFsBar 40 وivFsBtn 40 فوق الجميع؛
   🚪 [wg1] لاقط اللمس ivFsCatch z:6 داخل .video-container — فوق الـiframes
   وتحت البوابة).
   ممنوع نجمة-شرطة داخل التعليقات (فخ CSS الموثق).
   ===================================================================== */

/* ── نبضة الانتقال: امتداد بصري للخيط — لا شاشة تحميل مقنّعة ── */
.iv-pulse {
  position: absolute; inset: 0; display: none; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 58%, rgba(168, 85, 247, 0.38), transparent 68%);
  opacity: 0;
}
.iv-pulse.on { display: block; animation: ivPulseGlow 0.9s ease-in-out infinite alternate; }
@keyframes ivPulseGlow { from { opacity: 0.3; } to { opacity: 0.85; } }

/* ── بوابة القرار (z:25 — بين شاشة النهاية 20 والاحتفال 30) ──
   🤍 [PEARL-THREAD M1] لوحة اللؤلؤ المغلقة: بطاقة بيضاء ناعمة بكتابة بنفسجية
   عميقة — موحّدة حرفياً عبر الثيمات الثلاثة (purple / light / معاينة الأدمن).
   التوكنات تُعرَّف على المضيفين الاثنين لأن fix7 يرفع البوابة إلى dialog على
   body. ممنوع مطلقاً أي var() ثيمي عام داخل قواعد البطاقة (ثيم light كان
   يجعل السؤال شبه غير مقروء ~1.1:1، وسماوي الأدمن كان يصبغ المعاينة). */
.iv-gate, dialog.iv-fs-dialog {
  --ivq-surface: #fdfcff;            /* أبيض ناعم — لا #fff ناصع فوق فيديو داكن */
  --ivq-ink: #4c1d95;                /* نص جارٍ — ≈10.9:1 على السطح */
  --ivq-accent: #7c3aed;             /* حدود التحديد/hover + حرف مختار */
  --ivq-accent-deep: #6d28d9;        /* عناوين وشريحة «سؤال» وحروف أ/ب */
  --ivq-line: rgba(124, 58, 237, .28);
  --ivq-fill: rgba(124, 58, 237, .06);
}
.iv-gate {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 2.5vw, 20px);
  background: rgba(10, 6, 18, 0.32);   /* 🩹 [FIX5] تعتيم خفيف جداً — الطالب يعيش بنفس الفيديو (كان 0.72 يبتلعه)؛ لا blur */
  animation: ivFadeIn 0.18s ease;
}
@keyframes ivFadeIn { from { opacity: 0; } to { opacity: 1; } }

.iv-card {
  /* 🤍 [PEARL M1] لؤلؤة فوق المشهد: سطح أبيض + فصل بظل ناعم (الاندماج الداكن القديم انتهى) */
  background: var(--ivq-surface);
  border: 1px solid var(--ivq-line);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(30, 10, 60, 0.35);
  width: min(520px, 92%);
  max-height: 100%;
  overflow-y: auto;                     /* scroll داخل البطاقة لا الصفحة (§9.1) */
  overscroll-behavior: contain;         /* 🚪 [wg1-M3] لا تمرير مطاطياً يتسرب للخلفية المقفولة بالتكبير */
  -webkit-overflow-scrolling: touch;
  padding: clamp(12px, 3vw, 20px);
  color: var(--ivq-ink);
  animation: ivCardIn 0.2s ease;
}
@keyframes ivCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.iv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.iv-chip {
  background: var(--ivq-fill); color: var(--ivq-accent-deep);
  font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.iv-hint { color: #7c5db5; font-size: 0.75rem; }
.iv-card-title { font-size: 1.05rem; font-weight: 800; color: var(--ivq-accent-deep); margin-bottom: 10px; }

.iv-q { font-size: 1rem; font-weight: 700; line-height: 1.7; outline: none; margin-bottom: 12px; }
.iv-b-text { margin: 2px 0; }
.iv-b-math { unicode-bidi: isolate; text-align: center; margin: 6px 0; overflow-x: auto; }
.iv-b-img { max-width: 100%; max-height: 26vh; border-radius: 10px; display: block; margin: 6px auto; }

/* الخيارات: شبكة عمودين للقصير على الشاشات الأعرض، عمود واحد على الضيق.
   🤍 [PEARL M2] options_layout: القواعد التكيفية مقيدة بـ:not() كي لا تدهس
   الاختيار الصريح للأدمن (iv-choices-v عمودي دائماً / iv-choices-h أفقي) —
   غياب المفتاح = auto = السلوك التكيفي القائم حرفياً. صفر هجرة (policy passthrough). */
.iv-choices { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
@media (min-width: 480px) { .iv-choices:not(.iv-choices-v):not(.iv-choices-h) { grid-template-columns: 1fr 1fr; } }
.iv-choices.iv-choices-v { grid-template-columns: 1fr; }
.iv-choices.iv-choices-h { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.iv-choice {
  display: flex; align-items: center; gap: 8px; text-align: right;
  background: rgba(124, 58, 237, 0.05);
  border: 1.5px solid rgba(124, 58, 237, 0.25);
  border-radius: 12px; padding: 12px; min-height: 44px;  /* لمس ≥ 44px */
  color: inherit; font-family: inherit; font-size: 0.92rem; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
}
.iv-choice:hover, .iv-choice:focus-visible { border-color: var(--ivq-accent); outline: none; }
.iv-choice.selected {
  border-color: var(--ivq-accent);
  background: rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
}
.iv-choice.wrong { border-color: rgba(239, 68, 68, 0.6); opacity: 0.6; }
.iv-choice.reveal { border-style: dashed; }
.iv-choice-blocks { flex: 1; min-width: 0; }
.iv-choice-blocks .iv-b-img { max-height: 14vh; }
/* 🤍 [PEARL M1-7] صور بخلفيات شفافة داكنة قد تنقلب على الأبيض — وسادة خفيفة */
.iv-card .iv-b-img { background: rgba(76, 29, 149, 0.06); border-radius: 8px; }

/* 🧵 [ONE-THREAD D-15] ترقيم الخيارات أ/ب/ج بشارة دائرية + حالة اختيار أوضح
   🤍 [PEARL M1] الحرف #c084fc القديم ≈2:1 على الأبيض — صار بنفسجياً عميقاً */
.iv-choice-letter {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(124, 58, 237, 0.08); color: var(--ivq-accent-deep);
  border: 1.5px solid rgba(124, 58, 237, 0.35); border-radius: 50%;
  font-size: 0.8rem; font-weight: 800; line-height: 1;
}
.iv-choice.selected .iv-choice-letter { background: var(--ivq-accent); color: #fff; border-color: var(--ivq-accent); }
.iv-choice.wrong .iv-choice-letter { background: rgba(239, 68, 68, 0.12); color: #b91c1c; border-color: rgba(239, 68, 68, 0.45); }


/* هوية الخيوط: لون + نمط حافة (المعنى لا يعتمد على اللون وحده — شكل الحافة يختلف) */
.iv-thread-0 { border-right: 4px solid #a855f7; }
.iv-thread-1 { border-right: 4px double #22d3ee; }
.iv-thread-2 { border-right: 4px dashed #f59e0b; }
.iv-thread-3 { border-right: 4px solid #34d399; } /* 🩹 [ONE-THREAD D-15] أزيل دهس dotted — توحيد أنماط الخيوط */
.iv-thread-4 { border-right: 4px double #f472b6; }
.iv-thread-5 { border-right: 4px dashed #c084fc; }
/* 🤍 [PEARL M1-9] على سطح البطاقة الأبيض: درجات أعمق تجتاز AA غير النصي (≥3:1)
   — تسري على الخيارات داخل البطاقة فقط؛ محطات النسيج الداكنة تبقى بألوانها */
.iv-card .iv-choice.iv-thread-0 { border-right-color: #7c3aed; }
.iv-card .iv-choice.iv-thread-1 { border-right-color: #0e7490; }
.iv-card .iv-choice.iv-thread-2 { border-right-color: #b45309; }
.iv-card .iv-choice.iv-thread-3 { border-right-color: #047857; }
.iv-card .iv-choice.iv-thread-4 { border-right-color: #be185d; }
.iv-card .iv-choice.iv-thread-5 { border-right-color: #6d28d9; }

.iv-feedback { display: none; border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; margin-bottom: 10px; }
.iv-feedback.show { display: block; animation: ivFadeIn 0.16s ease; }
/* 🤍 [PEARL M1] لون نص صريح — كانت ترث لون البطاقة (وستنكسر على الأبيض بلا هذا) */
.iv-feedback.good { background: rgba(52, 211, 153, 0.10); border: 1px solid rgba(52, 211, 153, 0.4); color: #166534; }
.iv-feedback.bad { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.35); color: #b91c1c; }
/* 🧵 [ONE-THREAD D-15] أيقونة التغذية عبر CSS — النص يبقى textContent نظيفاً */
.iv-feedback.good::before { content: '✓ '; font-weight: 900; color: #166534; }
.iv-feedback.bad::before { content: '✗ '; font-weight: 900; color: #b91c1c; }

.iv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.iv-actions { justify-content: space-between; align-items: center; }
.iv-actions .h-btn { width: auto; flex: 1; min-height: 44px; font-size: 0.88rem; }
.iv-rewatch { flex: 0 1 auto; }
/* 🎨 [ECHO-CANVAS ec2] تسليح زر المراجعة على بطاقة echo — نقرة أولى بوسائط غير مرسلة */
#ivGate.iv-gate .h-btn.iv-rewatch.iv-rw-armed { border-color: #b91c1c; color: #b91c1c; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }

/* 🤍 [PEARL M1] أزرار بطاقة السؤال معزولة عن --gradient/--hu-halo الثيمية —
   تسري تلقائياً بالحوار المرفوع (fix7) لأن #ivGate يُنقل بعقدته. الانتقاء
   #ivGate.iv-gate يتغلب على قاعدة المعاينة #videoWrapper .h-btn بالتخصيص. */
#ivGate.iv-gate .h-btn {
  background: linear-gradient(135deg, #5b21b6, #7c3aed); color: #fff;
  border: none;
}
#ivGate.iv-gate .h-btn.outline {
  color: #6d28d9; border: 1.5px solid #7c3aed; background: transparent;
}

.iv-shake { animation: ivShake 0.4s ease; }
@keyframes ivShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(5px); } 75% { transform: translateX(-5px); }
}

/* 🧵 [ONE-THREAD D-15] لمسة نجاح خفيفة بعد استئناف التشغيل — ✓ نبضية ≤700ms
   (z:24 كالنبضة؛ opacity/transform فقط؛ لا أي تأخير لplay المتزامن) */
.iv-success-tick {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: 900;
  color: #34d399; opacity: 0; text-shadow: 0 2px 14px rgba(10, 6, 18, 0.6);
}
.iv-success-tick.on { animation: ivTickPop 0.6s ease; }
@keyframes ivTickPop {
  0% { opacity: 0; transform: scale(0.6); }
  30% { opacity: 0.95; transform: scale(1.06); }
  70% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ── 💚 [VERDICT-GLOW] توهج الحكم — policy.fx_enabled لكل سؤال (quiz حصراً).
   ألوان literal كعائلة البطاقة (أخضر 52,211,153 / أحمر 239,68,68) — ممنوع
   var() ثيمي (سابقة اللؤلؤ). قاعدة iv-fx-bad تعلن الأنيميشنين (توهج+رجّة)
   لأن animation خاصية واحدة وتخصيصها الأعلى كان سيقتل ivShake القائمة ── */
.iv-card.iv-fx-good { animation: ivFxGood 0.9s ease; }
.iv-card.iv-fx-bad { animation: ivFxBad 0.9s ease, ivShake 0.4s ease; }
@keyframes ivFxGood {
  0% { box-shadow: 0 18px 60px rgba(30, 10, 60, 0.35); }
  30% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.55), 0 0 28px 8px rgba(52, 211, 153, 0.38), 0 18px 60px rgba(30, 10, 60, 0.35); }
  70% { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35), 0 0 18px 5px rgba(52, 211, 153, 0.22), 0 18px 60px rgba(30, 10, 60, 0.35); }
  100% { box-shadow: 0 18px 60px rgba(30, 10, 60, 0.35); }
}
@keyframes ivFxBad {
  0% { box-shadow: 0 18px 60px rgba(30, 10, 60, 0.35); }
  30% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.55), 0 0 28px 8px rgba(239, 68, 68, 0.38), 0 18px 60px rgba(30, 10, 60, 0.35); }
  70% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35), 0 0 18px 5px rgba(239, 68, 68, 0.22), 0 18px 60px rgba(30, 10, 60, 0.35); }
  100% { box-shadow: 0 18px 60px rgba(30, 10, 60, 0.35); }
}

/* 💚 [VERDICT-GLOW] ✗ منبثقة لوضع once مع خطأ — مرآة .iv-success-tick حرفياً (z:24) */
.iv-fail-tick {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: 900;
  color: #ef4444; opacity: 0; text-shadow: 0 2px 14px rgba(10, 6, 18, 0.6);
}
.iv-fail-tick.on { animation: ivTickPop 0.6s ease; }

/* 💚 [VERDICT-GLOW fx3 — أمر مالك] داخل ملء الشاشة الداخلي تُرقّى الطبقات الوامضة
   إلى popover بالطبقة العليا (فوق العنصر المكبَّر — المتأخر يعلو). القواعد هنا
   تدهس أنماط UA الافتراضية للpopover (inset:0 + margin:auto + fit-content)
   وتستعيد هندسة كل طبقة حرفياً. خارج التوسيع: السمة غائبة والقواعد خاملة */
.iv-success-tick[popover], .iv-fail-tick[popover] {
  position: fixed; inset: 0; margin: 0; border: 0; padding: 0;
  width: auto; height: auto; background: transparent; overflow: visible;
}
.iv-verdict-flash[popover] {
  position: fixed; top: auto; right: auto; left: 50%; bottom: 12%;
  margin: 0; width: auto; height: auto;
}

/* 💚 [VERDICT-GLOW fx2] عبارة الحكم المنبثقة المتوهجة بعد الاستئناف — الحكم المرئي
   الفعلي لمساري الإغلاق المتزامن (صواب / خطأ once). حبة لؤلؤية أسفل الوسط
   (الـ✓/✗ بالمنتصف — لا تصادم)، ألوان literal كعائلة البطاقة، بلا var() ثيمي */
.iv-verdict-flash {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  max-width: 86%; pointer-events: none; opacity: 0;
  background: #fdfcff; border-radius: 999px; padding: 10px 22px;
  font-size: clamp(0.92rem, 2.8vw, 1.12rem); font-weight: 800; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iv-verdict-flash.good { color: #166534; border: 2px solid rgba(52, 211, 153, 0.75); }
.iv-verdict-flash.bad { color: #b91c1c; border: 2px solid rgba(239, 68, 68, 0.75); }
.iv-verdict-flash.good.on { animation: ivVerdictGood 1.4s ease; }
.iv-verdict-flash.bad.on { animation: ivVerdictBad 1.4s ease; }
@keyframes ivVerdictGood {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.92); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
  16% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.02); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.45), 0 0 30px 10px rgba(52, 211, 153, 0.4); }
  30% { transform: translateX(-50%) translateY(0) scale(1); }
  78% { opacity: 1; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3), 0 0 18px 6px rgba(52, 211, 153, 0.22); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(1); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@keyframes ivVerdictBad {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.92); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  16% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.02); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.45), 0 0 30px 10px rgba(239, 68, 68, 0.4); }
  30% { transform: translateX(-50%) translateY(0) scale(1); }
  78% { opacity: 1; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3), 0 0 18px 6px rgba(239, 68, 68, 0.22); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ── 💚 [KNOW-CARD 2026-07-20] بطاقة المعرفة — policy.ack_text لكيان info حصراً.
   نفس عائلة توكنات --ivq-* (السطح أبيض لؤلؤي #fdfcff أساساً) وألوان literal
   فقط — ممنوع var() ثيمي عام (سابقة اللؤلؤ) وممنوع أي blur خلفي (G-10).
   animation خاصية واحدة: ivKnowIn تدهس ivCardIn قصداً (بديل لا إضافة) —
   iv-fx-good/iv-fx-bad/iv-shake لا تصيب بطاقات info إطلاقاً فلا تصادم.
   الشريط العلوي طبقة background على البطاقة ذاتها (لا ::before — البطاقة
   تتمرر داخلياً وbackground الحاوية ثابت على حدودها لا على محتواها) ── */
.iv-card--know {
  background:
    linear-gradient(90deg, #6d28d9, #a855f7 55%, #d8b4fe) top / 100% 4px no-repeat,
    linear-gradient(180deg, #fdfcff, #faf7ff 34%, #fdfcff);
  border-color: rgba(124, 58, 237, 0.34);
  box-shadow: 0 18px 60px rgba(30, 10, 60, 0.35), 0 0 26px 2px rgba(124, 58, 237, 0.12);
  animation: ivKnowIn 0.24s ease;
}
@keyframes ivKnowIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.iv-card--know .iv-chip {
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.14), rgba(168, 85, 247, 0.09));
  border: 1px solid rgba(124, 58, 237, 0.30);
  color: #5b21b6;
  letter-spacing: 0.2px;
}
/* نص المحتوى أكبر وأريح — قراءة لا اختبار */
.iv-card--know .iv-q { font-size: 1.06rem; font-weight: 600; line-height: 1.95; margin-bottom: 14px; }
/* زر التأكيد: عريض fullwidth بتدرج المنصة القائم (#ivGate.iv-gate .h-btn) +
   توهج hover خفيف بbox-shadow (بلا أي blur خلفي) */
.iv-card--know .iv-actions .iv-commit { flex: 1 1 100%; width: 100%; min-height: 48px; font-size: 0.95rem; }
#ivGate.iv-gate .iv-card--know .h-btn.iv-commit { transition: box-shadow 0.2s ease; }
#ivGate.iv-gate .iv-card--know .h-btn.iv-commit:hover,
#ivGate.iv-gate .iv-card--know .h-btn.iv-commit:focus-visible {
  box-shadow: 0 0 20px 4px rgba(124, 58, 237, 0.35);
}
@media (min-width: 768px) { .iv-card--know .iv-q { font-size: 1.1rem; } }
@media (max-width: 767px) { .iv-card--know .iv-q { font-size: 0.98rem; line-height: 1.85; margin-bottom: 10px; } }

/* عبارة التأكيد المنبثقة بعد الاستئناف — حلة بنفسجية محايدة (البطاقة ليست
   صح/خطأ)؛ تركب على طبقة ivVerdictFlash القائمة وtopFlash يرفعها فوق التوسيع */
.iv-verdict-flash.know { color: #5b21b6; border: 2px solid rgba(168, 85, 247, 0.72); }
.iv-verdict-flash.know.on { animation: ivVerdictKnow 1.4s ease; }
@keyframes ivVerdictKnow {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.92); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
  16% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.02); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.45), 0 0 30px 10px rgba(168, 85, 247, 0.4); }
  30% { transform: translateX(-50%) translateY(0) scale(1); }
  78% { opacity: 1; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3), 0 0 18px 6px rgba(168, 85, 247, 0.22); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(1); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

/* ── الجوال العمودي — 🩹 [ONE-THREAD FIX4] أُلغي توسيع الحاوية عند السؤال:
   الطالب يعيش داخل الفيديو نفسه (لا قفزة ولا خروج)؛ البطاقة تتمرر داخلياً
   ضمن حدود الفيديو كما هي (iv-card max-height:100% + overflow-y) ── */
@media (max-width: 767px) {
  .iv-gate { padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .iv-card { padding: 10px 12px; }
  .iv-card-head { margin-bottom: 6px; }
  .iv-q { font-size: 0.92rem; margin-bottom: 8px; }
  .iv-choices { gap: 6px; margin-bottom: 6px; }
  .iv-choices:not(.iv-choices-v):not(.iv-choices-h) { grid-template-columns: 1fr 1fr; }
  .iv-choice { padding: 8px 10px; font-size: 0.84rem; min-height: 44px; }
}
@media (max-width: 379px) {
  .iv-choices:not(.iv-choices-v):not(.iv-choices-h) { grid-template-columns: 1fr; }
  /* 🤍 [PEARL M2] حارس اللمس ≥44px: الأفقي القسري يعود عموداً على الأضيق */
  .iv-choices.iv-choices-h { grid-template-columns: 1fr; }
}

/* ── 🩹 [ONE-THREAD FIX7] حوار الطبقة العليا: البطاقة فوق ملء الشاشة الداخلي
   للمشغّل (dialog مودالي يعلو العنصر المكبَّر). شفاف تماماً — التعتيم 0.32
   من .iv-gate ذاتها المنقولة بداخله ── */
dialog.iv-fs-dialog {
  border: 0; padding: 0; margin: 0; background: transparent;
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  overflow: hidden;
}
dialog.iv-fs-dialog::backdrop { background: transparent; }

/* ── 🩹 [ONE-THREAD FIX5] صقل الآيباد والكمبيوتر (≥768px): بطاقة لا تغطي
   الفيديو — هوامش أوسع حولها وسقف ارتفاع يُبقي حوافه ظاهرة فوقها وتحتها ── */
@media (min-width: 768px) {
  .iv-gate { padding: clamp(20px, 4vw, 48px); }
  .iv-card { max-height: 86%; padding: 16px 22px; border-radius: 18px; }
  .iv-card-title { font-size: 1.1rem; }
  .iv-q { font-size: 1.02rem; }
}

/* ── شريط محطات الرحلة (لا نسبة زائفة) ── */
.iv-stations-bar {
  position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 10px;
  display: flex; align-items: center; gap: 4px; pointer-events: none;
  background: rgba(10, 6, 18, 0.55); border-radius: 999px; padding: 4px 10px;
}
.iv-st-label { color: #e9e4f5; font-size: 0.68rem; font-weight: 700; margin-left: 4px; }
.iv-st-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(192, 132, 252, 0.45); }
.iv-st-dot.cur { background: #a855f7; transform: scale(1.35); }  /* 🤍 [PEARL M1] لون صلب — لا سماوي الأدمن بالمعاينة */
.iv-sync { color: #f59e0b; font-size: 0.72rem; margin-right: 4px; }

/* ── البانر الصادق (التدهور A-11) ── */
.iv-banner {
  position: absolute; bottom: 8px; right: 8px; left: 8px; pointer-events: none;
  background: rgba(10, 6, 18, 0.82); border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbe8c8; border-radius: 10px; padding: 8px 12px; font-size: 0.78rem;
  text-align: center;
}

/* ── شارة ✓ المرور على سؤال مُجاب ──
   🚪 [wg1] left 12→60px: زر المكبر الأبوي احتل أعلى-اليسار — الشارة تومض بجواره */
.iv-donebadge {
  position: absolute; top: 12px; left: 60px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(52, 211, 153, 0.9); color: #08130d; font-weight: 900;
  border-radius: 50%; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; transform: scale(0.6);
}
.iv-donebadge.on { opacity: 1; transform: scale(1); }

/* ── زر «متابعة ▶» الصادق (WebView يحجب play خارج الإيماءة) ── */
.iv-tapplay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 6, 18, 0.45);
}
.iv-tap-btn { width: auto; min-width: 160px; min-height: 48px; font-size: 1rem; }

/* ── الاستيلاء على الجلسة (تبويبان) ── */
.iv-takeover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 6, 18, 0.85); padding: 16px;
}
.iv-takeover-card { text-align: center; }
.iv-takeover-card p { color: #9c92b5; font-size: 0.85rem; margin: 8px 0 14px; }  /* 🤍 [M1] صلب — صفر var() ثيمي */
.iv-takeover-card .iv-row { justify-content: center; }

/* ── نسيج رحلتك ── */
.iv-weave {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 6, 18, 0.88); padding: clamp(8px, 3vw, 24px);
}
.iv-weave-card { width: min(520px, 100%); }

/* 🤍 [PEARL M1-5] قرار صريح: «نسيج رحلتك» و«تابع هنا» شاشتا نظام لا سؤال —
   تبقيان داكنتين على سكريمهما 0.85/0.88 (بلا هذا الاستثناء كانتا ستبيضّان
   بصمت لأنهما تشاركان .iv-card). عناوينهما وأزرارهما بألوان صلبة مغلقة. */
.iv-weave-card, .iv-takeover-card {
  background: rgba(23, 16, 42, 0.95);
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  color: #efe9fb;
}
.iv-weave-card .iv-card-title, .iv-takeover-card .iv-card-title { color: #c084fc; }
.iv-stations { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 34vh; overflow-y: auto; }
.iv-station { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; }
.iv-station-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.iv-station.iv-thread-0 .iv-station-dot { background: #a855f7; }
.iv-station-mark { flex-shrink: 0; }
.iv-station-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-weave-score {
  background: rgba(168, 85, 247, 0.12); border-radius: 10px; padding: 8px 12px;
  font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; text-align: center;
}
.iv-weave-actions .h-btn { width: auto; flex: 1; }

/* ── 🚪 [WIDE-GATE wg1 2026-07-25] زر المكبر الأبوي الموثوق ──
   أعلى-يسار فيزيائياً — نفس بقعة hFsBar (inset-inline-end = يسار بRTL) فيتحقق
   تواصل بصري: لمسة الدخول ثم زر الخروج بنفس المكان؛ داخل أي تكبير يُخفى
   (iv-fs-hidden من المحرك) وhFsBar القائم يتولى الخروج. الحاوية لا تلتقط
   اللمس والزر وحده يلتقطه (النمط الإلزامي — وإلا تُبتلع لمسات المشغل).
   z:40 يُضخ سطرياً من ensureLayer (شريحة hFsBar). ألوان literal كأزرار hFsBar. */
.iv-fsbtn {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc(10px + env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.iv-fsbtn button {
  pointer-events: auto;
  min-width: 44px; min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.iv-fsbtn.iv-fs-hidden { display: none; }

/* لاقط اللمس فوق ركن زر Bunny الداخلي (ابن .video-container — يدور مع التدوير
   الاصطناعي فيبقى ملتصقاً بالزر). أجهزة اللمس فقط — الديسكتوب يبقى زر Bunny
   حياً بمسار FIX7 dialog. شفاف تماماً: أيقونة Bunny المرئية تحته هي «الزر»
   الذي يشتغل الآن بلمسة واحدة. 46×46 يغطي زر Plyr fullscreen بالهامشين
   المقاسين حياً (5px ضيق / 10px عريض) دون play أو settings. */
.iv-fscatch {
  position: absolute;
  bottom: 0; right: 0;
  width: 46px; height: 46px;
  z-index: 6;                 /* فوق الـiframes وتحت البوابة 25 — بطاقة مفتوحة تغطيه */
  display: none;
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: none) and (pointer: coarse) {
  .iv-fscatch { display: block; }
}

/* البوابة داخل أي تكبير: safe-area كاملة (نوتش آيفون بالوضعين) —
   الزائف h-fs-fake والأصلي على الغلاف معاً. الانتقاء بالمعرّف لا بكلاس
   .video-wrapper عمداً: غلاف معاينة الأدمن يحمل المعرّف فقط (تكافؤ المرآة).
   🚨 ثلاث قواعد منفصلة عمداً لا قائمة واحدة: قوائم المحددات غير متسامحة —
   شبه واحد مجهول (:fullscreen على iOS ≤16.3 حيث الجمهور الفعلي للزائف)
   كان سيُسقط القاعدة كلها (اصطياد المراجعة العدائية wg1) */
html.h-fs-fake .iv-gate {
  padding: calc(10px + env(safe-area-inset-top, 0px))
           calc(10px + env(safe-area-inset-right, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(10px + env(safe-area-inset-left, 0px));
}
#videoWrapper:fullscreen .iv-gate {
  padding: calc(10px + env(safe-area-inset-top, 0px))
           calc(10px + env(safe-area-inset-right, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(10px + env(safe-area-inset-left, 0px));
}
#videoWrapper:-webkit-full-screen .iv-gate {
  padding: calc(10px + env(safe-area-inset-top, 0px))
           calc(10px + env(safe-area-inset-right, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(10px + env(safe-area-inset-left, 0px));
}

/* 🚪 [wg1 — اصطياد المراجعة العدائية] داخل الزائف يظهر hFsBar بزرّيه أعلى-يسار
   (inline-end بالRTL) فيدفن الشارة (left:60) تحته — تنزل تحت الشريط */
html.h-fs-fake .video-wrapper.h-fs-el .iv-donebadge,
html.h-fs-fake #videoWrapper.h-fs-el .iv-donebadge {
  top: calc(64px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
}

/* ── الوضع المصغر يخفي كل طبقات IV (نمط 102 القائم) ── */
.video-wrapper.h-mini-on .iv-gate,
.video-wrapper.h-mini-on .iv-stations-bar,
.video-wrapper.h-mini-on .iv-weave,
.video-wrapper.h-mini-on .iv-banner,
.video-wrapper.h-mini-on .iv-tapplay,
.video-wrapper.h-mini-on .iv-takeover,
.video-wrapper.h-mini-on .iv-pulse,
.video-wrapper.h-mini-on .iv-success-tick,
.video-wrapper.h-mini-on .iv-fail-tick,
.video-wrapper.h-mini-on .iv-verdict-flash,
.video-wrapper.h-mini-on .iv-fsbtn,
.video-wrapper.h-mini-on .iv-fscatch,
.video-wrapper.h-mini-on .iv-donebadge { display: none !important; }

/* ── iframe الاحتياطي الخفي (deck) ── */
.iv-standby { opacity: 0 !important; pointer-events: none !important; }

/* 🎞️ [ONE-REEL or1] التلاشي المتقاطع عند الكشف — opacity فقط (عقد الحركة G-10).
   يُضاف للجديد لحظة الكشف (بعد إزالة iv-standby) فيصعد 0→1 فوق القديم الباقي
   تحته حتى اكتمال التلاشي ثم يُزال القديم (بترتيب «أوقف ثم أزل» M2-2) */
.iv-xfade { transition: opacity 0.18s linear; }

/* ── perf-lite وreduced-motion: بطاقات فورية بلا أنيميشن (النمط المنصّي) ── */
/* 🎞️ [ONE-REEL or1] تحت perf-lite: تبديل فوري بلا تلاشٍ (المحرك يبقى صحيحاً —
   مؤقت نهاية التلاشي يعمل سواء جرى الانتقال البصري أو قفز) */
html.perf-lite .iv-xfade { transition: none; }
html.perf-lite .iv-pulse.on { animation: none; opacity: 0.6; }
html.perf-lite .iv-card, html.perf-lite .iv-gate { animation: none; }
html.perf-lite .iv-success-tick.on { animation: none; opacity: 0; }
html.perf-lite .iv-fail-tick.on { animation: none; opacity: 0; }
/* 💚 [fx2] عبارة الحكم تحت perf-lite: ظهور ثابت بلا نبض (لا إخفاء — هي الحكم
   المرئي الوحيد بمسار الإغلاق المتزامن) ثم يزيلها مؤقت المحرك 1.5ث.
   good/bad بالانتقاء إلزامية: قاعدة الأنيميشن (0-3-0) تغلب أي انتقاء أدنى */
html.perf-lite .iv-verdict-flash.good.on,
html.perf-lite .iv-verdict-flash.bad.on { animation: none; opacity: 1; }
/* 💚 [KNOW-CARD] عبارة التأكيد وبطاقة المعرفة تحت perf-lite: بلا نبض — قواعد
   صريحة 0-2-0/0-3-1 كي لا يعلوها إعلان القسم الجديد (0-1-0/0-3-0) بترتيب المصدر */
html.perf-lite .iv-verdict-flash.know.on { animation: none; opacity: 1; }
html.perf-lite .iv-card--know { animation: none; }
/* 💚 [VERDICT-GLOW] بلا نبض تحت perf-lite/reduced-motion — توهج ثابت خفيف فقط
   (ظل الارتفاع الأصلي محفوظ داخل القيمة كي لا يُفقد بالدهس) */
html.perf-lite .iv-card.iv-fx-good { animation: none; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.4), 0 18px 60px rgba(30, 10, 60, 0.35); }
html.perf-lite .iv-card.iv-fx-bad { animation: none; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4), 0 18px 60px rgba(30, 10, 60, 0.35); }
@media (prefers-reduced-motion: reduce) {
  .iv-xfade { transition: none; }   /* 🎞️ [ONE-REEL or1] تبديل فوري */
  .iv-pulse.on { animation: none; opacity: 0.6; }
  .iv-card, .iv-gate, .iv-feedback.show { animation: none; }
  .iv-shake { animation: none; }
  .iv-success-tick.on { animation: none; opacity: 0; }
  .iv-fail-tick.on { animation: none; opacity: 0; }
  .iv-verdict-flash.good.on, .iv-verdict-flash.bad.on { animation: none; opacity: 1; }
  .iv-card.iv-fx-good { animation: none; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.4), 0 18px 60px rgba(30, 10, 60, 0.35); }
  .iv-card.iv-fx-bad { animation: none; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4), 0 18px 60px rgba(30, 10, 60, 0.35); }
  .iv-choice { transition: none; }
  /* 💚 [KNOW-CARD] قواعد صريحة إلزامية: تعميم .iv-card هنا (0-1-0) ينهزم أمام
     إعلان القسم الجديد المتأخر بترتيب المصدر — الدهس الصريح وحده يضمن السكون */
  .iv-card--know { animation: none; }
  .iv-verdict-flash.know.on { animation: none; opacity: 1; }
  #ivGate.iv-gate .iv-card--know .h-btn.iv-commit { transition: none; }
}

/* ── 🎨 [ECHO-CANVAS ec1 2026-07-29] لوحة الصدى — الإجابة المفتوحة ──
   البطاقة ابنة #ivGate (توكنات --ivq-* تسري على المضيفين الاثنين — fix7).
   كيبورد iOS: kbSync يكتب --iv-kb على #ivGate فتنضغط البطاقة فوق الكيبورد
   وتتمرر داخلياً (سلوك max-height القائم). حركة opacity فقط بلا blur.
   ممنوع نجمة-شرطة داخل التعليقات (فخ CSS الموثق). */
/* 🎨 [ECHO-CANVAS ec2] استعادة ONE-THREAD FIX4: هذا السطر متأخر بترتيب المصدر وبنفس
   التخصيص فكان يدهس قاعدة الجوال (padding-bottom بسطر 303) ويُسقط الحافة الآمنة عن
   بطاقة الـcue خارج التكبير على الآيفون — env تُجمع مع حد الكيبورد لا بدله */
.iv-gate { padding-bottom: calc(clamp(8px, 2.5vw, 20px) + env(safe-area-inset-bottom, 0px) + var(--iv-kb, 0px)); }
/* داخل التكبير: قواعد padding الأعلى تخصيصاً (safe-area) كانت ستدهس --iv-kb —
   ثلاث قواعد منفصلة عمداً لا قائمة (قوائم :fullscreen تُسقط على iOS ≤16.3) */
html.h-fs-fake .iv-gate { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--iv-kb, 0px)); }
#videoWrapper:fullscreen .iv-gate { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--iv-kb, 0px)); }
#videoWrapper:-webkit-full-screen .iv-gate { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--iv-kb, 0px)); }

/* حالة التوسع الوحيدة: المتاح المرئي أقل من 220px (كيبورد أفقي/جهاز قصير) —
   توسع داخل الحاوية فقط، يزول بزوال الشرط. لا خروج برمجياً من الزائف أبداً. */
.iv-gate.iv-gate--kbfull { align-items: stretch; background: rgba(10, 6, 18, 0.65); }
.iv-gate.iv-gate--kbfull .iv-card { width: 100%; height: 100%; max-height: 100%; border-radius: 10px; }

.iv-resp { display: block; }
.iv-echo-sec { margin: 8px 0; }
.iv-echo-attempt {
  display: inline-block;
  background: var(--ivq-fill); color: var(--ivq-accent-deep);
  font-size: 0.72rem; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  margin-bottom: 4px;
}
.iv-echo-text {
  width: 100%; min-height: 74px; resize: vertical;
  border: 1.5px solid var(--ivq-line); border-radius: 12px;
  padding: 10px 12px; font-family: inherit; font-size: 0.95rem; line-height: 1.7;
  color: var(--ivq-ink); background: #ffffff;
}
.iv-echo-text:focus { border-color: var(--ivq-accent); outline: none; }
.iv-echo-text::placeholder { color: #a78bda; }
.iv-echo-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; gap: 8px; }
.iv-echo-count { color: #7c5db5; font-size: 0.72rem; }
.iv-echo-draft { color: #059669; font-size: 0.72rem; font-weight: 700; }

/* شريحة الصوت: زر تسجيل كبير 48px — لمس مريح داخل الفيديو */
.iv-echo-recbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px;
  background: rgba(124, 58, 237, 0.05);
  border: 1.5px dashed var(--ivq-line); border-radius: 12px;
  color: var(--ivq-accent-deep); font-family: inherit; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.iv-echo-recbtn:hover { border-color: var(--ivq-accent); }
.iv-echo-recbtn:focus-visible { border-color: var(--ivq-accent); outline: none; }
/* 🧠 [RECALL-DECK rd1 M3] اضغط-واستمر: الإيماءة تملك اللمس كلياً (لا سكرول/
   تكبير يقطعها) + لا قائمة نسخ iOS بالضغط المطوّل + لا تحديد نص */
.iv-echo-recbtn {
  /* pan-y لا none: الزر بعرض كامل داخل بطاقة قابلة للتمرير، وtouch-action:none
     كان يحوّله لمنطقة موات تمنع تمرير البطاقة كلها. مع pan-y يمرّ السكرول
     العمودي ويصل pointercancel فيوقف أي تسجيل بدأ (release يعالجه). */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* حلقة نبض حية حول المايك أثناء التسجيل — animation خاصية واحدة (درس fx1) */
.iv-echo-recbtn--live {
  border-style: solid; border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.05);
  color: #b91c1c;
  animation: ivEchoHoldPulse 1.2s ease-in-out infinite;
}
@keyframes ivEchoHoldPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
  50%      { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0.22); }
}
.iv-echo-recleft { flex: 0 0 auto; color: #b91c1c; font-size: 0.72rem; font-weight: 700; }
.iv-echo-reclimit { color: #7c5db5; font-size: 0.72rem; font-weight: 400; }
.iv-echo-recrow {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid rgba(239, 68, 68, 0.45); border-radius: 12px;
  padding: 8px 12px; min-height: 48px;
}
.iv-echo-recdot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ef4444;
  animation: ivEchoRecPulse 0.9s ease-in-out infinite alternate;
}
@keyframes ivEchoRecPulse { from { opacity: 0.25; } to { opacity: 1; } }
.iv-echo-rectime { flex: 1; color: var(--ivq-ink); font-size: 0.88rem; font-weight: 700; }
.iv-echo-recstop { flex: 0 0 auto; min-height: 40px; }
.iv-echo-audprev audio { width: 100%; min-height: 40px; }
.iv-echo-linkbtn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; padding: 4px 6px;
  color: #b91c1c; font-family: inherit; font-size: 0.78rem; font-weight: 700;
  cursor: pointer;
}

/* شريحة الصورة: زرا التقاط/معرض فوق مدخلين خفيين + مصغّرات 96px */
.iv-echo-imgbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.iv-echo-imgbtn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px;
  background: rgba(124, 58, 237, 0.05);
  border: 1.5px dashed var(--ivq-line); border-radius: 12px;
  color: var(--ivq-accent-deep); font-family: inherit; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.iv-echo-imgbtn:hover { border-color: var(--ivq-accent); }
.iv-echo-imgbtn:focus-visible { border-color: var(--ivq-accent); outline: none; }
.iv-echo-thumb {
  position: relative; display: inline-block;
  width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--ivq-line); margin: 0 0 6px 6px;
}
.iv-echo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-echo-thumbx {
  position: absolute; top: 4px; left: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(10, 6, 18, 0.72); color: #fecaca; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.iv-echo-file {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; clip: rect(0 0 0 0);
}
.iv-echo-actions { margin-top: 10px; }
.iv-echo-send { flex: 2; }
.iv-echo-skip { flex: 1; }
.iv-echo-guide { min-height: 1.1em; margin-top: 4px; }

/* 🧠 [RECALL-DECK rd1 M3] دهس نبض «اضغط واستمر» — **بعد** تعريف القاعدة أعلاه
   حصراً: الترتيب المعكوس (الدهس قبل التعريف) يجعل القاعدة ميتة بنفس الخصوصية.
   نفس عرف KNOW-CARD الموثق بأعلى الملف. */
@media (prefers-reduced-motion: reduce) {
  .iv-echo-recbtn--live { animation: none; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
}
html.perf-lite .iv-echo-recbtn--live { animation: none; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }