/**
 * GX ONE - Estilos Responsive para Móvil y Tablets
 * Adapta el footer, input, diálogo y navegación a pantallas pequeñas
 * para que sea posible interactuar con el agente en celulares.
 */

/* ============================================
   SAFE AREA - Dispositivos con notch / home indicator
   ============================================ */
/* Más espacio abajo para ver el indicador de sección (badge) */
#footerStack {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

#chatInputContainer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* ============================================
   MOBILE: Menús abajo visibles - grid/wrap, sin swipe que cambie sección
   ============================================ */
@media (max-width: 767px) {
    /* Todos los menús visibles en grid, no scroll horizontal */
    .navigation-bar[data-mode="masters"],
    .navigation-bar[data-mode="depths"] {
        overflow-x: visible !important;
        overflow-y: visible !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        max-height: none !important;
    }
    .navigation-bar[data-mode="depths"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
        justify-content: center !important;
    }
    .nav-master-btn,
    .nav-depth-btn {
        flex-shrink: 0 !important;
    }
}

/* ============================================
   TABLET (max-width: 767px) Y TELÉFONO HORIZONTAL
   El teléfono acostado (844×390) NO entra por ancho: sin la segunda condición
   el footer usaba el layout desktop (wordmark 150px + input 55px) y quedaba
   aplastado — logo empujado arriba, input pisando el borde de colores y el
   micrófono imposible de tocar (reporte usuario 2026-07-15).
   ============================================ */
