/* Stiluri generale */
body {
    font-family: Arial, sans-serif;
    background-color: #181818; /* Fundal mai închis */
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Chat container */
.chat-container {
    width: 100%;
    max-width: 600px; /* Desktop */
    height: 100vh; /* full screen pe mobil */
    background-color: #2a2a2a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Mesaje */
#messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 80vh;
    background-color: #2a2a2a;
    padding: 10px;
    color: #fff;
}

/* Mesajele individuale */
.message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #3c3c3c;
    max-width: 100%;
    color: #fff;
}

/* Imagini, Audio și Video */
.message img {
    max-width: 90%; /* Imagini mari, dar păstrăm marginile */
    height: auto;
    border-radius: 10px;
    margin-top: 10px;
}

.message video {
    width: 100%; /* Videouri la lățimea maximă */
    height: auto; /* Permitem video-urilor să se redimensioneze corespunzător */
    border-radius: 10px;
    margin-top: 10px;
}

.message audio {
    width: 100%; /* Audio player la lățimea maximă */
    margin-top: 10px;
    border-radius: 10px;
}

/* Form chat */
form#chat-form {
    display: flex;
    align-items: center; /* Pe aceeași linie */
    padding: 10px;
    border-top: 1px solid #ccc;
    background-color: #2a2a2a;
    justify-content: space-between; /* Aliniere orizontală */
}

form#chat-form input[type="text"] {
    flex: 1;
    padding: 10px 12px; /* Reducem paddingul pentru mai mult spațiu */
    border-radius: 20px;
    border: 1px solid #ccc;
    margin-right: 5px;
    outline: none;
    font-size: 16px; /* Micșorăm fontul pentru a se potrivi mai bine */
    background-color: #444;
    color: #fff;
}

/* Butonul trimite text cu simbolul săgeată */
form#chat-form button {
    padding: 12px 16px; /* Ajustăm padding-ul pentru a face butonul mai mare */
    border: none;
    background-color: #128c7e;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 30px; /* Mărimea simbolului săgeată */
    min-width: 50px; /* Asigurăm o lățime minimă pentru buton */
    min-height: 50px; /* Asigurăm o înălțime minimă pentru buton */
    display: flex;
    justify-content: center;
    align-items: center;
}

form#chat-form button:hover {
    background-color: #075e54;
}

/* Butoane fișiere */
.file-buttons {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: #2a2a2a;
    border-top: 1px solid #ccc;
}

.file-buttons button {
    flex: 1;
    margin: 0 2px;
    padding: 12px;
    font-size: 18px;
    border: none;
    background-color: #128c7e;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.file-buttons button:hover {
    background-color: #075e54;
}

/* Butonul pentru activarea sunetului - vizibil pe mobil */
#enable-sound {
    background-color: transparent;
    color: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

/* Ajustări pentru dispozitive mici */
@media (max-width: 480px) {
    .chat-container {
        width: 100%;
        height: 100vh;
    }

    /* Ajustăm formularul */
    form#chat-form {
        flex-direction: row; /* Butoanele și input-ul pe aceeași linie */
        align-items: center; /* Aliniem la centru */
    }

    form#chat-form input[type="text"],
    form#chat-form button,
    .file-buttons button {
        font-size: 16px; /* Reducem fontul pentru mobil */
        padding: 10px; /* Mărim puțin butoanele pentru mobil */
    }

    /* Butonul "Trimite text" va fi pe aceeași linie cu input-ul */
    form#chat-form button {
        width: auto; /* Butonul va fi de dimensiune normală pe mobil */
    }

    /* Ajustăm butonul pentru mobil */
    form#chat-form input[type="text"] {
        flex: 0.8; /* Micșorăm lățimea inputului pentru a face loc butonului */
    }

    /* Ajustări pentru butoanele de fișiere */
    .file-buttons {
        flex-wrap: wrap; /* Permite butoanelor să fie pe mai multe rânduri */
        justify-content: center;
    }

    .file-buttons button {
        width: 45%; /* Butoane mai mari pe mobil, fiecare va ocupa aproape jumătate din lățimea */
        margin: 10px;
    }

    /* Butonul pentru sunet va fi vizibil pe mobil */
    #enable-sound {
        font-size: 24px; /* Mărim simbolul butonului de sunet */
        margin-left: 10px;
    }
	#upload-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    display: none; /* ascuns în mod implicit */
}

.progress-circle {
    width: 100px;
    height: 100px;
    border: 10px solid #f3f3f3; /* fundal gri */
    border-top: 10px solid #4d90fe; /* culoare albastră pentru progres */
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.progress-bar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    clip: rect(0px, 100px, 100px, 50px);
    animation: progress 1s linear infinite;
}

@keyframes progress {
    0% { clip: rect(0px, 100px, 100px, 50px); }
    100% { clip: rect(0px, 50px, 100px, 0px); }
}
}