/* Shared mobile chat viewport contract.
 * The visual viewport is measured by mobile-chat-viewport.js so the same rules
 * work in a browser, Android/iOS WebView and the native Flutter shell. */
:root {
    --aceleres-safe-top: max(env(safe-area-inset-top, 0px), var(--ios-native-safe-area-top, 0px));
    --aceleres-safe-right: max(env(safe-area-inset-right, 0px), var(--ios-native-safe-area-right, 0px));
    --aceleres-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--ios-native-safe-area-bottom, 0px));
    --aceleres-safe-left: max(env(safe-area-inset-left, 0px), var(--ios-native-safe-area-left, 0px));
    --aceleres-chat-viewport-height: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --aceleres-chat-viewport-height: 100dvh;
    }
}

@media (max-width: 768px) {
    html.mobile-chat-viewport,
    html.mobile-chat-viewport body {
        height: var(--aceleres-chat-viewport-height, 100vh);
        min-height: 0;
    }

    html.mobile-chat-viewport body.page-with-home,
    html.mobile-chat-viewport body.page-with-home .chat-container,
    html.mobile-chat-viewport body.page-with-home .chat-main {
        height: var(--aceleres-chat-viewport-height, 100vh) !important;
        max-height: var(--aceleres-chat-viewport-height, 100vh) !important;
        min-height: 0 !important;
    }

    html.mobile-chat-viewport body .mobile-header {
        top: 0 !important;
        padding-top: max(1rem, var(--aceleres-safe-top, 0px)) !important;
        padding-right: max(16px, var(--aceleres-safe-right, 0px)) !important;
        padding-left: max(16px, var(--aceleres-safe-left, 0px)) !important;
    }

    /* Fixed composers follow the visible bottom edge when the keyboard is an
       overlay. Flow-based composers (the full-screen shortcut page and text
       modes) use the visual viewport height above instead. */
    html.mobile-chat-viewport body.page-with-home .chat-input-container {
        bottom: calc(12px + var(--aceleres-safe-bottom, 0px) + var(--aceleres-keyboard-inset, 0px)) !important;
    }

    html.mobile-chat-viewport body.page-atalhos-rapidos .chat-input-container,
    html.mobile-chat-viewport body .mg-text-mode .chat-input-container {
        bottom: auto !important;
        padding-bottom: calc(12px + var(--aceleres-safe-bottom, 0px)) !important;
    }

    /* The global header stays the first visible layer. Logos/IVE retain a
       compact chat title immediately below it instead of hiding their title. */
    html.mobile-chat-viewport body.page-mentor .chat-main > .chat-main-header,
    html.mobile-chat-viewport body.page-mentor-gestor .chat-main > .chat-main-header,
    html.mobile-chat-viewport body.page-estrategista .chat-main > .chat-main-header {
        position: fixed !important;
        top: var(--mobile-header-total, 86px) !important;
        left: 0 !important;
        right: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        display: flex !important;
        padding: 8px 12px !important;
        background: var(--bg-secondary, #fff) !important;
        border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
        z-index: 801 !important;
    }

    html.mobile-chat-viewport body.page-mentor .chat-main > .chat-main-header .header-title-wrap,
    html.mobile-chat-viewport body.page-mentor-gestor .chat-main > .chat-main-header .header-title-wrap,
    html.mobile-chat-viewport body.page-estrategista .chat-main > .chat-main-header .header-title-wrap,
    html.mobile-chat-viewport body.page-mentor .chat-main > .chat-main-header .header-subtitle,
    html.mobile-chat-viewport body.page-mentor-gestor .chat-main > .chat-main-header .header-subtitle,
    html.mobile-chat-viewport body.page-estrategista .chat-main > .chat-main-header .header-subtitle {
        display: flex !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html.mobile-chat-viewport body.page-mentor .chat-main > .chat-main-header .header-subtitle,
    html.mobile-chat-viewport body.page-mentor-gestor .chat-main > .chat-main-header .header-subtitle,
    html.mobile-chat-viewport body.page-estrategista .chat-main > .chat-main-header .header-subtitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem !important;
    }

    html.mobile-chat-viewport body.page-mentor .chat-main > .chat-messages,
    html.mobile-chat-viewport body.page-mentor-gestor .chat-main > .chat-messages,
    html.mobile-chat-viewport body.page-estrategista .chat-main > .chat-messages {
        padding-top: calc(var(--mobile-header-total, 86px) + 64px) !important;
    }

    /* Logos and IVE text mode is an in-chat overlay. Keep it below the global
       header, and let its own title remain in normal flex flow above the log. */
    html.mobile-chat-viewport body.page-mentor .mg-text-mode.active,
    html.mobile-chat-viewport body.page-mentor-gestor .mg-text-mode.active,
    html.mobile-chat-viewport body.page-estrategista .mg-text-mode.active {
        top: var(--mobile-header-total, 86px) !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        z-index: 802 !important;
    }

    html.mobile-chat-viewport body .mg-text-mode.active .chat-back-header--mg {
        position: relative !important;
        top: auto !important;
        flex: 0 0 52px !important;
        min-height: 52px !important;
        height: 52px !important;
        padding: 8px 12px !important;
        z-index: 2 !important;
    }

    html.mobile-chat-viewport body .mg-text-mode.active .chat-messages {
        min-height: 0 !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    html.mobile-chat-viewport body .mg-text-mode.active .chat-input-container {
        position: relative !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        padding-bottom: calc(12px + var(--aceleres-safe-bottom, 0px)) !important;
    }

    /* When the keyboard opens, only the visual viewport-backed content area
       changes. Headers retain their fixed position and remain reachable. */
    html.keyboard-visible body .mobile-header,
    html.keyboard-visible body.page-mentor .chat-main > .chat-main-header,
    html.keyboard-visible body.page-mentor-gestor .chat-main > .chat-main-header,
    html.keyboard-visible body.page-estrategista .chat-main > .chat-main-header {
        transform: none !important;
    }

    /* Standalone authentication screens use the same viewport contract as
       the application shell. While a field is focused, let the card grow
       with the available scroller instead of clipping it at 100vh. */
    html.mobile-chat-viewport .login-container {
        height: var(--aceleres-chat-viewport-height, 100vh) !important;
        max-height: var(--aceleres-chat-viewport-height, 100vh) !important;
    }

    html.keyboard-visible .login-container {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    html.keyboard-visible .login-card {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        justify-content: flex-start !important;
    }

    /* Standalone forms do not use layouts.app, but they still consume the
       same visual viewport contract. Let the document become the scroller
       while the keyboard is open instead of clipping a centered card. */
    html.mobile-chat-viewport body.aceleres-standalone-viewport {
        min-height: var(--aceleres-chat-viewport-height, 100vh) !important;
    }

    html.keyboard-visible body.aceleres-standalone-viewport {
        height: auto !important;
        overflow-y: auto !important;
        align-items: flex-start !important;
    }

    html.keyboard-visible body.aceleres-standalone-viewport .authorization-modal,
    html.keyboard-visible body.aceleres-standalone-viewport .invite-card,
    html.keyboard-visible body.aceleres-standalone-viewport .wrap {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Skala owns its internal columns, but its modal backdrop must follow the
       visible viewport when a field inside .modal-body receives focus. */
    html.mobile-chat-viewport body.aceleres-standalone-viewport .sk-app {
        height: var(--aceleres-chat-viewport-height, 100vh) !important;
    }

    html.keyboard-visible body.aceleres-standalone-viewport .modal-backdrop,
    html.keyboard-visible body.aceleres-standalone-viewport .overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    html.keyboard-visible body.aceleres-standalone-viewport .modal,
    html.keyboard-visible body.aceleres-standalone-viewport .modal__content {
        max-height: calc(var(--aceleres-chat-viewport-height, 100vh) - 16px) !important;
    }
}

@media (max-width: 380px) {
    html.mobile-chat-viewport body.page-mentor .chat-main > .chat-main-header,
    html.mobile-chat-viewport body.page-mentor-gestor .chat-main > .chat-main-header,
    html.mobile-chat-viewport body.page-estrategista .chat-main > .chat-main-header {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}