/*
 * Mobile browser normalization layer.
 *
 * Scope: mobile web only (linked with media=max-width:1023px). This keeps the
 * desktop website and the React Native APK independent from iOS workarounds.
 * Values reuse the Material 3 tokens declared in mobile.css.
 */
@media (max-width: 1023px) {
    :root {
        --hapai-mobile-header-height: 80px;
        --hapai-mobile-nav-height: 80px;
        --hapai-safe-bottom: env(safe-area-inset-bottom, 0px);
        --hapai-visual-viewport-height: calc(var(--vh, 1vh) * 100);
    }

    html,
    body {
        min-height: var(--hapai-visual-viewport-height);
        min-height: -webkit-fill-available;
        overscroll-behavior-x: none;
    }

    /* Safari reserves the home-indicator area outside the layout viewport. */
    body {
        padding-bottom: calc(var(--hapai-mobile-nav-height) + var(--hapai-safe-bottom));
    }

    .main,
    .page-content,
    .home-page,
    .profile-page,
    .auth-page,
    .item-detail-page,
    .create-item-page,
    .search-page,
    .category-page {
        padding-bottom: calc(var(--hapai-mobile-nav-height) + var(--hapai-safe-bottom));
    }

    .mobile-bottom-nav {
        height: calc(var(--hapai-mobile-nav-height) + var(--hapai-safe-bottom)) !important;
        padding-bottom: calc(8px + var(--hapai-safe-bottom)) !important;
        /* iOS Safari needs a composited fixed layer while its toolbar moves. */
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .scroll-to-top {
        bottom: calc(var(--hapai-mobile-nav-height) + var(--hapai-safe-bottom) + 20px) !important;
    }

    /* CSS :has() is unavailable on older iOS WebKit. The JS module applies
       equivalent state classes to the body for these layout-only cases. */
    body.hapai-has-messages-page {
        padding-bottom: 0 !important;
    }

    body.hapai-has-messages-page .main,
    body.hapai-has-messages-page .messages-page {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    body.hapai-has-error-page .main {
        min-height: calc(var(--hapai-visual-viewport-height) - var(--hapai-mobile-header-height)) !important;
    }

    body.hapai-has-profile-page .mobile-filters {
        display: none !important;
    }

    /* Native controls otherwise receive WebKit-specific inner shadows and
       font scaling, which changes Material 3 field geometry on iOS. */
    input,
    textarea,
    select,
    button {
        -webkit-appearance: none;
        appearance: none;
        font-size: max(16px, 1em);
    }

    select {
        -webkit-appearance: menulist;
        appearance: auto;
    }

    .material-icons,
    .nbrb-icon {
        display: inline-block;
        flex-shrink: 0;
    }

    /* Material Icons uses text ligatures (for example, "menu" → its glyph),
       therefore it must not inherit a ligature reset from a browser override. */
    .material-icons {
        font-variant-ligatures: discretionary-ligatures;
        -webkit-font-variant-ligatures: discretionary-ligatures;
    }

    .nbrb-icon {
        font-variant-ligatures: normal;
        -webkit-font-variant-ligatures: normal;
    }
}

@media (max-width: 480px) {
    :root { --hapai-mobile-nav-height: 70px; }
}