.fm-capacitor #fm-network-banner[hidden] {
    display: none !important;
}

.fm-capacitor.fm-is-offline,
.fm-capacitor .fm-is-offline {
    /* marker class for offline shell state */
}

/* Capacitor WebView: keep bottom sheets clear of system gesture inset */
.fm-capacitor .fm-quick-add.offcanvas-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.fm-capacitor .modal-dialog {
    margin-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

/*
 * Keyboard / visual viewport (Capacitor Android only).
 *
 * Root cause: app shell locks to 100vh/100dvh + overflow:hidden while Android
 * IME shrinks the *visible* viewport. Fixed bottom nav + that locked height
 * create a large empty band above the keyboard.
 *
 * --fm-vvh is set from visualViewport.height in flowmate-capacitor.js.
 * These rules never apply outside html.fm-capacitor (desktop / mobile browser).
 */

html.fm-capacitor {
    --fm-vvh: 100dvh;
}

html.fm-capacitor body.fm-body {
    height: var(--fm-vvh) !important;
    min-height: var(--fm-vvh) !important;
    max-height: var(--fm-vvh) !important;
}

html.fm-capacitor .fm-shell {
    height: var(--fm-vvh) !important;
    min-height: 0 !important;
    max-height: var(--fm-vvh) !important;
}

html.fm-capacitor body.fm-impersonating .fm-shell {
    height: auto !important;
    max-height: none !important;
}

/*
 * Auth / guest screens (login, register):
 * Tailwind min-h-screen + guest inline 100dvh keep the pre-IME layout height.
 * The blank band is the unused lower half of that oversized flex column while
 * items-center keeps the card in the top/center of the tall box.
 * Bind every min-h-screen ancestor to the live visual viewport height.
 */
html.fm-capacitor body.min-h-screen {
    min-height: var(--fm-vvh) !important;
    height: auto !important;
    max-height: none !important;
}

html.fm-capacitor body.min-h-screen > .min-h-screen {
    min-height: var(--fm-vvh) !important;
    height: var(--fm-vvh) !important;
    max-height: var(--fm-vvh) !important;
}

html.fm-capacitor .fm-auth-stage {
    min-height: 0 !important;
    max-height: var(--fm-vvh);
    /* Prefer top-aligned auth content so IME never leaves a dead centered band */
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html.fm-capacitor.fm-keyboard-open body.min-h-screen {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: var(--fm-vvh) !important;
    max-height: var(--fm-vvh) !important;
}

html.fm-capacitor.fm-keyboard-open body.min-h-screen > .min-h-screen {
    height: var(--fm-vvh) !important;
    max-height: var(--fm-vvh) !important;
    min-height: 0 !important;
    overflow: hidden;
}

/* Keep auth stage bound to the live visual viewport while typing */
html.fm-capacitor.fm-keyboard-open .fm-auth-stage {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: var(--fm-vvh) !important;
    max-height: var(--fm-vvh) !important;
    min-height: 0 !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* While typing: free space reserved for bottom nav / sticky bars */
html.fm-capacitor.fm-keyboard-open .fm-bottom-nav {
    display: none !important;
}

html.fm-capacitor.fm-keyboard-open body.fm-has-mobile-nav .fm-page-content,
html.fm-capacitor.fm-keyboard-open body.fm-has-mobile-nav .fm-main-content {
    padding-bottom: 1rem !important;
}

html.fm-capacitor.fm-keyboard-open body.fm-has-mobile-nav .fm-page-content--has-sticky-actions {
    padding-bottom: 5rem !important;
}

html.fm-capacitor.fm-keyboard-open .fm-sticky-actions {
    bottom: 0 !important;
    padding-bottom: 0.65rem;
}

html.fm-capacitor.fm-keyboard-open .modal.show .modal-dialog {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    max-height: calc(var(--fm-vvh) - 1rem);
    min-height: 0;
    align-items: flex-start;
}

html.fm-capacitor.fm-keyboard-open .modal.show .modal-content {
    max-height: calc(var(--fm-vvh) - 1rem);
    overflow: hidden;
}

html.fm-capacitor.fm-keyboard-open .modal.show .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    max-height: 100%;
    overflow: hidden;
}

html.fm-capacitor.fm-keyboard-open .modal.show .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html.fm-capacitor.fm-keyboard-open .offcanvas.show {
    max-height: var(--fm-vvh);
}