.mobile-settings-sheet-content {
    display: contents;
}

.mobile-settings-sheet-drag-zone {
    display: none;
}

@media (max-width: 767px), (max-height: 600px) {
    html.mobile-view body:not(.admin-page) .settings-drawer-overlay.mobile-settings-sheet-ready {
        --mobile-settings-sheet-bottom: calc(var(--mobile-bottom-nav, 72px) + env(safe-area-inset-bottom) + 8px);
        --mobile-settings-sheet-top-gap: max(10px, env(safe-area-inset-top));
        position: fixed;
        inset: 0;
        z-index: 1885;
        display: block !important;
        padding: 0;
        background: rgba(3, 7, 18, 0.38);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        touch-action: none;
        overscroll-behavior: contain;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        transition:
            opacity 280ms ease,
            visibility 0s linear 440ms;
    }

    html.mobile-view body:not(.admin-page) .settings-drawer-overlay.mobile-settings-sheet-ready.open {
        background: rgba(3, 7, 18, 0.38);
        opacity: var(--mobile-settings-scrim-opacity, 1);
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    html.mobile-view body:not(.admin-page) .settings-drawer-overlay.mobile-settings-sheet-ready .settings-drawer {
        position: fixed !important;
        top: auto !important;
        right: 10px !important;
        bottom: var(--mobile-settings-sheet-bottom) !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        height: clamp(330px, 54dvh, 520px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--mobile-settings-sheet-bottom) - var(--mobile-settings-sheet-top-gap)) !important;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid var(--yana-mobile-border, rgba(148, 163, 184, 0.34));
        border-radius: 20px 20px 12px 12px !important;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, calc(100% + 28px), 0) !important;
        transform-origin: center bottom;
        transition:
            height 440ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 440ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 220ms ease,
            visibility 0s linear 440ms;
        will-change: height, transform;
    }

    html.mobile-view body:not(.admin-page) .settings-drawer-overlay.mobile-settings-sheet-ready.open .settings-drawer {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, var(--mobile-settings-sheet-drag-y, 0px), 0) !important;
        transition-delay: 0s;
    }

    html.mobile-view body:not(.admin-page) .settings-drawer-overlay.mobile-settings-sheet-ready.settings-sheet-expanded .settings-drawer {
        height: calc(100dvh - var(--mobile-settings-sheet-bottom) - var(--mobile-settings-sheet-top-gap)) !important;
    }

    html.mobile-view body:not(.admin-page) .settings-drawer-overlay.mobile-settings-sheet-ready.settings-sheet-dragging .settings-drawer {
        transition: none;
        user-select: none;
    }

    html.mobile-view body:not(.admin-page) .settings-drawer-overlay.mobile-settings-sheet-ready .settings-drawer::before {
        display: none !important;
    }

    html.mobile-view body:not(.admin-page) .mobile-settings-sheet-drag-zone {
        flex: 0 0 34px;
        display: grid;
        place-items: center;
        width: 100%;
        min-height: 34px;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        cursor: grab;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    html.mobile-view body:not(.admin-page) .settings-sheet-dragging .mobile-settings-sheet-drag-zone {
        cursor: grabbing;
    }

    html.mobile-view body:not(.admin-page) .mobile-settings-sheet-handle {
        display: block;
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: #c5c8cf;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.58);
        transition: width 180ms ease, background-color 180ms ease;
    }

    html.mobile-view body:not(.admin-page) .mobile-settings-sheet-drag-zone:focus-visible {
        outline: 2px solid var(--yana-mobile-gold, #d4af37);
        outline-offset: -4px;
    }

    html.mobile-view body:not(.admin-page) .mobile-settings-sheet-drag-zone:active .mobile-settings-sheet-handle {
        width: 52px;
    }

    html.mobile-view body:not(.admin-page) .mobile-settings-sheet-content {
        position: relative;
        flex: 1 1 auto;
        display: block;
        min-height: 0;
        padding: 4px 16px calc(18px + env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
    }

    html.mobile-view body:not(.admin-page) .mobile-settings-sheet-content::-webkit-scrollbar {
        width: 4px;
    }

    html.mobile-view body:not(.admin-page) .mobile-settings-sheet-content::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(100, 116, 139, 0.42);
    }

    html.mobile-view body:not(.admin-page) .mobile-settings-sheet-content .settings-close {
        top: 6px !important;
    }

    html.mobile-view body:not(.admin-page) .mobile-settings-sheet-content > h2 {
        margin-top: 10px;
    }

    html.mobile-view body.dark-mode:not(.admin-page) .mobile-settings-sheet-handle {
        background: #656972;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16);
    }

    html.mobile-view body.mobile-settings-sheet-open:not(.admin-page) {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.mobile-view body:not(.admin-page) .settings-drawer-overlay.mobile-settings-sheet-ready,
    html.mobile-view body:not(.admin-page) .settings-drawer-overlay.mobile-settings-sheet-ready .settings-drawer {
        transition-duration: 180ms, 180ms, 140ms, 180ms;
    }
}