:root{--primary:#EE1D52;--primary2:#EE1D52;--bg:#fafafa;--card:#ffffff;--card-rgb:255,255,255;--text:#262626;--text2:#8e8e8e;--text3:#c7c7c7;--border:#dbdbdb;--input-bg:#f0f2f5;--shadow:0 1px 3px rgba(0,0,0,.1);--bottom-bar:60px;--top-bar:56px;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}[data-theme="dark"]{--bg:#000;--card:#1c1c1e;--card-rgb:28,28,30;--text:#f5f5f5;--text2:#8e8e8e;--text3:#3a3a3c;--border:#2c2c2e;--input-bg:#2c2c2e;--primary:#ffffff}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{height:100%;font-family:'Cairo','Inter',sans-serif;background:var(--bg);color:var(--text);overflow:hidden}.page{display:flex;visibility:hidden;opacity:0;pointer-events:none;position:fixed;inset:0;overflow:hidden;will-change:opacity;transition:opacity 0.12s ease}.page.active{visibility:visible;opacity:1;pointer-events:auto;display:flex;flex-direction:column}::-webkit-scrollbar{width:0;height:0}#loadingScreen{display:flex;position:fixed;inset:0;background:#000;z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:16px}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.top-bar{position:fixed;top:0;left:0;right:0;height:calc(var(--top-bar) + var(--sat));background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:var(--sat) 16px 0;z-index:100}.top-logo{font-family:'Pacifico',cursive;font-size:15px;color:#2AABEE;position:absolute;left:50%;transform:translateX(-50%)}.top-icons{display:flex;gap:4px}.icon-btn{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}.icon-btn:active{background:var(--input-bg)}.icon-btn svg{width:24px;height:24px}.bottom-bar{position:fixed;bottom:0;left:0;right:0;height:calc(var(--bottom-bar) + var(--sab));background:var(--card);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-start;padding-bottom:var(--sab);padding-left:8px;z-index:200}.bottom-bar-logo{display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;height:calc(var(--bottom-bar));font-family:'Dancing Script','Pacifico',cursive;font-size:28px;font-weight:900;color:#EE1D52;-webkit-text-fill-color:#EE1D52;background:none;pointer-events:none;letter-spacing:-0.5px}.nav-btn{flex:1;height:calc(var(--bottom-bar));display:flex;flex-direction:column;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text2);cursor:pointer;transition:color .2s}.nav-btn.active{color:#EE1D52}.nav-btn svg{width:26px;height:26px}[data-theme="dark"] .nav-btn.active{color:#ffffff !important}.nav-btn.center-btn{flex:1;position:relative;top:0;background:transparent;border-radius:0;width:auto;height:100%;box-shadow:none;color:var(--text2);transition:none}.nav-btn.center-btn:active{transform:none;box-shadow:none}.nav-btn.center-btn svg{width:26px;height:26px}.logo-icon{width:72px;height:72px;background:linear-gradient(135deg,#2B47CC,#2B47CC);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 20px rgba(86,42,232,.4)}.logo-icon svg{width:36px;height:36px}.logo-text{font-family:'Pacifico',cursive;font-size:32px;background:linear-gradient(135deg,#2B47CC,#2B47CC);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.toast{position:fixed;bottom:calc(var(--bottom-bar) + var(--sab) + 12px);left:50%;transform:translateX(-50%);background:rgba(20,20,20,.9);color:#fff;padding:10px 22px;border-radius:20px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s;white-space:nowrap;z-index:999;backdrop-filter:blur(8px)}.toast.show{opacity:1}.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}.drawer-overlay.open{opacity:1;pointer-events:all}.drawer{position:fixed;top:0;left:-300px;bottom:0;width:300px;background:var(--card);z-index:201;transition:left .3s ease;box-shadow:4px 0 24px rgba(0,0,0,.18);display:flex;flex-direction:column}.drawer.open{left:0}.drawer-head{display:flex;align-items:center;gap:12px;padding:calc(48px + var(--sat)) 20px 20px;background:linear-gradient(135deg,#2B47CC,#2B47CC)}.drawer-ava{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.25);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drawer-ava img{width:100%;height:100%;object-fit:cover}.drawer-name{font-weight:800;color:white;font-size:16px}.drawer-user{font-size:13px;color:rgba(255,255,255,.8);margin-top:2px}.drawer-menu{padding:12px;flex:1}.drawer-menu button{width:100%;padding:14px 16px;text-align:left;border:none;background:transparent;color:var(--text);font-size:15px;font-family:'Inter',sans-serif;font-weight:600;cursor:pointer;border-radius:10px;transition:background .2s;display:flex;align-items:center;gap:12px}.drawer-menu button:active{background:var(--input-bg)}.drawer-divider{height:1px;background:var(--border);margin:8px 16px}.btn-primary{width:100%;padding:15px;border-radius:12px;border:none;background:#EE1D52;color:white;font-size:16px;font-weight:800;font-family:'Inter',sans-serif;cursor:pointer;transition:opacity .2s,transform .1s;box-shadow:0 4px 16px rgba(0,0,0,.25);letter-spacing:.3px}.btn-primary:active{transform:scale(.98);opacity:.9}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.in-app-notif{position:fixed;top:calc(16px + var(--sat));left:12px;right:12px;z-index:99998;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 24px rgba(0,0,0,0.18);cursor:pointer;animation:slideDownNotif 0.35s cubic-bezier(.32,1,.23,1);max-width:480px;margin:0 auto}.in-app-notif-icon{font-size:22px;flex-shrink:0}.in-app-notif-text{flex:1;min-width:0}.in-app-notif-title{font-weight:800;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.in-app-notif-body{font-size:13px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.in-app-notif-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:2px 4px;flex-shrink:0;line-height:1}@keyframes slideDownNotif{from{transform:translateY(-80px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutNotif{from{transform:translateY(0);opacity:1}to{transform:translateY(-80px);opacity:0}}[data-theme="dark"] .bottom-bar{background:var(--card) !important;border-top-color:var(--border) !important}[data-theme="dark"] .bottom-bar-logo{color:#ffffff;-webkit-text-fill-color:#ffffff;background:none}[data-theme="dark"] .nav-btn{color:rgba(255,255,255,0.45) !important}[data-theme="dark"] .nav-btn.active{color:#ffffff !important}[data-theme="dark"] .nav-btn svg{stroke:currentColor !important;fill:none !important}[data-theme="dark"] .nav-btn.active svg{stroke:#ffffff !important}html,body{touch-action:pan-x pan-y;-ms-touch-action:pan-x pan-y}input,textarea,select,button{touch-action:manipulation;-ms-touch-action:manipulation}[data-theme="dark"] .chat-messages{background-image:url('../icons/chat-bg-dark.jpg') !important;background-attachment:local !important}
/* ===== Create Menu Sheet ===== */
.create-menu-sheet{position:fixed;left:0;right:0;bottom:0;z-index:3000000;display:none;flex-direction:column;background:var(--card);border-radius:16px 16px 0 0;padding:8px 0 calc(env(safe-area-inset-bottom,0px)+8px);transform:translateY(110%);transition:transform .28s cubic-bezier(.32,1,.23,1);box-shadow:0 -2px 24px rgba(0,0,0,.15);visibility:hidden}
.create-menu-sheet.open{transform:translateY(0);visibility:visible}
.create-menu-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:4px auto 12px}
.create-menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 24px;border:none;background:none;color:var(--text);font-size:17px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;transition:background .15s}
.create-menu-item:active{background:var(--input-bg)}
.create-menu-label{font-size:17px;font-weight:700}
.create-menu-icon{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text)}
.create-menu-divider{height:1px;background:var(--border);margin:0 24px}

