@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
/* Mengimpor font Poppins dari Google Fonts untuk digunakan dalam halaman */

* {
  margin: 0; /* Menghapus margin default semua elemen */
  padding: 0; /* Menghapus padding default semua elemen */
  box-sizing: border-box; /* Memastikan padding dan border tidak menambah ukuran elemen */
  text-decoration: none; /* Menghapus dekorasi teks seperti garis bawah pada link */
  font-family: 'Poppins', sans-serif; /* Menggunakan font Poppins sebagai font utama */
}

body {
  display: flex; /* Menggunakan flexbox untuk mengatur tata letak */
  align-items: center; /* Memposisikan elemen secara vertikal di tengah */
  justify-content: center; /* Memposisikan elemen secara horizontal di tengah */
  min-height: 100vh; /* Menetapkan tinggi minimal setara dengan tinggi viewport */
  background: #f7f7f7; /* Warna latar belakang */
  padding: 0 10px; /* Menambahkan padding di sisi kiri dan kanan */
}

.wrapper {
  background: #fff; /* Warna latar belakang putih */
  max-width: 450px; /* Lebar maksimum elemen */
  width: 100%; /* Mengisi seluruh lebar parent */
  border-radius: 16px; /* Membuat sudut elemen melengkung */
  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
              0 32px 64px -48px rgba(0,0,0,0.5);
  /* Memberikan efek bayangan untuk tampilan lebih menarik */
}

/* CSS untuk Form Login & Signup */
.form {
  padding: 25px 30px; /* Memberikan ruang di dalam form */
}

.form header {
  font-size: 25px; /* Ukuran font untuk header */
  font-weight: 600; /* Ketebalan font */
  padding-bottom: 10px; /* Ruang bawah sebelum garis */
  border-bottom: 1px solid #e6e6e6; /* Garis bawah sebagai pemisah */
}

.form form {
  margin: 20px 0; /* Memberikan ruang atas dan bawah pada form */
}

.form form .error-text {
  color: #721c24; /* Warna teks untuk pesan error */
  padding: 8px 10px; /* Memberikan ruang dalam elemen */
  text-align: center; /* Teks rata tengah */
  border-radius: 5px; /* Sudut elemen melengkung */
  background: #f8d7da; /* Warna latar merah muda untuk error */
  border: 1px solid #f5c6cb; /* Garis border untuk memperjelas */
  margin-bottom: 10px; /* Memberikan jarak bawah */
  display: none; /* Disembunyikan secara default */
}

.form form .name-details {
  display: flex; /* Menggunakan flexbox untuk mengatur tata letak */
}

.form .name-details .field:first-child {
  margin-right: 10px; /* Memberikan jarak ke kanan */
}

.form .name-details .field:last-child {
  margin-left: 10px; /* Memberikan jarak ke kiri */
}

.form form .field {
  display: flex; /* Menggunakan flexbox */
  margin-bottom: 10px; /* Jarak bawah antar field */
  flex-direction: column; /* Menata elemen dalam satu kolom */
  position: relative; /* Posisi relatif untuk ikon */
}

.form form .field label {
  margin-bottom: 2px; /* Memberikan sedikit ruang bawah label */
}

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

.form form .field input {
  outline: none; /* Menghilangkan outline saat fokus */
}

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

.form form .button input {
  height: 45px; /* Tinggi tombol */
  border: none; /* Menghilangkan border */
  color: #fff; /* Warna teks putih */
  font-size: 17px; /* Ukuran font */
  background: #333; /* Warna latar belakang hitam */
  border-radius: 5px; /* Sudut tombol melengkung */
  cursor: pointer; /* Menampilkan pointer saat hover */
  margin-top: 13px; /* Jarak atas */
}
.form form .field i {
  position: absolute; /* Posisi absolut untuk ikon */
  right: 15px; /* Posisikan ke kanan */
  top: 70%; /* Posisikan sedikit ke bawah */
  color: #ccc; /* Warna abu-abu */
  cursor: pointer; /* Ubah kursor menjadi pointer */
  transform: translateY(-50%); /* Pusatkan ikon */
}

.form form .field i.active::before {
  color: #333; /* Warna ikon saat aktif */
  content: "\f070"; /* Mengganti ikon Font Awesome */
}

.form .link {
  text-align: center; /* Teks rata tengah */
  margin: 10px 0; /* Jarak atas dan bawah */
  font-size: 17px; /* Ukuran font */
}

.form .link a {
  color: #333; /* Warna teks link */
}

.form .link a:hover {
  text-decoration: underline; /* Garis bawah saat hover */
}

/* CSS untuk Daftar Pengguna */
.users {
  padding: 25px 30px; /* Padding dalam elemen */
}

