/* Import font Poppins dari Google Fonts dengan berbagai ketebalan */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

/* Reset default styling untuk semua elemen */
*{
    margin: 0; /* Hapus margin default */
    padding: 0; /* Hapus padding default */
    box-sizing: border-box; /* Ukuran box termasuk padding dan border */
    text-decoration: none; /* Hapus underline pada link */
    font-family: "Poppins", sans-serif; /* Set font utama ke Poppins */
}

/* Styling untuk body halaman */
body{
    display: flex; /* Gunakan flexbox */
    align-items: center; /* Pusatkan secara vertikal */
    justify-content: center; /* Pusatkan secara horizontal */
    min-height: 100vh; /* Tinggi minimal satu layar penuh */
    background: #f7f7f7; /* Warna background abu-abu terang */
    padding: 0 10px; /* Padding kiri kanan untuk mobile */
}

/* Styling untuk wrapper utama form */
.wrapper{
    background: #fff; /* Background putih */
    max-width: 450px; /* Lebar maksimal 450px */
    width: 100%; /* Lebar 100% dari parent */
    border-radius: 16px; /* Sudut melengkung */
    box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
                0 32px 64px -48px rgba(0,0,0,0.5); /* Shadow untuk efek kedalaman */
}

/* Styling untuk form */
.form{
    padding: 25px 30px; /* Padding dalam form */
}

/* Styling untuk header di dalam form */
.form header{
    font-size: 25px; /* Ukuran font judul */
    font-weight: 600; /* Ketebalan font */
    padding-bottom: 10px; /* Padding bawah */
    border-bottom: 1px solid #e6e6e6; /* Garis bawah abu-abu */
}

/* Styling untuk tag form di dalam class form */
.form form{
    margin: 20px 0; /* Margin atas bawah */
}

/* Styling untuk text error */
.form form .error-text{
    color: #721c24; /* Warna text merah gelap */
    padding: 8px 10px; /* Padding dalam */
    text-align: center; /* Text rata tengah */
    border-radius: 5px; /* Sudut melengkung */
    background: #f8d7da; /* Background merah muda */
    border: 1px solid #f5c6cb; /* Border merah muda */
    margin-bottom: 10px; /* Margin bawah */
    display: none; /* Sembunyikan secara default */
}

/* Styling untuk kontainer nama depan dan belakang */
.form form .name-details{
    display: flex; /* Gunakan flexbox untuk susun horizontal */
}

/* Styling untuk field pertama (nama depan) */
.form .name-details .field:first-child{
    margin-right: 10px; /* Margin kanan untuk jarak */
}

/* Styling untuk field terakhir (nama belakang) */
.form .name-details .field:last-child{
    margin-left: 10px; /* Margin kiri untuk jarak */
}

/* Styling untuk setiap field input */
.form form .field{
    display: flex; /* Gunakan flexbox */
    margin-bottom: 10px; /* Margin bawah */
    flex-direction: column; /* Susun vertikal (label di atas input) */
    position: relative; /* Untuk positioning absolute child */
}

/* Styling untuk label di dalam field */
.form form .field label{
    margin-bottom: 2px; /* Margin bawah kecil */
}

/* Styling untuk input text */
.form form .input input{
    height: 40px; /* Tinggi input */
    width: 100%; /* Lebar penuh */
    font-size: 16px; /* Ukuran font */
    padding: 0 10px; /* Padding kiri kanan */
    border-radius: 5px; /* Sudut melengkung */
    border: 1px solid #ccc; /* Border abu-abu */
}

/* Hapus outline default saat input di-focus */
.form form .field input{
    outline: none; /* Hapus outline biru default */
}

/* Styling untuk input file gambar */
.form form .image input{
    font-size: 17px; /* Ukuran font */
}

/* Styling untuk button submit */
.form form .button input{
    height: 45px; /* Tinggi button */
    border: none; /* Hapus border */
    color: #fff; /* Warna text putih */
    font-size: 17px; /* Ukuran font */
    background: #333; /* Background hitam */
    border-radius: 5px; /* Sudut melengkung */
    cursor: pointer; /* Cursor pointer saat hover */
    margin-top: 13px; /* Margin atas */
}

/* Styling untuk ikon mata show/hide password */
.form form .field i {
    position: absolute; /* Positioning absolute */
    right: 15px; /* Posisi dari kanan */
    top: 70%; /* Posisi dari atas */
    color: #ccc; /* Warna abu-abu */
    cursor: pointer; /* Cursor pointer saat hover */
    transform: translateY(-50%); /* Pusatkan secara vertikal */
}

