.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f1f1f1;
    padding: 20px;
}

.chat-header {
    text-align: center;
    margin-bottom: 20px;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: scroll;
    padding: 20px;
}

.chat-messages p {
    margin: 0 0 10px 0;
}
.chat-messages {
    flex-grow: 1;
    overflow-y: scroll;
    padding: 20px;
    display: flex; /* add display flex to align messages horizontally */
    flex-direction: column; /* set flex direction to column to stack messages vertically */
}

.chat-messages .message {
    display: flex; /* add display flex to align message text and sender label horizontally */
    flex-direction: column; /* set flex direction to column to stack message text and sender label vertically */
    align-self: flex-start; /* align sent messages to the left side */
    max-width: 80%; /* set a maximum width to prevent long messages from overflowing */
    margin-bottom: 10px; /* add margin to separate messages */
}

.chat-messages .message.teacher {
    align-self: flex-end; /* align received messages to the right side */
}

.chat-messages .message .message-text {
    background-color: #ddd;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 5px;
}

.chat-messages .message .sender-label {
    font-size: 12px;
    color: #777;
    align-self: flex-end; /* align sender label to the right side of the message */
}

.chat-form {
    display: flex;
}

.chat-form input {
    flex-grow: 1;
    margin-right: 10px;
}

.chat-form button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.chat-form button:hover {
    background-color: #3e8e41;
}

.chat-form button.selected {
    background-color: rgb(13, 61, 39);
}

/* add media query for mobile devices */
@media screen and (max-width: 768px) {
    .button-container {
        flex-wrap: wrap; /* wrap buttons onto multiple lines */
        justify-content: space-between; /* distribute buttons evenly */
    }
    
    .chat-form {
        flex-direction: column; /* stack form elements vertically */
    }
    
    .message-input {
        margin-bottom: 10px; /* add space below input */
    }
    
    .chat-form button {
        flex-grow: 1; /* expand buttons to fill container width */
        margin-bottom: 10px; /* add space between buttons */
    }
}