/**
 * 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: 9998 !important;

/* 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 */
.unified-widget {
    position: fixed !important;
    bottom: 150px !important;
    right: 20px !important;
    left: auto !important;
    z-index: 9999 !important;

/* 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;

}}}}}}}}}