/**
 * ChatSpheres Ad Styles
 * Ensures ads are displayed in a user-friendly manner
 */

/* Hide ads when user has ad-free plan */
body.ads-hidden .chatspheres-ad-container,
body.ads-hidden .chatspheres-ad,
body.ads-hidden .ad-container {
  display: none !important;
}

/* Ad Container Base Styles */
.chatspheres-ad-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: transparent;
}

/* Header Ad - Below navigation */
.chatspheres-ad-header {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  min-height: 90px;
  max-height: 120px;
  background: var(--light-rose);
  border-bottom: 1px solid var(--rose);
}

/* Footer Ad - Above footer */
.chatspheres-ad-footer {
  padding: var(--space-md);
  margin-top: var(--space-lg);
  min-height: 90px;
  max-height: 120px;
  background: var(--light-rose);
  border-top: 1px solid var(--rose);
}

/* Sidebar Ad */
.chatspheres-ad-sidebar {
  padding: var(--space-sm, 0.5rem);
  min-height: 250px;
  max-width: 100%;
  background: var(--light-rose, #FCE2E5);
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid var(--rose, #F8B4C0);
}

/* Video chat page sidebar ads */
#sidebar-ad,
#spectator-sidebar-ad {
  background: white;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
}

/* Inline Ad - Between content */
.chatspheres-ad-inline {
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  min-height: 100px;
  background: var(--light-rose);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rose);
}

