.message {
    max-width: 60%; /* Limita el ancho máximo del mensaje */
    padding: 10px; /* Espaciado interno */
    margin: 5px 10px; /* Espaciado externo */
    border-radius: 10px; /* Bordes redondeados */
    word-wrap: break-word; /* Evita que el texto desborde */
}

    .message.user-receiver {
        background-color: #ebebf5; /* Color para mensajes enviados */
        align-self: flex-start; /* Alinear hacia la izquierda */
    }

    .message.user {
        background-color: #d5d6e3; /* Color para mensajes recibidos */
        align-self: flex-end; /* Alinear hacia la derecha */
    }

.message-time {
    font-size: 0.8rem; /* Tamaño pequeño para la hora */
    color: #757575; /* Color gris para la hora */
    text-align: right; /* Alinear a la derecha */
    margin-top: 5px; /* Espaciado con el texto del mensaje */
}

.input-area {
    /*position: sticky;*/
    /*display:inline-block;*/
    bottom: 0;
    background: white;
    z-index: 10;
    padding: 10px;
    border-top: 1px solid #ddd;
}

.header-chat {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    padding: 10px;
    border-top: 1px solid #ddd;
}



.ajuste-altura {
    height: calc(100vh - 148px);
}





.card-header-chat {
    border-bottom: 1px solid #dee2e6;
    padding:1rem 2rem;
}












.punto-amarillo {
    display: inline-block; /* Para que se comporte como un elemento en línea pero con propiedades de bloque */
    width: 10px; /* Ancho del círculo */
    height: 10px; /* Alto del círculo */
    border-radius: 50%; /* Para hacerlo circular */
    background-color: yellow; /* Color amarillo */
    margin-left: 8px; /* Espacio a la izquierda, similar a la imagen */
}