/* Styling untuk ikon saat password ditampilkan */
.form form .field i.active::before{
    color: #333; /* Warna hitam */
    content: "\f070"; /* Ganti ikon ke mata tertutup */
}

/* Styling untuk link sudah punya akun */
.form .link{
     text-align: center; /* Text rata tengah */
     margin: 10px 0; /* Margin atas bawah */
     font-size: 17px; /* Ukuran font */
}

/* Styling untuk link anchor */
.form .link a{
    color: #333; /* Warna hitam */
}

/* Styling untuk link saat hover */
.form .link a:hover{
    text-decoration: underline; /* Tampilkan underline */
}

/* Styling untuk halaman daftar users */
.users{
    padding: 25px 30px; /* Padding dalam */
}

/* Styling untuk header users dan list item */
.users header,
.users-list a{
    display: flex; /* Gunakan flexbox */
    align-items: center; /* Pusatkan vertikal */
    padding-bottom: 20px; /* Padding bawah */
    border-bottom: 1px solid #e6e6e6; /* Garis bawah */
    justify-content: space-between; /* Jarak antara elemen */
}

/* Styling untuk semua gambar di wrapper */
.wrapper img{
    object-fit: cover; /* Crop gambar agar pas */
    border-radius: 50%; /* Bentuk bulat */
}

/* Styling untuk gambar di header users */
.users header img{
    height: 50px; /* Tinggi gambar */
    width: 50px; /* Lebar gambar */
}

/* Styling untuk content di users dan users-list */
:is(.users, .users-list) .content{
    display: flex; /* Gunakan flexbox */
    align-items: center; /* Pusatkan vertikal */
}

/* Styling untuk details (nama dan status) */
:is(.users, .users-list) .content .details{
    color: #000; /* Warna text hitam */
    margin-left: 20px; /* Margin kiri */
}

/* Styling untuk span nama user */
:is(.users, .users-list) .details span{
    font-size: 18px; /* Ukuran font */
    font-weight: 500; /* Ketebalan font */
}

/* Styling untuk tombol logout */
.users header .logout{
    display: block; /* Display block */
    background: #333; /* Background hitam */
    color: #fff; /* Text putih */
    outline: none; /* Hapus outline */
    border: none; /* Hapus border */
    padding: 7px 15px; /* Padding dalam */
    text-decoration: none; /* Hapus underline */
    border-radius: 5px; /* Sudut melengkung */
    font-size: 17px; /* Ukuran font */
}

/* Styling untuk search bar */
.users .search{
    margin: 20px 0; /* Margin atas bawah */
    display: flex; /* Gunakan flexbox */
    position: relative; /* Untuk child absolute */
    align-items: center; /* Pusatkan vertikal */
    justify-content: space-between; /* Jarak antara elemen */
}

/* Styling untuk text search */
.users .search .text{
    font-size: 18px; /* Ukuran font */
}

/* Styling untuk input search */
.users .search input{
    position: absolute; /* Positioning absolute */
    height: 42px; /* Tinggi input */
    width: calc(100% - 50px); /* Lebar dikurangi button */
    font-size: 16px; /* Ukuran font */
    padding: 0 13px; /* Padding kiri kanan */
    border: 1px solid #e6e6e6; /* Border abu-abu */
    outline: none; /* Hapus outline */
    border-radius: 5px 0 0 5px; /* Sudut kiri melengkung */
    opacity: 0; /* Transparan (tersembunyi) */
    pointer-events: none; /* Non-interaktif */
    transition: all 0.2s ease; /* Animasi transisi */
}

/* Styling untuk input search saat ditampilkan */
.users .search input.show{
    opacity: 1; /* Tampilkan */
    pointer-events: auto; /* Bisa diinteraksi */
}

/* Styling untuk button search */
.users .search button{
    position: relative; /* Positioning relative */
    z-index: 1; /* Layer di atas input */
    width: 47px; /* Lebar button */
    height: 42px; /* Tinggi button */
    font-size: 17px; /* Ukuran font */
    cursor: pointer; /* Cursor pointer */
    border: none; /* Hapus border */
    background: #fff; /* Background putih */
    color: #333; /* Text hitam */
    outline: none; /* Hapus outline */
    border-radius: 0 5px 5px 0; /* Sudut kanan melengkung */
    transition: all 0.2s ease; /* Animasi transisi */
}

/* Styling untuk button search saat aktif */
.users .search button.active{
    background: #333; /* Background hitam */
    color: #fff; /* Text putih */
}

/* Ubah ikon search jadi close saat aktif */
.search button.active i::before{
    content: '\f00d'; /* Ikon close (X) */
}