@media (max-width: 767px), ((max-height: 500px) and (orientation: landscape)) {
    /* Footer: reducir padding y altura mínima */
    :root {
        --footer-h-collapsed: 6vh;
        --footer-h-expanded: 35vh;
        --footer-pad-x: 12px;
        --footer-pad-y: 6px;
    }

    /* Logo: en móvil solo el isotipo (globito) — el wordmark de 150px no entra
       y aplastaba el input. El badge de rol (Fan/Creador) queda debajo. */
    .gx-logo-footer {
        content: url("/media/img/globai-icon-white.png");
        width: 40px !important;
        max-height: 30px !important;
        margin-right: 4px !important;
    }
    .logo-and-role-wrap {
        margin-right: 4px !important;
    }

    /* Input row: gaps más pequeños */
    .input-row {
        gap: 6px !important;
        max-height: 60px !important;
    }

    /* Botón adjuntar más compacto */
    .btn-attach {
        width: 38px !important;
        height: 38px !important;
        font-size: 20px !important;
        margin-right: 4px !important;
    }

    /* Input wrapper e input más compactos - micrófono siempre visible en portrait */
    .gx-input-wrap {
        height: 48px !important;
        min-width: 0 !important; /* Permite encoger para que el micrófono quepa */
        flex: 1 1 auto !important;
    }

    #userInput {
        height: 48px !important;
        /* Sin min/max el textarea se quedaba en los 55px del index base
           (min-height le gana a height) y desbordaba el wrap de 48px:
           la línea del placeholder quedaba pegada ARRIBA. */
        min-height: 48px !important;
        max-height: 48px !important;
        font-size: 16px !important; /* Evita zoom en iOS al enfocar */
        /* Padding vertical: centra la línea (48px alto − 21.6px línea ≈ 13px) */
        padding: 13px 10px !important;
        min-width: 0 !important; /* Permite encoger y dejar espacio al micrófono */
    }

    /* Micrófono dentro del input: siempre visible en móvil vertical */
    .btn-mic-dictate {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .btn-mic-dictate .mic-icon {
        width: 20px !important;
        height: 20px !important;
    }

    /* Voice realtime: solo icono, más compacto - 1.5 visible en portrait y landscape */
    .voice-realtime-toggle {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        min-width: 48px !important;
        width: 48px !important;
        padding: 8px !important;
        height: 48px !important;
    }

    .voice-realtime-toggle .toggle-label {
        display: none !important;
    }

    .voice-realtime-toggle .mic-icon {
        width: 22px !important;
        height: 22px !important;
    }

    /* Anillo verde “hablando”: anclado al botón (evita desfase en móvil) */
    /* Efecto verde "hablando" ahora es box-shadow animado, no ::before */

    /* Diálogo en móvil: tope sugerido cuando no lo gobierna JS */
    .dialog-area {
        max-height: min(35vh, 200px);
    }

    /* Expandido: altura = contenido (JS + !important); no fijar min(35vh) que anulaba el adaptativo */
    #chatInputContainer.footer-expanded .dialog-area[aria-hidden="false"],
    #chatInputContainer.navigation-active.footer-expanded #dialogArea[aria-hidden="false"],
    #chatInputContainer.footer-expanded.menu-visible #dialogArea[aria-hidden="false"] {
        max-height: none;
    }

    /* Barra de navegación depths: quitar padding lateral excesivo */
    .navigation-bar[data-mode="depths"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .nav-depth-btn {
        min-width: 0 !important;
        max-width: 140px !important;
        font-size: 12px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .nav-depth-btn-menu {
        min-width: 180px !important;
        width: 180px !important;
        max-width: 180px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
}

/* ============================================
   MÓVIL PEQUEÑO (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    :root {
        --footer-h-collapsed: 7vh;
        --footer-h-expanded: 45vh;
        --footer-pad-x: 10px;
        --footer-pad-y: 5px;
    }

    /* Isotipo (globito): prioridad al input para poder escribir/hablar */
    .gx-logo-footer {
        width: 36px !important;
        max-height: 26px !important;
        margin-right: 2px !important;
    }

    .input-row {
        gap: 4px !important;
        max-height: 56px !important;
    }

    .btn-attach {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        margin-right: 2px !important;
    }

    .gx-input-wrap {
        height: 44px !important;
        min-width: 0 !important; /* Permite encoger para que el micrófono quepa */
        flex: 1 1 auto !important;
    }

    #userInput {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        font-size: 16px !important;
        /* 11px arriba/abajo centra la línea en 44px; menos padding derecho para el micrófono */
        padding: 11px 6px 11px 8px !important;
        min-width: 0 !important; /* Permite encoger y dejar espacio al micrófono */
    }

    #userInput::placeholder {
        font-size: 14px !important;
    }

    /* Micrófono siempre visible en móvil pequeño vertical */
    .btn-mic-dictate {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .btn-mic-dictate .mic-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .voice-realtime-toggle {
        min-width: 44px !important; /* Mínimo 44px para touch target accesible */
        width: 44px !important;
        padding: 6px !important;
        height: 44px !important;
    }

    .voice-realtime-toggle .mic-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .dialog-area {
        max-height: min(40vh, 180px);
    }

    #chatInputContainer.footer-expanded .dialog-area[aria-hidden="false"],
    #chatInputContainer.navigation-active.footer-expanded #dialogArea[aria-hidden="false"],
    #chatInputContainer.footer-expanded.menu-visible #dialogArea[aria-hidden="false"] {
        max-height: none;
    }

    .message {
        font-size: 14px !important;
        padding: 6px 12px !important;
    }

    .navigation-bar[data-mode="depths"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .nav-depth-btn {
        min-width: 0 !important;
        max-width: 120px !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .nav-depth-btn-menu {
        min-width: 140px !important;
        width: 140px !important;
        max-width: 140px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    .nav-master-btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

/* ============================================
   MÓVIL MUY PEQUEÑO (max-width: 360px)
   Opción: ocultar logo para maximizar input
   ============================================ */
@media (max-width: 360px) {
    .gx-logo-footer {
        width: 32px !important;
        max-height: 24px !important;
        margin-right: 2px !important;
    }

    .btn-attach {
        width: 34px !important;
        height: 34px !important;
    }

    .voice-realtime-toggle {
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .gx-input-wrap {
        height: 40px !important;
        min-width: 0 !important;
    }

    #userInput {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        min-width: 0 !important;
        /* 9px arriba/abajo centra la línea en 40px */
        padding: 9px 4px 9px 6px !important;
    }

    /* Micrófono siempre visible incluso en pantallas muy pequeñas */
    .btn-mic-dictate {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        min-width: 36px !important;
        width: 36px !important;
        height: 36px !important;
    }

    .btn-mic-dictate .mic-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ============================================
   ORIENTACIÓN LANDSCAPE EN MÓVIL
   Página completa, logo pequeño, más espacio
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
    /* Página completa: usar 100dvh para maximizar espacio (oculta barra dirección del navegador) */
    html, body {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }
    #panelVisual {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    :root {
        --footer-h-expanded: 55vh;
    }

    /* Isotipo también en horizontal */
    .gx-logo-footer {
        content: url("/media/img/globai-icon-white.png");
        width: 34px !important;
        max-height: 26px !important;
        margin-right: 4px !important;
    }

    /* 1.5 Botón de voz visible: asegurar que el micrófono se muestre en horizontal y vertical */
    .voice-realtime-toggle {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        min-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .btn-mic-dictate {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
    }

    .dialog-area {
        max-height: min(30vh, 120px);
    }

    #chatInputContainer.footer-expanded .dialog-area[aria-hidden="false"],
    #chatInputContainer.navigation-active.footer-expanded #dialogArea[aria-hidden="false"] {
        max-height: none;
    }
}

/* ============================================
   BOTÓN MANO - Oculto (no sirve, quitado por decisión UX)
   ============================================ */
#mobileMenuToggle {
    display: none !important;
}

@media (max-width: 767px) {
    /* Ocultar menú cuando está colapsado por el botón (legacy, el botón ya no se muestra) */
    body.mobile-nav-collapsed #navigation-bar {
        display: none !important;
    }
}

