body {
    background-color: #f8f9fa;
}

.chat-container {
    max-width: 800px;
    margin: 2rem auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px); /* Ajusta según tu layout */
}

.chat-history {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #fdfdfd;
}

.message {
    margin-bottom: 15px;
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 80%;
    word-wrap: break-word; /* Para que textos largos se ajusten */
}

.user-message {
    background-color: #0d6efd;
    color: white;
    margin-left: auto; /* Alinea a la derecha */
    border-bottom-right-radius: 5px;
}

.bot-message {
    background-color: #e9ecef;
    color: #333;
    margin-right: auto; /* Alinea a la izquierda */
    border-bottom-left-radius: 5px;
}

.bot-message p, .user-message p {
     margin-bottom: 0; /* Evita márgenes extra dentro del globo */
}

.bot-message .table-container { /* Contenedor para tablas */
    max-height: 400px; /* Altura máxima para tablas largas */
    overflow: auto;    /* Scroll si es necesario */
    margin-top: 5px;
}

.bot-message .plotly-graph-div { /* Estilo para gráficos plotly */
     margin-top: 5px;
}

.error-message {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    margin-right: auto;
    border-bottom-left-radius: 5px;
}


.chat-input {
    display: flex;
}

#user-input {
    flex-grow: 1;
    margin-right: 10px;
    height: 60px; /* Aumenta la altura de la caja de texto */
    resize: vertical; /* Permite al usuario redimensionar verticalmente */
}

/* Estilos para la tabla generada por Pandas */
.table {
    font-size: 0.9rem; /* Tamaño de fuente más pequeño */
    margin-bottom: 0; /* Quita margen inferior si está dentro del globo */
}
.table thead {
    background-color: #e9ecef; /* Fondo ligero para cabecera */
}