#chat-container {
    display: none;
    border: 1px solid #ccc;
    height: 400px;
    width: 350px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background-color: white;
    /*display: flex;*/
    flex-direction: column; /* Organiza los elementos en columna */
    border-radius: 5px;
}

#chat-title {
    background-color: #0b3f62; /* Fondo del título */
    color: white; /* Color del texto */
    font-weight: bold; /* Texto en negritas */
    padding: 10px; /* Espaciado interno */
    margin: 0; /* Sin margen */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex; /* Usar flexbox para alinear los elementos */
    align-items: center; /* Centrar verticalmente los elementos */
    /*justify-content: space-between;*/ /* Espacio entre los elementos */
}

#chat-area {
    flex: 1; /* Toma el espacio restante */
    overflow-y: auto; /* Habilita el desplazamiento vertical */
    padding: 10px; /* Espaciado interno */
    border-bottom: 1px solid #ccc; /* Línea separadora */
}

#input-container {
    display: flex; /* Usar flexbox para alinear el input y el botón */
    justify-content: space-between; /* Espacio entre el input y el botón */
    padding: 10px; /* Espaciado interno */
}

#message-input {
    width: 70%; /* Ancho del input */
    padding: 5px;
}

#send-button {
    background-color: #0b3f62; /* Color de fondo */
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 15px; /* Bordes redondeados */
    padding: 6px 10px; /* Espaciado interno */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    display: flex; /* Usar flexbox para alinear el icono y el texto */
    align-items: center; /* Centrar verticalmente el contenido */
    
}

    #send-button i {
        margin-right: 5px; /* Espacio entre el icono y el texto */
    }

#close-chat i {
    color: white; /* Color del icono */
    font-size: 20px; /* Tamaño del icono */
}

.user {
    color: blue; /* Color del texto para los mensajes del usuario */
    margin: 5px 0; /* Margen superior e inferior de 5px */
}

.agente {
    color: green; /* Color del texto para los mensajes de Samantha */
    margin: 5px 0; /* Margen superior e inferior de 5px */
}

.agent-name {
    font-size: 12px;

}

.error {
    color: red; /* Color del texto para los mensajes de error */
    margin: 5px 0; /* Margen superior e inferior de 5px */
}

.message {
    margin-bottom: 15px;
    display: flex;
}

.message-content {
    position: relative;
    display: inline-block;
    max-width: 70%;
}

.timestamp {
    position: absolute;
    right: -70px; /* Ajusta según necesidad */
    bottom: 2px;
    font-size: 0.75em;
    color: #666;
    white-space: nowrap;
}

/* Para mensajes del usuario */
.user-message .message-content {
    margin-left: auto;
}

.user-message .timestamp {
    right: auto;
    left: -70px; /* Invertir posición para mensajes de usuario */
}

.user-message {
    justify-content: flex-end;
}

.assistant-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

    .assistant-message .message-content {
        margin-left: -5px; /* Ancho avatar + gap */
    }

.assistant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 3px; /* Ajuste fino de alineación vertical */
}

.assistant-avatar-small {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 3px; /* Ajuste fino de alineación vertical */
}

.bubble {
    max-width: 70%;
    padding: 12px 16px;
    border-radius: 15px;
    position: relative;
}

.user-bubble {
    background: #007bff;
    color: white;
    border-bottom-right-radius: 3px;
}

.assistant-bubble {
    background: #e1f2f1;
    color: #7e98a3;
    border-bottom-right-radius: 3px;
}