/* Popover + en móvil: compacto, sin scroll, solo alto de botones */
@media (max-width: 767px) {
    .attach-popover-content {
        bottom: 58px;
        left: 12px;
        width: 220px;
        font-size: 13px;
    }
    .attach-popover-content .attach-option-line {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ============================================
   TELÉFONO HORIZONTAL - Botón "Explorar sección" visible
   El footer es fijo (z-index 99999) y en pantallas bajas tapaba el botón
   "Explorar [sección] →" del landing: nunca recibía el click. Reservar
   espacio inferior real para que el bloque de texto quede SIEMPRE por
   encima del input.
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .gx-landing-section-text {
        /* 135px (antes 100): pedido usuario 2026-07-16 — en horizontal el botón
           Explore quedaba ~16px detrás del input (medido 844×390). Misma ancla
           que la portada; el JS fine-tune lo afina a 12px reales del footer. */
        padding-bottom: calc(100vh - 100dvh + 135px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============================================
   SECCIONES DEL LANDING - Texto a la IZQUIERDA en móvil vertical
   index.html:1895 pasa .gx-landing-section-text de fila a columna en ≤680
   pero hereda el align-items:flex-end de la fila (=abajo); en columna el eje
   cruzado es horizontal → flex-end = pegado a la DERECHA: los títulos cortos
   ("Lo que leo") quedaban flotando al medio. En columna: estirar al ancho,
   texto arranca a la izquierda como en desktop.
   ============================================ */
@media (max-width: 680px) {
    .gx-landing-section-text {
        align-items: stretch;
    }
}

/* ============================================
   PORTADA - CTA "Hablá con..." nunca detrás del input fijo
   El overlay del hero se centra con translateY(-50%) (index.html:1388): en
   teléfonos el botón de la portada caía justo debajo del footer y no recibía
   el click. En pantallas chicas se ancla al fondo, por ENCIMA del input.
   ============================================ */
/* Dos compensaciones sobre el alto del footer (~100px):
   (a) 100vh − 100dvh: el hero mide 100vh (viewport grande, sin barra del
       navegador) pero el fold visible es 100dvh;
   (b) ~51px extra: en el estado inicial (scrollTop 0) el nav sticky está en
       el flujo y empuja el hero, dejando sus últimos ~51px bajo el fold.
   Medido en 390×844: bottom 130px dejaba el CTA 19px ADENTRO del footer. */
@media (max-width: 767px) and (orientation: portrait) {
    .gx-landing-hero-overlay {
        /* 165px (antes 185): pedido usuario 2026-07-16 — el texto de la portada
           iba "muy arriba"; se baja 20px y sigue despegado del input (~16px). */
        top: auto !important;
        bottom: calc(100vh - 100dvh + 165px + env(safe-area-inset-bottom, 0px)) !important;
        transform: none !important;
        max-width: calc(100vw - 56px) !important;
    }
}

/* ============================================
   MÓVIL VERTICAL - foto más arriba, texto entre la foto y el input
   (pedido usuario 2026-07-16, probando Nacho e Ikigai Kan en el teléfono;
   decisión: TODOS los clientes y TODAS las superficies — secciones,
   portada y Live — con reparto 70/30 del aire vertical)
   (1) Con object-fit:contain las fotos "más chicas" (las que dejan aire
       arriba/abajo) quedaban clavadas en el CENTRO de la pantalla, detrás
       del texto. object-position 30% las sube SOLO cuando hay aire — si la
       foto llena el alto, no cambia nada ("cuando la imagen lo permita").
   (2) El texto de sección (título + label + Explore) usaba padding 18vh SIN
       compensar 100vh−100dvh: en el teléfono real quedaba ~50px ADENTRO del
       input (las secciones miden 100vh pero el footer se ancla al fondo
       visible). Misma compensación que la portada → queda ~32px sobre el input.
   ============================================ */
@media (max-width: 767px) and (orientation: portrait) {
    #gx-landing .gx-landing-section-media img,
    #gx-landing .gx-landing-section-media video,
    #gx-landing .gx-landing-hero .gx-landing-section-carousel-slide img,
    #gx-landing .gx-landing-hero .gx-landing-section-carousel-slide video,
    /* Live: los posteos actuales son .gx-live-slide (carrusel estilo Instagram);
       .gx-live-media es el camino legado de portada — se cubren ambos. */
    .gx-live-slide img,
    .gx-live-slide video,
    .gx-live-media img,
    .gx-live-media video,
    /* Profundidad (dentro de una sección): mismo reparto que la home.
       visual.js ancla 'center top' inline en origenes/carrera (regla de la
       época cover para no cortar cabezas — con contain las clavaba ARRIBA
       del todo) y el resto quedaba al centro. El !important gana al inline. */
    #mediaVisual .carousel-item img,
    #mediaVisual .carousel-item video {
        object-position: center 30% !important;
    }
    #gx-landing .gx-landing-section .gx-landing-section-text {
        padding-bottom: calc(100vh - 100dvh + 130px + env(safe-area-inset-bottom, 0px));
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    .gx-landing-hero-overlay {
        /* 135px (antes 160): pedido usuario 2026-07-16 — en horizontal el texto
           de la portada quedaba muy arriba; el CTA baja hasta ~19px del input
           (medido en 844×390) y el título sigue entero en pantalla. */
        top: auto !important;
        bottom: calc(100vh - 100dvh + 135px + env(safe-area-inset-bottom, 0px)) !important;
        transform: none !important;
    }
}

/* ============================================
   REEL DEL LANDING - Snap firme en táctil (decisión usuario 2026-07-15)
   En el teléfono el impulso del scroll nativo pasaba de largo varias
   secciones (en iOS el momentum ignora los scrollTop del handler JS de
   landing_screen). Igual que el Live: un gesto = UNA sección.
   scroll-snap-stop:always obliga a frenar en la próxima; las secciones
   miden exactamente 100vh así que los bordes coinciden con los snaps del JS.
   ============================================ */
@media (pointer: coarse) {
    .gx-landing {
        scroll-snap-type: y mandatory;
    }
    .gx-landing-hero,
    .gx-landing-section,
    .gx-landing-footer-cta {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

/* ============================================
   TECLADO VIRTUAL - Scroll del input a la vista
   (Se maneja con JS: input.scrollIntoView cuando focus)
   ============================================ */