/* ===== New Message Banner ===== */
.new-msg-banner{position:fixed;top:calc(12px + var(--sat));left:12px;right:12px;z-index:9999;background:var(--card);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 28px rgba(0,0,0,.22);cursor:pointer;max-width:420px;margin:0 auto;transform:translateY(-110px);opacity:0;transition:transform .35s cubic-bezier(.32,1,.23,1),opacity .35s ease;border:1px solid var(--border);pointer-events:none}
.new-msg-banner.show{transform:translateY(0);opacity:1;pointer-events:auto}
.new-msg-banner-ava{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#2B47CC,#2B47CC);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.new-msg-banner-text{flex:1;min-width:0}
.new-msg-banner-name{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em}
.new-msg-banner-preview{font-size:13px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new-msg-banner-badge{min-width:22px;height:22px;border-radius:999px;background:#EE1D52;color:white;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0;box-shadow:0 2px 6px rgba(238,29,82,.4)}

/* ===== زر الإنشاء الجديد ===== */
.insta-create-btn svg{width:27px;height:27px}

/* ===== Stacked Notifications ===== */
@keyframes gxNotifIn {
  from { opacity:0; transform:translateY(20px) scale(0.95); }
  to   { opacity:1; transform:translateY(0)    scale(1);    }
}
#gx-notif-stack { position:fixed; bottom:calc(var(--bottom-bar,60px) + var(--sab) + 12px); left:12px; right:12px; z-index:99999; display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none; max-width:480px; margin:0 auto; }

/* ===== INSTAGRAM-STYLE NOTIFICATION BUBBLES ===== */
.notif-bubble {
  position: absolute;
  top: -6px;
  right: -8px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: #2B47CC;
  border-radius: 12px;
  padding: 3px 6px 3px 4px;
  border: 2px solid var(--bg);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(233,30,99,0.45);
  min-width: 28px;
  animation: bubblePop .25s cubic-bezier(.32,1,.23,1);
}
.notif-bubble svg {
  width: 11px;
  height: 11px;
  stroke: white;
  fill: none;
  flex-shrink: 0;
}
.notif-bubble span {
  color: white;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.msg-bubble {
  position: absolute;
  top: -6px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2B47CC;
  border-radius: 12px;
  padding: 4px 6px;
  border: 2px solid var(--bg);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(229,57,53,0.45);
  min-width: 28px;
  animation: bubblePop .25s cubic-bezier(.32,1,.23,1);
}
.msg-bubble svg {
  width: 13px;
  height: 13px;
  stroke: white;
  fill: none;
  flex-shrink: 0;
}
@keyframes bubblePop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}@keyframes skeletonPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── Switch Account Button ── */
#gxSwitchBtn {
  color: var(--text);
  transition: opacity 0.2s;
}
#gxSwitchBtn:active {
  opacity: 0.6;
}

/* ─── Fast Page Transitions (v73) ─────────────────────────────────── */
.page {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  will-change: opacity, transform;
}
.page.active {
  opacity: 1;
  transform: translateY(0);
}
/* Prevent layout thrash during transition */
.page:not(.active) {
  pointer-events: none;
}

/* ═══════════════ تعديلات Vygram المخصّصة ═══════════════ */

/* ── 1) تنقّل فوري بين الصفحات (بدون أي تأخير) ── */
.page{transition:none !important;transform:none !important;will-change:auto !important}
.page.active{transform:none !important}

/* ── 2) البادج الأحمر فوق زر الرسائل في البار ── */

/* ── 3) شريط البحث العلوي بكلمة Search وخط سفلي ── */
.home-search-wrap{
  display:flex;
  align-items:center;
  flex:1;
  gap:8px;
  margin-right:8px;
  border-bottom:none;
  padding-bottom:0;
}
.home-search-wrap svg{width:22px;height:22px;flex-shrink:0;color:var(--text)}
.home-search-text{
  color:var(--text3);
  font-size:16px;
  font-weight:500;
  font-family:'Inter','Cairo',sans-serif;
}

/* ── 4) زر الحفظ ممتلئ بالأصفر بالكامل (بدون توهج) ── */
.action-btn.saved svg,
.action-btn.saved svg path,
button.saved svg,
button.saved svg path{
  fill:#FFD60A !important;
  stroke:#FFD60A !important;
  color:#FFD60A !important;
  filter:none !important;
}
.action-btn.saved{color:#FFD60A !important;filter:none !important}
  fill:#FFD700 !important;
  stroke:#FFD700 !important;
  filter:none !important;
}
.action-btn.saved{color:#FFD60A !important;filter:none !important}

/* ═══════════ إصلاح حاسم: ضمان ظهور البار السفلي دائماً ═══════════ */
.page{padding-bottom:0}
.feed-scroll,.profile-scroll,.search-scroll{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px)) !important}

