/* ═════════════════════════════════════════════════════════════════════════
 * 🎬 102 — تجربة الفيديو الموحدة (2026-06-12)
 * جوال + ديسكتوب + آيفون + أندرويد + متصفحات تلجرام الداخلية.
 *
 * المبدأ: لا نلمس مشغل Bunny نفسه ولا قيود الحماية — كل شيء على «غلاف»
 * الفيديو (#videoWrapper) وصف الأزرار تحته. أربعة أنظمة:
 *   §1 صف الأزرار تحت المشغل (أهداف لمس ≥44px، إخفاء زر السرعة بوضع Bunny)
 *   §2 ملء الشاشة الأصلي (:fullscreen) — ديسكتوب/أندرويد كروم
 *   §3 ملء الشاشة البديل (html.h-fs-fake) — تلجرام/آيفون، مع تدوير اصطناعي
 *   §4 المشغل المصغر CSS (h-mini-on) — نفس iframe بلا إعادة تحميل
 * التراجع الكامل: حذف سطر <link> لهذا الملف من index.html.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ─── §1 صف أزرار الفيديو تحت المشغل ─────────────────────────────────────── */
.vid-extra-controls {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.vid-extra-controls .h-btn {
  width: auto;
  padding: 9px 14px;
  font-size: 0.82rem;
  min-height: 44px; /* هدف لمس آمن (Apple HIG) */
}
/* وضع Bunny: زر السرعة لا يمكن أن يعمل (playerjs بلا setPlaybackRate) — يُخفى
   بدل أن يبقى زراً كاذباً؛ السرعة متاحة من ترس إعدادات مشغل Bunny نفسه */
.vid-extra-controls.bunny .vx-speed { display: none !important; }

/* ─── §2 ملء الشاشة الأصلي (Fullscreen API على الغلاف) ──────────────────── */
.video-wrapper:fullscreen {
  background: #000;
  width: 100%;
  height: 100%;
}
.video-wrapper:fullscreen .video-container {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.video-wrapper:-webkit-full-screen { background: #000; width: 100%; height: 100%; }
.video-wrapper:-webkit-full-screen .video-container {
  width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0;
}

/* شريط الخروج/التدوير العائم — يظهر داخل أي وضع ملء شاشة فقط */
#hFsBar {
  display: none;
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  inset-inline-end: calc(10px + env(safe-area-inset-right, 0px));
  z-index: 40;
  gap: 8px;
}
.video-wrapper:fullscreen #hFsBar,
.video-wrapper:-webkit-full-screen #hFsBar,
html.h-fs-fake .video-wrapper.h-fs-el #hFsBar { display: flex; }
#hFsBar button {
  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;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* زر التدوير الاصطناعي معنيٌّ بالمسار البديل فقط */
.video-wrapper:fullscreen #hFsRotateBtn,
.video-wrapper:-webkit-full-screen #hFsRotateBtn { display: none; }

/* ─── §3 ملء الشاشة البديل — CSS فقط (يعمل حيث تفشل الـAPI) ─────────────── */
/* 🛡️ جذر حرج: transform على #page-video (حركة pageIn — تتجمد بأول إطار في
   التبويبات الخلفية) + content-visibility:auto على .page يجعلان position:fixed
   يُحسب نسبةً للصفحة لا للشاشة ⇒ ملء الشاشة/المصغر ينكمشان. نحيّدهما في
   الوضعين فقط — صفر أثر على بقية حركات المنصة. */
html.h-fs-fake #page-video,
#page-video.h-mini-detached {
  transform: none !important;
  animation: none !important;
  filter: none !important;
  content-visibility: visible !important;
}
html.h-fs-fake,
html.h-fs-fake body { overflow: hidden !important; }
/* 🛡️ supportBanner أيضاً: ابن مباشر للـbody بـz:999 سطري — كان يطفو فوق ملء
   الشاشة البديل (غلاف z:100000 محبوس بسياق تكديس الصفحة z:1). !important
   المؤلف يغلب السطري غير المهم، والخروج نظيف بالحالتين. */
html.h-fs-fake .top-nav,
html.h-fs-fake .bottom-nav,
html.h-fs-fake .toast-container,
html.h-fs-fake #supportBanner { display: none !important; }
html.h-fs-fake .video-wrapper.h-fs-el {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000;
  margin: 0 !important;
  background: #000;
  border-radius: 0;
}
html.h-fs-fake .video-wrapper.h-fs-el .video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
/* التدوير الاصطناعي 90° للوضع الطولي: الحاوية تأخذ أبعاد الشاشة مقلوبة
   وتدور حول مركزها ⇒ فيديو 16:9 يملأ عرض الجهاز فعلياً بلا أي API */
html.h-fs-fake .video-wrapper.h-fs-el.h-fs-rotate .video-container {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
}
/* 🛡️ Safari iOS: vh = المنفذ الكبير بينما شرائط المتصفح لا تنكمش داخل
   h-fs-fake (overflow:hidden يمنع التمرير) ⇒ كان يُقص ~طرفا الفيديو وأطراف
   شريط تحكم Bunny. dvh/dvw يتتبعان المنفذ الديناميكي الفعلي (iOS 15.4+)،
   و100vh/100vw أعلاه تبقى احتياطاً متدهوراً للمحركات الأقدم. */
@supports (height: 100dvh) {
  html.h-fs-fake .video-wrapper.h-fs-el.h-fs-rotate .video-container {
    width: 100dvh;
    height: 100dvw;
  }
}

/* ─── §4 المشغل المصغر CSS — نفس العنصر، صفر إعادة تحميل ────────────────── */
/* صفحة الفيديو «المنفصلة»: تبقى مرسومة (التشغيل والتتبع مستمران) لكن كل
   محتواها مخفي إلا غلاف الفيديو المثبّت بزاوية الشاشة */
#page-video.h-mini-detached {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  /* 🛡️ h-upgrade يجعل كل ابن للـbody سياق تكديس z:1 ⇒ الـ4500 على الغلاف
     قيمة داخلية محبوسة، و7 صفحات تأتي بعد page-video بالـDOM كانت تدفن
     المصغر عند فتحها (طلب مادة/خدماتي!). 1500 = فوق كل الصفحات (z:1)
     وتحت المودالات (2000) والتوست (9999). position:relative من h-upgrade. */
  z-index: 1500;
}
#page-video.h-mini-detached > *:not(#videoWrapper) { display: none !important; }

