:root {
    --mavi-safe-top: env(safe-area-inset-top, 0px);
    --mavi-safe-right: env(safe-area-inset-right, 0px);
    --mavi-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mavi-safe-left: env(safe-area-inset-left, 0px);
    --mavi-control-size: 46px;
    --mavi-control-size-lg: 48px;
    --mavi-control-gap: 8px;
}

[data-mavi-overlay-open="true"] {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--mavi-ui-accent, #ff6600) rgba(255, 255, 255, 0.12);
}

[data-mavi-overlay-current="true"] {
    isolation: isolate;
}

html.mavi-scene-loading #chatbot-toggle,
html.mavi-scene-loading #mavi-view-tools,
html.mavi-scene-loading .mavi-xr-controls,
html.mavi-scene-loading .poi-menu-container:not(.auto-tour-container),
html.mavi-scene-loading .mavi-optional-assets-rail,
html.mavi-scene-loading .mavi-hdri-rail,
html.mavi-scene-loading .locations-menu,
html.mavi-scene-loading .mavi-breadcrumb,
html.mavi-scene-loading.mavi-mobile-controls-unified #chatbot-toggle,
html.mavi-scene-loading.mavi-mobile-controls-unified #mavi-view-tools,
html.mavi-scene-loading.mavi-mobile-controls-unified .mavi-tool-rail,
html.mavi-scene-loading.mavi-mobile-controls-unified .mavi-xr-controls,
html.mavi-scene-loading.mavi-mobile-controls-unified .locations-menu,
html.mavi-scene-loading.mavi-mobile-controls-unified .mavi-breadcrumb,
html.mavi-scene-loading.mavi-mobile-controls-unified .poi-menu-container:not(.auto-tour-container) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.annotation-popup[data-mavi-overlay-open="true"],
#poiMenu[data-mavi-overlay-open="true"],
#tourSelectMenu[data-mavi-overlay-open="true"],
#enhanced-control-panel[data-mavi-overlay-open="true"],
.locations-menu-content[data-mavi-overlay-open="true"],
.hdri-menu[data-mavi-overlay-open="true"],
#mavi-xr-menu[data-mavi-overlay-open="true"],
.mavi-optional-assets-menu[data-mavi-overlay-open="true"],
#chatbot-container[data-mavi-overlay-open="true"] {
    box-sizing: border-box;
}

.annotation-popup.active {
    z-index: var(--mavi-layer-hotspot-popup, 10180) !important;
}

.annotation-popup-close,
#chatbot-close,
.sketchfab-close {
    min-width: 36px;
    min-height: 36px;
    touch-action: manipulation;
}

