/*
 * 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;
    }

    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;
    }
}