/* Ad label for transparency */
.chatspheres-ad-container::before {
  content: 'Advertisement';
  display: block;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: var(--charcoal);
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chatspheres-ad-container {
  position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chatspheres-ad-header,
  .chatspheres-ad-footer {
    min-height: 60px;
    max-height: 100px;
  }
  
  .chatspheres-ad-sidebar {
    max-width: 100%;
    min-height: 100px;
  }
}

/* Ensure AdSense elements display correctly */
.adsbygoogle {
  display: block;
  width: 100%;
}

/* Empty ad fallback (when no ads available) */
.chatspheres-ad-container:empty,
.adsbygoogle:empty {
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

.chatspheres-ad-container:empty::before {
  display: none;
}

/* ============================================
   MONETAG ADS - LESS INTRUSIVE POSITIONING
   Prevent ads from covering navigation/UI
   ============================================ */

/* 
 * Z-INDEX HIERARCHY (highest to lowest):
 * 999999 - Mobile menu overlay/sidebar when open
 * 500000 - Navigation bar and menu buttons
 * 100003 - Modals and dialogs
 * 9999   - All Monetag ads
 */

/* Ensure navigation stays ABOVE all ads */
nav,
.navigation,
.nav-container,
header,
.header,
.top-nav,
.main-nav {
  z-index: 500000 !important;
  position: relative;
}

/* Mobile menu and sidebar - HIGHEST priority */
.mobile-menu,
.mobile-nav,
.side-menu,
.sidebar-menu,
.nav-sidebar,
.menu-overlay,
.mobile-menu-overlay,
[class*="mobile-menu"],
[class*="side-menu"],
[id*="mobile-menu"],
[id*="side-menu"] {
  z-index: 999999 !important;
}

/* Menu toggle buttons - always clickable */
.menu-toggle,
.hamburger,
.nav-toggle,
.mobile-nav-toggle,
.menu-btn,
.nav-menu-btn,
button[aria-label*="menu"],
button[aria-label*="Menu"],
[class*="hamburger"],
[class*="menu-toggle"],
[id*="menu-toggle"] {
  z-index: 999998 !important;
  position: relative !important;
  pointer-events: auto !important;
}

/* ALL Monetag ad elements - lower z-index */
div[id^="monetag"],
div[class*="monetag"],
div[id*="push"],
div[class*="push"],
div[id*="inpage"],
div[class*="inpage"],
div[id*="vignette"],
div[class*="vignette"],
iframe[src*="monetag"],
iframe[src*="3nbf4"],
iframe[src*="nap5k"],
iframe[src*="gizokraijaw"] {
  z-index: 9999 !important;
  /* Never cover the top 80px where nav is */
  pointer-events: auto;
}

/* Vignette ads - push down below navigation */
div[class*="vignette"],
div[id*="vignette"] {
  margin-top: 80px !important;
  /* Make close button easier to find */
}

/* In-Page Push - FORCE to bottom corner, away from menu */
/* Target all possible Monetag containers aggressively */
div[class*="inpage"],
div[id*="inpage"],
div[class*="push-notification"],
div[id*="notification"],
div[class*="push"],
div[id*="push"],
/* Common Monetag container patterns */
body > div[style*="position: fixed"],
body > div[style*="position:fixed"],
body > div[style*="z-index: 9"],
body > div[style*="z-index:9"],
body > div[style*="top: 0"],
body > div[style*="top:0"],
body > div[style*="right: 0"],
body > div[style*="right:0"] {
  top: auto !important;
  bottom: 20px !important;
  left: auto !important;
  right: 20px !important;
  max-width: 320px !important;
  max-height: 120px !important;
  /* Force reposition */
  transform: none !important;
  margin-top: 0 !important;
}

/* Make ad close buttons always visible and clickable */
div[class*="vignette"] button,
div[id*="vignette"] button,
div[class*="vignette"] [class*="close"],
div[id*="vignette"] [class*="close"],
[class*="ad-close"],
[class*="close-ad"] {
  z-index: 10000 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  /* Make close button bigger and easier to tap */
  min-width: 30px !important;
  min-height: 30px !important;
}

/* Modals always above ads - NEVER reposition */
/* Only target actual modal CONTAINERS (direct body children or with -modal suffix in ID) */
/* CRITICAL: Override any ad repositioning with !important */
body > .modal,
body > .modal-overlay,
body > [role="dialog"],
body > .dialog,
body > .popup,
#create-room-modal,
#auth-modal,
#rating-modal,
#tip-modal,
#share-modal,
#upgrade-modal,
#branding-modal,
#bug-report-modal,
#end-debate-modal,
#recording-consent-modal,
#report-modal,
#spectator-management-modal,
#switch-modal,
#video-modal,
#winner-announcement-modal {
  z-index: 100003 !important;
  /* Force fullscreen positioning - override ad repositioning */
  /* Note: Do NOT force display - let JavaScript control visibility */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

/* When modals are visible (display:flex set by JS), ensure proper centering */
#create-room-modal[style*="display: flex"],
#create-room-modal[style*="display:flex"],
#auth-modal[style*="display: flex"],
#auth-modal[style*="display:flex"],
[id*="-modal"][style*="display: flex"],
[id*="-modal"][style*="display:flex"] {
  align-items: center !important;
  justify-content: center !important;
}

/* Video interface overlays - NEVER reposition */
#waiting-overlay,
#loading-overlay,
#video-interface,
#video-container,
[class*="overlay"],
[class*="waiting"],
[class*="loading"],
[id*="overlay"],
[id*="waiting"],
[id*="loading"] {
  /* Only reset if they were incorrectly repositioned */
}

/* Ensure overlays are NOT constrained */
#waiting-overlay,
#loading-overlay,
.waiting-overlay,
.loading-overlay {
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
}

/* ============================================
   SPECTATOR LAYOUT PROTECTION
   Ensure spectator view is properly visible
   ============================================ */

/* Force spectator layout to display properly when not hidden */
#spectator-layout:not(.hidden) {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure spectator video container has proper dimensions */
#spectator-layout .aspect-video {
  min-height: 200px !important;
  width: 100% !important;
}

/* Spectator click overlay - visible by default, hidden when user interacts */
/* Use :not(.hidden) selector to ensure it shows unless explicitly hidden */
#spectator-click-overlay:not(.hidden):not([style*="display: none"]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* Spectator participants container should always be visible */
#spectator-participants-container {
  display: grid !important;
  visibility: visible !important;
  min-height: 200px !important;
}

/* ============================================
   MOBILE-SPECIFIC AD POSITIONING
   Even less intrusive on small screens
   ============================================ */

