/**
 * Selection Studio — Selection Overlay V1
 * Location: /studio/css/selection-overlay.css
 *
 * Responsibility:
 * - Reusable temporary workspace presentation
 * - Dynamic Viewport (100dvh) with fallback for older browsers
 * - Landscape mode protections
 */

/* =========================================================
   1. ROOT LAYOUT
   ========================================================= */

.studio-overlay-root {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-5);
    overflow: hidden;
}

.studio-overlay-root.is-hidden {
    display: none !important;
}

.selection-overlay-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(7, 11, 15, 0.62);
    backdrop-filter: blur(10px) saturate(0.82);
    -webkit-backdrop-filter: blur(10px) saturate(0.82);

    animation: overlay-fade-in var(--motion-fast) var(--ease-standard);
}

.selection-overlay-frame {
    position: relative;
    z-index: 1001;

    display: flex;
    flex-direction: column;

    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;

    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-large);

    background:
        radial-gradient(circle at 50% 0%,
            rgba(37, 57, 76, 0.28) 0,
            rgba(15, 23, 30, 0.96) 42%,
            var(--color-bg-panel) 100%);

    box-shadow: var(--shadow-overlay);

    animation: overlay-scale-up var(--motion-normal) var(--ease-standard);
}

/* Temporary Workspace Sizing Intentions */
.selection-overlay-frame[data-presentation="dialog"] {
    width: min(560px, 100%);
    max-height: min(680px, calc(100vh - 48px));
}

.selection-overlay-frame[data-presentation="workspace"] {
    width: min(1120px, 90vw);
    height: min(760px, 88vh);
}

.selection-overlay-frame[data-presentation="fullscreen"] {
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
}

/* =========================================================
   4. CONTENT SLOT
   ========================================================= */

.selection-overlay-slot {
    isolation: isolate;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;

    border-radius: inherit;
    outline: none;
}

/* =========================================================
   6. STATES & ANIMATIONS
   ========================================================= */

@keyframes overlay-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes overlay-scale-up {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

body.has-overlay-open {
    overflow: hidden !important;
}

/* =========================================================
   8. RESPONSIVE & DYNAMIC VIEWPORT
   ========================================================= */

@media (max-width: 640px) {
    .studio-overlay-root {
        padding: var(--space-2);
    }

    .selection-overlay-frame {
        max-height: 100dvh;
        border-radius: var(--radius-medium);
    }

    .selection-overlay-frame[data-presentation="dialog"],
    .selection-overlay-frame[data-presentation="workspace"],
    .selection-overlay-frame[data-presentation="fullscreen"] {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 640px) {
        .selection-overlay-frame {
            max-height: 100vh;
        }

        .selection-overlay-frame[data-presentation="dialog"],
        .selection-overlay-frame[data-presentation="workspace"],
        .selection-overlay-frame[data-presentation="fullscreen"] {
            height: 100vh;
            max-height: 100vh;
        }
    }
}

@media (max-height: 640px) and (min-width: 641px) {
    .studio-overlay-root {
        padding: var(--space-3);
    }

    .selection-overlay-frame[data-presentation="workspace"] {
        height: calc(100dvh - (var(--space-3) * 2));
    }
}

/* =========================================================
   9. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .selection-overlay-backdrop,
    .selection-overlay-frame {
        animation: none;
    }
}