/* ============================================================
   البوسطا — التخطيط العام (نسخة نظيفة)
   ============================================================ */

/* ---------- الحاوية العامة ---------- */
.app {
  position: fixed;
  inset: 0;
  background-color: var(--color-bg-deep);
  overflow: hidden;
}

/* ============================================================
   التبويبات العلوية
   ============================================================ */
.top-tabs {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-tabs);
  padding: calc(var(--safe-top) + var(--space-md)) var(--space-lg) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 15, 0.95) 0%,
    rgba(10, 10, 15, 0.75) 60%,
    rgba(10, 10, 15, 0) 100%
  );
  pointer-events: none;
}

.top-tabs__tab {
  pointer-events: auto;
  position: relative;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-xs) 2px;
  transition: color var(--duration-base) var(--ease-out);
}

.top-tabs__tab.is-active {
  color: var(--color-text-primary);
}

.top-tabs__tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 50%;
  transform: translateX(50%);
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--color-accent-red);
}

/* ============================================================
   حاوية العرض الرأسي
   ============================================================ */
.feed {
  position: fixed;
  inset: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.feed::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   الشريحة الواحدة — معزولة تمامًا
   ============================================================ */
.slide {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-bg-deep);
}

/* ---------- الصورة المباشرة (تملأ الشاشة) ---------- */
.slide__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  display: block;
}

/* ---------- الطبقة المعالجة (Ambient) ---------- */
.slide__ambient {
  position: absolute;
  top: -15%;
  right: -15%;
  bottom: -15%;
  left: -15%;
  z-index: 0;
  filter: blur(40px) brightness(0.55);
  transform: scale(1.15);
}

.slide__ambient--tiktok {
  background: linear-gradient(135deg, #0F3B4A 0%, #1A1A2E 50%, #3A1B4A 100%);
}

.slide__ambient--instagram {
  background: linear-gradient(135deg, #4A2F1A 0%, #2E1A2E 50%, #1A1A2E 100%);
}

.slide__ambient--image {
  background: linear-gradient(135deg, #1B2A3A 0%, #0A0A0F 100%);
}

/* ---------- إطار التضمين (TikTok/Instagram) ---------- */
.slide__embed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: #111;
  box-shadow: 0 0 0 1px var(--color-border-soft), var(--shadow-lg);
}

.slide__embed--tiktok {
  aspect-ratio: 9 / 16;
  max-height: 82vh;
  max-height: 82dvh;
}

.slide__embed--instagram {
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  max-height: 70dvh;
  max-width: 380px;
}

.slide__embed-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide__embed--tiktok .slide__embed-content {
  background: linear-gradient(160deg, #16232E 0%, #0A0A0F 100%);
}

.slide__embed--instagram .slide__embed-content {
  background: linear-gradient(160deg, #2A1F2E 0%, #0A0A0F 100%);
}

.slide__embed-loading {
  position: absolute;
  inset: 0;
}

.slide__embed-error {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-deep);
}

/* ---------- التدرج الأسود أسفل الشاشة ---------- */
.slide__scrim {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 45%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 10, 15, 0.85) 0%,
    rgba(10, 10, 15, 0.45) 45%,
    rgba(10, 10, 15, 0) 100%
  );
}

/* ============================================================
   شارة "نموذج تصميم"
   ============================================================ */
.demo-badge {
  position: absolute;
  top: calc(var(--safe-top) + 68px);
  right: 50%;
  transform: translateX(50%);
  z-index: var(--z-overlay);
  background-color: var(--color-accent-gold-dim);
  color: var(--color-accent-gold);
  border: 1px solid var(--color-accent-gold-border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ============================================================
   أزرار التفاعل العمودية
   ============================================================ */
.actions {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 92px);
  right: calc(var(--safe-right) + var(--space-md));
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
}

/* ============================================================
   بطاقة بيانات المنشور
   ============================================================ */
.post-info {
  position: absolute;
  bottom: calc(var(--safe-bottom) + var(--space-xl));
  left: calc(var(--safe-left) + var(--space-lg));
  right: calc(var(--safe-right) + 76px);
  z-index: var(--z-overlay);
}

/* ============================================================
   مؤشر النقاط الجانبي
   ============================================================ */
.dot-indicator {
  position: absolute;
  left: calc(var(--safe-left) + var(--space-sm));
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ============================================================
   شريط التقدم الرقيق
   ============================================================ */
.progress-bar {
  position: absolute;
  bottom: calc(var(--safe-bottom) + var(--space-xs));
  right: calc(var(--safe-right) + var(--space-lg));
  left: calc(var(--safe-left) + var(--space-lg));
  height: 2px;
  background-color: rgba(255, 255, 255, 0.10);
  border-radius: 2px;
  z-index: var(--z-overlay);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  width: 0%;
  background-color: var(--color-accent-red);
  border-radius: 2px;
  transition: width 0.3s linear;
}

/* ============================================================
   شاشات الحالة
   ============================================================ */
.state {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl);
  gap: var(--space-md);
  color: var(--color-text-secondary);
}

#state-loading,
#state-empty,
#state-error {
  background-color: var(--color-bg-deep);
}

.state__icon {
  width: 56px;
  height: 56px;
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
  fill: none;
}

.state__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.state__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 300px;
  line-height: var(--line-height-base);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border-soft);
  border-top-color: var(--color-accent-red);
  border-radius: var(--radius-circle);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   تجاوب مع الشاشات الأعرض
   ============================================================ */
@media (min-width: 700px) {
  .post-info {
    left: 15%;
  }
  .actions {
    right: 15%;
  }
  .dot-indicator {
    left: 5%;
  }
}

/* ============================================================
   عناصر الواجهة الجديدة
   ============================================================ */

.slide__info {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 24px);
  left: calc(var(--safe-left) + 16px);
  right: calc(var(--safe-right) + 16px);
  z-index: 10;
  text-align: right;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.7);
}

.slide__info-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: #fff;
  line-height: 1.5;
  margin-bottom: 4px;
}

.slide__info-badge {
  display: inline-block;
  background-color: var(--color-accent-gold-dim);
  color: var(--color-accent-gold);
  border: 1px solid var(--color-accent-gold-border);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-right: 6px;
  vertical-align: middle;
  text-shadow: none;
}

.slide__info-desc {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}

.sound-btn {
  position: absolute;
  top: calc(var(--safe-top) + 72px);
  left: calc(var(--safe-left) + 16px);
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s ease, background 0.2s ease;
}

.sound-btn:active {
  transform: scale(0.9);
}

.sound-btn svg {
  width: 20px;
  height: 20px;
}

.sound-btn.is-muted .wave {
  opacity: 0.3;
}

.slide__error {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 12px;
  color: var(--color-text-secondary);
  background-color: rgba(10,10,15,0.9);
}

.slide__error svg {
  width: 56px;
  height: 56px;
  stroke: var(--color-text-muted);
}

.slide__error-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.slide__error-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  max-width: 300px;
  line-height: 1.6;
}

.slide__embed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.slide__embed--tiktok {
  aspect-ratio: 9 / 16;
  max-height: 82vh;
  max-height: 82dvh;
}

.slide__embed--instagram {
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  max-height: 70dvh;
  max-width: 380px;
}

.slide__embed--youtube {
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  max-height: 70dvh;
}

.slide__embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.slide__embed .tiktok-embed,
.slide__embed .instagram-media {
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
}