/* =========================================================
   Global mobile sheet system
   - shared bottom/left/right motion
   - fixed header + own scroll body
   - shared backdrop / focus / scroll-lock hooks
   - colors stay owned by the individual page/theme
   ========================================================= */

body.app-sheet-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.app-sheet__panel {
    --app-sheet-drag-x: 0px;
    --app-sheet-drag-y: 0px;
    --app-sheet-drag-opacity: 1;
    --app-sheet-side-width: min(380px, calc(100vw - 38px));
    --app-sheet-top: var(--global-nav-height, 58px);
    --app-sheet-bottom: 0px;
    --app-sheet-radius: 20px;
    --app-sheet-transition: 220ms cubic-bezier(.2, .8, .2, 1);
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    will-change: transform, opacity;
}

.app-sheet__header {
    flex: 0 0 auto !important;
    position: relative;
    z-index: 2;
    touch-action: pan-y;
}

.app-sheet__body {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.app-sheet__footer {
    flex: 0 0 auto !important;
    position: relative;
    z-index: 2;
}

.app-sheet__close {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    border-radius: 12px !important;
    font-size: 1.45rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    touch-action: manipulation;
}

.app-sheet__close:active {
    transform: scale(.94);
}

.app-sheet__drag-handle {
    touch-action: none !important;
}

.app-sheet__panel--dragging {
    transition: none !important;
    user-select: none;
}

.app-sheet__backdrop {
    transition:
        opacity 180ms ease,
        visibility 180ms ease !important;
}

@media (max-width: 900px) {
    .app-sheet__panel--left,
    .app-sheet__panel--right {
        position: fixed !important;
        top: var(--app-sheet-top) !important;
        bottom: var(--app-sheet-bottom) !important;
        width: var(--app-sheet-side-width) !important;
        max-width: calc(100vw - 38px) !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: hidden !important;
        opacity: var(--app-sheet-drag-opacity) !important;
        transition:
            transform var(--app-sheet-transition),
            opacity 180ms ease,
            visibility 180ms ease !important;
    }

    .app-sheet__panel--left {
        right: auto !important;
        left: 0 !important;
        border-radius: 0 var(--app-sheet-radius) var(--app-sheet-radius) 0 !important;
        transform: translateX(calc(-100% - 20px)) !important;
    }

    .app-sheet__panel--right {
        right: 0 !important;
        left: auto !important;
        border-radius: var(--app-sheet-radius) 0 0 var(--app-sheet-radius) !important;
        transform: translateX(calc(100% + 20px)) !important;
    }

    .app-sheet__panel--left.app-sheet__panel--open {
        transform: translateX(var(--app-sheet-drag-x)) !important;
    }

    .app-sheet__panel--right.app-sheet__panel--open {
        transform: translateX(var(--app-sheet-drag-x)) !important;
    }
}

@media (max-width: 900px) {
    .app-sheet__panel--bottom {
        position: absolute !important;
        right: max(0px, env(safe-area-inset-right, 0px)) !important;
        bottom: var(--app-sheet-bottom) !important;
        left: max(0px, env(safe-area-inset-left, 0px)) !important;
        max-height: min(82dvh, 720px) !important;
        overflow: hidden !important;
        border-radius: var(--app-sheet-radius) var(--app-sheet-radius) 0 0 !important;
        transform: translateY(calc(100% + 24px)) !important;
        opacity: var(--app-sheet-drag-opacity) !important;
        transition:
            transform var(--app-sheet-transition),
            opacity 180ms ease !important;
    }

    .app-sheet__panel--bottom.app-sheet__panel--open {
        transform: translateY(var(--app-sheet-drag-y)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-sheet__panel,
    .app-sheet__backdrop,
    .app-sheet__close {
        transition-duration: .01ms !important;
    }
}

@media (max-width: 1200px) {
    .app-sheet__backdrop {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .app-sheet__backdrop.app-sheet__backdrop--open,
    .app-sheet__backdrop.app-sheet__backdrop--closing {
        visibility: visible !important;
    }

    .app-sheet__backdrop.app-sheet__backdrop--open {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .app-sheet__backdrop.app-sheet__backdrop--closing {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   Concrete adapters for the persistent mobile surfaces.
   These selectors intentionally contain the existing IDs/classes so the
   structural AppSheet state wins over older page-specific transforms.
   ========================================================= */
@media (max-width: 760px) {
    html body #app-mobile-menu-overlay.app-sheet__backdrop--closing {
        visibility: visible !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html body.app-mobile-menu-open #app-mobile-menu.app-sheet__panel--bottom.app-sheet__panel--open {
        transform: translateY(var(--app-sheet-drag-y, 0px)) !important;
        opacity: var(--app-sheet-drag-opacity, 1) !important;
    }

    html body #app-mobile-menu.app-sheet__panel--bottom.app-sheet__panel--dragging {
        transition: none !important;
    }
}

@media (max-width: 1200px) {
    body.wiki-page #wiki-isolated-app.wiki-mobile-toc-open #wiki-toc.app-sheet__panel--right.app-sheet__panel--open {
        transform: translateX(var(--app-sheet-drag-x, 0px)) !important;
    }
}

@media (max-width: 900px) {
    body.wiki-page #wiki-isolated-app.wiki-mobile-nav-open #wiki-nav.app-sheet__panel--left.app-sheet__panel--open {
        transform: translateX(var(--app-sheet-drag-x, 0px)) !important;
    }

    html body.tools-page .native-tools-sidebar.app-sheet__panel {
        --app-sheet-side-width: var(--tools-mobile-sidebar-width, min(92vw, 370px));
        --app-sheet-top: var(--global-nav-height, 66px);
        --app-sheet-bottom: calc(var(--tools-app-bottom-nav-reserve, env(safe-area-inset-bottom, 0px)) + var(--log-height, 0px) + 8px);
        --app-sheet-radius: 20px;
        display: grid !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    html body.tools-page.tools-native-sidebar-open .native-tools-sidebar.app-sheet__panel--right.app-sheet__panel--open,
    html.tools-native-sidebar-open body.tools-page .native-tools-sidebar.app-sheet__panel--right.app-sheet__panel--open {
        transform: translateX(var(--native-tools-drawer-drag-x, var(--app-sheet-drag-x, 0px))) !important;
    }

    html body.tools-page .native-tools-sidebar.app-sheet__panel .native-tools-nav.app-sheet__body {
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 900px) and (orientation: portrait),
(hover: none) and (pointer: coarse) and (orientation: portrait) {
    body.tools-page .native-tools-mobile-output-modal.app-sheet__root,
    body.tools-page .native-tools-mobile-command.app-sheet__root {
        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 180ms ease, visibility 180ms ease !important;
    }

    body.tools-page .native-tools-mobile-output-modal.app-sheet__root--open,
    body.tools-page .native-tools-mobile-output-modal.app-sheet__root--closing,
    body.tools-page .native-tools-mobile-command.app-sheet__root--open,
    body.tools-page .native-tools-mobile-command.app-sheet__root--closing {
        visibility: visible !important;
    }

    body.tools-page .native-tools-mobile-output-modal.app-sheet__root--open,
    body.tools-page .native-tools-mobile-command.app-sheet__root--open {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.tools-page .native-tools-mobile-output-modal.app-sheet__root--closing,
    body.tools-page .native-tools-mobile-command.app-sheet__root--closing {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.tools-page .native-tools-mobile-output-panel.app-sheet__panel--bottom,
    body.tools-page .native-tools-mobile-command-panel.app-sheet__panel--bottom {
        --app-sheet-bottom: calc(var(--tools-app-bottom-nav-reserve, env(safe-area-inset-bottom, 0px)) + var(--log-height, 0px) + 8px);
        --app-sheet-radius: 22px;
        top: auto !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        bottom: var(--app-sheet-bottom) !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        width: auto !important;
        max-height: min(74dvh, 680px, calc(100dvh - var(--global-nav-height, 58px) - var(--app-sheet-bottom) - 16px)) !important;
        border-radius: 22px !important;
    }

    body.tools-page .native-tools-mobile-output-panel.app-sheet__panel--bottom {
        min-height: min(44dvh, 360px, calc(100dvh - var(--global-nav-height, 58px) - var(--app-sheet-bottom) - 16px));
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    body.tools-page .native-tools-mobile-command-panel.app-sheet__panel--bottom {
        min-height: min(56dvh, 480px, calc(100dvh - var(--global-nav-height, 58px) - var(--app-sheet-bottom) - 16px));
        grid-template-rows: auto auto minmax(0, 1fr) !important;
    }

    body.tools-page .native-tools-mobile-output-panel.app-sheet__panel--bottom.app-sheet__panel--open,
    body.tools-page .native-tools-mobile-command-panel.app-sheet__panel--bottom.app-sheet__panel--open {
        transform: translateY(var(--app-sheet-drag-y, 0px)) !important;
    }

    body.tools-page .native-tools-mobile-output-header.app-sheet__header,
    body.tools-page .native-tools-mobile-command-header.app-sheet__header {
        cursor: grab;
    }

    body.tools-page .native-tools-mobile-output-panel.app-sheet__panel--dragging .app-sheet__header,
    body.tools-page .native-tools-mobile-command-panel.app-sheet__panel--dragging .app-sheet__header {
        cursor: grabbing;
    }
}

@media (max-width: 1024px) {
    #print-request-root .pr-3d-drawer.app-sheet__panel--bottom {
        --app-sheet-radius: 18px;
        --app-sheet-bottom: 0px;
        max-height: min(82%, 700px) !important;
    }

    #print-request-root .pr-3d-model-view.is-settings-drawer-open .pr-3d-drawer.app-sheet__panel--bottom.app-sheet__panel--open {
        transform: translateY(var(--app-sheet-drag-y, 0px)) !important;
    }

    #print-request-root .pr-3d-drawer.app-sheet__panel--dragging {
        transition: none !important;
    }

    #print-request-root .pr-3d-drawer-body.app-sheet__body {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

@media (max-width: 900px) and (orientation: portrait),
(hover: none) and (pointer: coarse) and (orientation: portrait) {
    body.tools-page .native-tools-mobile-editor-modal.app-sheet__root {
        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 180ms ease, visibility 180ms ease !important;
    }

    body.tools-page .native-tools-mobile-editor-modal.app-sheet__root--open,
    body.tools-page .native-tools-mobile-editor-modal.app-sheet__root--closing {
        visibility: visible !important;
    }

    body.tools-page .native-tools-mobile-editor-modal.app-sheet__root--open {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.tools-page .native-tools-mobile-editor-modal.app-sheet__root--closing {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.tools-page .native-tools-mobile-editor-panel.app-sheet__panel--bottom {
        --app-sheet-bottom: calc(var(--tools-app-bottom-nav-reserve, env(safe-area-inset-bottom, 0px)) + var(--log-height, 0px) + 8px);
        --app-sheet-radius: 22px;
        top: auto !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        bottom: var(--app-sheet-bottom) !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        width: auto !important;
        min-height: min(58dvh, 520px, calc(100dvh - var(--global-nav-height, 58px) - var(--app-sheet-bottom) - 16px));
        max-height: min(78dvh, 720px, calc(100dvh - var(--global-nav-height, 58px) - var(--app-sheet-bottom) - 16px)) !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        overflow: hidden !important;
        border-radius: 22px !important;
    }

    body.tools-page .native-tools-mobile-editor-panel.app-sheet__panel--bottom.app-sheet__panel--open {
        transform: translateY(var(--app-sheet-drag-y, 0px)) !important;
    }

    body.tools-page .native-tools-mobile-editor-value.app-sheet__body {
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        resize: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}


/*
 * Print-3D wechselt oberhalb von 1024 px zurück auf sein Desktop-Sidepanel.
 * Falls das Panel zuvor mobil als AppSheet geöffnet war, bleiben die rein
 * strukturellen AppSheet-Klassen absichtlich erhalten. In diesem schmalen
 * Desktop-Bereich darf der gemeinsame Backdrop deshalb nicht die bestehende
 * Desktop-Drawer-Logik überstimmen.
 */
@media (min-width: 1025px) and (max-width: 1200px) {
    #print-request-root .pr-3d-drawer-backdrop.app-sheet__backdrop {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #print-request-root .pr-3d-model-view.is-settings-drawer-open .pr-3d-drawer-backdrop.app-sheet__backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Globale Suche: auf Smartphones als echtes Bottom-Sheet. */
@media (max-width: 720px) {
    html body .app-global-search-modal.app-sheet__root {
        display: block !important;
        padding: 0 !important;
    }

    html body .app-global-search-panel.app-sheet__panel--bottom {
        --app-sheet-bottom: max(0px, env(safe-area-inset-bottom, 0px));
        --app-sheet-radius: 20px;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        bottom: var(--app-sheet-bottom) !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        width: auto !important;
        max-height: min(82dvh, 720px) !important;
        border-radius: 20px 20px 0 0 !important;
    }

    html body .app-global-search-panel.app-sheet__panel--bottom.app-sheet__panel--open {
        transform: translateY(var(--app-sheet-drag-y, 0px)) !important;
        opacity: var(--app-sheet-drag-opacity, 1) !important;
    }

    html body .app-global-search-results.app-sheet__body {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

/* Smartphone-Querformat: die alten Desktop-Fallbacks der Tools-Modals
   beruecksichtigten die globale Bottom-Bar bisher nicht. */
@media (max-width: 760px) and (orientation: landscape) {
    body.tools-page .native-tools-mobile-output-panel,
    body.tools-page .native-tools-mobile-command-panel,
    body.tools-page .native-tools-mobile-editor-panel {
        bottom: calc(var(--tools-app-bottom-nav-reserve) + var(--log-height, 0px) + 8px) !important;
        max-height: calc(100dvh - var(--global-nav-height, 58px) - var(--tools-app-bottom-nav-reserve) - var(--log-height, 0px) - 16px) !important;
    }
}

/* =========================================================
   Swipe motion: compositor-only movement, one animation owner.
   The closing panel keeps its last drag position, then glides offscreen;
   a cancelled gesture springs back without a transform reset/jump.
   ========================================================= */
.app-sheet__panel.app-sheet__panel--dragging {
    transition: none !important;
    will-change: transform !important;
}

.app-sheet__panel.app-sheet__panel--settling {
    --app-sheet-transition: 390ms cubic-bezier(.22, 1.18, .36, 1);
}

.app-sheet__panel.app-sheet__panel--swipe-closing,
.app-sheet__panel.app-sheet__panel--closing {
    --app-sheet-transition: 300ms cubic-bezier(.18, .72, .18, 1);
}

@media (prefers-reduced-motion: reduce) {
    .app-sheet__panel.app-sheet__panel--settling,
    .app-sheet__panel.app-sheet__panel--swipe-closing,
    .app-sheet__panel.app-sheet__panel--closing {
        --app-sheet-transition: 0ms linear;
    }
}

/* Mobile VirtualKeyboard/VisualViewport: Eingaben bleiben oberhalb der IME. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1200px) {
    body.app-mobile-keyboard-open #app-mobile-nav {
        display: none !important;
        pointer-events: none !important;
    }

    body.app-mobile-keyboard-open .app-sheet__panel--bottom {
        bottom: calc(var(--app-sheet-bottom, 0px) + var(--app-keyboard-inset, 0px)) !important;
        max-height: min(82vh, calc(var(--app-visual-viewport-height, 100dvh) - 16px)) !important;
    }

    body.app-mobile-keyboard-open .app-global-search-panel.app-sheet__panel--bottom {
        max-height: min(720px, calc(var(--app-visual-viewport-height, 100dvh) - 16px)) !important;
    }

    body.app-mobile-keyboard-open .app-global-search-results.app-sheet__body {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    body.app-mobile-keyboard-open .app-mobile-menu {
        max-height: min(70vh, calc(var(--app-visual-viewport-height, 100dvh) - 16px)) !important;
    }
}

/* Bei ueberlagernder Bildschirmtastatur benoetigen lange Formulare
   zusaetzlichen Scrollweg; scroll-padding alleine genuegt hier nicht. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1200px) {
    body.app-mobile-keyboard-open #content.app-content {
        box-sizing: border-box !important;
        padding-bottom: calc(var(--app-keyboard-inset, 0px) + 24px) !important;
        scroll-padding-bottom: calc(var(--app-keyboard-inset, 0px) + 24px);
    }

    body.app-mobile-keyboard-open #wiki-isolated-app .wiki-iso-content-card {
        scroll-padding-bottom: var(--app-keyboard-inset, 0px);
    }
}

/* Querformat: die nicht in AppSheet liegende Suche bleibt trotzdem im
   verkleinerten, sichtbaren Browserfenster und ist intern scrollbar. */
@media (hover: none) and (pointer: coarse) and (min-width: 721px) and (max-width: 1200px) {
    body.app-mobile-keyboard-open .app-global-search-modal {
        padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    }
    body.app-mobile-keyboard-open .app-global-search-panel:not(.app-sheet__panel--bottom) {
        max-height: calc(var(--app-visual-viewport-height, 100dvh) - 16px) !important;
    }
}

/* Die Suche besitzt staerkere produktseitige Bottom-Selektoren.
   Auch hier muss die IME-Verschiebung gewinnen. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1200px) {
    html body.app-mobile-keyboard-open .app-global-search-panel.app-sheet__panel--bottom {
        bottom: calc(var(--app-sheet-bottom, 0px) + var(--app-keyboard-inset, 0px)) !important;
    }
    html body.app-mobile-keyboard-open #print-request-root .pr-3d-drawer.app-sheet__panel--bottom,
    html body.app-mobile-keyboard-open .native-tools-mobile-editor-panel.app-sheet__panel--bottom,
    html body.app-mobile-keyboard-open .native-tools-mobile-command-panel.app-sheet__panel--bottom {
        bottom: calc(var(--app-sheet-bottom, 0px) + var(--app-keyboard-inset, 0px)) !important;
    }
}

/* Reguläre Formular-Dialoge und Login: beim Schreiben bleibt der aktive
   Bereich oberhalb der Tastatur, ohne Viewer/Emulator-Designs zu verändern. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1200px) {
    body.app-mobile-keyboard-open .app-modal-managed-root:not(.app-modal-managed-root--preserve-visual),
    body.app-mobile-keyboard-open #login-screen {
        box-sizing: border-box !important;
        padding-bottom: var(--app-keyboard-inset, 0px) !important;
        overflow-y: auto !important;
    }

    body.app-mobile-keyboard-open .app-modal-managed-dialog:not(.app-modal-managed-dialog--preserve-visual),
    body.app-mobile-keyboard-open #login-screen .login-box {
        max-height: calc(var(--app-visual-viewport-height, 100dvh) - 20px) !important;
        overflow-y: auto !important;
    }
}