/**
 * VALIS Mobile Fixes v1.0
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * Correcciones específicas para móvil:
 * 1. Video reemplazado por imagen estática
 * 2. Safe area para iOS/Android
 * 3. Botones bottombar visibles
 * 4. Mejoras de usabilidad táctil
 * 
 * @version 1.0.0
 * @date 2024-12-25
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. VIDEO → IMAGEN ESTÁTICA EN MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Ocultar video en móvil para rendimiento */
    .background-clouds,
    .background-video,
    video.background-clouds,
    #backgroundVideo {
        display: none !important;
    }
    
    /* Fondo estático para móvil */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(ellipse at center, rgba(30, 30, 30, 0.8) 0%, rgba(15, 15, 15, 0.95) 100%),
            url('../assets/matrix_minimal.png');
        background-size: cover;
        background-position: center;
        filter: grayscale(0.3) brightness(0.4);
        z-index: -2;
        pointer-events: none;
    }
    
    /* Overlay sutil */
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.2) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.3) 100%
        );
        z-index: -1;
        pointer-events: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SAFE AREA PARA iOS/Android
   ═══════════════════════════════════════════════════════════════════════════ */

/* Viewport con safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .valis-bottombar {
        padding-bottom: calc(var(--valis-space-md) + env(safe-area-inset-bottom, 0px));
    }
    
    .scene-content.has-bottombar {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* PWA standalone mode */
    @media (display-mode: standalone) {
        .valis-bottombar {
            padding-bottom: calc(var(--valis-space-lg) + env(safe-area-inset-bottom, 20px));
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BOTTOMBAR MÓVIL - Más espacio y mejor visibilidad
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .valis-bottombar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 8px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        gap: 6px;
        z-index: 1000;
    }
    
    .valis-bottombar .valis-btn {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Botón secundario más compacto */
    .valis-bottombar .valis-btn.secondary {
        flex: 0 0 auto;
        padding: 10px 12px;
    }
    
    /* Iconos de botones */
    .valis-bottombar .btn-icon {
        display: none;
    }
    
    .scene-content.has-bottombar {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 20px)) !important;
    }
}

@media (max-width: 480px) {
    .valis-bottombar {
        flex-wrap: wrap;
        padding: 10px 6px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
    }
    
    .valis-bottombar .valis-btn {
        font-size: 0.75rem;
        padding: 8px 6px;
    }
    
    /* En pantallas muy pequeñas, apilar botones */
    .valis-bottombar .valis-btn.primary {
        flex: 1 1 100%;
        order: -1;
    }
    
    .valis-bottombar .valis-btn.secondary {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. LANDING OPTIONS - Mantener características visibles
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    /* Mostrar lista de características pero más compacta */
    .landing-option-features,
    .landing-details-list {
        display: block !important;
        font-size: 0.75rem;
        margin: 8px 0;
    }
    
    .landing-option-features li,
    .landing-details-list li {
        padding: 2px 0;
        padding-left: 12px;
    }
    
    /* Meta info horizontal */
    .landing-option-meta,
    .landing-meta {
        flex-direction: row !important;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. HEADER MÓVIL - Compacto
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .valis-header {
        padding: 8px 12px;
    }
    
    .valis-header .valis-logo {
        font-size: 1.1rem;
    }
    
    .header-actions {
        gap: 4px;
    }
    
    .header-actions button,
    .header-actions a {
        padding: 6px 8px;
        font-size: 0.75rem;
    }
    
    /* Ocultar texto en botones pequeños, solo iconos */
    .token-balance-btn .token-text {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. INTERPRETACIÓN MÓVIL - Mejor scroll
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .deep-reading-body,
    .simple-interpretation,
    .interpretation-content {
        padding: 16px;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 20px));
    }
    
    /* Títulos de sección más compactos */
    .layer-header-v2 {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
    
    .layer-page-num {
        font-size: 2rem;
    }
    
    .layer-title-v2 {
        font-size: 0.95rem;
    }
    
    .layer-divider {
        margin: 32px 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. TOUCH FEEDBACK - Mejor affordance táctil
   ═══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Dispositivos táctiles */
    .valis-btn,
    .landing-option-v5,
    .method-card,
    button {
        -webkit-tap-highlight-color: rgba(154, 123, 60, 0.2);
        touch-action: manipulation;
    }
    
    .valis-btn:active,
    .landing-option-v5:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    /* Áreas táctiles mínimas de 44px */
    .valis-btn {
        min-height: 44px;
    }
    
    .header-actions button,
    .header-actions a {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. COIN ORACLE MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #coinTossContainer,
    #yarrowContainer {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    
    .oracle-coins {
        gap: 10px;
    }
    
    .oracle-coin {
        width: 70px;
        height: 70px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. RESULTADOS HEXAGRAMA MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .valis-results {
        padding: 16px;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 20px));
    }
    
    .hex-display {
        max-width: 200px;
        margin: 0 auto;
    }
    
    .results-title {
        font-size: 1.2rem;
    }
    
    .results-subtitle {
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. STEPPER MÓVIL - Más compacto
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .valis-stepper {
        padding: 4px 8px;
        font-size: 0.65rem;
    }
    
    .stepper-step {
        padding: 4px 6px;
    }
    
    /* Ocultar texto, solo números/iconos */
    .stepper-label {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. MODALES MÓVIL - Pantalla completa
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .valis-about-box,
    .valis-modal-content {
        max-width: 95vw;
        max-height: 90vh;
        margin: 5vh auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. MAYEUTICA CHAT MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ritual-chat-container {
        padding: 12px;
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    
    .chat-input-area {
        padding: 8px;
    }
    
    .chat-input {
        font-size: 16px; /* Evita zoom en iOS */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. PREVENCIÓN DE ZOOM EN INPUTS iOS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important; /* Previene zoom automático en iOS */
    }
}