/* نسخة class-based للون الأسود (دعم كل المتصفحات) */

/* ═══ البار الاحترافي (شبه إنستقرام) ═══ */

/* ═══ واجهة تسجيل الفويس (مثل ماسنجر) ═══ */
@keyframes recPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
@keyframes vwaveAnim{0%,100%{height:6px}50%{height:20px}}
.vwave{flex:1;min-width:3px;max-width:5px;height:6px;background:#562AE8;border-radius:3px;animation:vwaveAnim 1s ease-in-out infinite}
@keyframes vwave2Anim{0%,100%{height:5px;opacity:.6}50%{height:22px;opacity:1}}
.vwave2{flex:1;min-width:2.5px;max-width:4px;height:5px;background:#fff;border-radius:3px;animation:vwave2Anim .85s ease-in-out infinite}
#voiceRecordBar.show{display:flex !important}

/* ═══ نصف شاشة استدعاء Co-host ═══ */
@keyframes slideUpSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* موجة الفويس (أعمدة مثل ماسنجر) */
.vbar{flex:1;min-width:2px;max-width:4px;border-radius:2px;transition:background .15s}


/* ════════════════════════════════════════════════════════
   BOTTOM BAR — القواعد الوحيدة (لا توجد قواعد أخرى)
   ════════════════════════════════════════════════════════ */

#globalBottomBar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background: var(--card) !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

/* وضع الشورتس (خلفية سوداء) */
#globalBottomBar.bar-dark {
  background: #000 !important;
  border-top-color: #222 !important;
}

/* أزرار التنقل */
#globalBottomBar .nav-btn {
  flex: 1 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--text2) !important;
  opacity: 0.65;
  transition: transform .12s, opacity .15s !important;
  position: relative !important;
}