/* Styling untuk list users dengan scroll */
.users-list{
    max-height: 350px; /* Tinggi maksimal */
    overflow-y: auto; /* Scroll vertikal jika konten lebih */
}

/* Sembunyikan scrollbar di users-list dan chat-box */
:is(.users-list, .chat-box)::-webkit-scrollbar{
    width: 0px; /* Lebar scrollbar 0 (tersembunyi) */
}

/* Styling untuk item di users-list */
.users-list a{
    padding-bottom: 10px; /* Padding bawah */
    margin-bottom: 15px; /* Margin bawah */
    margin-right: 15px; /* Margin kanan untuk scrollbar */
    border-bottom-color: #f1f1f1; /* Warna border bawah */
}

/* Styling untuk item terakhir di users-list */
.users-list a:last-child{
    margin-bottom: 0px; /* Hapus margin bawah */
    border-bottom: none; /* Hapus border bawah */
}

/* Styling untuk gambar di users-list */
.users-list a img{
    height: 40px; /* Tinggi gambar */
    width: 40px; /* Lebar gambar */
}

/* Styling untuk text pesan terakhir */
.users-list a .details p{
    color: #67676a; /* Warna abu-abu */
}

/* Styling untuk status online dot */
.users-list a .status-dot{
    font-size: 12px; /* Ukuran font kecil */
    color: #468669; /* Warna hijau untuk online */
    padding-left: 10px; /* Padding kiri */
}

/* Styling untuk status offline dot */
.users-list a .status-dot.offline{
    color: #ccc; /* Warna abu-abu untuk offline */
}

/* Styling untuk header chat area */
.chat-area header{
    display: flex; /* Gunakan flexbox */
    align-items: center; /* Pusatkan vertikal */
    padding: 18px 30px; /* Padding dalam */
}

/* Styling untuk ikon back di chat area */
.chat-area header .back-icon{
    color: #333; /* Warna hitam */
    font-size: 18px; /* Ukuran font */
}

/* Styling untuk gambar profil di chat header */
.chat-area header img{
    height: 45px; /* Tinggi gambar */
    width: 45px; /* Lebar gambar */
    margin: 0 15px; /* Margin kiri kanan */
}

/* Styling untuk nama user di chat header */
.chat-area header .details span{
    font-size: 17px; /* Ukuran font */
    font-weight: 500; /* Ketebalan font */
}

/* Styling untuk area chat box dengan scroll */
.chat-box{
    position: relative; /* Positioning relative */
    min-height: 500px; /* Tinggi minimal */
    max-height: 500px; /* Tinggi maksimal */
    overflow-y: auto; /* Scroll vertikal */
    padding: 10px 30px 20px 30px; /* Padding dalam */
    background: #f7f7f7; /* Background abu-abu terang */
    box-shadow: inset 0 32px 32px -32px rgb(0 0 0 /5%),
                inset 0 -32px 32px -32px rgb(0 0 0 /5%); /* Shadow dalam untuk efek kedalaman */
}

/* Styling untuk setiap chat bubble */
.chat-box .chat{
    margin: 15px 0; /* Margin atas bawah */
}

/* Styling untuk text di dalam chat bubble */
.chat-box .chat p{
    word-break: break-word; /* Pecah kata panjang */
    padding: 8px 16px; /* Padding dalam */
    box-shadow: 0 0 32px rgb(0 0 0 / 8%),
                0rem 16px 16px -16px rgb(0 0 0 / 10%); /* Shadow untuk efek kedalaman */
}

/* Styling untuk chat keluar (pesan yang dikirim) */
.chat-box .outgoing{
    display: flex; /* Gunakan flexbox */
    
}

/* Styling untuk details chat keluar */
.chat-box .outgoing .details{
    margin-left: auto; /* Dorong ke kanan */
    max-width: calc(100% - 130px); /* Lebar maksimal */
}

/* Styling untuk bubble chat keluar */
.outgoing .details p{
    background: #333; /* Background hitam */
    color: #fff; /* Text putih */
    border-radius: 18px 18px 0 18px; /* Sudut melengkung kecuali kanan bawah */
}

/* Styling untuk chat masuk (pesan yang diterima) */
.chat-box .incoming{
    display: flex; /* Gunakan flexbox */
    align-items: flex-end; /* Rata bawah */
}

/* Styling untuk gambar profil chat masuk */
.chat-box .incoming img{
    height: 35px; /* Tinggi gambar */
    width: 35px; /* Lebar gambar */
}

/* Styling untuk details chat masuk */
.chat-box .incoming .details{
    margin-right: auto; /* Dorong ke kiri */
    margin-left: 10px; /* Margin kiri */
    max-width: calc(100% - 13px); /* Lebar maksimal */
}

