.container-full-height {
    min-height: 100vh;
}

.col-full-height {
    height: 100vh;
    overflow-y: auto;
}

.flex-row {
    display: flex;
}

.flex-col {
    flex: 1; /* esto hace que las columnas se expandan para ocupar todo el espacio disponible */
    display: flex; /* esto hace que la columna misma sea un contenedor flex */
    flex-direction: column; /* esto hace que los hijos de la columna se apilen verticalmente */
}

.chat-card {
    height: 600px;
    /* Puedes ajustar este valor según lo que necesites */
    display: flex;
    flex-direction: column;
}

.chat-body {
    overflow-y: auto;
    /* Esto permitirá el desplazamiento si es necesario */
    max-height: 500px; 
    /* Para ocultar la barra de desplazamiento en navegadores WebKit */
    ::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    /* Para ocultar la barra de desplazamiento en Firefox */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Para Internet Explorer y Edge */
}

.message {
    margin-bottom: 10px;
}

.sent {
    text-align: right;
}

.sent .message-content {
    display: inline-block;
    background-color: #dcf8c6;
    /* Verde claro para mensajes enviados */
    max-width: 70%;
    /* Ajusta como quieras */
}

.received {
    text-align: left;
}

.received .message-content {
    display: inline-block;
    background-color: #efefef;
    /* Gris claro para mensajes recibidos */
    max-width: 70%;
    /* Ajusta como quieras */
}

.message-content {
    padding: 10px 15px;
    border-radius: 10px;
    display: inline-block;
}