/* ════════════════════════════════════════════════════════════════════════════
 * 🟣 [SPEED-RX 2026-07-11] الطبقة 111 — أنماط طبقة «صراحة الشبكة» (net-monitor)
 * ────────────────────────────────────────────────────────────────────────────
 * عناصر net-monitor.js فقط: شريط offline العلوي، شارة «شبكة بطيئة» الصامتة،
 * التوست الثابت بزر إعادة المحاولة، تلميح المشغل. RTL أصلاً (الصفحة rtl).
 * تباين الوضع الأبيض بروح طبقة 109 (نص داكن على أبيض). transform/opacity فقط
 * للحركة (لا layout). 🔴 للإزالة: احذف سطر <link> + الملف + سطر net-monitor.js.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── شريط انقطاع الاتصال (ثابت أسفل الشريط العلوي — لا يغطي أزرار التنقل) ── */
#srxNetBar {
  position: fixed;
  top: var(--navbar-height, 60px);
  right: 0; left: 0;
  z-index: 9998;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px;
  font-size: 0.86rem; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #7f1d1d, #b91c1c);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  transform: translateY(-120%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}
#srxNetBar.srx-on { transform: translateY(0); opacity: 1; }
:root[data-theme="light"] #srxNetBar { background: linear-gradient(135deg, #dc2626, #b91c1c); }

/* ── شارة «شبكة بطيئة» الصامتة (زاوية سفلية، فوق الشريط السفلي) ── */
#srxNetChip {
  position: fixed;
  bottom: calc(var(--bottombar-height, 65px) + 14px);
  inset-inline-start: 12px;
  z-index: 9997;
  padding: 4px 10px;
  font-size: 0.72rem; font-weight: 600;
  color: #fbbf24;
  background: rgba(13, 17, 28, 0.92);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#srxNetChip.srx-on { opacity: 1; transform: translateY(0); }
:root[data-theme="light"] #srxNetChip { color: #92400e; background: rgba(255, 251, 235, 0.97); border-color: rgba(217, 119, 6, 0.45); }

/* ── التوست الثابت بزر «إعادة المحاولة» (يحترم إزاحة الشريط السفلي كطبقة 100) ── */
#srxNetToast {
  position: fixed;
  bottom: calc(var(--bottombar-height, 65px) + 14px);
  right: 16px; left: 16px;
  z-index: 9999;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 560px; margin: 0 auto;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #f3e9ff;
  background: rgba(18, 12, 38, 0.97);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--radius, 14px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] #srxNetToast {
  color: #1f2937;
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.22);
}
/* 🪽 [SILK-GLIDE 2026-07-17 T] أزيل سطر alula (اجتثاث ثيم العلا) */

.srx-nt-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border: none; border-radius: 10px;
  cursor: pointer;
  transition: transform 0.06s ease, opacity 0.15s ease;
}
.srx-nt-btn:active { transform: scale(0.97); }
/* 🪽 [SILK-GLIDE 2026-07-17 T] أزيل سطر alula (اجتثاث ثيم العلا) */

/* ── تلميح المشغل (فوق الفيديو — لا يحجب أزرار Bunny السفلية) ── */
#srxVidHint {
  position: absolute;
  top: 10px; right: 10px; left: 10px;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  font-size: 0.85rem; font-weight: 600;
  color: #fff;
  background: rgba(10, 8, 24, 0.9);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  pointer-events: auto;
}
#srxVidHint .srx-vh-txt { flex: 1; }