#globalBottomBar .nav-btn.active {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* في وضع الشورتس الألوان بيضاء */
#globalBottomBar.bar-dark .nav-btn { color: rgba(255,255,255,0.55) !important; }
#globalBottomBar.bar-dark .nav-btn.active { color: #fff !important; opacity: 1 !important; }

/* أيقونات SVG */
#globalBottomBar .nav-btn svg {
  width: 27px !important;
  height: 27px !important;
}

/* الأيقونات الـ stroke فقط (لا fill) */
#globalBottomBar .nav-btn svg { fill: none !important; stroke: currentColor !important; }

/* الزر النشط: fill للأيقونات الـ solid (Home, Profile, Messages) */
#globalBottomBar .nav-btn.active svg { fill: currentColor !important; stroke: currentColor !important; }

/* زر الشورتس (nb2): له شكل polygon داخل → نملأ الـ polygon فقط */
#globalBottomBar #nb2 svg { fill: none !important; stroke: currentColor !important; }
#globalBottomBar #nb2 svg polygon { fill: currentColor !important; stroke: none !important; }

/* ضغطة */
#globalBottomBar .nav-btn:active { transform: scale(0.88); }

/* badge الرسائل */
#globalBottomBar .nav-badge {
  position: absolute;
  top: 6px;
  right: 50%;
  transform: translateX(20px);
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #FE2C55;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card);
}

/* الصفحات تترك مساحة أسفلها للبار */
.feed-scroll, .profile-scroll, .search-scroll {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

/* البار يظهر افتراضياً دائماً — JS يُخفيه فقط عند الحاجة */
#globalBottomBar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#globalBottomBar.bar-hidden {
  display: none !important;
}








/* ═══ الحل النهائي للبار ═══
   هذه الصفحات تعلو فوق البار تماماً - لها خلفية كاملة لا شفافية */
