/* iOS Safari browser-only overrides.
   Keep every selector scoped so Edge/PWA stay on their own layout rules. */

@media (max-width: 768px) {
    html.ios-safari-browser {
        --ios-safari-queue-page-min-height: 0px;
        --ios-safari-queue-toolbar-sticky-top: var(--playlist-toolbar-sticky-top);
        --ios-safari-queue-current-playing-sticky-top: calc(
            var(--ios-safari-queue-toolbar-sticky-top) + var(--playlist-toolbar-sticky-height) + 8px
        );
    }

    html.ios-safari-browser #playlist {
        min-height: var(--ios-safari-queue-page-min-height);
        --playlist-toolbar-sticky-top: var(--ios-safari-queue-toolbar-sticky-top);
        --playlist-current-playing-sticky-top: var(--ios-safari-queue-current-playing-sticky-top);
    }
}

@media (max-width: 768px) and (orientation: portrait) {
    html.ios-safari-browser .full-player,
    html.ios-safari-browser .full-player-content {
        min-height: 100%;
        min-height: 100dvh;
    }

    html.ios-safari-browser .full-player-artwork-container.video-mode {
        width: min(clamp(280px, 82vw, 360px), calc(100vw - 24px));
        height: min(clamp(280px, 82vw, 360px), calc(100vw - 24px));
    }

    @supports (width: 1svw) {
        html.ios-safari-browser .full-player-artwork-container.video-mode {
            width: min(clamp(280px, 82svw, 360px), calc(100svw - 24px));
            height: min(clamp(280px, 82svw, 360px), calc(100svw - 24px));
        }
    }
}