@media (max-width: 768px), (max-height: 480px), (pointer: coarse) {
    html,
    body {
        position: static !important;
        width: 100% !important;
        min-height: 100% !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .mobile-floating-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .mobile-menu-button {
        display: none !important;
    }

    .mobile-menu-categories,
    .mobile-menu-category,
    .mobile-buttons-row,
    .scroll-indicator,
    #manual-tutorial-start.manual-tutorial-button {
        display: none !important;
    }

    .mobile-button:not(.mavi-tool-button) {
        display: none !important;
    }

    .mavi-mobile-tool-drawer #manual-tutorial-start.manual-tutorial-button {
        display: flex !important;
    }

    html.mavi-mobile-controls-unified #buttonContainer,
    html.mavi-modern-viewer-ui #buttonContainer,
    html.mavi-mobile-controls-unified #ec-control-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }

    html.mavi-mobile-controls-unified #chatbot-toggle,
    html.mavi-mobile-controls-unified #popup-control-button,
    html.mavi-mobile-controls-unified #mavi-view-tools,
    html.mavi-mobile-controls-unified #mavi-view-tools .mavi-tool-button,
    html.mavi-mobile-controls-unified .mavi-tool-rail,
    html.mavi-mobile-controls-unified .mavi-tool-rail .mavi-tool-button {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    html.mavi-mobile-ui-v2 #mavi-view-tools,
    html.mavi-mobile-ui-v2 #mavi-view-tools.mavi-tool-rail--mobile-docked {
        pointer-events: none !important;
    }

    html.mavi-mobile-ui-v2 #mavi-view-tools > #mavi-reset-view-button,
    html.mavi-mobile-ui-v2 #mavi-view-tools > #mavi-mobile-more-button {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    html.mavi-mobile-controls-unified #chatbot-toggle,
    html.mavi-mobile-controls-unified #mavi-view-tools,
    html.mavi-mobile-controls-unified .mavi-xr-controls,
    html.mavi-mobile-controls-unified .poi-menu-container:not(.auto-tour-container) {
        z-index: calc(var(--mavi-layer-toast, 10260) + 10) !important;
    }

    html.mavi-mobile-controls-unified .mavi-hdri-rail,
    html.mavi-mobile-controls-unified .mavi-optional-assets-rail {
        width: var(--mavi-control-size) !important;
        height: var(--mavi-control-size) !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html.mavi-mobile-controls-unified .mavi-hdri-rail {
        left: auto !important;
        right: max(12px, var(--mavi-safe-right)) !important;
        bottom: max(136px, calc(var(--mavi-safe-bottom) + 136px)) !important;
    }

    html.mavi-mobile-controls-unified .mavi-optional-assets-rail {
        left: auto !important;
        right: max(12px, var(--mavi-safe-right)) !important;
        bottom: max(244px, calc(var(--mavi-safe-bottom) + 244px)) !important;
    }

    html.mavi-mobile-controls-unified .mavi-xr-controls {
        right: max(12px, var(--mavi-safe-right)) !important;
        bottom: max(190px, calc(var(--mavi-safe-bottom) + 190px)) !important;
    }

    .mavi-tool-rail > #popup-control-button,
    #mavi-view-tools > #popup-control-button {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--mavi-control-size) !important;
        height: var(--mavi-control-size) !important;
        min-width: var(--mavi-control-size) !important;
        min-height: var(--mavi-control-size) !important;
        display: inline-flex !important;
        transform: none !important;
    }

    #mavi-view-tools > #chatbot-toggle,
    #mavi-view-tools > #manual-tutorial-start,
    #mavi-view-tools > #mavi-hdri-button,
    #mavi-view-tools > #mavi-xr-toggle-button,
    #mavi-view-tools > #mavi-optional-assets-button,
    #mavi-view-tools > #mavi-fullscreen-button,
    #mavi-view-tools > #mavi-info-button,
    #mavi-view-tools > .mavi-tool-button {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: var(--mavi-control-size) !important;
        height: var(--mavi-control-size) !important;
        min-width: var(--mavi-control-size) !important;
        min-height: var(--mavi-control-size) !important;
        flex: 0 0 var(--mavi-control-size) !important;
        display: inline-flex !important;
        transform: none !important;
        z-index: auto !important;
    }

    #mavi-view-tools > #chatbot-toggle.minimized {
        display: none !important;
    }

    .poi-menu-container:not(.auto-tour-container) {
        left: auto !important;
        right: max(12px, var(--mavi-safe-right)) !important;
        bottom: max(82px, calc(var(--mavi-safe-bottom) + 82px)) !important;
        transform: none !important;
        perspective: none !important;
        z-index: var(--mavi-layer-controls, 10040) !important;
    }

    .poi-menu-container:not(.auto-tour-container) .poi-menu-button {
        width: var(--mavi-control-size) !important;
        height: var(--mavi-control-size) !important;
        min-width: var(--mavi-control-size) !important;
        min-height: var(--mavi-control-size) !important;
        border-radius: var(--mavi-ui-radius, 8px) !important;
        border: 1px solid var(--mavi-ui-border, rgba(255, 255, 255, 0.16)) !important;
        background: var(--mavi-ui-bg-strong, rgba(10, 11, 12, 0.95)) !important;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34) !important;
        color: var(--mavi-ui-text, #fff) !important;
        transform: none !important;
    }

    .poi-menu-container:not(.auto-tour-container) .poi-menu-button.active,
    .poi-menu-container:not(.auto-tour-container) .poi-menu-button:hover {
        background: var(--mavi-ui-accent, #ff6600) !important;
        transform: none !important;
    }

    #chatbot-toggle {
        position: fixed !important;
        left: max(12px, var(--mavi-safe-left)) !important;
        right: auto !important;
        bottom: max(14px, calc(var(--mavi-safe-bottom) + 14px)) !important;
        width: var(--mavi-control-size-lg) !important;
        height: var(--mavi-control-size-lg) !important;
        min-width: var(--mavi-control-size-lg) !important;
        min-height: var(--mavi-control-size-lg) !important;
        border-radius: var(--mavi-ui-radius, 8px) !important;
        z-index: calc(var(--mavi-layer-controls, 10040) + 1) !important;
    }

    #chatbot-container.active {
        left: max(12px, var(--mavi-safe-left)) !important;
        right: auto !important;
        bottom: auto !important;
        width: min(420px, calc(100dvw - 24px)) !important;
        max-width: calc(100dvw - 24px) !important;
        max-height: min(72dvh, calc(100dvh - 24px - var(--mavi-safe-top) - var(--mavi-safe-bottom))) !important;
        z-index: var(--mavi-layer-menu-active, 10120) !important;
    }

    #chatbot-messages {
        min-height: 120px !important;
    }

    #tourSelectMenu,
    #poiMenu,
    .locations-menu-content,
    .hdri-menu,
    #mavi-xr-menu,
    .mavi-optional-assets-menu,
    .ec-controls,
    #enhanced-control-panel,
    #dampingPanel,
    .poi-menu,
    .damping-panel {
        width: min(420px, calc(100dvw - 24px)) !important;
        max-width: calc(100dvw - 24px) !important;
        max-height: min(62dvh, calc(100dvh - 96px - var(--mavi-safe-top) - var(--mavi-safe-bottom))) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        border-radius: var(--mavi-ui-radius, 8px) !important;
        z-index: var(--mavi-layer-menu-active, 10120) !important;
    }

    #poiMenu,
    #tourSelectMenu {
        position: fixed !important;
        left: max(12px, var(--mavi-safe-left)) !important;
        right: max(12px, var(--mavi-safe-right)) !important;
        top: auto !important;
        bottom: max(104px, calc(var(--mavi-safe-bottom) + 104px)) !important;
        transform: translateY(8px) scale(0.98) !important;
    }

    #poiMenu.show,
    #tourSelectMenu.show {
        transform: translateY(0) scale(1) !important;
    }

    .annotation-popup.active {
        width: min(340px, calc(100dvw - 24px)) !important;
        max-width: calc(100dvw - 24px) !important;
        max-height: min(64dvh, calc(100dvh - 96px - var(--mavi-safe-top) - var(--mavi-safe-bottom))) !important;
        overflow-y: auto !important;
        border-radius: var(--mavi-ui-radius, 8px) !important;
    }

    .sketchfab-modal.active,
    .credits-modal {
        inset: max(12px, var(--mavi-safe-top)) max(12px, var(--mavi-safe-right)) max(12px, var(--mavi-safe-bottom)) max(12px, var(--mavi-safe-left)) !important;
        max-width: none !important;
        max-height: none !important;
    }
}

