static/style.css

body {
    font-family: Arial, sans-serif;
}

.chat-box {
    height: 70vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.message-container {
    display: flex;
    margin-bottom: 1rem;
}

.message-bubble {
    max-width: 70%;
    padding: 0.75rem 1rem;
    border-radius: 1.25rem;
    word-wrap: break-word;
}

/* My messages align to the right (blue) */
.my-message {
    justify-content: flex-end;
}

.my-message .message-bubble {
    background-color: #0d6efd; /* Bootstrap primary color */
    color: white;
    border-bottom-right-radius: 0.25rem;
}

/* Other users' messages align to the left (grey) */
.other-message {
    justify-content: flex-start;
}

.other-message .message-bubble {
    background-color: #e9ecef; /* Bootstrap light grey */
    color: black;
    border-bottom-left-radius: 0.25rem;
}