/* Estilos para los 3 tipos de mensajes de chat */

/* Mensaje del usuario - Usando paleta principal */
.dia-message.user {
    flex-direction: row-reverse; /* Ubicado a la derecha */
    justify-content: flex-start;
}

.dia-message.user .dia-message-bubble {
    background: var(--dia-primary); /* Color principal de la paleta */
    color: white;
    border-radius: var(--dia-radius-lg);
    border-bottom-right-radius: var(--dia-radius-sm);
}

.dia-message.user .dia-message-avatar {
    background: var(--dia-primary); /* Color principal de la paleta */
    color: white;
    order: 2;
    margin-left: var(--dia-spacing-sm);
    margin-right: 0;
}

/* Mensaje del sistema - Usando colores secundarios */
.dia-message.system {
    justify-content: center;
    margin: var(--dia-spacing-md) 0;
}

.dia-message.system .dia-message-bubble {
    background: var(--dia-secondary); /* Color secundario de la paleta */
    color: white;
    border-radius: var(--dia-radius-lg);
    text-align: center;
    font-style: italic;
    opacity: 0.9;
}

.dia-message.system .dia-message-avatar {
    background: var(--dia-secondary); /* Color secundario de la paleta */
    color: white;
    margin: 0 var(--dia-spacing-sm);
}

.dia-message.system .dia-message-time {
    text-align: center;
    font-size: var(--dia-font-size-xs);
    opacity: 0.8;
}

/* Respuesta del sistema - Usando color de bot */
.dia-message.system-response {
    justify-content: flex-start;
}

.dia-message.system-response .dia-message-bubble {
    background: var(--dia-bot-bubble); /* Color de bot de la paleta */
    color: var(--dia-secondary-dark); /* Texto oscuro para contraste */
    border: 1px solid var(--dia-card-border);
    border-radius: var(--dia-radius-lg);
    border-bottom-left-radius: var(--dia-radius-sm);
}

.dia-message.system-response .dia-message-avatar {
    background: var(--dia-secondary); /* Color secundario para avatar */
    color: white;
    order: 1;
    margin-right: var(--dia-spacing-sm);
    margin-left: 0;
}

/* Animaciones específicas para cada tipo */
.dia-message.user.dia-fade-in {
    /* animation: slideInRight 0.3s ease-out; */
}

.dia-message.system.dia-fade-in {
    animation: slideInCenter 0.3s ease-out;
}

.dia-message.system-response.dia-fade-in {
    animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInCenter {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Estados especiales para mensajes del sistema */
.dia-message.system.processing {
    opacity: 0.7;
}

.dia-message.system.processing .dia-message-content::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

.dia-message.system.error .dia-message-bubble {
    background: var(--dia-danger); /* Color de error de la paleta */
}

.dia-message.system.error .dia-message-avatar {
    background: var(--dia-danger); /* Color de error de la paleta */
}

/* Responsive */
@media (max-width: 768px) {
    .dia-message.system .dia-message-bubble {
        font-size: var(--dia-font-size-sm);
        padding: var(--dia-spacing-sm) var(--dia-spacing-md);
    }
    
    .dia-message.system .dia-message-time {
        font-size: var(--dia-font-size-xs);
    }
    
    .dia-message-bubble {
        max-width: 85%; /* Aumentar ancho en móviles */
    }
}