/* ==========================================================================
   Section Aplikasi HP (baru) — .wz-mo

   Section lama (Elementor d903ebe) SENGAJA dibiarkan utuh di atas section ini.
   Berkas ini tidak menimpa satu pun gaya milik section itu: seluruh selektor
   di sini berakar di .wz-mo.

   ---------------------------------------------------------------------------
   Tesis

   Bukan "kami punya aplikasi", tapi "kantornya ada di genggaman kamu". Kalimat
   paling hidup di naskah lama — "sambil meeting, di jalan, atau lagi kopdar
   sama client" — dulu terkubur di badan paragraf. Di sini kalimat itu naik
   jadi STRUKTUR: tiga bab yang menggerakkan perangkatnya.

   ---------------------------------------------------------------------------
   Perangkatnya dibangun, bukan gambar

   Versi lama memakai satu berkas raster 1920x1080 (tangkapan layar dari
   tangkapan layar). Di sini bodi, bezel, status bar, dan seluruh isi layar
   adalah HTML + CSS. Konsekuensinya: tajam di layar retina berapa pun, bisa
   bergerak, bisa dibaca pembaca layar, dan tidak menambah satu byte pun ke
   jalur gambar.

   ---------------------------------------------------------------------------
   Cahaya

   Latarnya nyaris putih dan satu-satunya sumber warna adalah layar HP-nya
   sendiri — pendar di belakang perangkat adalah tumpahan cahaya layar itu.
   Ronanya bergeser per bab: hangat waktu di ruang rapat, membiru waktu di
   jalan, menghangat lagi waktu kopdar.

   Dua alasan latarnya terang, bukan gelap:
   - Persis di bawah section ini ada section Integrasi berlatar navy #142942.
     Dua blok gelap berdempet akan saling menelan.
   - Blush merek sudah dipakai hero, menu bar, dan section demo. Kalau di sini
     dipakai lagi, layar HP-nya kehilangan satu-satunya keistimewaannya.

   ---------------------------------------------------------------------------
   Padding bawah

   Section ini pernah memakai margin-top:-40px, untuk menutupi pita miring
   navy di dasar section aplikasi HP versi Elementor yang dulu berdiri tepat di
   atasnya. Section itu sudah dihapus, dan tetangga atasnya sekarang section
   Fitur Canggih (.wz4) yang tidak punya pita miring sama sekali — jadi margin
   negatifnya ikut dicabut. Kalau dibiarkan, ia justru akan memakan 40px ruang
   bawah milik tetangganya.

   Padding bawahnya tetap dilebihkan, karena di bawah 767px section Integrasi
   di bawah memang menarik dirinya naik 40px (aturan itu ada di dalam media
   query, jadi di desktop tarikannya tidak berlaku). Tidak ada isi yang ditaruh
   di zona tersebut.

   Skala radius (satu sistem):
     bodi HP 42px · layar 33px · kartu bab 14px · gelembung chat 10px
   ========================================================================== */

