/**
 * Estilos específicos para el avatar y sistema de diálogo
 */

/* Avatar principal */
.avatar-container {
    position: relative;
    z-index: 10;
}

.avatar-img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Estados específicos del avatar */
.avatar-img.avatar-waiting {
    filter: brightness(1);
}

.avatar-img.avatar-talking {
    filter: brightness(1.1);
    animation: talking-glow 1.5s ease-in-out infinite alternate;
}

/* Contenedor de reacciones del avatar */
.avatar-container {
    position: relative;
}

.avatar-reaction {
    pointer-events: none;
    white-space: nowrap;
    font-size: calc(var(--font-size-small) + 1px); /* Aumentado para mejor legibilidad */
    max-width: 220px; /* Ampliado para acomodar texto más grande */
    word-wrap: break-word;
    white-space: normal;
}

/* Estados del contenedor de diálogo */
.dialogue-container {
    position: relative;
    z-index: 5;
}

.dialogue-container.minimized .dialogue-box {
    padding: var(--spacing-sm) var(--spacing-md);
}

.dialogue-container.minimized .dialogue-text {
    font-size: calc(var(--font-size-base) + 1px); /* Aumentado el tamaño de la fuente */
    margin-bottom: var(--spacing-sm);
    font-weight: 500; /* Mejor legibilidad */
}

.dialogue-container.minimized .continue-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: calc(var(--font-size-small) + 1px); /* Aumentado el tamaño */
}

/* Efectos especiales para el avatar */
.avatar-container.celebration {
    animation: celebration-bounce 0.8s ease-in-out;
}

.avatar-container.thinking .avatar-img {
    animation: thinking-sway 2s ease-in-out infinite;
}

/* Animaciones adicionales */
@keyframes talking-glow {
    0% { 
        box-shadow: var(--shadow-lg), 0 0 20px rgba(52, 152, 219, 0.3);
    }
    100% { 
        box-shadow: var(--shadow-lg), 0 0 30px rgba(52, 152, 219, 0.6);
    }
}

@keyframes celebration-bounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-2deg); }
    75% { transform: scale(1.1) rotate(2deg); }
}

@keyframes thinking-sway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-1deg); }
    75% { transform: rotate(1deg); }
}

/* Mejoras para accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .avatar-img.avatar-talking,
    .avatar-container.celebration,
    .avatar-container.thinking .avatar-img {
        animation: none;
    }
    
    .avatar-img.pulse {
        animation: none;
        transform: scale(1.05);
        transition: transform var(--transition-fast);
    }
}

/* Adaptaciones para pantallas muy pequeñas */
@media (max-width: 320px) {
    .avatar-reaction {
        font-size: 0.85rem; /* Aumentado desde 0.75rem */
        padding: 0.25rem 0.5rem;
        max-width: 160px; /* Ampliado ligeramente */
    }
    
    .dialogue-container.minimized {
        transform: scale(0.9);
    }
    
    /* Asegurar que el texto siga siendo legible incluso en pantallas pequeñas */
    .dialogue-text {
        font-size: calc(var(--font-size-base) + 1px); /* Garantizar texto legible */
    }
}

/* Mejoras para touch */
@media (hover: none) and (pointer: coarse) {
    .continue-btn {
        min-height: 52px; /* Aumentar área touch en móvil */
        padding-top: 12px;
        padding-bottom: 12px;
    }
    
    .avatar-img {
        cursor: default;
    }
}

/* Específico para iOS/iPhone */
@supports (-webkit-touch-callout: none) {
    .dialogue-container {
        z-index: 5;
        margin-bottom: var(--spacing-xl); /* Más espacio debajo */
    }
    
    .dialogue-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 180px; /* Aumentado de 120px a 180px */
        padding: var(--spacing-lg); /* Más padding interno */
    }
    
    .dialogue-text {
        flex: 1;
        margin-bottom: 16px; /* Más separación entre texto y botón */
        min-height: 100px; /* Espacio mínimo para el texto */
    }
    
    .continue-btn {
        width: 100%;
        max-width: 100%;
        border-radius: 10px;
        height: auto;
        min-height: 60px; /* Asegurar que el botón sea lo suficientemente grande */
        margin-bottom: 5px; /* Espacio al final */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil para destacar */
    }
    
    /* Garantizar que el texto sea legible */
    @media screen and (orientation: portrait) {
        .dialogue-text {
            font-size: calc(var(--font-size-base) + 2px); /* Mantener el tamaño de letra grande */
            line-height: 1.4;
            padding-bottom: 10px; /* Más espacio al final del texto */
        }
        
        .continue-btn {
            font-size: calc(var(--font-size-base) + 2px); /* Botón con texto más grande */
            padding: 15px var(--spacing-lg); /* Más padding para área táctil */
            font-weight: 600; /* Texto más visible */
        }
        
        /* Asegurar que el contenedor sea lo suficientemente grande */
        .dialogue-container {
            margin-bottom: 20px;
        }
        
        .dialogue-box {
            padding: var(--spacing-lg) var(--spacing-md);
            min-height: 200px; /* Bastante espacio para el diálogo */
        }
    }
}