/* Counter-Zoom UI System */
/* Ensures UI elements remain readable at any browser zoom level */

:root {
    --ui-counter-zoom: 1.0;
}

/* Control Panel Counter-Zoom */
.control-panel {
    transform-origin: top right;
    will-change: transform;
}

/* Modal Counter-Zoom */
.modal {
    transform-origin: center center;
    will-change: transform;
}

/* Popup Counter-Zoom */
.popup-display,
.image-popup,
.api-settings-popup {
    transform-origin: center center;
    will-change: transform;
}

/* Counter-Zoom Indicator */
#counterZoomIndicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#counterZoomIndicator.visible {
    opacity: 1;
}

/* Ensure smooth scaling transitions */
.control-panel,
.modal,
.popup-display,
.image-popup,
.api-settings-popup {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent blur during scaling */
.control-panel *,
.modal *,
.popup-display *,
.image-popup *,
.api-settings-popup * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Adjust scrollbars for scaled elements */
.control-panel::-webkit-scrollbar {
    width: calc(8px * var(--ui-counter-zoom, 1));
}

/* Ensure buttons remain clickable after scaling */
.control-panel button,
.modal button,
.popup-display button {
    position: relative;
    z-index: 1;
}

/* Media query adjustments for extreme zoom levels */
@media (max-width: 600px) {
    /* On small screens, limit minimum counter-zoom */
    .control-panel {
        transform: scale(max(0.5, var(--ui-counter-zoom, 1))) !important;
    }
}

@media (min-width: 2000px) {
    /* On large screens, limit maximum counter-zoom */
    .control-panel {
        transform: scale(min(1.5, var(--ui-counter-zoom, 1))) !important;
    }
}

/* Animation for counter-zoom changes */
@keyframes counterZoomPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
}

/* Apply pulse when counter-zoom is active and significant */
.control-panel[data-counter-zoomed="true"] {
    animation: counterZoomPulse 2s ease-in-out;
}

/* Mask Editor Counter-Zoom Target */
/* SIMPLIFIED: Only scale the container, NOT internal elements (avoids double-scaling) */
.mask-editor-overlay.counter-zoom-target {
    transform-origin: center center;
    will-change: transform;
}

/* Only apply counter-zoom when NOT at normal zoom (1.0) */
/* At 100% browser zoom, don't transform at all */
.mask-editor-overlay.counter-zoom-target .mask-editor-container {
    transform-origin: center center;
    transition: transform 0.2s ease;
}

/* Counter-zoom is only applied via JavaScript when needed */
/* The container scales uniformly - no need to scale internal elements again */

/* Control panel enhanced scaling for low zoom */
/* Control panel is NOT inside a scaled container, so it needs font scaling */
@supports (font-size: clamp(10px, 1em, 20px)) {
    .control-panel label {
        font-size: clamp(10px, calc(11px * var(--ui-counter-zoom, 1)), 22px);
    }
    
    .control-panel select,
    .control-panel input {
        font-size: clamp(11px, calc(12px * var(--ui-counter-zoom, 1)), 24px);
    }
    
    .control-panel button {
        font-size: clamp(11px, calc(12px * var(--ui-counter-zoom, 1)), 24px);
    }
}

/* Recording Complete popup enhanced scaling */
.recording-complete-popup.counter-zoom-target {
    transform: scale(var(--ui-counter-zoom, 1));
    transform-origin: center center;
}