#authPage.active,
#searchPage.active,
#createPage.active,
#editProfilePage.active,
#userProfilePage.active,
#followingListPage.active,
#followersListPage.active,
#visitorsPage.active,
#notificationsPage.active,
#chatPage.active,
#followRequestsPage.active,
#imagePreviewPage.active,
#adminPage.active,
#settingsPage.active,
#blockedPage.active,
#livesPage.active,
#storagePage.active,
#onlineNowPage.active {
  z-index: 3000000 !important;
  background: var(--bg, #fafafa) !important;
}

/* تأكد أن authPage دائماً فوق البار */
#authPage {
  z-index: 3000000 !important;
  background: var(--bg, #fafafa) !important;
}

/* ═══ Overlays والدراور فوق البار ═══ */
.drawer { z-index: 3000000 !important; }
.drawer-overlay { z-index: 2999999 !important; }
#commentsOverlay, #commentsSheet { z-index: 3000000 !important; }
.comment-sheet { z-index: 3000000 !important; }
.create-menu-sheet { z-index: 3000000 !important; }
#createMenuOverlay { z-index: 2999999 !important; }
.post-menu-overlay, .post-menu-sheet { z-index: 3000000 !important; }
.gx-share-overlay, .gx-share-sheet { z-index: 3000000 !important; }
#imagePickerSheet { z-index: 3000000 !important; }
#storyUploadOverlay, #storyUploadSheet { z-index: 3000000 !important; }
#shortUploadOverlay { z-index: 3000000 !important; }
#moreSheet, #moreSheetOverlay { z-index: 3000000 !important; }
#giftPanelOverlay { z-index: 3000000 !important; }
#coHostCallSheet { z-index: 3000000 !important; }
#adminMsgOverlay { z-index: 3000000 !important; }
#imagePreviewOverlay { z-index: 3000000 !important; }

/* البار في وضع الشورتس */
#globalBottomBar.bar-dark {
  background: rgba(0,0,0,0.85) !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(12px) !important;
}
#globalBottomBar.bar-dark .nav-btn {
  color: rgba(255,255,255,0.9) !important;
  opacity: 1 !important;
}
#globalBottomBar.bar-dark .nav-btn.active {
  color: #ffffff !important;
  opacity: 1 !important;
}
#globalBottomBar.bar-dark svg {
  stroke: currentColor !important;
  stroke-width: 2px !important;
}

/* ═══ الدراور وصفحة الشحن فوق البار ═══ */
#drawer { z-index: 3000000 !important; }
#drawer-overlay, .drawer-overlay { z-index: 2999999 !important; }
#walletPageOverlay { z-index: 3000000 !important; }


#authPage { z-index: 3000000 !important; background: var(--bg, #fafafa) !important; }

/* زر الشورتس النشط في وضع الشورتس */
#globalBottomBar.bar-dark #nb2.active svg {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)) !important;
  color: #ffffff !important;
}

.comments-sheet { z-index: 3000000 !important; }

#chatPage { z-index: 3000000 !important; background: var(--bg) !important; }

#onlineNowPage { z-index: 3000000 !important; background: var(--bg) !important; }

/* ═══ منع تحديد النص وشريط جوجل عند الضغط المطول ═══ */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* السماح بالتحديد فقط في حقول الإدخال والنصوص */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ═══ إصلاح ألوان البار في وضع الشورتس ═══ */
#globalBottomBar.bar-dark #nb0,
#globalBottomBar.bar-dark #nb2,
#globalBottomBar.bar-dark #nb3,
#globalBottomBar.bar-dark #nb4 {
  color: rgba(255,255,255,0.65) !important;
}
#globalBottomBar.bar-dark #nb2 {
  color: #ffffff !important;
}
#globalBottomBar.bar-dark #nb0 svg,
#globalBottomBar.bar-dark #nb2 svg,
#globalBottomBar.bar-dark #nb3 svg,
#globalBottomBar.bar-dark #nb4 svg {
  stroke: currentColor !important;
}

