/* Stiluri pentru centratul imaginilor, textului și videoclipurilor pe pagină */
#chat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

img {
    display: block;
    margin: 0 auto;
}

video {
    display: block;
    margin: 0 auto;
}

p {
    text-align: center;
}

/* Stiluri pentru caseta de scriere a mesajelor */
#message-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px; /* Spațiu între chat-box și formularul de mesaje */
}

#message {
    width: 80%; /* Lățimea casetei de mesaje */
    padding: 10px;
    border: 2px solid #ccc; /* Bordura casetei de mesaje */
    border-radius: 5px;
    margin-bottom: 10px; /* Spațiu între caseta de mesaje și butonul de trimitere */
}

#file {
    width: 200px; /* Lățimea butonului de încărcare a fișierului */
    padding: 10px;
    margin-bottom: 10px; /* Spațiu între butoanele de mesaje și butonul de încărcare a fișierului */
    background-color: #007bff; /* Culoarea de fundal a butonului */
    color: #fff; /* Culoarea textului din buton */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Stiluri pentru butonul de încărcare a fișierului */
.file-upload-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    font-size: 32px;
    cursor: pointer;
    border-radius: 5px;
}

/* Stiluri pentru mesaje */
.chat-messages {
    max-width: 80%; /* Lățimea maximă a mesajelor */
    margin: 20px auto; /* Spațierea între mesaje și marginea paginii */
}

.chat-message {
    background-color: #f2f2f2; /* Fundalul mesajelor */
    border-radius: 10px; /* Forma colțurilor mesajelor */
    padding: 10px; /* Spațiul în interiorul mesajelor */
    margin-bottom: 10px; /* Spațiul între mesaje */
    word-wrap: break-word; /* Permite textului să se împartă pe mai multe rânduri */
}