.users header,
.users-list a {
  display: flex; /* Gunakan flexbox */
  align-items: center; /* Pusatkan elemen secara vertikal */
  padding-bottom: 20px; /* Jarak bawah */
  border-bottom: 1px solid #e6e6e6; /* Garis pemisah */
  justify-content: space-between; /* Elemen berjauhan */
}

.wrapper img {
  object-fit: cover; /* Memastikan gambar terisi penuh tanpa distorsi */
  border-radius: 50%; /* Membuat gambar berbentuk lingkaran */
}

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

:is(.users, .users-list) .content {
  display: flex; /* Gunakan flexbox */
  align-items: center; /* Pusatkan elemen */
}

:is(.users, .users-list) .content .details {
  color: #000; /* Warna teks hitam */
  margin-left: 20px; /* Jarak kiri dari gambar */
}

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

.users header .logout {
  display: block; /* Buat tombol logout sebagai blok */
  background: #333; /* Warna latar belakang hitam */
  color: #fff; /* Warna teks putih */
  outline: none; /* Menghilangkan outline */
  border: none; /* Menghilangkan border */
  padding: 7px 15px; /* Padding dalam tombol */
  text-decoration: none; /* Menghilangkan garis bawah */
  border-radius: 5px; /* Sudut melengkung */
  font-size: 17px; /* Ukuran font */
}

.users .search {
  margin: 20px 0; /* Jarak atas dan bawah */
  display: flex; /* Gunakan flexbox */
  position: relative; /* Posisi relatif */
  align-items: center; /* Pusatkan elemen */
  justify-content: space-between; /* Elemen berjauhan */
}

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

.users .search input {
  position: absolute; /* Posisi absolut */
  height: 42px; /* Tinggi input */
  width: calc(100% - 50px); /* Hitung lebar otomatis */
  font-size: 16px; /* Ukuran font */
  padding: 0 13px; /* Padding dalam input */
  border: 1px solid #e6e6e6; /* Border abu-abu */
  outline: none; /* Menghilangkan outline */
  border-radius: 5px 0 0 5px; /* Sudut kiri melengkung */
  opacity: 0; /* Sembunyikan default */
  pointer-events: none; /* Nonaktifkan interaksi */
  transition: all 0.2s ease; /* Efek transisi */
}
/* Mengatur tampilan input pencarian ketika dalam keadaan aktif */
.users .search input.show{
  opacity: 1; /* Membuat input menjadi terlihat */
  pointer-events: auto; /* Mengaktifkan input agar bisa digunakan */
}

/* Mengatur tampilan tombol pencarian */
.users .search button{
  position: relative; /* Posisi relatif terhadap elemen induknya */
  z-index: 1; /* Memastikan tombol berada di atas elemen lain */
  width: 47px; /* Lebar tombol */
  height: 42px; /* Tinggi tombol */
  font-size: 17px; /* Ukuran font dalam tombol */
  cursor: pointer; /* Mengubah kursor menjadi pointer saat diarahkan */
  border: none; /* Menghilangkan border */
  background: #fff; /* Warna latar belakang putih */
  color: #333; /* Warna teks */
  outline: none; /* Menghilangkan outline saat tombol diklik */
  border-radius: 0 5px 5px 0; /* Membuat sudut kanan tombol menjadi melengkung */
  transition: all 0.2s ease; /* Animasi perubahan properti selama 0.2 detik */
}

/* Mengatur tampilan tombol pencarian ketika aktif */
.users .search button.active{
  background: #333; /* Mengubah warna latar belakang menjadi hitam */
  color: #fff; /* Mengubah warna teks menjadi putih */
}

/* Mengubah ikon tombol pencarian menjadi ikon close (X) saat aktif */
.search button.active i::before{
  content: '\f00d'; /* Mengganti ikon dengan kode karakter unicode */
}

/* Mengatur tampilan daftar pengguna */
.users-list{
  max-height: 350px; /* Maksimal tinggi daftar pengguna */
  overflow-y: auto; /* Menambahkan scroll vertikal jika konten lebih tinggi dari max-height */
}

/* Menghilangkan scrollbar pada daftar pengguna dan chat-box */
:is(.users-list, .chat-box)::-webkit-scrollbar{
  width: 0px; /* Menyembunyikan scrollbar */
}

/* Mengatur tampilan masing-masing item dalam daftar pengguna */
.users-list a{
  padding-bottom: 10px; /* Jarak bawah antar elemen */
  margin-bottom: 15px; /* Margin bawah antar elemen */
  padding-right: 15px; /* Jarak kanan dari isi elemen */
  border-bottom-color: #f1f1f1; /* Warna garis bawah pemisah */
}

/* Menghapus garis bawah pada item terakhir dalam daftar pengguna */
.users-list a:last-child{
  margin-bottom: 0px; /* Menghilangkan margin bawah */
  border-bottom: none; /* Menghapus garis bawah */
}

