:root {
    --bws-map-canvas-width: 100vw;
    --bws-map-canvas-height: 100vh;
    --bws-visible-width: 100vw;
    --bws-visible-height: 100vh;
    --bws-browser-bottom-gap: 0px;
}

@supports (height: 100lvh) {
    :root {
        --bws-map-canvas-width: 100lvw;
        --bws-map-canvas-height: 100lvh;
    }
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    html.bws-mobile-viewport-v36 {
        position: fixed !important;
        inset: 0 !important;
        box-sizing: border-box !important;
        width: var(--bws-map-canvas-width) !important;
        min-width: var(--bws-map-canvas-width) !important;
        max-width: var(--bws-map-canvas-width) !important;
        height: var(--bws-map-canvas-height) !important;
        min-height: var(--bws-map-canvas-height) !important;
        max-height: var(--bws-map-canvas-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        background: #0b3650 !important;
    }

    html.bws-mobile-viewport-v36 body {
        position: relative !important;
        inset: auto !important;
        box-sizing: border-box !important;
        width: var(--bws-map-canvas-width) !important;
        min-width: var(--bws-map-canvas-width) !important;
        max-width: var(--bws-map-canvas-width) !important;
        height: var(--bws-map-canvas-height) !important;
        min-height: var(--bws-map-canvas-height) !important;
        max-height: var(--bws-map-canvas-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        background: #0b3650 !important;
    }

    html.bws-mobile-viewport-v36 #map,
    html.bws-mobile-viewport-v36 #map.leaflet-container,
    html.bws-mobile-viewport-v36 #map.maplibregl-map {
        position: absolute !important;
        inset: auto !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        box-sizing: border-box !important;
        width: var(--bws-map-canvas-width) !important;
        min-width: var(--bws-map-canvas-width) !important;
        max-width: var(--bws-map-canvas-width) !important;
        height: var(--bws-map-canvas-height) !important;
        min-height: var(--bws-map-canvas-height) !important;
        max-height: var(--bws-map-canvas-height) !important;
        margin: 0 !important;
    }

    /* Kontrol tetap berada pada area yang terlihat, sedangkan peta diteruskan ke bawah toolbar. */
    html.bws-mobile-viewport-v36 #map .leaflet-bottom {
        bottom: max(var(--bws-browser-bottom-gap), env(safe-area-inset-bottom, 0px)) !important;
    }

    html.bws-mobile-viewport-v36 #responsiveMenuDock.responsive-menu-dock {
        bottom: max(var(--bws-browser-bottom-gap), env(safe-area-inset-bottom, 0px)) !important;
    }

    html.bws-mobile-viewport-v36 .bws-unified-menu {
        bottom: calc(max(var(--bws-browser-bottom-gap), env(safe-area-inset-bottom, 0px)) + 10px) !important;
    }

    html.bws-mobile-viewport-v36 .telemetry-dashboard-panel {
        max-height: calc(var(--bws-visible-height) - 178px - env(safe-area-inset-bottom, 0px));
    }

    html.bws-mobile-viewport-v36 .telemetry-dashboard-list {
        max-height: calc(var(--bws-visible-height) - 226px - env(safe-area-inset-bottom, 0px));
    }
}

@media (display-mode: standalone) and (max-width: 1024px),
       (display-mode: standalone) and (hover: none) and (pointer: coarse) {
    html.bws-mobile-viewport-v36 #responsiveMenuDock.responsive-menu-dock {
        bottom: env(safe-area-inset-bottom, 0px) !important;
    }
}