/* ===================================
   FIX CRÍTICO: WebViews de Redes Sociais
   Instagram, Facebook, TikTok, Snapchat, etc.
   
   Problema: WebViews bloqueiam scroll vertical
   Solução: Reset forçado de overflow + touch-action
   =================================== */

/* Reset global para WebViews - aplicado via JS quando detectado */
html.webview-detected,
html.webview-detected body {
    /* Forçar scroll vertical */
    overflow-x: clip !important;
    /* Evita horizontal sem bloquear vertical */
    overflow-y: auto !important;

    /* Altura dinâmica para webviews */
    height: auto !important;
    min-height: 100% !important;
    min-height: 100dvh !important;
    /* Dynamic viewport height */

    /* Scroll momentum iOS */
    -webkit-overflow-scrolling: touch !important;

    /* Touch action - CRÍTICO para scroll funcionar */
    touch-action: pan-y pinch-zoom !important;

    /* Garantir que não trave */
    overscroll-behavior-y: auto !important;

    /* Posicionamento */
    position: relative !important;
}

/* Instagram WebView específico */
html.instagram-webview,
html.instagram-webview body {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Facebook WebView específico */
html.facebook-webview,
html.facebook-webview body {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

/* TikTok WebView específico */
html.tiktok-webview,
html.tiktok-webview body {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Messenger WebView */
html.messenger-webview,
html.messenger-webview body {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Garantir que elementos fixed não bloqueiem touch */
html.webview-detected #neural-bg,
html.webview-detected .bg-noise,
html.webview-detected canvas {
    pointer-events: none !important;
    touch-action: none !important;
}

/* Garantir que seções permitam scroll */
html.webview-detected section {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
}

/* Container principal não deve bloquear */
html.webview-detected .max-w-7xl {
    overflow: visible !important;
}

/* Garantir que modais não travem quando fechados */
html.webview-detected #mobile-menu:not(.show) {
    pointer-events: none !important;
    touch-action: none !important;
}

/* Hero section - garantir scroll */
html.webview-detected #hero {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Usar 100svh (Small Viewport Height) em vez de 100vh */
/* Isso resolve o problema de barras de navegação em webviews */
@supports (height: 100svh) {
    html.webview-detected {
        min-height: 100svh !important;
    }

    html.webview-detected #neural-bg {
        height: 100svh !important;
    }
}

/* Fallback para navegadores sem suporte a svh */
@supports not (height: 100svh) {
    html.webview-detected {
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }

    html.webview-detected #neural-bg {
        height: 100vh !important;
        height: -webkit-fill-available !important;
    }
}

/* ===================================
   BANNER OPCIONAL: Sugerir abrir no navegador
   Desativado por padrão - ativar via JS se necessário
   =================================== */

.webview-open-browser-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    padding: 12px 16px;

    background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
    color: white;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);

    animation: slideUpBanner 0.3s ease-out;
}

@keyframes slideUpBanner {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.webview-open-browser-banner .banner-text {
    flex: 1;
}

.webview-open-browser-banner .banner-text strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.webview-open-browser-banner .banner-text span {
    opacity: 0.9;
    font-size: 12px;
}

.webview-open-browser-banner .banner-btn {
    padding: 8px 16px;
    background: white;
    color: #1e40af;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease;
}

.webview-open-browser-banner .banner-btn:active {
    transform: scale(0.95);
}

.webview-open-browser-banner .banner-close {
    padding: 8px;
    background: transparent;
    border: none;
    color: white;
    opacity: 0.7;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.webview-open-browser-banner .banner-close:hover {
    opacity: 1;
}

/* Ajuste de padding no body quando banner está visível */
body.has-webview-banner {
    padding-bottom: 70px !important;
}

/* ===================================
   MOBILE-SPECIFIC WEBVIEW FIXES
   =================================== */

@media (max-width: 768px) {

    html.webview-detected,
    html.webview-detected body {
        /* Reforçar scroll em mobile */
        overflow-x: hidden !important;
        overflow-y: scroll !important;

        /* Altura */
        height: auto !important;
        min-height: 100% !important;

        /* Touch */
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y pinch-zoom !important;

        /* Não travar overscroll */
        overscroll-behavior: auto !important;
    }

    /* Garantir que elementos não bloqueiem */
    html.webview-detected * {
        touch-action: inherit;
    }

    /* Elementos decorativos não devem capturar touch */
    html.webview-detected .absolute,
    html.webview-detected .fixed:not(nav):not(#mobile-menu) {
        pointer-events: none !important;
    }

    /* Exceto elementos interativos */
    html.webview-detected button,
    html.webview-detected a,
    html.webview-detected input,
    html.webview-detected select,
    html.webview-detected textarea,
    html.webview-detected [role="button"],
    html.webview-detected nav,
    html.webview-detected #mobile-menu.show {
        pointer-events: auto !important;
    }
}