/* ==========================================================================
   CHAT PEMBELI ala WhatsApp — /user/pesan, /user/pesan/:id, /chat, widget.
   Pemilik (1 Nov 2026): "halaman chat di user nya juga ubah tampilannya biar
   familiar kayak whatsapp / termasuk mini chat / halaman chat nya juga".

   Berkas statis sendiri, BUKAN src/styles/input.css: style.css hasil build
   memangkas kelas yang tak ditemukan pemindai Tailwind, sedangkan sebagian
   besar markup di sini lahir dari JS (gelembung, kartu, centang). Satu berkas
   juga berarti satu rumah untuk aturan centang & meta gelembung — dulu
   disalin ke empat view dan satu asumsi opacity yang keliru membuat centang
   "dibaca" terukur 1.01:1 di keempatnya sekaligus. JANGAN menyalin aturan
   .cp-tick / .cp-b-meta ke <style> sebuah view (test-centang-baca menjaganya).

   Tema: gelap-dulu seperti seluruh etalase. Token di .cp (gelap) dan
   [data-theme="light"] .cp (terang). .cp-tata = <body> dalam mode chat
   (layout.ejs) supaya latar halaman ikut token yang sama. Di popup admin akar
   widget sendiri ber-data-theme="light", jadi .cp dipasang di .cw-panel
   (keturunannya), bukan di akarnya.

   Warna asli WhatsApp yang gagal AA DIGELAPKAN/DITERANGKAN (diukur WCAG 2.x,
   lihat tabel kontrak C1): abu #667781 di terang cuma 3.88-4.19:1, centang
   biru #53bdeb 1.92:1 di gelembung hijau, hijau #00a884 sebagai teks 2.7:1.
   test-chat-pembeli-view menghitung ulang setiap pasangan dari berkas ini.
   ========================================================================== */

.cp,
.cp-tata {
  --cp-wall: #0b141a;
  --cp-panel: #202c33;
  --cp-surface: #111b21;
  --cp-in: #202c33;
  --cp-out: #005c4b;
  --cp-text: #e9edef;
  --cp-muted: #8696a0;
  --cp-muted-sel: #aebac1;
  --cp-meta-out: #b3cfc9;
  --cp-tick: #b3cfc9;
  --cp-tick-baca: #8ad4f8;
  --cp-accent: #00a884;
  --cp-accent-teks: #00a884;
  --cp-segel: #00a884;
  --cp-btn: #00a884;
  --cp-btn-ink: #111b21;
  --cp-kirim-ink: #111b21;
  --cp-lencana: #00a884;
  --cp-lencana-ink: #111b21;
  --cp-jam-baru: #00a884;
  --cp-notice: #182229;
  --cp-notice-ink: #ffd279;
  --cp-tgl: #182229;
  --cp-tgl-ink: #8696a0;
  --cp-input: #2a3942;
  --cp-placeholder: #aebac1;
  --cp-menu: #233138;
  --cp-menu-muted: #aebac1;
  --cp-bahaya: #f47c88;
  --cp-kartu: rgba(255, 255, 255, .06);
  --cp-kartu-aksen: #06cf9c;
  --cp-kartu-aksen-out: #71e8c8;
  --cp-kartu-redup: #aebac1;
  --cp-kartu-redup-out: #cfe3df;
  --cp-line: #222d34;
  --cp-hover: #202c33;
  --cp-sel: #2a3942;
  --cp-ikon: #aebac1;
  --cp-luar: #0c1317;
  --cp-foto-bg: #1d282f;
  --cp-av-cs: #233138;
  --cp-strip-baru: rgba(11, 20, 26, .55);
  --cp-bayang: 0 1px .5px rgba(11, 20, 26, .45);
  --cp-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(-12 40 34)'%3E%3Cpath d='M27 24h26a12 12 0 0 1 12 12v1a12 12 0 0 1-12 12c-3.6 0-5-2-7-4.5H34c-2 2.5-3.4 4.5-7 4.5a12 12 0 0 1-12-12v-1a12 12 0 0 1 12-12z'/%3E%3Cpath d='M23 36.5h8M27 32.5v8'/%3E%3Ccircle cx='49' cy='34' r='1.3'/%3E%3Ccircle cx='54' cy='39' r='1.3'/%3E%3C/g%3E%3Cg transform='rotate(10 168 32)'%3E%3Cpath d='M158 18h20l8 10-18 22-18-22z'/%3E%3Cpath d='M150 28h36M163 18l-3 10 8 22 8-22-3-10'/%3E%3C/g%3E%3Ccircle cx='100' cy='110' r='15'/%3E%3Ccircle cx='100' cy='110' r='10'/%3E%3Cpath d='M100 104v12'/%3E%3Cg transform='rotate(-6 190 128)'%3E%3Cpath d='M174 112h32a7 7 0 0 1 7 7v16a7 7 0 0 1-7 7h-20l-9 8v-8h-3a7 7 0 0 1-7-7v-16a7 7 0 0 1 7-7z'/%3E%3Cpath d='M182 124h16M182 131h10'/%3E%3C/g%3E%3Cpath d='M42 160l4.7 9.5 10.5 1.5-7.6 7.4 1.8 10.4-9.4-4.9-9.4 4.9 1.8-10.4-7.6-7.4 10.5-1.5z'/%3E%3Cpath d='M128 186v14M121 193h14'/%3E%3Cpath d='M200 222c-4-3-8-6-8-10a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 4-4 7-8 10z'/%3E%3Cpath d='M88 196l-8 12h7l-3 10 9-13h-7l3-9z'/%3E%3Ccircle cx='76' cy='62' r='2.5'/%3E%3Ccircle cx='216' cy='74' r='2'/%3E%3Ccircle cx='148' cy='78' r='1.6'/%3E%3Ccircle cx='20' cy='112' r='1.8'/%3E%3Cpath d='M222 168l3 3M225 168l-3 3'/%3E%3C/g%3E%3C/svg%3E");
}