.video-wrapper.h-mini-on {
  position: fixed;
  inset-inline-end: 12px;
  bottom: calc(var(--bottombar-height, 64px) + 14px + env(safe-area-inset-bottom, 0px));
  width: min(320px, 62vw);
  z-index: 4500;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}
.video-wrapper.h-mini-on .video-container { border-radius: 0; }
/* طبقات لا معنى لها داخل المصغر */
.video-wrapper.h-mini-on .vid-top-actions,
.video-wrapper.h-mini-on .vid-controls-overlay,
.video-wrapper.h-mini-on .vid-resume-prompt,
.video-wrapper.h-mini-on #hFsBar { display: none !important; }
/* شاشة النهاية تتقلص بحجم مقروء داخل المصغر */
.video-wrapper.h-mini-on .vid-end-content { padding: 8px; max-width: 95%; font-size: 0.72rem; }
.video-wrapper.h-mini-on .vid-end-check { font-size: 1.4rem; margin-bottom: 4px; }

/* شريط المصغر (عنوان + استعادة + إغلاق) — يُحقن مرة واحدة من video.js */
#hMiniBar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(10, 8, 22, 0.92);
  color: #fff;
  font-size: 0.78rem;
  touch-action: none; /* السحب بالإصبع بلا تمرير للصفحة */
  cursor: grab;
}
.video-wrapper.h-mini-on #hMiniBar { display: flex; }
#hMiniBar .h-mini-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
#hMiniBar button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── §5 لمس الجوال: إظهار أزرار الفيديو المباشر بالكلاس (لا hover) ──────── */
/* main.css يربط الظهور بـ:hover فقط — على اللمس video.js يبدّل show-controls */
@media (hover: none), (pointer: coarse) {
  .video-wrapper.show-controls .vid-top-actions { opacity: 1; }
}

/* ─── §6 امتداد كامل للعرض على الجوال (تجربة أوسع بلا تكبير) ────────────── */
@media (max-width: 640px) {
  #page-video .video-wrapper:not(.h-mini-on):not(.h-fs-el) {
    margin-inline: calc(50% - 50vw);
  }
  #page-video .video-wrapper:not(.h-mini-on):not(.h-fs-el) .video-container {
    border-radius: 0;
  }
}