/* ============================================= */
/* ESTILOS REFINADOS PARA BOTUI V2.0             */
/* ============================================= */

/* Contenedor principal del chat */
.botui-app-container {
    background-color: transparent; /* Hacemos el fondo transparente */
    border: none; /* Eliminamos el borde exterior */
    font-family: var(--font-body);
    color: var(--text-light);
}

/* Burbujas de mensaje (ambos, bot y humano) */
.botui-message-content {
    background-color: var(--bg-light-navy);
    color: var(--text-light);
    border: 1px solid var(--brand-blue-dark);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 15px 20px;
}

/* Burbuja de mensaje del usuario */
.botui-message-content.human {
    background-color: var(--bg-light-navy);
    /* El texto del usuario ahora lleva el color de la marca */
    color: var(--brand-blue-vibrant); 
    font-weight: 500;
}

/* Animación de escritura (los 3 puntos) */
.botui-message-content-loading .dot {
    background-color: var(--brand-blue-vibrant) !important;
}

/* Contenedor de los botones de acción */
.botui-actions-buttons {
    padding-top: 10px;
}

/* Botones de acción */
.botui-actions-buttons-button {
    background-color: var(--bg-light-navy) !important;
    border: 1px solid var(--brand-blue-dark) !important;
    color: var(--text-light) !important;
    transition: all var(--transition-speed) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.botui-actions-buttons-button:hover,
.botui-actions-buttons-button:focus {
    background-color: var(--brand-blue-dark) !important;
    border-color: var(--brand-blue-vibrant) !important;
    color: var(--text-lightest) !important;
    transform: translateY(-3px);
}