/**
 * Corner Widget Manager
 * Prevents overlapping of fixed-position widgets in corners
 * IMPORTANT: This file must load AFTER unified-widget.css and mechanicsDepthMetrics.css
 */

/* Bottom-Right Corner Widget Stack */
/* Stack widgets vertically to prevent overlap */

/* Layer 1: FAB (Floating Action Button) - Closest to corner */
/* FAB is 60px tall (var(--spacing-3xl)) */
.unified-widget-fab {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 10001 !important; /* Above everything including title screen and tabs */
}

/* Accessibility Button - Hide it (unified widget replaces it) */
#accessibility-button {
  display: none !important;
}

/* Layer 2: Metrics Trigger Button - Above FAB */
/* FAB is 60px tall + 10px spacing = 70px, so metrics button starts at 90px */
.metrics-trigger-btn {
  position: fixed !important;
  bottom: 90px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 9997 !important;
}

/* Note: Audio controls are in top-right, not bottom-right */

/* Unified Widget Panel - Above all buttons */
/* Metrics button is ~40px tall, so widget should be at least 150px from bottom */
/* CRITICAL: Widget z-index (9999) must be lower than mode-tabs (10000) to prevent overlap */
.unified-widget {
  position: fixed !important;
  bottom: 150px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important; /* Ensure it doesn't position at top */
  z-index: 9999 !important; /* Lower than mode-tabs (10000) */
}

/* When widget is open, shift metrics button up to avoid overlap */
/* Widget is max 88vh tall, so shift metrics button above it */
.unified-widget.open ~ .metrics-trigger-btn,
body:has(.unified-widget.open) .metrics-trigger-btn {
  bottom: calc(100vh - 88vh + 20px) !important;
}

/* Top-Right Corner Widgets */
/* Stack any top-right widgets here if needed */

/* Top-Left Corner Widgets */
/* Stack any top-left widgets here if needed */

/* Bottom-Left Corner Widgets */
/* Stack any bottom-left widgets here if needed */

/* Responsive: Stack vertically on mobile */
@media (max-width: 768px) {
  .unified-widget-fab {
    bottom: var(--spacing-sm, 0.5rem) !important;
    right: var(--spacing-sm, 0.5rem) !important;
  }

  .metrics-trigger-btn {
    bottom: calc(
      var(--spacing-sm, 0.5rem) + var(--spacing-3xl, 60px) +
        var(--spacing-xs, 0.25rem)
    ) !important;
    right: var(--spacing-sm, 0.5rem) !important;
  }

  .unified-widget {
    bottom: calc(
      var(--spacing-sm, 0.5rem) + var(--spacing-3xl, 60px) +
        var(--spacing-xs, 0.25rem) + 50px + var(--spacing-xs, 0.25rem)
    ) !important;
    right: var(--spacing-sm, 0.5rem) !important;
    width: calc(100% - var(--spacing-sm, 0.5rem) * 2) !important;
    max-width: 100% !important;
  }
}