.wz-mo {
  /* ---- Perangkat -------------------------------------------------------- */
  /* Rasio dijaga 1:2,08 — kalau tingginya saja yang dipangkas, perangkatnya
     berubah jadi persegi dan langsung terbaca palsu. */
  --wz-mo-w: 262px;          /* lebar layar */
  --wz-mo-h: 545px;          /* tinggi layar */
  --wz-mo-bez: 10px;         /* tebal bezel */
  --wz-mo-r-out: 42px;
  /* Sepusat: radius layar HARUS radius bodi dikurangi tebal bezel, kalau tidak
     kedua lengkungnya tidak sejajar dan sudutnya terlihat "melangkah". */
  --wz-mo-r-in: 32px;

  /* Tinggi status bar, dipakai bersama oleh bilah itu sendiri dan perhitungan
     tinggi area tampilan di bawahnya. Dulu 34px ditulis dua kali secara
     terpisah — begitu salah satunya berubah, yang lain diam-diam meleset. */
  --wz-mo-status: 38px;

  /* ---- Warna aplikasi ---------------------------------------------------
     Chrome-nya terang, aksennya hijau. Ini mengikuti tampilan produk yang
     sudah dipakai di materi lama, dan sekaligus membuat perangkatnya jadi
     benda TERANG di tengah halaman — yang mana justru itu yang bikin gagasan
     "layarnya menyinari halaman" masuk akal. Slab hijau pekat akan melakukan
     kebalikannya. */
  --wz-mo-hijau: #12a37b;
  --wz-mo-hijau-tua: #0c7d5e;
  --wz-mo-bubble: #dcf8c6;   /* gelembung keluar */
  --wz-mo-wall: #ece5dd;     /* dinding percakapan */
  --wz-mo-chrome: #ffffff;
  --wz-mo-garis: rgba(15, 23, 42, .09);
  --wz-mo-ink: #111b21;
  --wz-mo-ink-soft: #667781;

  /* ---- Pendar (diganti per bab oleh JS) --------------------------------- */
  --wz-mo-glow: rgba(255, 197, 105, .58);

  --wz-mo-display: "Hind", system-ui, sans-serif;
  --wz-mo-body: "Quicksand", system-ui, sans-serif;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 74px 20px 82px;

  background: linear-gradient(180deg, #ffffff 0%, #fdf6f8 52%, #ffffff 100%);
  font-family: var(--wz-mo-body);
  color: var(--wz-ink, #171717);
}

.wz-mo *,
.wz-mo *::before,
.wz-mo *::after { box-sizing: border-box; }

/* Direset per kelas, BUKAN per tag.

   Versi sebelumnya menulis `.wz-mo :where(p, h2, h3, ul, li) { padding: 0 }`.
   :where() memang berkekhususan nol, tapi `.wz-mo` di depannya tidak — total
   (0,1,0), sama persis dengan `.wz-pill` di wz-ui.css. Karena berkas ini dimuat
   BELAKANGAN, seri itu dimenangkan di sini, dan padding 7px 16px milik pill
   ikut terhapus: labelnya kehilangan bentuk pil dan tampil beda sendiri dari
   pill di section lain. Menyebut kelas sendiri satu per satu menutup celah itu
   untuk selamanya. */
.wz-mo-h,
.wz-mo-sub,
.wz-mo-micro,
.wz-mo-rail { margin: 0; padding: 0; }
.wz-mo-rail { list-style: none; }

/* Tema memasang `button { border: 1px solid #cc3366 }` dan
   `button:hover { background: #cc3366 }` di reset.css. `button:hover`
   berkekhususan (0,1,1) — lebih tinggi dari satu kelas. Dinetralkan di (0,2,1);
   aturan yang memang mau memberi latar ditulis di (0,3,0) supaya tetap menang.
   Di dalam badan HP sengaja tidak ada satu pun <button> agar persoalan ini
   tidak menyebar. */
.wz-mo button,
.wz-mo button:hover,
.wz-mo button:focus,
.wz-mo button:active {
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
}

/* ---------- Pendar --------------------------------------------------------
   Gumpalan warna solid yang diburamkan, bukan radial-gradient. Alasannya bisa
   dianimasikan: background-color punya interpolasi, background-image tidak —
   mengganti warna di dalam gradient akan melompat, sedangkan di sini ia
   melunak selama 1,4 detik saat bab berganti.
   -------------------------------------------------------------------------- */

.wz-mo-glow,
.wz-mo-glow2 {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.wz-mo-glow {
  top: 22%;
  left: 0;
  width: 680px;
  height: 680px;
  background: var(--wz-mo-glow);
  filter: blur(110px);
  transition: background-color 1.4s ease;
}

/* Gumpalan rose tetap — menjaga section ini tetap terasa satu keluarga dengan
   sisa halaman, berapa pun rona jam yang sedang jalan. */
.wz-mo-glow2 {
  top: 8%;
  right: -6%;
  width: 480px;
  height: 480px;
  background: rgba(218, 51, 107, .13);
  filter: blur(120px);
}

.wz-mo-in {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
}

/* ---------- Kepala --------------------------------------------------------
   Judul membentang penuh di atas, baru di bawahnya pita dua kolom. Ini yang
   memutus cetakan "teks kiri / gambar kanan" yang dipakai section lama dan
   beberapa section lain di halaman ini.
   -------------------------------------------------------------------------- */

.wz-mo-head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.wz-mo-head .wz-pill { margin-bottom: 16px; }

/* Mengikuti sistem judul halaman, bukan sistem sendiri.

   Versi sebelumnya memakai dua tingkat ukuran — 27px abu di atas 49px rose —
   supaya barisnya terbaca sebagai premis lalu kesimpulan. Gagasannya jalan,
   tapi hasilnya berdiri sendirian: setiap judul section lain di halaman ini
   memakai SATU ukuran 36–40px, bobot 700, warna --wz-ink, dan hanya frasa
   aksennya yang berwarna rose (lihat .wz4-title dan .wzb-title). Judul yang
   ukurannya melompat dua kali lipat dan warnanya abu langsung terbaca berasal
   dari halaman lain.

   text-wrap: balance membagi kedua barisnya rata; tanpa itu baris kedua sering
   tinggal satu-dua kata. */
.wz-mo-h {
  font-family: var(--wz-mo-display);
  font-size: clamp(27px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: var(--wz-ink, #171717);
  text-wrap: balance;
}

.wz-mo-h em {
  font-style: normal;
  color: var(--wz-brand, #da336b);
}

/* <em> dipakai sebagai penanda aksen, bukan miring — pola yang sama dengan
   .wzb-title em di section CRM.

   display:block, bukan dibiarkan mengalir: kalau dibiarkan, barisnya patah di
   tengah frasa jadi "…Aja. Lewat HP / Juga Bisa" — separuh kalimat pertama
   ikut naik ke baris beraksen. Dijadikan blok, patahnya selalu di titik. */
.wz-mo-h em {
  display: block;
  font-style: normal;
  color: var(--wz-brand, #da336b);
}

/* ---------- Pita perangkat + naskah --------------------------------------- */

.wz-mo-band {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;

  /* Dipersempit dari 1140px ke 900px, dan dipusatkan.

     Isi kolom kanan dibatasi 460px, jadi pada lebar penuh ada hampir 290px
     kosong menganga di sebelah kanan paragraf — itulah sumber kesan "boros
     space" yang sebenarnya, bukan tinggi sectionnya. Kepala section tetap
     memakai lebar penuh supaya judulnya tidak ikut menyempit. */
  max-width: 900px;
  margin: 0 auto;
}

.wz-mo-stage {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   PERANGKAT
   ========================================================================== */

.wz-mo-phone {
  position: relative;
  width: calc(var(--wz-mo-w) + var(--wz-mo-bez) * 2);
  padding: var(--wz-mo-bez);
  border-radius: var(--wz-mo-r-out);

  /* Bodi logam: gradient miring memberi kesan satu sisi menangkap cahaya. */
  background: linear-gradient(145deg, #3a4152 0%, #191d27 38%, #0f131b 100%);

  /* Bayangan berlapis: kontak rapat di bawah bodi, lalu jatuh jauh dan lembut.
     Satu bayangan besar saja membuat perangkatnya terlihat mengambang seperti
     stiker. */
  box-shadow:
    0 2px 4px rgba(15, 23, 42, .18),
    0 16px 30px rgba(15, 23, 42, .14),
    0 40px 80px rgba(15, 23, 42, .2);

  /* TEGAK, dan diam.

     Versi sebelumnya dimiringkan 3 derajat dan dibuat hanyut pelan supaya
     terbaca "sedang dipegang". Dua-duanya dicabut: kemiringan membuat setiap
     baris daftar chat ikut menyerong, jadi delapan garis pemisah horizontal
     berubah jadi delapan garis serong dan seluruh isinya terbaca berantakan.
     Hanyutnya menambah masalah kedua — teks yang bergerak sub-piksel tidak
     pernah benar-benar tajam.

     Yang bergerak sekarang cuma isi layarnya. Bodinya jadi bingkai yang diam,
     dan justru itu yang membuat gerakan di dalamnya kelihatan. */
  transform: none;
}

/* Kilau tepi — garis putih tipis di sisi dalam bezel. Detail kecil ini yang
   membedakan "bodi perangkat" dari "persegi panjang gelap". */
.wz-mo-phone::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .14);
  pointer-events: none;
}

/* Tombol samping */
.wz-mo-phone::after {
  content: "";
  position: absolute;
  top: 116px;
  right: -2px;
  width: 3px;
  height: 56px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a5265, #232936);
}

.wz-mo-screen {
  position: relative;
  overflow: hidden;
  width: var(--wz-mo-w);
  height: var(--wz-mo-h);
  border-radius: var(--wz-mo-r-in);
  background: var(--wz-mo-chrome);
}

/* ---------- Status bar ---------------------------------------------------- */

.wz-mo-status {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--wz-mo-status);
  padding: 0 18px 0 20px;
  background: var(--wz-mo-chrome);
  color: var(--wz-mo-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.wz-mo-status-kanan {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wz-mo-status svg {
  display: block;
  height: 11px;
  width: auto;
  fill: currentColor;
}

/* Dynamic island.

   Dua hal yang salah sebelumnya. Pertama, ia anak dari .wz-mo-phone, bukan
   dari layar — jadi `top: 8px` dihitung dari tepi BODI, dan karena bezelnya
   10px, island-nya berakhir 2px DI LUAR layar. Ujung atasnya terpotong bezel
   dan bentuknya bukan pil lagi, melainkan gundukan yang menempel di tepi.

   Kedua, ukurannya karangan. Acuan iPhone 15: layar 393x852pt, island
   125x37pt, berjarak 11pt dari tepi atas layar. Ketiganya sekarang diturunkan
   sebagai pecahan dari ukuran layar, jadi proporsinya tetap benar di kedua
   breakpoint tanpa angka yang perlu dirawat dua kali. */
.wz-mo-poni {
  position: absolute;
  top: calc(var(--wz-mo-bez) + var(--wz-mo-h) * 0.0129);
  left: 50%;
  z-index: 4;
  width: calc(var(--wz-mo-w) * 0.318);
  height: calc(var(--wz-mo-h) * 0.0434);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0b0e14;
}

/* Lensa kamera. Detail sekecil ini yang membedakan "pil hitam" dari island. */
.wz-mo-poni::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c3444, #12161f 70%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16);
}

/* ---------- Dua tampilan yang saling geser -------------------------------- */

.wz-mo-views {
  display: flex;
  width: 200%;
  height: calc(var(--wz-mo-h) - var(--wz-mo-status));
  transition: transform .52s cubic-bezier(.65, 0, .35, 1);
}

.wz-mo[data-mo-view="chat"] .wz-mo-views { transform: translateX(-50%); }

.wz-mo-view {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}

/* ---------- Daftar chat --------------------------------------------------- */

.wz-mo-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 6px 16px 12px;
  background: var(--wz-mo-chrome);
}

.wz-mo-appbar-h {
  font-family: var(--wz-mo-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--wz-mo-ink);
}

.wz-mo-appbar-ikon {
  display: flex;
  gap: 14px;
  color: var(--wz-mo-ink-soft);
}

.wz-mo-appbar-ikon svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wz-mo-tabs {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  /* Dipotong di tepi, sama seperti baris quick reply: di layar sempit ketiga
     tab tidak muat, dan kalau dibiarkan membungkus, "Belum dibaca" patah jadi
     dua baris dan tinggi seluruh daftar ikut bergeser. */
  overflow: hidden;
  padding: 0 16px 11px;
}

.wz-mo-tab {
  flex: 0 0 auto;
  padding: 4px 11px;
  white-space: nowrap;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--wz-mo-ink-soft);
  font-size: 10.5px;
  font-weight: 700;
}

.wz-mo-tab.is-on {
  background: #d6f5e6;
  color: var(--wz-mo-hijau-tua);
}

.wz-mo-rows {
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--wz-mo-chrome);

  /* Baris terakhir sengaja terpotong — daftar chat memang lebih panjang dari
     layarnya. Tapi potongan yang lurus terbaca sebagai salah render, bukan
     sebagai "masih ada di bawah". Memudarkan 46px terakhir membalik arti itu:
     sekarang jelas daftarnya bersambung. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 46px), transparent 100%);
}

.wz-mo-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  transition: background .25s ease;
}

/* Garis pemisah MENJOROK, mulai sesudah avatar.

   Sebelumnya dipasang sebagai inset box-shadow selebar baris, jadi delapan
   garis penuh membelah layar dari tepi ke tepi dan daftarnya terbaca sebagai
   tabel, bukan sebagai daftar percakapan. 15px padding + 38px avatar + 10px
   jarak = 63px. */
.wz-mo-row + .wz-mo-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 63px;
  right: 0;
  height: 1px;
  background: var(--wz-mo-garis);
}

/* Titik label di depan nama.

   Ini bukan hiasan: WatZap adalah inbox TIM, dan label itulah yang membedakan
   dia dari WhatsApp biasa — babak terakhir tiap bab bahkan mencap satu. Berupa
   titik, bukan teks, karena pada layar selebar 262px tidak ada satu pun kolom
   yang bisa menampung kata tanpa menggencet pratinjau pesannya.

   Percobaan pertama menaruhnya sebagai pita 3px di tepi kiri baris. Dicabut:
   di tepi layar, tepat di sebelah bezel yang gelap, batang setipis itu terbaca
   sebagai artefak render — bukan sebagai penanda. Di dalam area isi, sebagai
   titik di depan nama, maksudnya langsung terbaca. */
.wz-mo-row[data-mo-tag] .wz-mo-row-nama::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--wz-mo-tag);
  vertical-align: 1px;
}

/* Baris milik bab yang sedang jalan disorot — cukup untuk menuntun mata ke
   baris yang sebentar lagi terbuka, tidak sampai menyaingi badge belum dibaca. */
.wz-mo-row.is-aktif { background: #edf8f3; }

.wz-mo-av {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;

  /* Kilau tipis di tepi atas. Lingkaran warna rata terbaca sebagai placeholder;
     satu sapuan putih 14% sudah cukup membuatnya terbaca sebagai objek. */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 58%),
    var(--wz-mo-av-bg, #12a37b);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
}

.wz-mo-row-mid {
  flex: 1 1 auto;
  min-width: 0;
}

.wz-mo-row-nama {
  font-size: 13px;
  font-weight: 700;
  color: var(--wz-mo-ink);
}

.wz-mo-row-pesan {
  overflow: hidden;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--wz-mo-ink-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wz-mo-row.is-belum .wz-mo-row-pesan {
  color: var(--wz-mo-ink);
  font-weight: 700;
}

/* Centang biru di pratinjau baris, muncul setelah balasan terkirim. */
.wz-mo-row-tick {
  display: none;
  margin-right: 3px;
  color: #34b7f1;
  font-weight: 700;
}

.wz-mo-row.is-terjawab .wz-mo-row-tick { display: inline; }

.wz-mo-row-end {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  align-self: flex-start;
  padding-top: 2px;
}

.wz-mo-row-jam {
  font-size: 10px;
  font-weight: 600;
  color: var(--wz-mo-ink-soft);
}

.wz-mo-row.is-belum .wz-mo-row-jam { color: var(--wz-mo-hijau); }

.wz-mo-badge {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--wz-mo-hijau);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .34s cubic-bezier(.34, 1.56, .64, 1);
}

.wz-mo-row.is-belum .wz-mo-badge {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Bilah tab bawah ------------------------------------------------
   Tanpa ini layarnya cuma "daftar di dalam persegi panjang". Bilah tab adalah
   satu-satunya elemen yang langsung memberi tahu mata bahwa yang dilihat ini
   APLIKASI — dan sekaligus menjelaskan bahwa WatZap punya kontak dan analitik,
   bukan cuma kotak masuk.

   Hanya ada di tampilan daftar. Layar percakapan di aplikasi chat mana pun
   menyembunyikannya, dan menampilkannya di sana justru akan salah.
   -------------------------------------------------------------------------- */

.wz-mo-tabbar {
  display: flex;
  flex: 0 0 auto;
  padding: 7px 4px 9px;
  background: var(--wz-mo-chrome);
  box-shadow: 0 -1px 0 var(--wz-mo-garis);
}

.wz-mo-tb {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--wz-mo-ink-soft);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.wz-mo-tb.is-on { color: var(--wz-mo-hijau); }

.wz-mo-tb svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Angka belum-dibaca menempel di ikon Inbox — sama seperti di aplikasi
   sungguhan, dan ia menegaskan lagi bahwa ada pekerjaan menunggu. */
.wz-mo-tb-badge {
  position: absolute;
  top: -3px;
  left: 50%;
  margin-left: 4px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--wz-brand, #da336b);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* ---------- Percakapan ---------------------------------------------------- */

.wz-mo-convbar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 7px 14px 10px;
  background: var(--wz-mo-chrome);
  box-shadow: 0 1px 0 var(--wz-mo-garis);
}

.wz-mo-back {
  flex: 0 0 auto;
  color: var(--wz-mo-ink-soft);
}

.wz-mo-back svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wz-mo-convbar .wz-mo-av {
  width: 31px;
  height: 31px;
  font-size: 12px;
}

.wz-mo-conv-mid {
  flex: 1 1 auto;
  min-width: 0;
}

.wz-mo-conv-nama {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wz-mo-ink);
}

.wz-mo-conv-status {
  font-size: 10px;
  font-weight: 600;
  color: var(--wz-mo-hijau);
}

/* Baris status di bawah nama: "online", lalu label CRM menyusul di sampingnya
   begitu tercap. Dulu labelnya berdiri sendiri di ujung kanan bilah — dan
   karena ia baru muncul di babak terakhir, sepanjang sisa cerita sisi kanan
   nama pelanggan menganga kosong. */
.wz-mo-conv-baris {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Label CRM yang tercap otomatis di akhir bab. Ini kosakata yang sama dengan
   section CRM di atas halaman — sengaja, supaya pembaca mengenali istilahnya. */
.wz-mo-label {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--wz-pill-bg, #fdeef4);
  color: var(--wz-pill-text, #a8244f);
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.6) rotate(-8deg);
  transition: opacity .18s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.wz-mo.is-label .wz-mo-label {
  opacity: 1;
  transform: none;
}

/* Tombol panggilan di ujung kanan bilah. Ada terus, di babak mana pun — itu
   sebabnya ia yang mengisi ruang kanan, bukan label yang datang belakangan.
   Dan memang di situlah letaknya di setiap aplikasi chat. */
.wz-mo-conv-aksi {
  display: flex;
  flex: 0 0 auto;
  gap: 13px;
  color: var(--wz-mo-ink-soft);
}

.wz-mo-conv-aksi svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wz-mo-thread {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Menempel ke DASAR, bukan ke puncak. Percakapan yang baru dibuka selalu
     memperlihatkan pesan terakhir di bawah; kalau ditumpuk dari atas, sisa
     ruangnya menganga di bawah gelembung dan ilusinya langsung hilang. */
  justify-content: flex-end;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 12px 12px 8px;
  background-color: var(--wz-mo-wall);
  background-image: url("../img/wa-doodle.svg");
  /* Ubinnya kecil supaya terbaca sebagai TEKSTUR. Pada 150px cuma muat dua
     ubin selebar layar, dan tiap coretan jadi cukup besar untuk dikenali satu
     per satu — dindingnya berebut perhatian dengan gelembungnya. */
  background-size: 64px;
}

.wz-mo-day {
  align-self: center;
  width: fit-content;
  margin: 0 0 10px;
  padding: 3px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .88);
  color: var(--wz-mo-ink-soft);
  font-size: 9.5px;
  font-weight: 700;
}

.wz-mo-bub {
  position: relative;
  max-width: 78%;
  margin-bottom: 8px;
  padding: 7px 10px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.42;
  color: var(--wz-mo-ink);
  box-shadow: 0 1px 1px rgba(15, 23, 42, .1);
}

/* --in dipakai HANYA oleh gelembung cerita, karena skripnya menulis isi lewat
   querySelector('.wz-mo-bub--in ...') yang mengembalikan yang PERTAMA. Gelembung
   riwayat memakai --lalu-in supaya tidak ikut tertimpa. */
.wz-mo-bub--in,
.wz-mo-bub--lalu-in {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 3px;
}

/* --lalu = gelembung riwayat, sudah ada sejak percakapan dibuka. Bentuknya
   sama dengan --out tapi TANPA gerbang .is-sent, jadi ia tidak ikut terbang
   masuk waktu balasan cerita dikirim. */
.wz-mo-bub--lalu {
  align-self: flex-end;
  background: var(--wz-mo-bubble);
  border-top-right-radius: 3px;
}

.wz-mo-bub--out {
  align-self: flex-end;
  background: var(--wz-mo-bubble);
  border-top-right-radius: 3px;

  /* Terbang masuk dari arah kolom balasan, bukan sekadar memudar. */
  opacity: 0;
  transform: translate(14px, 16px) scale(.9);

  /* Dan tidak memesan ruang selama belum terkirim.

     Sebelumnya ia tetap mengalir dengan opacity 0, jadi ada sepetak dinding
     kosong setinggi satu gelembung menganga di antara pesan terakhir dan baris
     saran — persoalan yang sama dengan baris saran itu sendiri. Karena
     percakapan ini menempel ke dasar, gelembungnya sekarang MENDORONG pesan
     lama ke atas saat muncul, persis seperti aplikasi chat sungguhan. */
     Padding ikut dinolkan, bukan cuma max-height: dengan box-sizing border-box,
     max-height:0 hanya memaksa KOTAK ISI jadi nol — padding tidak bisa
     menyusut sendiri, jadi tanpa ini gelembungnya tetap menyisakan setinggi
     padding atas-bawahnya (terukur 23px). */
  overflow: hidden;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: opacity .2s ease,
              transform .42s cubic-bezier(.34, 1.4, .64, 1),
              max-height .34s cubic-bezier(.34, 1.4, .64, 1),
              margin-bottom .34s cubic-bezier(.34, 1.4, .64, 1),
              padding-top .34s cubic-bezier(.34, 1.4, .64, 1),
              padding-bottom .34s cubic-bezier(.34, 1.4, .64, 1);
}

.wz-mo.is-sent .wz-mo-bub--out {
  opacity: 1;
  transform: none;
  max-height: 140px;
  margin-bottom: 8px;
  padding-top: 7px;
  padding-bottom: 16px;
}

.wz-mo-bub-jam {
  position: absolute;
  right: 9px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--wz-mo-ink-soft);
}

.wz-mo-bub-tick {
  color: var(--wz-mo-ink-soft);
  transition: color .3s ease;
}

.wz-mo.is-read .wz-mo-bub-tick { color: #34b7f1; }

/* Centang gelembung riwayat sudah biru sejak awal — pesannya memang sudah
   dibaca jauh sebelum babak ini mulai. */
.wz-mo-bub-tick.is-biru { color: #34b7f1; }

/* Kepala gelembung broadcast. Menandai bahwa pesan pertama di percakapan ini
   bukan diketik satu per satu, melainkan berasal dari kampanye — itulah alur
   WatZap yang sebenarnya: broadcast keluar, balasannya mendarat di inbox tim. */
.wz-mo-bc {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(15, 23, 42, .09);
  color: var(--wz-pill-text, #a8244f);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.wz-mo-bc svg {
  display: block;
  width: 9px;
  height: 9px;
  fill: currentColor;
}

/* Baris sistem di tengah percakapan — bentuknya sama dengan pemisah tanggal
   supaya terbaca sebagai catatan sistem, bukan sebagai pesan. */
.wz-mo-meta {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 92%;
  margin: 2px 0 10px;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--wz-pill-bg, #fdeef4);
  color: var(--wz-pill-text, #a8244f);
  font-size: 9px;
  font-weight: 600;
  text-align: center;
}

.wz-mo-meta b { font-weight: 800; }

.wz-mo-meta svg {
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Quick reply --------------------------------------------------- */

.wz-mo-quick {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  /* Dipotong, bukan dibungkus: baris saran di aplikasi chat memang menggulir
     ke samping, jadi chip ketiga yang kepanjangan terpotong di tepi layar. */
  overflow: hidden;

  flex-direction: column;
  gap: 5px;

  /* TERTUTUP secara bawaan; hanya terbuka selama sarannya benar-benar ada.

     Perbaikan sebelumnya cuma menutupnya SESUDAH balasan terkirim, jadi pita
     putih kosong itu masih menganga pada babak sebelum saran muncul — antara
     percakapan dibuka dan chip naik. Sekarang gerbangnya .is-quick, bukan
     .is-sent: kalau tidak ada saran yang ditampilkan, barisnya tidak memakan
     ruang sama sekali, di babak mana pun.

     max-height, bukan height: keadaan terbukanya statis, jadi tidak ada
     persoalan "tinggi otomatis tidak bisa dianimasikan". */
  max-height: 0;
  padding: 0 12px;
  background: var(--wz-mo-chrome);
  transition: max-height .34s cubic-bezier(.65, 0, .35, 1),
              padding-top .34s cubic-bezier(.65, 0, .35, 1);
}

.wz-mo.is-quick .wz-mo-quick {
  max-height: 64px;
  padding-top: 9px;
}

/* Label saran AI. Chip balasan cepat tanpa keterangan terbaca sebagai tombol
   biasa; dengan label ini, babak yang sama terbaca sebagai sistem yang
   MENGUSULKAN. Rose, bukan hijau — di dalam layar ini rose dipakai konsisten
   untuk fitur WatZap (label, penugasan, broadcast, AI), hijau untuk lapisan
   percakapan WhatsApp-nya. */
.wz-mo-quick-h {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--wz-pill-text, #a8244f);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}

.wz-mo-quick-h svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.wz-mo-chips {
  display: flex;
  gap: 6px;
  overflow: hidden;
}

.wz-mo-chip {
  /* flex-shrink 0 wajib. Bawaannya 1, jadi ketiga chip menyusut bersama-sama
     dan SEMUANYA kena elipsis — bukan yang terakhir saja yang terpotong. */
  flex: 0 0 auto;
  overflow: hidden;
  padding: 5px 10px;
  border: 1px solid rgba(18, 163, 123, .34);
  border-radius: 999px;
  background: #eefaf5;
  color: var(--wz-mo-hijau-tua);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity .24s ease, transform .34s cubic-bezier(.22, 1, .36, 1),
              background .2s ease, border-color .2s ease;
}

/* Naik satu per satu, bukan serempak — jeda kecil ini yang membuatnya terbaca
   sebagai saran yang muncul, bukan panel yang menyala. */
.wz-mo.is-quick .wz-mo-chip { opacity: 1; transform: none; }
.wz-mo.is-quick .wz-mo-chip:nth-child(2) { transition-delay: .07s; }
.wz-mo.is-quick .wz-mo-chip:nth-child(3) { transition-delay: .14s; }

/* Chip yang "ditekan": berkedip pekat sesaat sebelum isinya terbang jadi
   gelembung keluar. */
.wz-mo.is-pick .wz-mo-chip--pilih {
  background: var(--wz-mo-hijau);
  border-color: var(--wz-mo-hijau);
  color: #fff;
  transform: scale(.94);
}

.wz-mo.is-sent .wz-mo-chip {
  opacity: 0;
  transform: translateY(8px);
  transition-delay: 0s;
}

/* ---------- Bilah ketik --------------------------------------------------- */

.wz-mo-input {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 12px 12px;
  background: var(--wz-mo-chrome);
}

.wz-mo-field {
  flex: 1 1 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--wz-mo-ink-soft);
  font-size: 11px;
  font-weight: 600;
}

.wz-mo-send {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wz-mo-hijau);
  color: #fff;
}

.wz-mo-send svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* ---------- Banner notifikasi ---------------------------------------------
   Momen paling dikenali dari "chat masuk waktu lagi tidak di meja". Ia
   melayang di ATAS seluruh isi layar, seperti banner OS sungguhan.
   -------------------------------------------------------------------------- */

.wz-mo-notif {
  position: absolute;
  /* Diturunkan sampai menyisakan sesobek app bar di atasnya. Sobekan itu yang
     memberi tahu mata bahwa banner ini MELAYANG di atas aplikasi, bukan bagian
     dari aplikasinya. */
  top: 46px;
  left: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 17px;

  /* Nyaris pekat, bergaris tepi, dan berbayang tebal. Versi tembus pandang
     lenyap di atas app bar yang sama-sama putih — dua permukaan putih tanpa
     batas terbaca sebagai satu permukaan. */
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(15, 23, 42, .07);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .3), 0 2px 6px rgba(15, 23, 42, .12);
  backdrop-filter: blur(12px);

  opacity: 0;
  transform: translateY(-130%);
  transition: opacity .22s ease, transform .46s cubic-bezier(.22, 1, .36, 1);
}

.wz-mo.is-notif .wz-mo-notif {
  opacity: 1;
  transform: none;
}

.wz-mo-notif .wz-mo-av {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.wz-mo-notif-mid {
  flex: 1 1 auto;
  min-width: 0;
}

.wz-mo-notif-nama {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--wz-mo-ink);
}

.wz-mo-notif-jam {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 600;
  color: var(--wz-mo-ink-soft);
}

.wz-mo-notif-pesan {
  overflow: hidden;
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--wz-mo-ink-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ==========================================================================
   KOLOM NASKAH
   ========================================================================== */

.wz-mo-sub {
  max-width: 460px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.58;
  color: var(--wz-ink-soft, #5a5a5a);
}

/* ---------- Rel bab -------------------------------------------------------
   Tiga alternatif, BUKAN tiga langkah — jadi tidak dinomori. Penandanya
   berupa bilah progres yang benar-benar terisi sesuai sisa waktu bab, supaya
   jelas bahwa ini berjalan sendiri dan bisa diklik untuk lompat.
   -------------------------------------------------------------------------- */

.wz-mo-rail {
  display: grid;
  gap: 9px;
  margin-top: 24px;
  max-width: 460px;
}

.wz-mo-bab {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 1px 13px;
  width: 100%;
  padding: 12px 15px 15px;
  border-radius: 15px;
  text-align: left;
  cursor: pointer;

  /* <button> mewarisi white-space: nowrap dari lapisan reset halaman ini, dan
     karena kartunya memang sebuah <button>, keterangannya tidak pernah
     membungkus — ia hanya melimpah keluar kartu begitu kalimatnya sedikit lebih
     panjang dari lebar kolom. Dikembalikan ke normal secara eksplisit. */
  white-space: normal;
  overflow-wrap: break-word;

  transition: background .24s ease, box-shadow .24s ease, transform .24s ease;
}

/* Ketiganya berupa KARTU, yang aktif diangkat.

   Sebelumnya hanya yang aktif punya kartu dan sisanya teks telanjang berpenanda
   cincin — susunan itu terbaca sebagai daftar tombol radio, bukan sebagai tiga
   pilihan setara. Latar ditulis di (0,3,0) supaya menang atas penetral (0,2,1)
   di bagian atas berkas. */
.wz-mo .wz-mo-bab,
.wz-mo .wz-mo-bab:focus,
.wz-mo .wz-mo-bab:active {
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(23, 23, 23, .055);
}

.wz-mo .wz-mo-bab:hover {
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(218, 51, 107, .16);
}

.wz-mo .wz-mo-bab.is-on {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px rgba(15, 23, 42, .08);
}

.wz-mo-bab:focus-visible {
  outline: 2px solid var(--wz-brand, #da336b);
  outline-offset: 3px;
}

/* Ubin ikon.

   Ketiga bab bicara soal TEMPAT, dan tempat itu hal yang paling cepat dikenali
   lewat gambar, bukan lewat cincin kosong yang identik satu sama lain. Ikonnya
   memakai FontAwesome yang memang sudah dimuat halaman ini — bukan path SVG
   buatan sendiri. */
.wz-mo-bab-i {
  grid-row: 1 / span 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(23, 23, 23, .05);
  color: #8d8d8d;
  font-size: 15px;
  transition: background .24s ease, color .24s ease;
}

.wz-mo-bab.is-on .wz-mo-bab-i {
  background: var(--wz-pill-bg, #fdeef4);
  color: var(--wz-brand, #da336b);
}

.wz-mo-bab-t {
  font-family: var(--wz-mo-display);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wz-ink, #171717);
}

.wz-mo-bab-d {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wz-ink-soft, #5a5a5a);
}

.wz-mo-bab-bar {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 6px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(23, 23, 23, .08);
  opacity: 0;
  transition: opacity .24s ease;
}

.wz-mo-bab.is-on .wz-mo-bab-bar { opacity: 1; }

.wz-mo-bab-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--wz-brand, #da336b);
  transform: scaleX(var(--wz-mo-p, 0));
  transform-origin: left center;
}

/* ---------- Badge toko ----------------------------------------------------
   Tetap memakai lencana resmi Google Play dan App Store: pedoman merek kedua
   platform mensyaratkan artwork resmi, jadi ini satu-satunya gambar yang
   sengaja dipertahankan di section ini. Yang diperbaiki cuma tingginya —
   berkas aslinya 391x112 dan 613x176, jadi kalau dipasang apa adanya keduanya
   tampil dengan skala berbeda.
   -------------------------------------------------------------------------- */

.wz-mo-store {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 26px;
}

.wz-mo-store img {
  display: block;
  width: auto;
  height: 44px;
}

.wz-mo-micro {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wz-ink-soft, #5a5a5a);
}

/* ==========================================================================
   LAYAR SEMPIT

   Section lama diberi elementor-hidden-tablet + elementor-hidden-mobile, jadi
   di HP ia tidak pernah muncul sama sekali — section tentang aplikasi HP tidak
   terlihat oleh orang yang sedang memegang HP. Section ini tampil di semua
   ukuran.
   ========================================================================== */

@media (max-width: 1040px) {
  .wz-mo-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
    justify-items: center;
  }

  .wz-mo-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .wz-mo-sub { text-align: center; }

  .wz-mo-rail {
    width: 100%;
    max-width: 520px;
  }

  .wz-mo-store { justify-content: center; }
}

@media (max-width: 600px) {
  .wz-mo {
    /* Rasio 1:2,08 dipertahankan, sama seperti di desktop. */
    --wz-mo-w: 238px;
    --wz-mo-h: 495px;
    --wz-mo-bez: 9px;
    --wz-mo-r-out: 38px;
    --wz-mo-r-in: 30px;

    padding: 54px 16px 72px;
  }

  .wz-mo-head { margin-bottom: 30px; }

  /* Pendar berat kalau diburamkan sebesar layar besar; radiusnya dikecilkan
     bersama ukurannya. */
  .wz-mo-glow {
    width: 340px;
    height: 340px;
    filter: blur(70px);
  }

  .wz-mo-glow2 { display: none; }

  .wz-mo-bab { padding: 11px 14px 13px; }
  .wz-mo-bab-bar { left: 14px; right: 14px; }
  .wz-mo-bab-t { font-size: 15.5px; }
  .wz-mo-bab-d { font-size: 13px; }

  .wz-mo-sub { font-size: 15.5px; }
  .wz-mo-store img { height: 42px; }
}

/* ==========================================================================
   GERAK DIKURANGI

   Yang dimatikan bukan cuma animasinya, tapi juga jam pemutarnya (di JS).
   Perangkatnya ditinggal di keadaan bab yang sudah tuntas — balasan terkirim,
   centang biru, label tercap — jadi pembaca tetap melihat kesimpulan ceritanya
   tanpa satu piksel pun bergerak.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .wz-mo-views,
  .wz-mo-notif,
  .wz-mo-bub--out,
  .wz-mo-chip,
  .wz-mo-badge,
  .wz-mo-label,
  .wz-mo-bub-tick,
  .wz-mo-glow,
  .wz-mo-bab,
  .wz-mo-row { transition-duration: .01ms; }
}