[data-theme="light"] .cp,
[data-theme="light"] .cp-tata {
  --cp-wall: #efeae2;
  --cp-panel: #f0f2f5;
  --cp-surface: #ffffff;
  --cp-in: #ffffff;
  --cp-out: #d9fdd3;
  --cp-text: #111b21;
  --cp-muted: #54656f;
  --cp-muted-sel: #54656f;
  --cp-meta-out: #54656f;
  --cp-tick: #54656f;
  --cp-tick-baca: #0b6fa4;
  --cp-accent: #00a884;
  --cp-accent-teks: #006b57;
  --cp-segel: #008069;
  --cp-btn: #008069;
  --cp-btn-ink: #ffffff;
  --cp-kirim-ink: #ffffff;
  --cp-lencana: #25d366;
  --cp-lencana-ink: #111b21;
  --cp-jam-baru: #007a3d;
  --cp-notice: #ffeecd;
  --cp-notice-ink: #5e4a1a;
  --cp-tgl: #ffffff;
  --cp-tgl-ink: #54656f;
  --cp-input: #ffffff;
  --cp-placeholder: #54656f;
  --cp-menu: #ffffff;
  --cp-menu-muted: #54656f;
  --cp-bahaya: #b42318;
  --cp-kartu: rgba(11, 20, 26, .05);
  --cp-kartu-aksen: #006b57;
  --cp-kartu-aksen-out: #006b57;
  --cp-kartu-redup: #54656f;
  --cp-kartu-redup-out: #54656f;
  --cp-line: #e9edef;
  --cp-hover: #f5f6f6;
  --cp-sel: #f0f2f5;
  --cp-ikon: #54656f;
  --cp-luar: #e3e6e8;
  --cp-foto-bg: #dfe5e7;
  --cp-av-cs: #ffffff;
  --cp-strip-baru: rgba(255, 255, 255, .5);
  --cp-bayang: 0 1px .5px rgba(11, 20, 26, .13);
  --cp-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(-12 40 34)'%3E%3Cpath d='M27 24h26a12 12 0 0 1 12 12v1a12 12 0 0 1-12 12c-3.6 0-5-2-7-4.5H34c-2 2.5-3.4 4.5-7 4.5a12 12 0 0 1-12-12v-1a12 12 0 0 1 12-12z'/%3E%3Cpath d='M23 36.5h8M27 32.5v8'/%3E%3Ccircle cx='49' cy='34' r='1.3'/%3E%3Ccircle cx='54' cy='39' r='1.3'/%3E%3C/g%3E%3Cg transform='rotate(10 168 32)'%3E%3Cpath d='M158 18h20l8 10-18 22-18-22z'/%3E%3Cpath d='M150 28h36M163 18l-3 10 8 22 8-22-3-10'/%3E%3C/g%3E%3Ccircle cx='100' cy='110' r='15'/%3E%3Ccircle cx='100' cy='110' r='10'/%3E%3Cpath d='M100 104v12'/%3E%3Cg transform='rotate(-6 190 128)'%3E%3Cpath d='M174 112h32a7 7 0 0 1 7 7v16a7 7 0 0 1-7 7h-20l-9 8v-8h-3a7 7 0 0 1-7-7v-16a7 7 0 0 1 7-7z'/%3E%3Cpath d='M182 124h16M182 131h10'/%3E%3C/g%3E%3Cpath d='M42 160l4.7 9.5 10.5 1.5-7.6 7.4 1.8 10.4-9.4-4.9-9.4 4.9 1.8-10.4-7.6-7.4 10.5-1.5z'/%3E%3Cpath d='M128 186v14M121 193h14'/%3E%3Cpath d='M200 222c-4-3-8-6-8-10a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 4-4 7-8 10z'/%3E%3Cpath d='M88 196l-8 12h7l-3 10 9-13h-7l3-9z'/%3E%3Ccircle cx='76' cy='62' r='2.5'/%3E%3Ccircle cx='216' cy='74' r='2'/%3E%3Ccircle cx='148' cy='78' r='1.6'/%3E%3Ccircle cx='20' cy='112' r='1.8'/%3E%3Cpath d='M222 168l3 3M225 168l-3 3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Dasar ──────────────────────────────────────────────────────────────── */
.cp *, .cp *::before, .cp *::after { box-sizing: border-box; }
/* Atribut hidden WAJIB menang: kelas display apa pun (flex, inline-flex) di
   bawah ini menimpanya diam-diam dan elemen "tersembunyi" tetap tampil. */
.cp [hidden] { display: none !important; }
.cp :focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }
/* :where() = bobot 0, supaya reset ini tak pernah mengalahkan warna kelas
   tombol (.cp-ibtn, .cp-kirim, .cp-tombol-utama). */
:where(.cp) button { font: inherit; color: inherit; }
.cp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cp-ic { width: 22px; height: 22px; flex: none; }
.cp-ic-s { width: 16px; height: 16px; flex: none; }
.cp-ibtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--cp-ikon);
  cursor: pointer; text-decoration: none; transition: background-color .15s;
}
.cp-ibtn:hover { background: rgba(134, 150, 160, .16); }
.cp-ibtn[aria-expanded="true"], details[open] > summary.cp-ibtn { background: rgba(134, 150, 160, .2); }
summary.cp-ibtn { list-style: none; }
summary.cp-ibtn::-webkit-details-marker { display: none; }
.cp-segel { display: inline-block; flex: none; width: 17px; height: 17px; color: var(--cp-segel); vertical-align: -3px; }
.cp-segel path { fill: currentColor; }
.cp-segel path + path { fill: none; stroke: var(--cp-surface); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Tombol berteks (WhatsApp: pil hijau). #008069, bukan --cp-accent: teks putih
   13.5 px di #00a884 cuma 3.03:1. */
.cp-tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px;
  border: 0; border-radius: 20px; font-size: 14.5px; font-weight: 600; line-height: 1; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: filter .15s, background-color .15s;
}
.cp-tombol-utama { background: var(--cp-btn); color: var(--cp-btn-ink); }
.cp-tombol-utama:hover { filter: brightness(1.08); }
.cp-tombol-utama:disabled { opacity: .7; cursor: default; filter: none; }
.cp-tombol-dua { background: var(--cp-panel); color: var(--cp-text); box-shadow: inset 0 0 0 1px var(--cp-line); }
.cp-tombol-dua:hover { background: var(--cp-hover); }
.cp-tombol-penuh { width: 100%; height: 44px; }