@media (max-width: 768px) {
  /* Push vignette further down on mobile */
  div[class*="vignette"],
  div[id*="vignette"] {
    margin-top: 70px !important;
  }
  
  /* In-page push - smaller and at bottom */
  div[class*="inpage"],
  div[id*="inpage"],
  div[class*="push-notification"] {
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    max-width: calc(100% - 20px) !important;
    max-height: 80px !important;
  }
  
  /* Ensure hamburger menu is always tappable */
  .hamburger,
  .menu-toggle,
  [class*="hamburger"] {
    z-index: 999999 !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ============================================
   PREVENT ADS FROM BLOCKING INTERACTIONS
   ============================================ */

/* Ensure clickable elements are always accessible */
a, button, input, select, textarea,
[role="button"], [tabindex] {
  position: relative;
}

/* When mobile menu is open, hide ads temporarily */
body.menu-open div[class*="vignette"],
body.menu-open div[class*="inpage"],
body.menu-open div[class*="push"],
body.nav-open div[class*="vignette"],
body.nav-open div[class*="inpage"],
body.nav-open div[class*="push"] {
  display: none !important;
}

/* ============================================
   NAVIGATION SAFE ZONE
   Force top-right area to be ad-free
   ============================================ */

/* Ultra-specific targeting for the In-Page Push ad widget */
/* These ads typically have these characteristics */
/* IMPORTANT: Exclude modals (have top:0), navs, menus from being moved */
/* Only target elements that DON'T have top:0 (fullscreen modals have top:0) */
body > div:not([id*="modal"]):not([id*="nav"]):not([id*="menu"]):not([class*="modal"]):not([class*="nav"]):not([class*="menu"]):not([style*="top:0"]):not([style*="bottom:0"])[style*="fixed"][style*="right"] {
  top: auto !important;
  bottom: 80px !important;
}

/* Target common Monetag container patterns - move to bottom */
/* Exclude fullscreen elements (have top:0 and bottom:0) - these are modals */
body > div:not(#video-interface):not(#video-mobile-nav):not(#auth-modal):not(#landing-page):not(#feedback-widget):not(#feedback-modal):not([class*="nav"]):not([class*="menu"]):not([class*="modal"]):not([id*="nav"]):not([id*="menu"]):not([id*="modal"]):not([style*="top:0"]):not([style*="bottom:0"])[style*="z-index: 9"],
body > div:not(#video-interface):not(#video-mobile-nav):not(#auth-modal):not(#landing-page):not(#feedback-widget):not(#feedback-modal):not([class*="nav"]):not([class*="menu"]):not([class*="modal"]):not([id*="nav"]):not([id*="menu"]):not([id*="modal"]):not([style*="top:0"]):not([style*="bottom:0"])[style*="z-index:9"] {
  top: auto !important;
  bottom: 80px !important;
  left: auto !important;
  right: 20px !important;
  max-width: 320px !important;
  max-height: 150px !important;
  z-index: 9999 !important;
}

/* Ensure navigation link area is ALWAYS on top */
.nav-links,
.nav-right,
.nav-actions,
.user-menu,
.profile-menu,
.auth-buttons,
[class*="nav-link"],
[class*="nav-right"],
[class*="user-menu"],
[class*="auth"] {
  z-index: 999999 !important;
  position: relative !important;
}

/* Add pointer-events protection to nav area */
nav, .navigation, header, .header, .video-header {
  pointer-events: auto !important;
}

nav *, .navigation *, header *, .header *, .video-header * {
  pointer-events: auto !important;
}

/* ============================================
   MENU BUTTON - HIGHEST PRIORITY
   ALL hamburger menus must ALWAYS be clickable
   ============================================ */

#video-menu-toggle,
#menu-toggle,
.menu-toggle,
.hamburger,
[class*="menu-toggle"],
[id*="menu-toggle"],
button[aria-label="Toggle menu"],
button[aria-label*="menu"] {
  z-index: 999999 !important;
  position: relative !important;
  pointer-events: auto !important;
}

/* Make the header itself a high z-index container */
.video-header,
header.video-header,
header,
.header,
.site-header,
.main-header {
  z-index: 500000 !important;
  position: relative !important;
}

/* Navigation menus and overlays - highest priority when open */
/* Force LEFT side positioning to avoid ads on right */
.nav-menu,
#nav-menu {
  left: 0 !important;
  right: auto !important;
}

.nav-menu,
.nav-overlay,
#nav-menu,
#nav-overlay,
#video-mobile-nav,
.mobile-nav {
  z-index: 1000000 !important;
}

/* NOTE: Removed the header::after shield - it was causing a visible 
   brownish square on mobile. The menu z-index is high enough to stay 
   above ads without this extra layer. */

/* The menu toggle needs to be ABOVE that shield */
#video-menu-toggle,
#menu-toggle,
.menu-toggle {
  z-index: 999999 !important;
}