/* Chat-specific styles */
.message-bubble {
    max-width: 70%; /* Limit bubble width */
}

.message-bubble.sent {
    background-color: #dcf8c6; /* WhatsApp-like green for sent messages */
    color: #000;
    align-self: flex-end; /* Align to the right */
    margin-left: auto; /* Push to the right */
    text-align: left; /* Text aligns left within the bubble */
    padding: 8px 12px;
    border-radius: 18px 18px 0 18px; /* Rounded corners, flat on bottom-left */
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.message-bubble.received {
    background-color: #ffffff; /* White for received messages */
    color: #000;
    align-self: flex-start; /* Align to the left */
    margin-right: auto; /* Push to the left */
    text-align: left;
    padding: 8px 12px;
    border-radius: 18px 18px 18px 0; /* Rounded corners, flat on bottom-right */
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    border: none; /* Remove previous border */
}

.chat-log::-webkit-scrollbar {
    width: 8px;
}

.chat-log::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.chat-log::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.chat-log::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For better input and button styling */
#chat-message-input {
    width: calc(100% - 70px); /* Adjust width to make space for send button */
    display: inline-block;
    vertical-align: middle;
    border-radius: .25rem;
    border: 1px solid #ced4da;
    padding: .375rem .75rem;
}

#chat-message-submit {
    display: inline-block;
    vertical-align: middle;
    height: calc(1.5em + .75rem + 2px); /* Match input height */
    margin-left: 5px;
    border-radius: .25rem;
    cursor: pointer;
}