/* ── Mode tata letak (layout.ejs → body.cp-tata) ─────────────────────────
   'daftar' (/user/pesan): HP = halaman biasa yang menggulir; desktop = dua
   panel setinggi layar. 'percakapan' (/user/pesan/:id, /chat berutas): HP =
   layar penuh tanpa navbar situs; desktop = navbar + panel setinggi sisa.
   min-height:0 WAJIB: .min-h-screen di <body> (100vh) mengalahkan tinggi
   var(--cp-vh) saat papan ketik terbuka dan halaman jadi menggulir. */
body.cp-tata { background: var(--cp-surface); }
/* min-height:0 DI SINI, bukan mengandalkan utilitas .min-h-0 di layout:
   style.css hasil build memangkasnya (tak dipakai view lain), dan tanpa itu
   <main> tumbuh setinggi isinya — komposer terdorong ke bawah layar. */
.cp-main { display: flex; flex-direction: column; min-height: 0; }
body.cp-tata-percakapan { height: 100vh; height: var(--cp-vh, 100dvh); min-height: 0; overflow: hidden; }
@media (max-width: 1023.98px) {
  body.cp-tata-percakapan > header { display: none; }
}
@media (min-width: 1024px) {
  body.cp-tata { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; background: var(--cp-luar); }
  /* Desktop = WhatsApp Web: tak ada tombol mengambang. Dok FAB (WhatsApp CS /
     chat / efek gerak) menutupi panel sambutan, dan "Chat" di dalamnya tak
     berbuat apa-apa di sini (widget tak dimuat di mode chat). Di HP dok
     tetap ada — posisinya memang posisi tombol mengambang WhatsApp. */
  body.cp-tata-daftar .fab-dock { display: none; }
}

/* ── Cangkang dua panel ─────────────────────────────────────────────────── */
.cp-shell { display: flex; flex: 1 1 auto; min-height: 0; width: 100%; background: var(--cp-surface); color: var(--cp-text); font-size: 14px; line-height: 1.35; }
.cp-side { display: flex; flex-direction: column; min-width: 0; background: var(--cp-surface); }
.cp-conv { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--cp-wall); }
.cp-sambut { display: none; }
@media (max-width: 1023.98px) {
  .cp-shell-daftar { display: block; flex: 0 0 auto; }
  .cp-shell-daftar .cp-side { width: 100%; }
  .cp-shell-percakapan .cp-side { display: none; }
}
@media (min-width: 1024px) {
  .cp-shell { max-width: 1400px; margin: 0 auto; box-shadow: 0 0 0 1px var(--cp-line), 0 6px 18px rgba(11, 20, 26, .08); }
  .cp-side { flex: 0 0 auto; width: 30%; min-width: 320px; max-width: 420px; min-height: 0; border-right: 1px solid var(--cp-line); }
  .cp-side .cp-rows-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .cp-shell-tamu { max-width: 960px; }
  .cp-sambut {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px; text-align: center; background: var(--cp-panel); border-bottom: 6px solid var(--cp-accent);
  }
}
.cp-sambut-ikon { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; margin-bottom: 24px; border-radius: 50%; background: var(--cp-surface); color: var(--cp-accent-teks); box-shadow: inset 0 0 0 1px var(--cp-line); }
.cp-sambut-ikon .cp-ic { width: 52px; height: 52px; }
.cp-sambut-judul { margin: 0 0 10px; font-size: 28px; font-weight: 300; line-height: 1.3; color: var(--cp-text); }
.cp-sambut-teks { max-width: 460px; margin: 0 0 22px; font-size: 14px; line-height: 20px; color: var(--cp-muted); }

/* ── Panel daftar ───────────────────────────────────────────────────────── */
.cp-side-head { position: relative; flex: none; display: flex; align-items: center; gap: 2px; height: 59px; padding: 0 8px 0 16px; background: var(--cp-panel); }
.cp-side-judul { flex: 1; min-width: 0; margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--cp-text); }
.cp-cari { flex: none; margin: 0; padding: 0 12px 8px; background: var(--cp-panel); }
.cp-cari-kotak { position: relative; display: flex; align-items: center; height: 38px; border-radius: 19px; background: var(--cp-input); box-shadow: inset 0 0 0 1px var(--cp-line); transition: box-shadow .15s; }
.cp-cari-kotak:focus-within { box-shadow: inset 0 0 0 1.5px var(--cp-accent); }
.cp-cari-ikon { position: absolute; left: 14px; color: var(--cp-muted); pointer-events: none; }
.cp-cari-input { width: 100%; height: 38px; margin: 0; border: 0; outline: 0; background: transparent; padding: 0 14px 0 44px; font-size: 14.5px; color: var(--cp-text); border-radius: 19px; }
.cp-cari-input::placeholder { color: var(--cp-placeholder); opacity: 1; }
.cp .cp-cari-input:focus-visible { outline: 0; }
.cp-rows { display: flex; flex-direction: column; }
.cp-kosong { padding: 36px 24px; text-align: center; font-size: 14px; line-height: 1.55; color: var(--cp-muted); }
.cp-kosong .cp-tombol { margin-top: 14px; }

/* Menu "pesan baru" (ikon gelembung +): <details> supaya tetap jalan tanpa JS. */
.cp-pesanbaru { position: static; }
.cp-pesanbaru-isi {
  position: absolute; top: 52px; right: 8px; z-index: 30; width: min(340px, calc(100% - 16px)); padding: 6px 0;
  border-radius: 8px; background: var(--cp-menu); color: var(--cp-text);
  box-shadow: 0 2px 5px rgba(11, 20, 26, .26), 0 2px 10px rgba(11, 20, 26, .16); animation: cp-muncul .14s ease-out;
}
.cp-pesanbaru-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px; border: 0; background: transparent; color: var(--cp-text); text-align: left; text-decoration: none; cursor: pointer; }
a.cp-pesanbaru-item:hover { background: var(--cp-hover); }
.cp-pesanbaru-item .cp-av { width: 44px; height: 44px; }
.cp-pesanbaru-teks { display: flex; flex-direction: column; min-width: 0; }
.cp-pesanbaru-judul { display: flex; align-items: center; gap: 4px; font-size: 15.5px; color: var(--cp-text); }
.cp-pesanbaru-sub { font-size: 13px; color: var(--cp-menu-muted); }
.cp-pesanbaru-dm { padding: 8px 16px 10px; border-top: 1px solid var(--cp-line); }
.cp-pesanbaru-dm-judul { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; font-size: 15px; font-weight: 600; color: var(--cp-text); }
.cp-pesanbaru-dm-judul .cp-ic-s { color: var(--cp-ikon); }
.cp-pesanbaru-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cp-pesanbaru-label { font-size: 13px; color: var(--cp-menu-muted); }
/* Tepi kolom = --cp-muted (6.06:1 terang / 4.39:1 gelap terhadap menu), bukan
   --cp-line: #202c33 di menu #233138 cuma 1.07:1 — kolomnya nyaris tak terlihat. */