/* Styling untuk bubble chat masuk */
.incoming .details p{
    background: #fff; /* Background putih */
    color: #333; /* Text hitam */
    border-radius: 18px 18px 18px 0; /* Sudut melengkung kecuali kiri bawah */
}
/* Styling untuk area input pesan */
.typing-area{
    padding: 18px 30px; /* Padding dalam */
    display: flex; /* Gunakan flexbox */
    justify-content: space-between; /* Jarak antara input dan button */
}

/* Styling untuk input pesan */
.typing-area input{
    height: 45px; /* Tinggi input */
    width: calc(100% - 58px); /* Lebar dikurangi button */
    font-size: 16px; /* Ukuran font */
    padding: 0 13px; /* Padding kiri kanan */
    border: 1px solid #e6e6e6; /* Border abu-abu */
    outline: none; /* Hapus outline */
    border-radius: 5px 0 0 5px; /* Sudut kiri melengkung */
}

/* Styling untuk button kirim pesan */
.typing-area button{
    color: #fff; /* Text putih */
    width: 55px; /* Lebar button */
    border: none; /* Hapus border */
    outline: none; /* Hapus outline */
    background: #333; /* Background hitam */
    font-size: 19px; /* Ukuran font */
    cursor: pointer; /* Cursor pointer */
    opacity: 0.7; /* Transparansi 70% (disabled look) */
    pointer-events: none; /* Non-interaktif */
    border-radius: 0 5px 5px 0; /* Sudut kanan melengkung */
    transition: all 0.3s ease; /* Animasi transisi */
}

/* Styling untuk button saat aktif (ada text di input) */
.typing-area button.active{
    opacity: 1; /* Opacity penuh */
    pointer-events: auto; /* Bisa diinteraksi */
}

/* Media query untuk layar kecil (max 450px) */
@media screen and (max-width: 450px) {
    /* Kurangi padding form dan users */
    .form, .users{
        padding: 20px; /* Padding lebih kecil */
    }

    /* Text header rata tengah di mobile */
    .form header{
        text-align: center; /* Rata tengah */
    }

    /* Ubah susunan nama jadi vertikal di mobile */
    .form form .name-details{
        flex-direction: column; /* Susun vertikal */
    }

    /* Hapus margin kanan field pertama */
    .form .name-details .field:first-child{
        margin-right: 0px; /* Hapus margin kanan */
    }

    /* Hapus margin kiri field terakhir */
    .form .name-details .field:last-child{
        margin-left: 0px; /* Hapus margin kiri */
    }
    
    /* Perkecil gambar header di mobile */
    .users header img{
        width: 45px; /* Lebar lebih kecil */
        height: 45px; /* Tinggi lebih kecil */
    }
    
    /* Perkecil padding button logout */
    .users header .logout{
        padding: 6px 10px; /* Padding lebih kecil */
        font-size: 16px; /* Font lebih kecil */
    }
    
    /* Kurangi margin details */
    :is(.users, .users-list) .content .details{
        margin-left: 15px; /* Margin lebih kecil */
    }

    /* Kurangi padding item users-list */
    .users-list a{
        padding-right: 10px; /* Padding lebih kecil */
    }

    /* Kurangi padding header chat area */
    .chat-area header{
        padding: 15px 20px; /* Padding lebih kecil */
    }
    
    /* Kurangi tinggi chat box */
    .chat-box{
        min-height: 400px; /* Tinggi minimal lebih kecil */
        padding: 10px 15px 15px 20px; /* Padding lebih kecil */
    }
    
    /* Perkecil font chat */
    .chat-box .chat p{
        font-size: 15px; /* Font lebih kecil */        
    }
    
    /* Kurangi lebar maksimal chat keluar */
    .chat-box .outgoing .details{
        max-width: 230px; /* Lebar lebih kecil */
    }
    
    /* Kurangi lebar maksimal chat masuk */
    .chat-box .incoming .details{
        max-width: 265px; /* Lebar lebih kecil */
    }
    
    /* Perkecil gambar chat masuk */
    .incoming .details img{
        height: 30px; /* Tinggi lebih kecil */
        width: 30px; /* Lebar lebih kecil */
    }
    
    /* Kurangi padding typing area */
    .chat-area form{
        padding: 20px; /* Padding lebih kecil */
    }
    
    /* Kurangi tinggi input pesan */
    .chat-area form input{
        height: 40px; /* Tinggi lebih kecil */
        width: calc(100% - 48px); /* Lebar disesuaikan */
    }
    
    /* Kurangi lebar button kirim */
    .chat-area form button{
        width: 45px; /* Lebar lebih kecil */
    }

}