/* Menggunakan Google Fonts untuk font yang lebih modern */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%); /* Gradasi latar belakang */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transition: background-color 0.3s;
}

.container {
    width: 90%;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 90vh;
    transition: box-shadow 0.3s;
    position: relative; /* Untuk posisi navbar */
}

.navbar {
    display: flex;
    flex-direction: column;
    width: 150px; /* Lebar navbar */
    padding: 10px;
    background-color: #f8f9fa; /* Warna latar belakang navbar */
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-right: 20px; /* Jarak antara navbar dan chat */
    position: absolute; /* Posisi absolut untuk navbar */
    top: 20px; /* Jarak dari atas */
    left: -170px; /* Menempatkan navbar di luar container */
    transition: left 0.3s; /* Transisi untuk efek muncul */
}

.container:hover .navbar {
    left: 0; /* Menampilkan navbar saat hover */
}

.navbar button {
    margin-bottom: 10px; /* Jarak antar tombol */
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

.navbar button:hover {
    background-color: #0056b3; /* Warna saat hover */
}

h1 {
    text-align: center;
    color: #007bff;
    font-size: 28px;
    margin-bottom: 20px;
    transition: color 0.3s; /* Transisi warna judul */
}

h1:hover {
    color: #0056b3; /* Warna saat hover */
}

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #f1f8e9; /* Warna latar belakang chat */
    border-radius: 15px;
    transition: background-color 0.3s;
}

/* Bubble Chat */
.message {
    margin-bottom: 10px;
    padding: 15px 20px; /* Padding lebih besar untuk kenyamanan membaca */
    border-radius: 20px; /* Membuat bubble lebih bulat */
    max-width: 80%;
    clear: both;
    overflow-wrap: break-word;
    position: relative;
    animation: slideIn 0.4s ease-out, popEffect 0.5s ease-out; /* Animasi masuk dan efek */
    transition: transform 0.2s, box-shadow 0.2s;
}

@keyframes slideIn {
    from {
        transform: translateX(-50px); /* Geser dari kiri */
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes popEffect {
    0% {
        transform: scale(0.9);
    }
    70% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.message:hover {
    transform: scale(1.03); /* Sedikit membesar saat hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar saat hover */
}

.message.sent {
    float: right;
    background: linear-gradient(135deg, #9be7ff, #70c1ff); /* Gradien biru untuk pesan yang dikirim */
    color: #ffffff; /* Warna teks putih */
    box-shadow: 0 3px 10px rgba(112, 193, 255, 0.3); /* Bayangan halus */
}

.message.received {
    float: left;
    background: linear-gradient(135deg, #f8f9fa, #dfe6e9); /* Gradien abu-abu untuk pesan yang diterima */
    color: #2d3436; /* Warna teks gelap */
    box-shadow: 0 3px 10px rgba(223, 230, 233, 0.3); /* Bayangan halus */
}

/* Tambahan animasi bubble saat muncul */
.message img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    animation: imageFadeIn 0.5s ease-in-out;
}

@keyframes imageFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Timestamp yang lebih modern */
.timestamp {
    font-size: 0.7em;
    color: #7f8c8d; /* Warna abu-abu modern */
    position: absolute;
    bottom: -20px;
    right: 10px;
    text-align: right;
    font-style: italic;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

.message:hover .timestamp {
    opacity: 1; /* Timestamp muncul saat hover */
}


.input-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
    background-color: #ffffff;
    border-radius: 25px;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

input[type="text"], input[type="file"] {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 25px;
    margin-right: 9px;
    background-color: #f0f0f0;
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.3s;
    width: 100%; /* Menyesuaikan lebar input dengan lebar layar */
}

input[type="text"]:focus {
    background-color: #e2e6ea; /* Warna saat fokus */
}

input[type="file"] {
    display: none;
}

.send-icon, .file-label, .key-icon {
    padding: 10px;
    font-size: 16px;
    background-color: #007bff; /* Warna latar belakang tombol */
    color: #ffffff; /* Warna teks tombol */
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    margin-left: 5px;
    transition: background-color 0.3s, transform 0.2s; /* Transisi untuk efek hover */
}

.send-icon:hover, .file-label:hover, .key-icon:hover {
    background-color: #0056b3; /* Warna saat hover */
    transform: scale(1.1); /* Efek zoom saat hover */
}

.key-icon {
    font-size: 10px;
    margin-left: 4px;
}

.button-ok {
    background-color: #007bff;
    display: flex;
    align-items: center;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    outline: none;
    transition: background-color 0.3s, transform 0.2s; /* Transisi untuk efek hover */
}

.button-ok:hover {
    background-color: #0056b3; /* Warna saat hover */
    transform: scale(1.1); /* Efek zoom saat hover */
}

@media (max-width: 800px) {
    .container {
        padding: 10px;
    }
    h1 {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .navbar button {
        font-size: 14px; /* Mengurangi ukuran font pada tombol */
    }
    .navbar h3 {
        font-size: 18px; /* Mengurangi ukuran font judul */
    }
}

.instagram-icon {
    margin-left: 10px; /* Jarak antara judul dan ikon */
    color: #007bff; /* Warna ikon */
    font-size: 24px; /* Ukuran ikon */
    transition: color 0.3s; /* Transisi warna saat hover */
}

.instagram-icon:hover {
    color: #0056b3; /* Warna saat hover */
}

/* Gaya untuk input username dan tombol */
.username-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Pusatkan elemen secara horizontal */
    margin-bottom: 20px; /* Jarak bawah */
}

.username-input {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #007bff; /* Warna border */
    border-radius: 5px; /* Sudut melengkung */
    width: 100%; /* Lebar penuh */
    max-width: 300px; /* Lebar maksimum */
    margin-bottom: 10px; /* Jarak bawah */
    transition: border-color 0.3s; /* Transisi warna border */
}

.username-input:focus {
    border-color: #0056b3; /* Warna border saat fokus */
    outline: none; /* Menghilangkan outline default */
}

.join-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff; /* Warna latar belakang tombol */
    color: white; /* Warna teks tombol */
    border: none;
    border-radius: 5px; /* Sudut melengkung */
    cursor: pointer;
    transition: background-color 0.3s; /* Transisi warna latar belakang */
}

.join-button:hover {
    background-color: #0056b3; /* Warna saat hover */
}