/**
 * Mobile scroll/compositing — load after mobile-theme.css.
 *
 * WebKit (especially iOS Safari): sticky/fixed shell chrome with backdrop-filter
 * plus many small frosted layers on cards forces expensive compositing; the browser
 * often defers painting the scrolling document during momentum → empty 16:9 thumb
 * boxes until scroll settles. Fix: no backdrop blur on shell + listing chrome; solid fills.
 */

@media (max-width: 992px) {
    /* Top bar — keep gradient from header-brand / mobile-theme, drop glass */
    .shell-header,
    .shell-header.shell-header--desi {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .shell-header.shell-header--desi {
        box-shadow:
            0 2px 16px rgba(0, 0, 0, 0.42),
            inset 0 -1px 0 rgba(185, 28, 28, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    [data-theme="light"] .shell-header.shell-header--desi {
        box-shadow:
            0 2px 16px rgba(15, 23, 42, 0.06),
            inset 0 -1px 0 rgba(15, 23, 42, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .shell-header:not(.shell-header--desi) {
        background: rgba(10, 10, 10, 0.96) !important;
    }

    /* Bottom pill nav */
    .shell-bottom-nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(12, 16, 28, 0.96) !important;
    }

    [data-theme="light"] .shell-bottom-nav {
        background: rgba(248, 250, 252, 0.97) !important;
        border-color: rgba(15, 23, 42, 0.12);
    }

    /* Drawer (when open): opaque instead of glass — dark mode only */
    .shell-drawer-overlay {
        background: rgba(2, 6, 23, 0.62) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .shell-drawer.shell-drawer--pro {
        background: rgba(15, 23, 42, 0.97) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Light theme: keep drawer + overlay readable (was same dark panel as dark mode → illegible nav) */
    body[data-theme="light"] .shell-drawer-overlay {
        background: rgba(15, 23, 42, 0.4) !important;
    }

    body[data-theme="light"] .shell-drawer.shell-drawer--pro {
        background: #f8fafc !important;
        border-right: 1px solid rgba(15, 23, 42, 0.12) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.98),
            10px 0 40px rgba(15, 23, 42, 0.12) !important;
    }

    body[data-theme="light"] .shell-drawer.shell-drawer--pro::before {
        background: radial-gradient(ellipse 85% 50% at 50% -5%, rgba(59, 130, 246, 0.07), transparent 58%),
            radial-gradient(ellipse 55% 35% at 100% 100%, rgba(99, 102, 241, 0.05), transparent 50%) !important;
    }

    /* Many per-card backdrop blurs stack with the scrolling layer */
    .video-card-premium__badge,
    .video-card-premium--airy .video-card-premium__body,
    .latest-shell-v2 .video-card-premium--airy .video-card-premium__body {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .video-card-premium--airy .video-card-premium__body {
        background: rgba(24, 14, 16, 0.94) !important;
    }

    [data-theme="light"] .video-card-premium--airy .video-card-premium__body {
        background: rgba(255, 252, 248, 0.96) !important;
    }

    .trending-card-v2__rank {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .trending-scroll-btn {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .video-card-premium {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    }

    .video-card-premium:hover {
        transform: none;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
    }

    .video-card-premium:hover .video-card-premium__thumb img {
        transform: none;
    }

    /* Own layer for main column — reduces blank tiles under fixed bottom nav on some WebViews */
    #main-content {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.shell-nav a,
.shell-bottom-nav a,
.shell-drawer a {
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.shell-nav a:active,
.shell-bottom-nav a:active,
.shell-drawer a:active {
    opacity: 0.82;
    transform: scale(0.98);
}