/* =============================================================
   Compatibilidade de viewport/scroll para Safari e WKWebView iOS.

   A classe .is-ios-webkit é aplicada antes do primeiro paint pelo layout.
   Android e desktop não casam nenhum seletor deste arquivo.
   ============================================================= */

html.is-ios-webkit {
    --ios-native-safe-area-top: 0px;
    --ios-native-safe-area-bottom: 0px;
    --ios-effective-safe-area-top: max(env(safe-area-inset-top, 0px), var(--ios-native-safe-area-top));
    --ios-effective-safe-area-bottom: max(env(safe-area-inset-bottom, 0px), var(--ios-native-safe-area-bottom));
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.is-ios-webkit body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* O shell acompanha a viewport realmente visível, inclusive com teclado. */
html.is-ios-webkit body.page-with-home .chat-container {
    height: 100vh !important;
    height: var(--ios-visual-viewport-height, 100vh) !important;
    max-height: var(--ios-visual-viewport-height, 100vh) !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
}

html.is-ios-webkit body.page-with-home .chat-main {
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

html.is-ios-webkit body.is-impersonating.page-with-home .chat-container {
    height: calc(var(--ios-visual-viewport-height, 100vh) - var(--impersonate-banner-height, 40px)) !important;
    max-height: calc(var(--ios-visual-viewport-height, 100vh) - var(--impersonate-banner-height, 40px)) !important;
}

/* /atalhos-rapidos é a referência inicial do contrato mobile. */
html.is-ios-webkit body.page-atalhos-rapidos,
html.is-ios-webkit body.page-atalhos-rapidos .page-with-home,
html.is-ios-webkit body.page-atalhos-rapidos .chat-container {
    height: var(--ios-visual-viewport-height, 100vh) !important;
    max-height: var(--ios-visual-viewport-height, 100vh) !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html.is-ios-webkit body.page-atalhos-rapidos .chat-main {
    height: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

html.is-ios-webkit body.page-atalhos-rapidos .chat-messages,
html.is-ios-webkit body.page-atalhos-rapidos .jarvis-transcript {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-gutter: auto !important;
}

html.is-ios-webkit body.page-atalhos-rapidos :is(
    .home-screen,
    .quick-shortcuts,
    .quick-shortcut-btn,
    .chat-input-container,
    .chat-form,
    .jc-input-row,
    .message-content,
    .message-text
) {
    max-width: 100%;
    min-width: 0;
}

html.is-ios-webkit body.page-atalhos-rapidos :is(img, video, iframe, canvas, svg) {
    max-width: 100%;
}

html.is-ios-webkit body.page-atalhos-rapidos #voiceRecCanvas {
    width: min(280px, 100%);
}

/* Overlays fixos usam a mesma altura medida, sem vazar sob barras/teclado. */
html.is-ios-webkit body.page-atalhos-rapidos :is(
    .voice-rec-overlay,
    .profile-modal,
    .quick-tabs-overlay
) {
    top: var(--ios-visual-viewport-offset-top, 0px) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--ios-visual-viewport-offset-left, 0px) !important;
    width: var(--ios-visual-viewport-width, 100%) !important;
    height: var(--ios-visual-viewport-height, 100vh) !important;
    max-width: 100% !important;
    max-height: var(--ios-visual-viewport-height, 100vh) !important;
    box-sizing: border-box;
}

html.is-ios-webkit body.page-atalhos-rapidos .voice-rec-popup {
    width: min(400px, 100%) !important;
    max-height: calc(var(--ios-visual-viewport-height, 100vh) - 12px) !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    /* O WKWebView pode devolver env(safe-area-inset-top)=0 mesmo ocupando a
       tela inteira. O Flutter injeta o inset físico; deslocamos só o header,
       preservando a composição da WebView e deixando uma folga após a ilha. */
    html.is-ios-webkit.is-ios-webview .mobile-header {
        padding-top: calc(var(--ios-effective-safe-area-top) + 12px) !important;
        padding-left: max(var(--mobile-gutter, 16px), env(safe-area-inset-left, 0px)) !important;
        padding-right: max(var(--mobile-gutter, 16px), env(safe-area-inset-right, 0px)) !important;
    }

    html.is-ios-webkit.is-ios-webview body.page-atalhos-rapidos .chat-input-container {
        padding-bottom: calc(var(--ios-effective-safe-area-bottom) + 16px) !important;
    }

    html.is-ios-webkit body.page-atalhos-rapidos .quick-tabs-panel {
        bottom: max(var(--ios-keyboard-inset, 0px), var(--ios-effective-safe-area-bottom)) !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(var(--ios-visual-viewport-height, 100vh) - 12px) !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }

    html.is-ios-webkit body.page-atalhos-rapidos .quick-tabs-panel.active {
        display: flex !important;
        flex-direction: column;
    }

    html.is-ios-webkit body.page-atalhos-rapidos .quick-tabs-panel__grid {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html.is-ios-webkit body.page-atalhos-rapidos .profile-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(var(--ios-visual-viewport-height, 100vh) - 12px) !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    html.is-ios-webkit body.page-atalhos-rapidos .notification-dropdown {
        top: calc(var(--mobile-header-total, 86px) + 8px) !important;
        bottom: auto !important;
        height: calc(var(--ios-visual-viewport-height, 100vh) - var(--mobile-header-total, 86px) - 8px) !important;
        max-height: calc(var(--ios-visual-viewport-height, 100vh) - var(--mobile-header-total, 86px) - 8px) !important;
        max-width: 100% !important;
    }

    /* O histórico do Conselho cobre a tela, mas seu conteúdo precisa começar
       depois da Dynamic Island/status bar. O WKWebView pode expor env() como
       zero; por isso usamos também a safe area injetada pelo Flutter. */
    html.is-ios-webkit body.page-conselho .conselho-history-overlay {
        top: var(--ios-visual-viewport-offset-top, 0px) !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--ios-visual-viewport-offset-left, 0px) !important;
        width: var(--ios-visual-viewport-width, 100%) !important;
        height: var(--ios-visual-viewport-height, 100vh) !important;
        max-width: 100% !important;
        max-height: var(--ios-visual-viewport-height, 100vh) !important;
    }

    html.is-ios-webkit body.page-conselho .conselho-history-drawer {
        top: var(--ios-visual-viewport-offset-top, 0px) !important;
        bottom: auto !important;
        height: var(--ios-visual-viewport-height, 100vh) !important;
        max-height: var(--ios-visual-viewport-height, 100vh) !important;
        padding-top: var(--ios-effective-safe-area-top) !important;
        padding-bottom: var(--ios-effective-safe-area-bottom) !important;
        box-sizing: border-box;
        overflow: hidden !important;
    }

    html.is-ios-webkit body.page-conselho .conselho-history-drawer__head,
    html.is-ios-webkit body.page-conselho .conselho-history-drawer__search {
        flex: 0 0 auto;
    }

    html.is-ios-webkit body.page-conselho .conselho-history-drawer__body {
        min-height: 0;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* Blur em overlays fullscreen é caro no compositor do WKWebView e pode
       congelar o primeiro gesto. A opacidade continua garantindo contraste. */
    html.is-ios-webkit body.page-atalhos-rapidos :is(
        .quick-tabs-overlay,
        .profile-modal-overlay,
        .voice-rec-overlay,
        .mobile-menu-overlay,
        .notification-dropdown-overlay
    ) {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    html.is-ios-webkit body.page-conselho .conselho-history-overlay {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}