/* زر الإنشاء (+): أسود عادةً، وأبيض بعلامة سوداء داخل الفيديوهات القصيرة */
#globalBottomBar #nbCreate > div { background: #111 !important; }
#globalBottomBar #nbCreate svg { stroke: #fff !important; }
#globalBottomBar.bar-dark #nbCreate > div { background: #fff !important; }
#globalBottomBar.bar-dark #nbCreate svg { stroke: #111 !important; }
/* الوضع الداكن للتطبيق: الزر أبيض بعلامة سوداء ليبقى ظاهراً */
[data-theme="dark"] #globalBottomBar:not(.bar-dark) #nbCreate > div { background: #fff !important; }
[data-theme="dark"] #globalBottomBar:not(.bar-dark) #nbCreate svg { stroke: #111 !important; }


/* ✅ زر الإنشاء (+) دائماً فوق أي عنصر متداخل وقابل للضغط في كامل مساحته */
#globalBottomBar #nbCreate { position: relative; z-index: 10; pointer-events: auto !important; }
#globalBottomBar #nbCreate * { pointer-events: none; }

/* ✅ [حماية بصرية] زر (+) على البار الأسود (وضع الشورتس): مربع أبيض بأيقونة
   سوداء بدل الأسود-على-أسود غير المرئي */
#globalBottomBar.bar-dark #nbCreate > div { background: #fff !important; }
#globalBottomBar.bar-dark #nbCreate > div svg { stroke: #111 !important; }

/* ✅ بروفايل المستخدم يفتح فوق صفحة الدردشة وغيرها */
#userProfilePage.active { z-index: 3000010 !important; background: var(--bg, #fafafa) !important; }

/* ✅ [إصلاح] قوائم المتابعين/المتابَعين يجب أن تفتح فوق البروفايل وفوق صفحة الدردشة أيضاً —
   بدون هذا كانت تُفتح خلف #chatPage (z-index:3000000) فيبدو الأمر وكأن الضغط على
   المتابعين/المتابَعين يُعيد المستخدم إلى صفحة المحادثة بدل فتح القائمة */
#followersListPage.active,
#followingListPage.active { z-index: 3000020 !important; background: var(--bg, #fafafa) !important; }

/* ═══════════════════════════════════════════════════════════════════
   🔒 PAGE ISOLATION — الحل الجذري لعزل الصفحات
   كل صفحة مخفية بالكامل عندما لا تكون active
   ═══════════════════════════════════════════════════════════════════ */

/* الحالة الافتراضية: كل الصفحات مخفية تماماً */
.page {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* فقط الصفحة النشطة تظهر */
.page.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
  z-index: 10 !important;
}

/* عند فتح صفحة اللايفات: امنع الصفحات خلفها من التقاط الضغطات */
body.lives-open .page,
body.lives-open #globalBottomBar {
  pointer-events: none !important;
}

/* الصفحات الخاصة التي تعمل بشكل مستقل (ليست .page class) */
/* لا تتأثر بهذه القواعد */

/* ═══ إصلاح: النوافذ المنبثقة يجب أن تكون فوق صفحة البروفايل (3000010) ═══ */
#commentsOverlay, #commentsSheet, .comment-sheet,
.post-menu-overlay, .post-menu-sheet,
.gx-share-overlay, .gx-share-sheet,
#moreSheet, #moreSheetOverlay,
#imagePickerSheet, #imagePreviewOverlay,
.create-menu-sheet, #createMenuOverlay,
#giftPanelOverlay, #coHostCallSheet, #adminMsgOverlay { z-index: 3000200 !important; }

/* حلقة الستوري حول صورة البروفايل */
.profile-big-ava.has-story-ring{ box-shadow: 0 0 0 3px var(--card), 0 0 0 6px #E6157A !important; }

/* حركة ظهور قائمة الستوري من الأسفل */
@keyframes gxSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ── الدخول المميّز للمستوى 20+ (يطير) ── */
@keyframes vipEntranceFly{0%{transform:translateX(120%) scale(.8);opacity:0}60%{transform:translateX(-8%) scale(1.05);opacity:1}100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes vipShine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(200%)}}
.tt-join-vip{animation:vipEntranceFly 1s cubic-bezier(.2,.8,.2,1)}