/* Mengatur ukuran gambar profil dalam daftar pengguna */
.users-list a img{
  height: 40px; /* Tinggi gambar */
  width: 40px; /* Lebar gambar */
}

/* Mengatur warna teks dalam daftar pengguna */
.users-list a .details p{
  color: #67676a; /* Warna teks */
}

/* Mengatur tampilan status pengguna (online/offline) */
.users-list a .status-dot{
  font-size: 12px; /* Ukuran font */
  color: #468669; /* Warna hijau untuk status online */
  padding-left: 10px; /* Jarak kiri */
}

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

/* Mengatur tampilan header area chat */
.chat-area header{
  display: flex; /* Menggunakan flexbox untuk menyusun elemen */
  align-items: center; /* Menyelaraskan tinggi elemen dalam satu baris */
  padding: 18px 30px; /* Padding atas-bawah 18px, kiri-kanan 30px */
}

/* Mengatur ikon kembali dalam header chat */
.chat-area header .back-icon{
  color: #333; /* Warna ikon */
  font-size: 18px; /* Ukuran font */
}
/* Mengatur ukuran gambar profil dalam area chat */
.chat-area header img{
  height: 45px; /* Tinggi gambar */
  width: 45px; /* Lebar gambar */
  margin: 0 15px; /* Jarak kiri dan kanan 15px */
}

/* Mengatur teks nama pengguna dalam header chat */
.chat-area header .details span{
  font-size: 17px; /* Ukuran font */
  font-weight: 500; /* Ketebalan teks */
}

/* Mengatur tampilan area chat */
.chat-box{
  position: relative; /* Posisi relatif terhadap elemen induknya */
  min-height: 500px; /* Tinggi minimal area chat */
  max-height: 500px; /* Tinggi maksimal area chat */
  overflow-y: auto; /* Menambahkan scroll vertikal jika konten melebihi batas */
  padding: 10px 30px 20px 30px; /* Padding dari semua sisi */
  background: #f7f7f7; /* Warna latar belakang */
  box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
              inset 0 -32px 32px -32px rgb(0 0 0 / 5%); /* Efek bayangan dalam */
}

/* Mengatur teks di dalam chat-box */
.chat-box .text{
  position: absolute; /* Posisi absolut dalam chat-box */
  top: 45%; /* Posisi di tengah vertikal */
  left: 50%; /* Posisi di tengah horizontal */
  width: calc(100% - 50px); /* Lebar menyesuaikan kontainer */
  text-align: center; /* Teks berada di tengah */
  transform: translate(-50%, -50%); /* Menempatkan elemen tepat di tengah */
}

/* Mengatur tampilan pesan dalam chat-box */
.chat-box .chat{
  margin: 15px 0; /* Jarak atas dan bawah antar pesan */
}

/* Mengatur tampilan teks pesan dalam chat */
.chat-box .chat p{
  word-wrap: break-word; /* Membuat teks otomatis turun jika terlalu panjang */
  padding: 8px 16px; /* Padding dalam pesan */
  box-shadow: 0 0 32px rgb(0 0 0 / 8%),
              0rem 16px 16px -16px rgb(0 0 0 / 10%); /* Efek bayangan pesan */
}

/* Mengatur pesan outgoing (pesan yang dikirim pengguna) */
.chat-box .outgoing{
  display: flex; /* Menggunakan flexbox untuk menyusun elemen */
}

/* Mengatur tampilan detail pesan outgoing */
.chat-box .outgoing .details{
  margin-left: auto; /* Pesan berada di kanan */
  max-width: calc(100% - 130px); /* Maksimal lebar pesan */
}

/* Mengatur tampilan bubble chat outgoing */
.outgoing .details p{
  background: #333; /* Warna latar belakang hitam */
  color: #fff; /* Warna teks putih */
  border-radius: 18px 18px 0 18px; /* Membuat sudut bubble chat lebih halus */
}

/* Mengatur tampilan pesan incoming (pesan dari lawan bicara) */
.chat-box .incoming{
  display: flex; /* Menggunakan flexbox */
  align-items: flex-end; /* Mengatur elemen agar sejajar di bagian bawah */
}

/* Mengatur ukuran gambar profil dalam pesan masuk */
.chat-box .incoming img{
  height: 35px; /* Tinggi gambar 35px */
  width: 35px; /* Lebar gambar 35px */
}

/* Mengatur tampilan detail pesan masuk */
.chat-box .incoming .details{
  margin-right: auto; /* Menyesuaikan margin kanan agar pesan berada di kiri */
  margin-left: 10px; /* Memberi jarak antara gambar profil dan pesan */
  max-width: calc(100% - 130px); /* Maksimal lebar pesan dikurangi 130px */
}