.cp-pesanbaru-input { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--cp-input); color: var(--cp-text); font-size: 15px; outline: 0; box-shadow: inset 0 0 0 1px var(--cp-muted); }
.cp-pesanbaru-input:focus { box-shadow: inset 0 0 0 1.5px var(--cp-accent); }
.cp-pesanbaru-ket { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cp-menu-muted); }
.cp-pesanbaru-ket b { color: var(--cp-text); }

/* Kotak "chat CS nonaktif" (daftar). */
.cp-nonaktif { margin: 10px 12px 8px; padding: 12px 14px; border-radius: 8px; background: var(--cp-notice); color: var(--cp-notice-ink); font-size: 13.5px; line-height: 1.5; }
.cp-nonaktif-teks { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; }
.cp-nonaktif-teks .cp-ic-s { margin-top: 2px; }
.cp-nonaktif .cp-tombol { width: 100%; }

/* ── Baris percakapan (halaman & widget) ── */
.cp-baris {
  display: flex; align-items: center; width: 100%; height: 72px; padding: 0 0 0 13px; border: 0; background: transparent;
  color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .12s; flex: none;
}
.cp-baris:hover { background: var(--cp-hover); }
.cp-baris.is-aktif { background: var(--cp-sel); }
.cp-baris > .cp-av { margin-right: 13px; }
.cp-baris-isi { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-right: 15px; border-top: 1px solid var(--cp-line); }
.cp-rows > .cp-baris:first-child .cp-baris-isi, .cw-rows > .cp-baris:first-child .cp-baris-isi, .cp-baris:hover .cp-baris-isi, .cp-baris.is-aktif .cp-baris-isi,
.cp-baris:hover + .cp-baris .cp-baris-isi, .cp-baris.is-aktif + .cp-baris .cp-baris-isi { border-top-color: transparent; }
.cp-baris-atas, .cp-baris-bawah { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cp-baris-nama { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; font-size: 16px; line-height: 21px; color: var(--cp-text); }
.cp-baris-namateks { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-baris.is-unread .cp-baris-nama { font-weight: 700; }
.cp-baris-jam { flex: none; font-size: 12px; line-height: 14px; color: var(--cp-muted); }
.cp-baris.is-unread .cp-baris-jam { color: var(--cp-jam-baru); font-weight: 600; }
.cp-baris-prev { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 20px; font-size: 14px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; }
.cp-baris-teks { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-baris-ic { width: 16px; height: 16px; flex: none; }
.cp-lencana { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--cp-lencana); color: var(--cp-lencana-ink); font-size: 12px; font-weight: 700; }
/* Baris yang SEDANG dibuka tak berlencana (WhatsApp juga begitu: percakapannya
   ada di depan mata, dan chat.js menandainya dibaca). Teks redupnya pindah ke
   --cp-muted-sel: #8696a0 di latar terpilih gelap #2a3942 cuma 3.91:1. */
.cp-baris.is-aktif .cp-lencana { display: none; }
.cp-baris.is-aktif .cp-baris-nama { font-weight: 400; }
.cp-baris.is-aktif .cp-baris-jam, .cp-baris.is-aktif .cp-baris-prev { color: var(--cp-muted-sel); font-weight: 400; }

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.cp-av { display: inline-flex; align-items: center; justify-content: center; width: 49px; height: 49px; border-radius: 50%; flex: none; overflow: hidden; font-size: 17px; font-weight: 600; letter-spacing: .02em; user-select: none; background: #dfe5e7; color: #3b4a54; }
/* TANPA display di sini: logo CS dirender dua kali (versi gelap & terang) dan
   .site-logo-* menyembunyikan salah satunya lewat display:none — display:block
   di aturan ini (bobot lebih tinggi) memunculkan keduanya. */
.cp-av img { width: 100%; height: 100%; object-fit: cover; }
.cp-av-sm { width: 40px; height: 40px; font-size: 15px; }
.cp-av-lg { width: 72px; height: 72px; font-size: 26px; }
.cp-av-ic { width: 58%; height: 58%; }
/* Logo toko di lingkaran polos (CS resmi). .site-logo-* memilih versi per tema. */
.cp-av-cs { background: var(--cp-av-cs); box-shadow: inset 0 0 0 1px var(--cp-line); }
.cp-av-cs img.cp-av-logo { width: 62%; height: 62%; object-fit: contain; }
/* Inisial DM: 8 pasangan lembut admin di tema terang; di gelap latarnya = warna
   tinta pasangan itu dan teksnya putih (semua >= 6:1). Indeksnya sama dengan
   admin: Math.imul(id | 0, 0x9E3779B1) >>> 29 dari id percakapan. */
.cp-av-0 { background: #a3123a; color: #fff; } .cp-av-1 { background: #075985; color: #fff; }
.cp-av-2 { background: #116835; color: #fff; } .cp-av-3 { background: #8a4b06; color: #fff; }
.cp-av-4 { background: #5a2ca8; color: #fff; } .cp-av-5 { background: #0f5f57; color: #fff; }
.cp-av-6 { background: #9a3a0b; color: #fff; } .cp-av-7 { background: #3341a6; color: #fff; }
[data-theme="light"] .cp-av-0 { background: #ffdbe3; color: #a3123a; } [data-theme="light"] .cp-av-1 { background: #d4ecfb; color: #075985; }
[data-theme="light"] .cp-av-2 { background: #d6f5df; color: #116835; } [data-theme="light"] .cp-av-3 { background: #fde9c4; color: #8a4b06; }
[data-theme="light"] .cp-av-4 { background: #e7ddfc; color: #5a2ca8; } [data-theme="light"] .cp-av-5 { background: #cdf3ee; color: #0f5f57; }
[data-theme="light"] .cp-av-6 { background: #ffe1cf; color: #9a3a0b; } [data-theme="light"] .cp-av-7 { background: #dee4fd; color: #3341a6; }

/* ── Kepala percakapan ──────────────────────────────────────────────────── */
.cp-head { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 6px 0 4px; background: var(--cp-panel); color: var(--cp-text); z-index: 2; }
.cp-head-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 4px; }
.cp-head-nama { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; font-size: 16px; font-weight: 500; line-height: 21px; color: var(--cp-text); }
.cp-head-judul { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-status { min-height: 18px; margin: 0; font-size: 13px; line-height: 18px; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-status.is-ketik { color: var(--cp-accent-teks); font-weight: 500; }
@media (min-width: 1024px) {
  .cp-head { height: 59px; padding: 0 10px 0 16px; gap: 8px; }
  .cp-shell-percakapan .cp-kembali { display: none; }
}

/* Menu titik tiga (DM: laporkan). */
.cp-menu { position: relative; flex: none; }
.cp-menu-pop {
  position: absolute; top: 46px; right: 0; z-index: 30; min-width: 230px; padding: 6px 0; border-radius: 6px;
  background: var(--cp-menu); box-shadow: 0 2px 5px rgba(11, 20, 26, .26), 0 2px 10px rgba(11, 20, 26, .16);
  transform-origin: top right; animation: cp-muncul .14s ease-out;
}
.cp-menu-pop form { margin: 0; }
.cp-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 18px; border: 0; background: transparent; text-align: left; font-size: 14.5px; color: var(--cp-text); cursor: pointer; }
.cp-menu-item:hover { background: var(--cp-hover); }
.cp-menu-item.is-bahaya { color: var(--cp-bahaya); }

/* ── Area pesan ─────────────────────────────────────────────────────────── */
.cp-pesan-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cp-pesan {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain;
  padding: 6px clamp(8px, 5.5%, 72px) 0; background-color: var(--cp-wall); background-image: var(--cp-doodle); background-size: 240px 240px;
}
.cp .cp-pesan:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: -2px; }
.cp-isi { display: flex; flex-direction: column; }
/* Pemberitahuan sistem (kuning pucat ala catatan enkripsi WhatsApp). */
.cp-sistem {
  display: block; width: fit-content; max-width: min(90%, 560px); margin: 12px auto 6px; padding: 6px 12px 7px;
  border-radius: 7.5px; background: var(--cp-notice); color: var(--cp-notice-ink); font-size: 12.5px; line-height: 1.5;
  text-align: center; box-shadow: var(--cp-bayang);
}
.cp-sistem-ic { display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.cp-sistem b { font-weight: 700; }
.cp-sistem a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* Nomor tamu tak boleh terbelah di tanda hubung ("+60 1-" / "2345-6789"). */
.cp-wa-tamu { white-space: nowrap; }
.cp-info-pesan { align-self: center; margin: 18px 0; padding: 6px 14px; border-radius: 7.5px; background: var(--cp-tgl); color: var(--cp-tgl-ink); font-size: 13px; text-align: center; box-shadow: var(--cp-bayang); }
.cp-tgl { align-self: center; margin: 12px 0 6px; padding: 5px 12px 6px; border-radius: 7.5px; background: var(--cp-tgl); color: var(--cp-tgl-ink); font-size: 12.5px; line-height: 15px; box-shadow: var(--cp-bayang); }
/* Pita selebar panel apa pun padding-nya (desktop: clamp hingga 72 px): bayangan
   sewarna melebar ke samping, clip-path memotong atas-bawahnya, dan area gulir
   memotong sisanya tepat di tepi panel. */
.cp-baru { align-self: stretch; margin: 12px 0 4px; padding: 5px 0; text-align: center; background: var(--cp-strip-baru); box-shadow: 0 0 0 100vmax var(--cp-strip-baru); clip-path: inset(0 -100vmax); }
.cp-baru span { display: inline-block; padding: 5px 12px; border-radius: 7.5px; background: var(--cp-tgl); color: var(--cp-tgl-ink); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; box-shadow: var(--cp-bayang); }

/* Gelembung. Satu "run" = pesan beruntun dari pengirim yang sama (putus
   sesudah jeda 5+ menit, tanggal baru, atau garis belum-dibaca); hanya
   gelembung pertamanya berekor dan berjarak lebar. Ekornya segitiga
   clip-path ber-background:inherit, bukan gambar. */
.cp-m { display: flex; flex: none; margin-top: 2px; padding: 0 9px; }
.cp-m.ekor { margin-top: 10px; }
.cp-m.out { justify-content: flex-end; }
.cp-m.is-baru { animation: cp-masuk .18s ease-out; }
.cp-b { position: relative; max-width: 65%; min-width: 0; padding: 6px 7px 8px 9px; border-radius: 7.5px; background: var(--cp-in); box-shadow: var(--cp-bayang); font-size: 14.2px; line-height: 19px; color: var(--cp-text); overflow-wrap: anywhere; }
.cp-m.out .cp-b { background: var(--cp-out); }
.cp-m.in.ekor .cp-b { border-top-left-radius: 0; }
.cp-m.out.ekor .cp-b { border-top-right-radius: 0; }
.cp-m.ekor .cp-b::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; }
.cp-m.in.ekor .cp-b::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cp-m.out.ekor .cp-b::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.cp-b-nama { margin: -1px 0 1px; font-size: 12.8px; font-weight: 600; line-height: 20px; color: var(--cp-accent-teks); }
.cp-b-teks { white-space: pre-wrap; }
/* Ruang selebar jam(+centang) di ujung teks: jam duduk di baris terakhir kalau
   muat, turun ke baris sendiri kalau tidak. */
.cp-b-ruang { display: inline-block; width: 44px; height: 1px; vertical-align: middle; }
.cp-m.out .cp-b-ruang { width: 66px; }
/* Meta (jam + centang). TANPA opacity di mana pun pada rantai ini: opacity
   induk membentuk grup komposit yang tak bisa dilepas anaknya. */
.cp-b-meta { position: absolute; right: 7px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 15px; color: var(--cp-muted); white-space: nowrap; }
.cp-m.out .cp-b-meta { color: var(--cp-meta-out); }
.cp-jam { font: inherit; color: inherit; }
/* Centang: SATU vs DUA garis (pembeda bukan-warna), kotak 17x11 yang sama di
   kedua keadaan supaya gelembung tak tersentak saat statusnya berubah. */
.cp-tick { display: inline-flex; flex: none; width: 17px; height: 11px; color: var(--cp-tick); }
.cp-tick.is-baca { color: var(--cp-tick-baca); }
.cp-tick-svg { display: block; width: 17px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Foto: TAK PERNAH dipotong (contain). Kotaknya dicadangkan sebelum gambar
   termuat (rasio --cp-foto-r, bawaan 3:4; JS memasang rasio aslinya, dijepit
   9:16..16:9), jadi percakapan tak melompat. */
.cp-b.is-foto { padding: 3px; }
.cp-foto { --cp-foto-r: .75; position: relative; display: block; width: min(300px, calc(400px * var(--cp-foto-r))); max-width: 100%; aspect-ratio: var(--cp-foto-r); border-radius: 6px; overflow: hidden; background: var(--cp-foto-bg); }
.cp-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cp-foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(to top, rgba(11, 20, 26, .5), transparent); pointer-events: none; }
.cp-b.is-foto .cp-b-meta { right: 10px; bottom: 7px; color: #fff; }
.cp-b.is-foto .cp-tick { color: #fff; }
/* Di atas gradasi gelap foto: biru TERANG (yang gelap untuk latar terang). */
.cp-b.is-foto .cp-tick.is-baca { color: #53bdeb; }

/* Kartu pesanan / produk di dalam gelembung — dibangun createElement +
   textContent saja; URL-nya dari server. */
.cp-kartu { display: block; min-width: min(220px, 100%); max-width: 300px; margin: 1px 0 16px; padding: 8px 10px; border-radius: 6px; border-left: 4px solid var(--cp-accent); background: var(--cp-kartu); color: inherit; text-decoration: none; }
a.cp-kartu:hover { filter: brightness(.97); }
/* Order ID utuh: label status yang panjang ("Menunggu Pembayaran") turun ke
   baris berikutnya, bukan memotong ID yang dikutip pembeli & CS (di HP 360 px
   ID 15 karakter dulu jadi "UJIRV5190852…"). */
.cp-kartu-atas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 3px; }
.cp-kartu-ic { width: 15px; height: 15px; flex: none; color: var(--cp-kartu-aksen); }
.cp-kartu-id { flex: 1 0 auto; min-width: 0; max-width: calc(100% - 21px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--cp-kartu-aksen); }
.cp-kartu-game { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--cp-kartu-aksen); }
.cp-kartu-st { flex: none; padding: 2px 7px; border-radius: 9px; background: #54656f; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.cp-st-success { background: #0b7f45; } .cp-st-pending { background: #a35206; } .cp-st-processing { background: #2559c7; }
.cp-st-failed { background: #c0262d; } .cp-st-refunded { background: #6d28d9; }
.cp-kartu-nama { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cp-kartu-bawah { margin-top: 2px; font-size: 12.5px; color: var(--cp-kartu-redup); }
.cp-kartu-tautan { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--cp-kartu-aksen); }
.cp-m.out .cp-kartu-ic, .cp-m.out .cp-kartu-id, .cp-m.out .cp-kartu-game, .cp-m.out .cp-kartu-tautan { color: var(--cp-kartu-aksen-out); }
.cp-m.out .cp-kartu-bawah { color: var(--cp-kartu-redup-out); }

/* Gelembung "mengetik": slot TETAP 40 px di ujung daftar — muncul/hilangnya
   tak menggeser isi percakapan. */
.cp-ketik-slot { position: relative; flex: none; height: 40px; padding-top: 5px; }
.cp-ketik { opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s linear .15s; }
.cp-ketik.is-tampil { opacity: 1; visibility: visible; transition: opacity .15s; }
.cp-ketik .cp-b { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; }
.cp-titik { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-muted); animation: cp-titik 1.2s infinite ease-in-out; }
.cp-titik:nth-child(2) { animation-delay: .15s; }
.cp-titik:nth-child(3) { animation-delay: .3s; }

/* Tawaran "belum dibalas — chat WhatsApp" (server yang memutuskan kapan). */
.cp-tawaran { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: min(92%, 420px); margin: 14px 0 6px; padding: 10px 14px 12px; border-radius: 7.5px; background: var(--cp-tgl); color: var(--cp-tgl-ink); font-size: 13px; line-height: 1.45; text-align: center; box-shadow: var(--cp-bayang); }
.cp-tawaran-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border-radius: 17px; background: var(--cp-btn); color: var(--cp-btn-ink); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.cp-tawaran-btn:hover { filter: brightness(1.08); }

.cp-turun { position: absolute; right: 16px; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--cp-in); color: var(--cp-ikon); box-shadow: 0 1px 1px rgba(11, 20, 26, .06), 0 2px 5px rgba(11, 20, 26, .3); cursor: pointer; animation: cp-muncul .14s ease-out; }
.cp-turun-n { position: absolute; top: -6px; left: -6px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--cp-lencana); color: var(--cp-lencana-ink); font-size: 11.5px; font-weight: 700; }

/* ── Komposer ───────────────────────────────────────────────────────────── */
.cp-bawah { position: relative; flex: none; background: var(--cp-panel); }
.cp-tulis { display: flex; align-items: flex-end; gap: 2px; min-height: 62px; margin: 0; padding: 5px 12px 5px 8px; background: var(--cp-panel); }
.cp-tulis > .cp-ibtn { margin-bottom: 6px; }
.cp-ta { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 42px; margin: 5px 6px 5px 4px; padding: 10px 14px; border-radius: 21px; background: var(--cp-input); transition: box-shadow .15s; }
.cp-ta:focus-within { box-shadow: 0 0 0 1.5px var(--cp-accent); }
.cp .cp-ta textarea:focus-visible, .cp .cp-pemilih-cari:focus-visible { outline: 0; }
.cp-ta textarea { display: block; width: 100%; max-height: 100px; margin: 0; padding: 0; border: 0; outline: 0; resize: none; overflow-y: auto; background: transparent; font: inherit; font-size: 15px; line-height: 20px; color: var(--cp-text); }
.cp-ta textarea::placeholder { color: var(--cp-placeholder); opacity: 1; }
.cp-kirim { display: flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; margin-bottom: 5px; border: 0; border-radius: 50%; background: var(--cp-accent); color: var(--cp-kirim-ink); cursor: pointer; transition: background-color .15s, transform .1s; }
.cp-kirim:hover { filter: brightness(1.06); }
.cp-kirim:active { transform: scale(.94); }
.cp-kirim:disabled { background: var(--cp-muted); cursor: default; transform: none; filter: none; }
/* Pesawat kertas menghadap kanan-atas: massa goresannya ~1,4px kanan & ~1,4px
   atas dari pusat kotaknya. Dulu margin-left:2px malah menambah geser ke kanan
   (titik berat 2,4px kanan / 1,4px atas — terlihat tak di tengah). Diukur di
   Chrome: translate(-1.5px,1.5px) → meleset ≤0,15px di 21px & 23px. */
.cp-kirim .cp-ic { width: 21px; height: 21px; transform: translate(-1.5px, 1.5px); }
.cp-pratinjau { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--cp-panel); border-top: 1px solid var(--cp-line); }
.cp-pratinjau img { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 6px; background: var(--cp-surface); }
.cp-pratinjau-teks { flex: 1; min-width: 0; font-size: 14px; color: var(--cp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pratinjau .cp-tombol { height: 34px; padding: 0 14px; font-size: 13.5px; }
/* Pemilih pesanan / produk: melayang di atas komposer. */
.cp-pemilih {
  position: absolute; left: 10px; bottom: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column;
  width: min(420px, calc(100% - 20px)); max-height: min(60vh, 440px); border-radius: 8px; background: var(--cp-menu); color: var(--cp-text);
  box-shadow: 0 2px 5px rgba(11, 20, 26, .26), 0 2px 10px rgba(11, 20, 26, .16); overflow: hidden; animation: cp-muncul .14s ease-out;
}
.cp-pemilih-kepala { display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px 16px; font-size: 14.5px; font-weight: 600; }
.cp-pemilih-kepala span { flex: 1; }
.cp-pemilih-kepala .cp-tombol { height: 32px; padding: 0 12px; font-size: 13px; }
.cp-pemilih-cari { flex: none; margin: 0 12px 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--cp-panel); font-size: 14px; color: var(--cp-text); outline: 0; }
.cp-pemilih-cari:focus { box-shadow: inset 0 0 0 1.5px var(--cp-accent); }
.cp-pemilih-cari::placeholder { color: var(--cp-placeholder); opacity: 1; }
.cp-pemilih-daftar { flex: 1; min-height: 60px; overflow-y: auto; overscroll-behavior: contain; }
.cp-pemilih-baris { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--cp-line); }
.cp-pemilih-info { flex: 1; min-width: 0; }
/* --cp-kartu-aksen, bukan --cp-accent-teks: #00a884 di menu gelap #233138 cuma 4.42:1. */
.cp-pemilih-id { font: 600 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--cp-kartu-aksen); overflow-wrap: anywhere; }
.cp-pemilih-nama { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cp-pemilih-harga { font-size: 12.5px; color: var(--cp-menu-muted); }
.cp-pemilih-baris .cp-tombol { height: 32px; padding: 0 14px; font-size: 13px; }
.cp-pemilih-kosong { padding: 18px 16px; text-align: center; font-size: 13.5px; color: var(--cp-menu-muted); }
/* Chat CS dimatikan admin selagi halaman terbuka: komposer diganti ini. */
.cp-mati { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 12px 16px 14px; background: var(--cp-notice); color: var(--cp-notice-ink); font-size: 13.5px; line-height: 1.45; text-align: center; }

/* ── /chat tamu: kartu mulai ────────────────────────────────────────────── */
.cp-mulai-wrap { display: flex; justify-content: center; padding: 8px 0 24px; }
/* TANPA overflow:hidden: daftar kode negara (.cc-panel, absolut) harus bisa
   keluar dari kartu — dipotong, di HP hanya ±4 negara yang terlihat dan
   bagian bawah daftarnya hilang. Sudut atas kepala kartu dibulatkan sendiri. */
.cp-mulai { width: 100%; max-width: 480px; border-radius: 14px; background: var(--cp-surface); color: var(--cp-text); box-shadow: 0 0 0 1px var(--cp-line), 0 10px 30px -12px rgba(11, 20, 26, .35); }
.cp-mulai-id { display: flex; flex-direction: column; align-items: center; padding: 24px 20px 18px; border-radius: 14px 14px 0 0; background: var(--cp-panel); text-align: center; }
.cp-mulai-nama { display: flex; align-items: center; gap: 6px; margin: 12px 0 2px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--cp-text); }
.cp-mulai-nama .cp-segel { width: 20px; height: 20px; vertical-align: 0; }
.cp-mulai-sub { margin: 0; font-size: 14px; color: var(--cp-muted); }
.cp-mulai-badan { padding: 18px 20px 20px; }
.cp-mulai-intro { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--cp-text); }
.cp-mulai-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cp-mulai-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--cp-text); }
.cp-mulai-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cp-muted); }
.cp-mulai-login { margin: 14px 0 0; font-size: 13.5px; text-align: center; color: var(--cp-muted); }
.cp-mulai-login a, .cp-mulai-hint a { color: var(--cp-accent-teks); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Widget (partials/chat-widget.ejs) — geometri & z-index tetap inline di
   partial (diuji di sana); di sini hanya rupa. ─────────────────────────── */
#chat-widget .cw-panel { background: var(--cp-surface); color: var(--cp-text); font-size: 14px; line-height: 1.35; box-shadow: 0 12px 40px -8px rgba(11, 20, 26, .45), 0 0 0 1px var(--cp-line); }
#chat-widget .cw-head { flex: none; display: flex; align-items: center; gap: 4px; height: 58px; padding: 0 4px 0 8px; background: var(--cp-panel); color: var(--cp-text); }
#chat-widget .cw-head-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 4px; }
#chat-widget .cw-head-nama { display: flex; align-items: center; gap: 4px; min-width: 0; }
#chat-widget .cw-title { min-width: 0; font-size: 16px; font-weight: 600; line-height: 21px; color: var(--cp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat-widget .cw-panel.is-daftar .cw-title { font-size: 19px; font-weight: 700; }
#chat-widget .cw-status { font-size: 12.5px; line-height: 16px; }
#chat-widget .cw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0; background: var(--cp-surface); }
#chat-widget .cw-body.cw-conv { padding: 4px 6px 0; background-color: var(--cp-wall); background-image: var(--cp-doodle); background-size: 240px 240px; }
#chat-widget .cw-body.cw-conv .cp-b { max-width: 85%; }
#chat-widget .cw-body.cw-conv .cp-m { padding: 0 6px; }
#chat-widget .cw-body.cw-conv .cp-foto { width: min(220px, calc(300px * var(--cp-foto-r))); }
/* Pemilih pesanan / produk di WIDGET: saudara <form> di dalam .cw-panel
   (fixed + overflow:hidden). Dengan posisi absolut halaman penuh ia terbit di
   atas tepi atas panel dan terpotong — tombolnya tampak "ditekan" tanpa apa
   pun yang muncul. Di sini ia ikut alur: lembar di atas komposer yang
   memendekkan area pesan. flex:none WAJIB — bisa menyusut, ia ikut ditekan
   sebanding isi percakapan yang panjang sampai daftarnya tinggal segaris. */
#chat-widget .cw-panel > .cp-pemilih {
  position: relative; left: auto; bottom: auto; flex: none; width: auto; max-height: 55%;
  margin: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -1px 0 var(--cp-line), 0 -4px 12px rgba(11, 20, 26, .12);
}
#chat-widget .cw-empty { margin: auto; padding: 24px 16px; text-align: center; font-size: 14px; color: var(--cp-muted); }
#chat-widget .cw-startlink { display: inline-flex; margin-top: 12px; }
#chat-widget .cw-inputbar { min-height: 58px; padding: 4px 8px 4px 4px; }
#chat-widget .cw-inputbar .cp-ibtn { width: 38px; height: 38px; margin-bottom: 7px; }
#chat-widget .cw-inputbar .cp-ta { margin: 4px 4px 4px 2px; min-height: 40px; padding: 9px 12px; }
#chat-widget .cw-inputbar .cp-kirim { width: 40px; height: 40px; margin-bottom: 5px; }
#chat-widget .cw-rows { display: flex; flex-direction: column; }
#chat-widget .cw-tamu-id { display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; }
#chat-widget .cw-tamu-id .cp-av { width: 48px; height: 48px; }
#chat-widget .cw-tamu-nama { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: var(--cp-text); }
#chat-widget .cw-tamu-sub { font-size: 13px; color: var(--cp-muted); }
#chat-widget .cw-guest-btn { display: flex; align-items: center; justify-content: center; height: 44px; border: 0; border-radius: 22px; background: var(--cp-btn); color: var(--cp-btn-ink); font-size: 15px; font-weight: 600; cursor: pointer; }
#chat-widget .cw-guest-btn:disabled { opacity: .7; cursor: default; }
#chat-widget .cw-guest-masuk { margin: 2px 0 0; font-size: 13px; text-align: center; color: var(--cp-muted); }
#chat-widget .cw-guest-masuk a { color: var(--cp-accent-teks); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#chat-widget .cw-guest-input { width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--cp-input); color: var(--cp-text); font-size: 16px; box-shadow: inset 0 0 0 1px var(--cp-line); }

/* ── HP (< 1024 px): target sentuh 44 px, kotak ketik 16 px (iOS tak
   memperbesar halaman), gelembung boleh lebih lebar. ─────────────────── */
@media (max-width: 1023.98px) {
  .cp-ibtn { width: 44px; height: 44px; }
  /* Semua target sentuh >= 44 px (kontrak C6): tombol berteks di pemilih,
     pratinjau foto, menu pesan baru, kotak kosong/nonaktif; tawaran WhatsApp;
     kotak cari; tombol turun; butir menu laporkan. */
  .cp-tombol, .cp-tawaran-btn { min-height: 44px; }
  .cp-tawaran-btn { border-radius: 22px; }
  .cp-cari-kotak, .cp-cari-input { height: 44px; border-radius: 22px; }
  .cp-pesanbaru-input { height: 44px; }
  .cp-turun { width: 44px; height: 44px; }
  .cp-menu-item { min-height: 48px; }
  .cp-pesan { padding-left: 2px; padding-right: 2px; }
  .cp-m { padding: 0 6px; }
  .cp-b { max-width: 85%; font-size: 15px; line-height: 20px; }
  .cp-foto { width: min(220px, calc(300px * var(--cp-foto-r))); }
  .cp-tulis { padding: 4px 6px 6px 2px; gap: 0; }
  .cp-tulis > .cp-ibtn { margin-bottom: 4px; }
  .cp-ta { margin: 4px 4px 4px 2px; min-height: 46px; padding: 11px 14px; border-radius: 23px; }
  .cp-ta textarea { font-size: 16px; line-height: 22px; }
  .cp-kirim { width: 48px; height: 48px; margin-bottom: 3px; }
  .cp-kirim .cp-ic { width: 23px; height: 23px; }
  .cp-pesanbaru-input { font-size: 16px; }
  .cp-cari-input { font-size: 16px; }
  #chat-widget .cw-inputbar .cp-ibtn { width: 44px; height: 44px; margin-bottom: 4px; }
  #chat-widget .cw-inputbar .cp-kirim { width: 46px; height: 46px; margin-bottom: 3px; }
  #chat-widget .cw-inputbar textarea { font-size: 16px; }
}

@keyframes cp-muncul { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cp-masuk { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cp-titik { 0%, 60%, 100% { opacity: .45; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* Gerak-mikro chat saja (aturan FX etalase terpisah dan sengaja tak disentuh). */
@media (prefers-reduced-motion: reduce) {
  .cp *, .cp *::before, .cp *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}