/* ia.css - VERSIÓN FINAL COORDINADA */

:root {
    --color-principal: #00d2ff;
    --color-oscuro: #1a2a40;
}

/* ----------------------------------------------------
   1. CONTENEDORES Y BUBBLE
------------------------------------------------------- */
#ai-container { 
    position: fixed !important; 
    z-index: 99999999 !important; 
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; 
}

#ai-bubble {
    position: fixed; top: 50%; right: 0; transform: translateY(-50%);
    width: 85px; height: 85px; cursor: pointer;
    background: white; border-radius: 50% 0 0 50%;
    border: 2px solid var(--color-principal);
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto !important;
}

#ai-bubble img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ----------------------------------------------------
   2. ATLAS (EL AVATAR)
------------------------------------------------------- */

.animar-subida-pro {
    animation: baileAtlasPro 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards !important;
}

@keyframes baileAtlasPro {
    0%, 25% { transform: translateY(0px) scale(1); }
    /* Subimos moviendo píxeles fijos, no empujando el suelo */
    60% { transform: translateY(-150px) scale(0.95); }
    100% { transform: translateY(-250px) scale(0.9); }
}

/* ----------------------------------------------------
   3. PANEL DE CHAT (REPETUOSO CON LOS PIES)
------------------------------------------------------- */
/* 2. PANEL DE CHAT (Lógica de visibilidad estricta) */
#ai-panel {
    display: none; 
    position: fixed !important;
    width: 310px;
    height: 400px; /* <--- Altura más compacta */
    bottom: 20px;
    right: 400px; 
    z-index: 10000000;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column; /* Mantiene el orden vertical */
    overflow: hidden;
    pointer-events: auto !important;
}

/* SOLO se muestra si el contenedor tiene la clase .ai-open */
#ai-container.ai-open #ai-panel {
    display: block !important;
    opacity: 1;
}

@keyframes baileChatPro {
    /* 0-15%: Se queda quieto esperando el arranque de Atlas */
    0%, 15% { 
        bottom: 20px; 
        right: 400px; 
        opacity: 1; 
        filter: blur(0px);
        transform: rotate(0deg);
    }
    /* 30%: PASO 1 - El amago (retroceso sincronizado) */
    30% { 
        bottom: 25px; 
        right: 420px; 
        transform: rotate(1deg);
    }
    /* 50%: PASO 2 - El GIRO a la IZQUIERDA con BLUR */
    /* Se aleja de Atlas para que se le vean bien las zapatillas */
    50% { 
        bottom: 30px; 
        right: 550px; 
        filter: blur(4px); 
        transform: rotate(-3deg);
    }
    /* 100%: PASO 3 - Aterrizaje suave en su sitio original */
    100% { 
        bottom: 20px; 
        right: 400px; 
        filter: blur(0px); 
        opacity: 1; 
        transform: rotate(0deg);
    }
}

/* Asegúrate de que la clase llame a la animación correctamente */
.animar-panel-pro {
    display: block !important;
    animation: baileChatPro 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards !important;
}

/* Forzar que el panel se oculte si NO está abierto */
#ai-container:not(.ai-open) #ai-panel {
    display: none !important;
}

/* 1. BOTONES DE PREGUNTAS (Diseño original recuperado) */
.ai-buttons button { 
    width: 100%; 
    padding: 14px 18px; 
    margin-bottom: 12px; 
    border: 1px solid var(--color-principal); 
    border-radius: 12px; 
    cursor: pointer; 
    text-align: left; 
    background: white; 
    color: #444;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.ai-buttons button:hover { 
    background: #f0fbff; 
    transform: translateX(8px); 
    border-color: #008fb3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ----------------------------------------------------
   4. INTERFAZ INTERNA Y VÍDEO
------------------------------------------------------- */

#ai-body-wrapper {
    position: fixed !important;
    bottom: 20px !important; /* Si quieres que flote más arriba, sube este número (ej: 40px) */
    right: 100px !important; 
    width: 320px !important;
    height: auto !important; /* 🔓 CLAVE: Liberamos la altura para que no corte nada */
    z-index: 9999999;
    display: grid !important; 
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s !important; /* Solo animamos la aparición suave */
}

.atlas-v {
    grid-area: 1 / 1; 
    width: 100%;
    height: auto !important; /* 🔓 Mantiene la proporción perfecta del personaje */
    object-fit: contain;
    transition: none !important; 
}

#ai-body-wrapper video {
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease-in-out; /* Este pequeño fundido elimina el salto visual */
}

/* Solo se ve cuando el chat está abierto */
#ai-container.ai-open #ai-body-wrapper {
    visibility: visible;
    opacity: 1;
}

#ai-full-body {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: opacity 0.2s ease-in-out;
}

/* (Nota: Hemos eliminado por completo la regla #ai-body-canvas porque ya no la usamos) */

/* 3. ESTILOS DEL PANEL DE CHAT */
.ai-header {
    background: var(--color-oscuro);
    color: white;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px 20px 0 0;
}

.close-btn { 
    background: none; 
    border: none; 
    color: white; 
    font-size: 30px; 
    cursor: pointer; 
}

.ai-content p { 
    color: #333333 !important; 
    font-weight: 500;
    display: block !important; 
    margin-bottom: 10px;
}

.ai-input-area { 
    display: flex; 
    gap: 8px; 
    padding: 10px 15px;
    border-top: 1px solid #eee; 
    background: white; 
}

.ai-input-area input { 
    flex: 1; 
    padding: 8px;
    border-radius: 8px; 
    border: 1px solid #ddd; 
}

.ai-input-area button { 
    background: var(--color-principal); 
    color: white; 
    padding: 10px 20px; 
    border-radius: 10px; 
    border: none; 
    font-weight: bold; 
    cursor: pointer; 
}