/**
 * iOS Safari viewport and tab bar adjustments
 * Relies on VisualViewport measurements pushed in safari-viewport.js
 */

/* Provide backwards-compatible custom properties */
:root {
    --safari-viewport-height: var(--ios-viewport-height, 100vh);
}

@supports (-webkit-touch-callout: none) {
    html[data-ios-viewport='dynamic'],
    body.safari-ios {
        /* Keep legacy token for existing CSS consumers */
        --safari-viewport-height: var(--ios-viewport-height, 100vh);
    }

    html[data-ios-viewport='dynamic'] .sidebar,
    body.safari-ios .sidebar {
        transition: transform 0.3s var(--transition-smooth), height 0.2s ease-out;
        will-change: transform, height;
    }

    html[data-ios-viewport='dynamic'] .sidebar-overlay,
    body.safari-ios .sidebar-overlay {
        height: var(--ios-viewport-height, 100vh);
        max-height: var(--ios-viewport-height, 100vh);
    }

    @media (max-width: 767px) {
        html[data-ios-viewport='dynamic'] .sidebar,
        body.safari-ios .sidebar {
            height: var(--ios-viewport-height, 100vh);
            max-height: var(--ios-viewport-height, 100vh);
            padding-bottom: var(--sidebar-bottom-gap, var(--safe-area-inset-bottom, 0px));
        }

        html[data-ios-viewport='dynamic'] .sidebar-content,
        body.safari-ios .sidebar-content {
            padding-bottom: calc(var(--spacing-lg) + var(--sidebar-bottom-gap, var(--safe-area-inset-bottom, 0px)));
        }

        html[data-ios-viewport='dynamic'] .sidebar-footer,
        body.safari-ios .sidebar-footer {
            padding-bottom: calc(var(--spacing-md) + var(--sidebar-bottom-gap, var(--safe-area-inset-bottom, 0px)));
        }
    }
}

/* Prefer dynamic viewport units when available */
@supports (height: 100dvh) {
    html[data-ios-viewport='dynamic'] .sidebar,
    body.safari-ios .sidebar,
    html[data-ios-viewport='dynamic'] .sidebar-overlay,
    body.safari-ios .sidebar-overlay {
        height: var(--ios-viewport-height, 100dvh);
        max-height: var(--ios-viewport-height, 100dvh);
    }
}

/* Legacy Safari fallback */
@supports not (height: 100dvh) {
    html[data-ios-viewport='dynamic'] .sidebar,
    body.safari-ios .sidebar,
    html[data-ios-viewport='dynamic'] .sidebar-overlay,
    body.safari-ios .sidebar-overlay {
        height: -webkit-fill-available;
    }
}