/* Mengatur tampilan bubble chat pesan masuk */
.incoming .details p{
  background: #fff; /* Warna latar belakang putih */
  color: #333; /* Warna teks hitam */
  border-radius: 18px 18px 18px 0; /* Membuat sudut bubble chat lebih halus */
}

/* Mengatur tampilan area mengetik */
.typing-area{
  padding: 18px 30px; /* Padding atas-bawah 18px, kiri-kanan 30px */
  display: flex; /* Menggunakan flexbox */
  justify-content: space-between; /* Menyusun elemen dengan jarak maksimal */
}
/* Mengatur tampilan input teks dalam area mengetik */
.typing-area input{
  height: 45px; /* Tinggi input */
  width: calc(100% - 58px); /* Lebar input menyesuaikan dengan sisa ruang */
  font-size: 16px; /* Ukuran font */
  padding: 0 13px; /* Padding kiri-kanan */
  border: 1px solid #e6e6e6; /* Warna border abu-abu */
  outline: none; /* Menghilangkan garis fokus */
  border-radius: 5px 0 0 5px; /* Melengkungkan sisi kiri input */
}

/* Mengatur tampilan tombol kirim dalam area mengetik */
.typing-area button{
  color: #fff; /* Warna teks putih */
  width: 55px; /* Lebar tombol */
  border: none; /* Menghilangkan border */
  outline: none; /* Menghilangkan garis fokus */
  background: #333; /* Warna latar belakang hitam */
  font-size: 19px; /* Ukuran font */
  cursor: pointer; /* Mengubah kursor menjadi pointer */
  opacity: 0.7; /* Transparansi awal 70% */
  pointer-events: none; /* Tombol tidak bisa diklik saat tidak aktif */
  border-radius: 0 5px 5px 0; /* Melengkungkan sisi kanan tombol */
  transition: all 0.3s ease; /* Animasi perubahan properti */
}

/* Mengatur tampilan tombol kirim saat aktif */
.typing-area button.active{
  opacity: 1; /* Menghilangkan transparansi */
  pointer-events: auto; /* Mengaktifkan tombol */
}

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

  /* Menyusun header form agar teks berada di tengah */
  .form header{
    text-align: center; /* Teks rata tengah */
  }

  /* Menyusun elemen nama dalam form secara vertikal */
  .form form .name-details{
    flex-direction: column; /* Mengubah layout flex menjadi kolom */
  }

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

  /* Menghilangkan margin kiri pada elemen terakhir dalam name-details */
  .form .name-details .field:last-child{
    margin-left: 0px;
  }

  /* Mengatur ukuran gambar profil dalam header pengguna */
  .users header img{
    height: 45px; /* Tinggi 45px */
    width: 45px; /* Lebar 45px */
  }

  /* Mengatur ukuran tombol logout dalam header pengguna */
  .users header .logout{
    padding: 6px 10px; /* Padding dalam tombol */
    font-size: 16px; /* Ukuran font */
  }

  /* Mengurangi margin pada detail konten dalam daftar pengguna */
  :is(.users, .users-list) .content .details{
    margin-left: 15px; /* Margin kiri 15px */
  }

  /* Mengurangi padding kanan pada daftar pengguna */
  .users-list a{
    padding-right: 10px;
  }

  /* Mengatur padding header dalam area chat */
  .chat-area header{
    padding: 15px 20px; /* Padding atas-bawah 15px, kiri-kanan 20px */
  }

  /* Mengurangi tinggi minimal dan padding dalam chat-box */
  .chat-box{
    min-height: 400px; /* Tinggi minimal 400px */
    padding: 10px 15px 15px 20px; /* Padding lebih kecil */
  }

  /* Mengatur ukuran font dalam pesan chat */
  .chat-box .chat p{
    font-size: 15px; /* Ukuran font lebih kecil */
  }

  /* Mengatur maksimal lebar pesan outgoing */
  .chat-box .outgoing .details{
    max-width: 230px; /* Lebar maksimal 230px */
  }

  /* Mengatur maksimal lebar pesan incoming */
  .chat-box .incoming .details{
    max-width: 265px; /* Lebar maksimal 265px */
  }

  /* Mengatur ukuran gambar profil dalam pesan incoming */
  .incoming .details img{
    height: 30px; /* Tinggi 30px */
    width: 30px; /* Lebar 30px */
  }

  /* Mengatur padding dalam form chat */
  .chat-area form{
    padding: 20px; /* Padding 20px */
  }

  /* Mengurangi tinggi dan lebar input dalam form chat */
  .chat-area form input{
    height: 40px; /* Tinggi 40px */
    width: calc(100% - 48px); /* Lebar menyesuaikan */
  }

  /* Mengatur ukuran tombol dalam form chat */
  .chat-area form button{
    width: 45px; /* Lebar tombol lebih kecil */
  }
}