@media (max-width: 768px) and (orientation: landscape), (max-height: 480px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
    .mobile-menu-categories {
        width: min(336px, calc(100dvw - 24px)) !important;
        min-width: min(292px, calc(100dvw - 24px)) !important;
        max-width: calc(100dvw - 24px) !important;
        max-height: calc(100dvh - 28px - var(--mavi-safe-top) - var(--mavi-safe-bottom)) !important;
    }

    #chatbot-container.active,
    #tourSelectMenu,
    #poiMenu,
    .locations-menu-content,
    .hdri-menu,
    #mavi-xr-menu,
    .mavi-optional-assets-menu,
    #enhanced-control-panel,
    .annotation-popup.active {
        max-height: calc(100dvh - 24px - var(--mavi-safe-top) - var(--mavi-safe-bottom)) !important;
    }
}

@media (max-width: 768px), (max-height: 480px), (pointer: coarse) {
    html.mavi-mobile-ui-v2 #mavi-view-tools.mavi-tool-rail--mobile-docked {
        position: fixed !important;
        left: auto !important;
        right: max(12px, var(--mavi-safe-right)) !important;
        bottom: max(14px, calc(var(--mavi-safe-bottom) + 14px)) !important;
        width: auto !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: 52px 66px !important;
        gap: 10px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
    }

    html.mavi-mobile-ui-v2 #mavi-view-tools > .mavi-tool-button {
        display: none !important;
    }

    html.mavi-mobile-ui-v2 #mavi-view-tools > #mavi-reset-view-button,
    html.mavi-mobile-ui-v2 #mavi-view-tools > #mavi-mobile-more-button {
        position: static !important;
        display: inline-flex !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    html.mavi-mobile-ui-v2 #mavi-view-tools > #mavi-mobile-more-button {
        width: 66px !important;
        min-width: 66px !important;
    }

    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer {
        left: max(12px, var(--mavi-safe-left)) !important;
        right: max(12px, var(--mavi-safe-right)) !important;
        bottom: max(82px, calc(var(--mavi-safe-bottom) + 82px)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(72dvh, calc(100dvh - 112px - var(--mavi-safe-top) - var(--mavi-safe-bottom))) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateY(12px) !important;
        z-index: calc(var(--mavi-layer-toast, 10260) + 30) !important;
    }

    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer.is-open {
        transform: translateY(0) !important;
    }

    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html.mavi-mobile-ui-v2 .mavi-mobile-tool-group {
        display: contents !important;
    }

    html.mavi-mobile-ui-v2 .mavi-mobile-tool-group-title {
        display: none !important;
    }

    html.mavi-mobile-ui-v2 .mavi-mobile-tool-group-items {
        display: contents !important;
    }

    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer #chatbot-toggle,
    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer #popup-control-button,
    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer #manual-tutorial-start,
    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer #mavi-hdri-button,
    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer #mavi-xr-toggle-button,
    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer #mavi-optional-assets-button,
    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer #mavi-install-button,
    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer .mavi-tool-button {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 66px !important;
        min-width: 0 !important;
        min-height: 66px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px !important;
        transform: none !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer .mavi-tool-button[data-label]::after,
    html.mavi-mobile-ui-v2 .mavi-mobile-tool-drawer #mavi-install-button[data-label]::after {
        content: attr(data-label) !important;
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: normal !important;
        text-align: center !important;
        font: 800 11px/1.15 Arial, sans-serif !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-mavi-overlay-open="true"],
    .mobile-menu-category,
    #chatbot-container,
    .annotation-popup {
        transition: none !important;
        animation: none !important;
    }
}