/* ===== Mobile Scroll Background Fix ===== */

/* Fix for blue background that appears when overscrolling on mobile */
html, body {
    background-color: var(--bg) !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: none !important;
}

/* Remove overscroll background color for all browsers */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* Special handling for WebKit browsers (Chrome, Safari) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    html, body {
        background: var(--gradient-bg) !important;
    }

    /* Prevent the blue background when overscrolling */
    ::-webkit-scrollbar {
        width: 0px;
        background: transparent !important;
    }

    ::-webkit-scrollbar-track {
        background: transparent !important;
    }

    ::-webkit-scrollbar-thumb {
        background: transparent !important;
    }
}

/* Fix for Chrome on Android specifically */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px) {
    html, body {
        background-color: var(--bg) !important;
        background: var(--gradient-bg) !important;
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Remove any blue background when scrolling past boundaries */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--gradient-bg);
        z-index: -1000;
        pointer-events: none;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-overflow-scrolling: touch) {
    html, body {
        -webkit-overflow-scrolling: touch !important;
        background: var(--gradient-bg) !important;
        overscroll-behavior: none !important;
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--gradient-bg);
        z-index: -1000;
        pointer-events: none;
    }
}

/* Dark mode specific fixes */
html:not(.light), body:not(.light) {
    background: radial-gradient(ellipse at top, #0f1419 0%, #1a1f2e 100%) !important;
}

html:not(.light) body::before, body:not(.light) body::before {
    background: radial-gradient(ellipse at top, #0f1419 0%, #1a1f2e 100%) !important;
}

/* Light mode specific fixes */
html.light, body.light {
    background: radial-gradient(ellipse at top, #fefefe 0%, #f8fafc 100%) !important;
}

html.light body::before, body.light body::before {
    background: radial-gradient(ellipse at top, #fefefe 0%, #f8fafc 100%) !important;
}