/*
 * Only applied after the official Flutter app announces itself.
 * Flutter supplies the top safe area; this sheet keeps the web chrome flush
 * with the bottom safe area instead of leaving an iPhone home-indicator gap.
 */
@media (max-width: 720px) {
    html.allen-native-webview {
        min-height: 100%;
        background: #ffffff;
        /* The application is a fixed UI, not a reader.  Do not let Android
           WebView's text inflation change the geometry when the device font
           preference is larger.  The browser version is deliberately left
           alone, so users can still use its normal accessibility controls. */
        -webkit-text-size-adjust: none !important;
        text-size-adjust: none !important;
    }

    html.allen-native-webview body,
    html.allen-native-webview button,
    html.allen-native-webview input,
    html.allen-native-webview select,
    html.allen-native-webview textarea {
        -webkit-text-size-adjust: none !important;
        text-size-adjust: none !important;
    }

    body.liquid-body.allen-native-webview {
        min-height: 100%;
        overscroll-behavior-y: none;
    }

    body.liquid-body.allen-native-webview:not(.home-screen-page) .app-shell {
        width: 100%;
        min-height: 100dvh;
        padding-top: 76px !important;
        padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    }

    body.liquid-body.allen-native-webview:not(.home-screen-page) .app-topbar {
        position: fixed;
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 76px !important;
        height: 76px;
        box-sizing: border-box;
        margin: 0;
        padding: 10px 18px !important;
        transform: none !important;
        border: 0;
        border-bottom: 1px solid #ece7f3;
        border-radius: 0;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 4px 18px rgba(35, 18, 86, .07);
    }

    body.liquid-body.allen-native-webview:not(.home-screen-page) .app-topbar .brand-logo-appmark {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        box-shadow: 0 6px 14px rgba(37, 16, 105, .16);
    }

    body.liquid-body.allen-native-webview:not(.home-screen-page) .app-topbar .topbar-actions .header-chip {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        background: #f5f3fa;
    }

    body.liquid-body.allen-native-webview:not(.home-screen-page) .app-topbar .topbar-actions .notification-header-link {
        left: 18px;
    }

    body.liquid-body.allen-native-webview:not(.home-screen-page) .app-topbar .topbar-actions .header-chip.is-strong {
        right: 18px;
    }

    body.liquid-body.allen-native-webview:not(.home-screen-page) .app-main {
        padding-top: 10px;
    }

    body.liquid-body.allen-native-webview .app-bottom-nav {
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-height: 76px;
        box-sizing: border-box;
        padding: 8px 9px calc(8px + env(safe-area-inset-bottom)) !important;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-radius: 0;
        background: linear-gradient(180deg, #2a2144, #1b152e);
        box-shadow: 0 -8px 20px rgba(24, 12, 58, .16);
        transform: none !important;
    }

    body.liquid-body.allen-native-webview .app-bottom-nav > .bottom-nav-item {
        min-height: 54px;
        padding: 4px 2px;
        border-radius: 13px;
        font-size: 10px;
        line-height: 1.2;
    }

    body.liquid-body.allen-native-webview .app-bottom-nav > .bottom-nav-item i {
        font-size: 19px;
    }
}