/**
 * Floating Icons Container - Flexbox Layout
 * Created: 2026-01-20
 *
 * Uses flexbox to ensure consistent spacing between all floating icons.
 * This replaces individual bottom positioning for each icon container.
 */

/* ============================================
   MAIN CONTAINER - Flexbox Column Layout
   ============================================ */
.floating-icons-wrapper {
  position: fixed;
  bottom: 70px; /* Base position - gear icon sits at this level */
  right: 20px;
  display: flex;
  flex-direction: column; /* Stack from top to bottom in DOM order */
  align-items: flex-end;
  gap: 20px; /* Consistent spacing between all icons */
  z-index: 9500;
  pointer-events: none; /* Allow clicks to pass through container */
}

/* Allow child elements to receive clicks */
.floating-icons-wrapper > * {
  pointer-events: auto;
}

/* Reset individual container positioning when inside wrapper */
/* Using !important to override page-specific fixed positioning */
.floating-icons-wrapper .profile-hub-container,
.floating-icons-wrapper .help-button-container,
.floating-icons-wrapper .ai-assistant-container,
.floating-icons-wrapper .support-us-container,
.floating-icons-wrapper .jamwebstudio-container,
.floating-icons-wrapper .review-season-container,
.floating-icons-wrapper .back-to-top-container,
.floating-icons-wrapper .support-container,
.floating-icons-wrapper .view-reports-container {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  z-index: auto !important;
}

/* Override body.has-help-button rules */
body.has-help-button .floating-icons-wrapper .profile-hub-container {
  position: relative !important;
  bottom: auto !important;
}

body.has-help-button .floating-icons-wrapper .ai-assistant-container {
  position: relative !important;
  bottom: auto !important;
}

/* ============================================
   RESPONSIVE - Mobile Layout
   ============================================ */
@media (max-width: 768px) {
  .floating-icons-wrapper {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 15px;
    gap: 12px; /* UX-20260123: Reduced gap for mobile to fit all icons */
  }

  /* Ensure all containers use relative positioning in wrapper */
  .floating-icons-wrapper .profile-hub-container,
  .floating-icons-wrapper .help-button-container,
  .floating-icons-wrapper .ai-assistant-container,
  .floating-icons-wrapper .support-us-container,
  .floating-icons-wrapper .jamwebstudio-container,
  .floating-icons-wrapper .review-season-container,
  .floating-icons-wrapper .back-to-top-container,
  .floating-icons-wrapper .support-container,
  .floating-icons-wrapper .view-reports-container {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    gap: 0 !important; /* Remove internal gaps on mobile */
  }
}

/* ============================================
   AD-AWARE POSITIONING
   When anchor ads are detected, shift the entire container
   ============================================ */
body.adsense-anchor-active .floating-icons-wrapper {
  bottom: calc(70px + var(--ad-offset, 0px));
}

@media (max-width: 768px) {
  body.adsense-anchor-active .floating-icons-wrapper {
    bottom: calc(80px + var(--ad-offset, 0px) + env(safe-area-inset-bottom, 0px));
  }
}