:root {
  --crm-accent: #7c3aed;
  --crm-sidebar-w: 15rem;
}

body.crm-body {
  background: #f8fafc;
  min-height: 100vh;
  color: #1e293b;
}

/* Menu samping.
 *
 * Di HP ia laci melayang (`position: fixed`), dan tingginya HARUS viewport yang
 * SEDANG TERLIHAT. Dulu tingginya datang dari `min-h-screen` (= `100vh`) pada
 * <aside>: `100vh` adalah viewport BESAR -- tinggi layar seolah bilah alamat
 * peramban tak ada. Selisihnya (74px, diukur di Chrome iOS 390x844; lihat
 * `.crm-penuh-doc` di bawah) menggantung DI BAWAH tepi layar, dan karena laci
 * ini `fixed`, menggulir halaman tak pernah membawanya naik. Yang jatuh ke sana
 * terukur: tautan "Keluar" dan kaki "Dashboard Feremart" (dulu "Auth Dashboard")
 * -- persis rupa laporannya
 * (4 Sep 2026): "menunya tidak bisa saya scroll sampai paling bawah, masih ada
 * 2 tombol di bawahnya yang tidak bisa saya klik". Menggulir <nav> pun tak
 * menolong: ujung bawah kotak gulirnya sendiri yang ada di luar layar.
 *
 * `min-height: 0` wajib menyertai `height` (aturan yang sama sudah berlaku di
 * `.crm-penuh-doc`): selama `min-height` yang lebih besar masih menang, angka
 * `height` di sini tak mengubah apa pun. Kelas `min-h-screen` juga dicabut dari
 * <aside> di index.html -- utilitas Tailwind disuntikkan SESUDAH berkas ini,
 * jadi pada kekhususan yang sama ia yang menang.
 */
.crm-sidebar {
  width: var(--crm-sidebar-w);
  background: #fff;
  border-right: 1px solid #e2e8f0;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  height: 100vh; /* cadangan untuk peramban tanpa dvh */
  height: 100dvh;
  min-height: 0;
  /* Garis home indicator iOS menutupi tepi bawah viewport; tanpa ini kaki menu
     duduk persis di bawahnya dan sulit disentuh. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tarikan di ujung daftar menu jangan merembet menggulir halaman di belakang
   laci -- di layar sekecil itu halaman yang bergeser diam-diam terbaca seperti
   menunya sendiri yang meleset. */
.crm-sidebar > nav {
  overscroll-behavior: contain;
}

.crm-sidebar.is-open {
  transform: translateX(0);
}

.crm-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 40;
}

@media (min-width: 768px) {
  .crm-sidebar {
    /* Bukan laci lagi, tapi tetap MENGGULIR SENDIRI. Sampai 7 Sep 2026 ia
       `position: static; height: auto`: tingginya diregangkan baris flex #app,
       jadi menu ikut hanyut bersama isi halaman dan kakinya terdorong keluar
       layar begitu halamannya panjang.

       Alasan lama menolak mengunci satu layar ("nanti menunya terpotong saat
       halaman lebih panjang") benar untuk kotak yang KAKU -- dan berhenti
       berlaku begitu <nav> di dalamnya menggulir sendiri. Itulah yang
       diperbaiki bersamaan: `min-h-0` di index.html. Tanpa min-height 0, anak
       `flex-1` tak pernah mengecil di bawah tinggi isinya, jadi
       `overflow-y-auto` di nav cuma hiasan -- SCM dan POS sudah memakainya,
       CRM sendirian yang tertinggal. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    transform: none;
    transition: none;
    height: 100vh; /* cadangan untuk peramban tanpa dvh */
    height: 100dvh;
    /* Diulang di sini, walau blok dasar sudah menyetelnya: penjaga
       uji_tinggi_kerangka.py memeriksa tiap blok sendiri-sendiri, dan blok ini
       jangan sampai bergantung pada blok lain yang kelak bisa berubah. */
    min-height: 0;
    padding-bottom: 0;
  }
  .crm-sidebar-backdrop {
    display: none !important;
  }
}

.crm-nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  margin: 0 0.5rem 2px;
}

.crm-nav-link:hover {
  background: #f3f4f6;
}

.crm-nav-link.active {
  background: #ede9fe;
  color: #5b21b6;
  font-weight: 600;
}

/* Sasaran ketuk tombol aksi di kepala Omni Chat.
 *
 * Diukur pada viewport 393px: keempatnya (Manusia / Pegang / Label / Catatan)
 * hanya setinggi 19px. Teksnya memang sengaja disembunyikan di HP supaya
 * barisnya muat, tetapi yang tersisa lalu jadi ikon 19px -- jauh di bawah
 * ukuran yang bisa diketuk jempol dengan yakin, dan tetangganya cuma beberapa
 * piksel di samping. Ketukan yang meleset di baris ini bukan sepele: dua di
 * antaranya MENGUBAH keadaan (menyerahkan ke AI, melepas pegangan).
 *
 * Tingginya dinaikkan HANYA di HP; di layar lebar teksnya kembali muncul dan
 * ukuran ringkasnya justru yang diinginkan.
 */
@media (max-width: 1023px) {
  .oc-aksi {
    min-width: 36px;
    min-height: 36px;
  }
}

/* Sakelar penangan (Manusia <-> Agent AI): IKON saja, jadi ukurannya harus
   disebut sendiri -- tanpa teks di dalamnya, padding saja menyisakan tombol
   yang lebih kecil daripada tetangganya dan barisnya jadi bergerigi.
   Di ponsel `.oc-aksi` di atas sudah menaikkannya ke 36px; angka di sini yang
   berlaku di layar lebar, tempat tetangganya memang ringkas. */
.oc-sakelar {
  width: 2rem;
  height: 2rem;
  font-size: 12px;
  flex: none;
}

/* Tema per KANAL di Omni Chat.
 *
 * Permintaan owner 4 Sep 2026: "tiru UI wa-percakapan mulai dari warna, font,
 * background ... atau dibedakan saja per kanal". Keduanya dikerjakan sekaligus:
 * chat WhatsApp memakai kelas WhatsApp yang SUDAH ADA (`.wa-kanvas`,
 * `.wa-gelembung`, `.wa-masuk`, `.wa-keluar`) -- dipakai ulang, bukan disalin
 * warnanya, supaya kedua layar tak pernah berbeda satu nada pun -- sedangkan
 * Instagram dan Facebook hanya MENIMPA warna gelembung & latarnya di atas
 * kerangka yang sama.
 *
 * Kanal jadi penanda visual, bukan hiasan: di inbox gabungan, tahu chat ini
 * datang lewat pintu mana menentukan cara membalasnya.
 */
/* ---------------------------------------- kanal: rupa gelembung chat ---
 *
 * Tiga kanal, tiga rupa. Yang membedakan BUKAN cuma warna: BENTUK sudut dan
 * ada-tidaknya ekor ikut berbeda, supaya kanalnya masih terbaca oleh orang
 * yang sulit membedakan warna -- dan supaya bedanya tetap terlihat pada
 * tangkapan layar hitam-putih, yang justru bentuk lampiran laporan.
 *
 * WhatsApp berekor dan bersudut kecil; Messenger dan Instagram asli tak
 * punya ekor sama sekali dan bersudut penuh. Jadi yang dipakai di sini bukan
 * warna karangan, melainkan rupa yang memang sudah dikenal orang dari
 * aplikasi aslinya.
 *
 * WARNA TEKS SENGAJA TIDAK DIBALIK jadi putih, walau itu yang dipakai
 * Messenger (biru pekat) dan Instagram (gradien) asli. Di dalam gelembung ada
 * kutipan balasan, keterangan lampiran, kartu pesanan, dan blok bukti
 * transfer -- semuanya disetel gelap-di-atas-terang. Membalikkannya berarti
 * memeriksa ulang setiap satu dari mereka, dan satu yang terlewat jadi teks
 * putih di atas putih: hilang tanpa galat, dan tak akan dilaporkan siapa pun
 * karena tak ada yang terlihat rusak. Bedanya dicapai lewat bentuk, rona, dan
 * tepi berwarna.
 *
 * `.oc-wa` ditulis eksplisit walau isinya sama dengan bawaan: tiga kanal yang
 * berdampingan di satu berkas bisa dibandingkan, dan yang tak ditulis akan
 * disangka terlupa.
 */

/* --- WhatsApp: hijau, berekor, sudut kecil (tetap seperti aslinya) --- */
.oc-wa .wa-keluar .wa-gelembung {
  background: #d9fdd3;
}
.oc-wa .wa-masuk .wa-gelembung {
  background: #fff;
}

/* --- Instagram: ungu, tanpa ekor, sudut penuh --- */
.oc-ig .wa-kanvas,
.oc-ig.wa-kanvas {
  background-color: #fafafa;
  background-image: none;
}
.oc-ig .wa-gelembung {
  border-radius: 1.125rem;
}
.oc-ig .wa-keluar .wa-gelembung {
  background: #f1e9fe;
  box-shadow: inset 2px 0 0 #a855f7, 0 1px 0.5px rgba(11, 20, 26, 0.10);
}
.oc-ig .wa-masuk .wa-gelembung {
  background: #fff;
  box-shadow: inset -2px 0 0 #e9d5ff, 0 1px 0.5px rgba(11, 20, 26, 0.10);
}

/* --- Facebook/Messenger: biru, tanpa ekor, sudut penuh --- */
.oc-fb .wa-kanvas,
.oc-fb.wa-kanvas {
  background-color: #f0f2f5;
  background-image: none;
}
.oc-fb .wa-gelembung {
  border-radius: 1.125rem;
}
.oc-fb .wa-keluar .wa-gelembung {
  background: #e4edff;
  box-shadow: inset 2px 0 0 #2563eb, 0 1px 0.5px rgba(11, 20, 26, 0.10);
}
.oc-fb .wa-masuk .wa-gelembung {
  background: #fff;
  box-shadow: inset -2px 0 0 #d6e4ff, 0 1px 0.5px rgba(11, 20, 26, 0.10);
}

/* Ekor dimatikan untuk kedua kanal Meta, dan sudut yang dipapas ekor itu
 * dipulihkan. Bukan sekadar rupa: latar ekornya di `.wa-ekor` dipakukan ke
 * #fff / #d9fdd3, jadi pada gelembung Instagram/Facebook ia akan menempelkan
 * segitiga HIJAU di sudut gelembung ungu -- cacat yang sudah ada sejak warna
 * kanal ditambahkan, dan belum pernah terlihat karena app.css-nya sendiri tak
 * pernah sampai ke peramban (versi `?v=` tak ikut dinaikkan). */
.oc-ig .wa-ekor .wa-gelembung::before,
.oc-fb .wa-ekor .wa-gelembung::before {
  display: none;
}
.oc-ig .wa-ekor.wa-masuk .wa-gelembung,
.oc-fb .wa-ekor.wa-masuk .wa-gelembung {
  border-top-left-radius: 1.125rem;
}
.oc-ig .wa-ekor.wa-keluar .wa-gelembung,
.oc-fb .wa-ekor.wa-keluar .wa-gelembung {
  border-top-right-radius: 1.125rem;
}

/* Centang status kirim. `#53bdeb` adalah biru WhatsApp untuk "sudah dibaca".
 *
 * Dilaporkan owner "sepertinya belum berfungsi": datanya SUDAH benar (status
 * `dibaca` terbaca pada pesan nyata), yang salah warnanya -- biru pucat di
 * atas gelembung ungu nyaris tak terbaca. Di atas gelembung hijau-muda
 * WhatsApp, biru ini terbaca persis seperti di aplikasi aslinya. */
.oc-centang {
  color: #8696a0;
}
.oc-centang-dibaca {
  color: #53bdeb;
}

/* Gelembung pesan Omni Chat.
 *
 * `overflow-wrap: anywhere` WAJIB, bukan hiasan: pesan pesanan hampir selalu
 * memuat tautan panjang tanpa spasi (link pembayaran, link lacak, link bukti
 * transfer). Tanpa ini rantai itu tak boleh dipotong di mana pun, jadi
 * gelembungnya MELEBAR melampaui layar dan menyeret seluruh tata letak
 * bersamanya -- kartu transaksi terpotong, tombol kepala terdorong keluar
 * pandangan. Terlihat di HP pada percakapan pesanan Dimsum.
 *
 * Aturan yang sama sudah dipakai gelembung layar per-tenant; ini menyamakannya.
 */
.oc-gelembung {
  overflow-wrap: anywhere;
}

/* Kolom isian di Omni Chat / Omni Channel.
 *
 * 16px di HP, dan itu BUKAN selera: apa pun di bawah 16px membuat Safari iOS
 * memperbesar halaman sendiri saat kolom difokuskan -- dan ia TIDAK
 * mengembalikannya saat papan ketik ditutup. Akibatnya seluruh tata letak jadi
 * lebih lebar dari layar: gelembung pesan dan tombol Kirim terpotong di tepi
 * kanan, kepala panel terdorong keluar pandangan. Dilaporkan owner 3 Sep 2026
 * dengan tangkapan layar, sesudah perbaikan tinggi `dvh`.
 *
 * Aturan yang sama sudah dipakai `.wa-kotak-tulis` dan `.peta-cari`; kelas ini
 * memperluasnya ke kolom-kolom Omni. Turun ke 14px hanya di layar lebar, di
 * mana zoom-nya tak pernah terjadi.
 *
 * `maximum-scale=1` pada meta viewport SENGAJA tidak dipakai sebagai jalan
 * pintas: itu mematikan kemampuan pengguna memperbesar halaman sendiri, dan
 * memperbaiki satu bug dengan mencabut satu kemampuan aksesibilitas bukan
 * pertukaran yang sepadan.
 */
/* Kelasnya DIULANG (`.oc-input.oc-input`) dengan sengaja, bukan salah ketik.
 * Utilitas Tailwind `text-sm`/`text-[13px]` pada elemen yang sama punya
 * spesifisitas yang SAMA (satu kelas) dan disuntik BELAKANGAN, jadi aturan
 * satu-kelas di sini kalah dan ukurannya tetap 14px -- diukur, bukan ditebak.
 * Mengulang kelasnya menaikkan spesifisitas tanpa `!important`, yang akan
 * mengunci ukuran itu dari penyesuaian mana pun sesudahnya. */
.oc-input.oc-input {
  font-size: 16px;
}

@media (min-width: 1024px) {
  .oc-input.oc-input {
    font-size: 14px;
  }
}

/* Judul kelompok di menu samping. Sengaja kecil, huruf besar, dan abu-abu
   pucat: ia penanda tempat, bukan sesuatu yang bisa diklik -- kalau
   kontrasnya setara butir menu, orang akan mencoba mengekliknya. */
.crm-nav-group {
  margin: 0.875rem 0.875rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
  user-select: none;
}

/* Kelompok pertama menempel ke bilah atas kalau tak dirapatkan. */
.crm-nav-group:first-child {
  margin-top: 0.25rem;
}

.panel-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

.data-table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

.data-table thead th {
  text-align: left;
  color: #64748b;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
}

.data-table tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.btn-primary {
  background: var(--crm-accent);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.45rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.btn-ghost {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.45rem 0.875rem;
  font-size: 0.8125rem;
  background: #fff;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-card {
  background: #fff;
  border-radius: 0.75rem;
  width: min(100%, 32rem);
  max-height: 90vh; /* cadangan untuk peramban tanpa dvh */
  max-height: min(90vh, 90dvh);
  overflow: auto;
  padding: 1.25rem;
}

/* Detail pelanggan: butuh ruang untuk kartu ringkasan + tabel riwayat. */
.modal-card.modal-wide {
  width: min(100%, 46rem);
}

/* Header tabel yang bisa diklik untuk mengurutkan. */
.data-table thead th[data-sort]:hover {
  color: #5b21b6;
}

.stat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1rem;
}

.btn-active {
  background: var(--crm-accent);
  color: #fff;
  border-color: var(--crm-accent);
}

.kanban-board {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.kanban-column {
  flex: 0 0 260px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.5rem;
}

.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #475569;
  padding: 0.35rem 0.35rem 0.5rem;
}

.kanban-count {
  background: #e2e8f0;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
}

.kanban-dropzone {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kanban-dropzone.drag-over {
  background: #ede9fe;
  border-radius: 0.5rem;
}

.kanban-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.65rem;
  cursor: grab;
}

.kanban-card.dragging {
  opacity: 0.4;
}

.stat-card .value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #5b21b6;
}

/* ---------------------------------------------------------------------------
   Strip "Sumber data halaman ini" (lihat web/assets/js/sumber-data.js).
   Ditulis CSS biasa, bukan utilitas Tailwind, supaya markup pemanggilnya tetap
   ringkas dan gaya ini tak ikut hilang kalau kelak Tailwind CDN diganti build
   subset (preseden SCM: scm-tailwind-subset-gotcha).
   ------------------------------------------------------------------------- */
.src-note {
  background: #faf5ff;
  border: 1px solid #ede9fe;
  border-radius: 0.625rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.src-note-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.7rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #5b21b6;
}

.src-note-head:hover {
  background: #f5f0ff;
}

.src-note-icon {
  flex: 0 0 auto;
  color: #7c3aed;
}

.src-note-ringkas {
  flex: 1 1 auto;
  min-width: 0;
  color: #4c1d95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.src-note-lead {
  font-weight: 600;
}

.src-note-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  color: #7c3aed;
  white-space: nowrap;
}

.src-note-toggle .fa-chevron-down {
  transition: transform 0.15s ease;
  font-size: 0.65rem;
}

.src-note-head[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.src-note-body {
  background: #fff;
  border-top: 1px solid #ede9fe;
  padding: 0.55rem 0.7rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #334155;
}

.src-note-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.28rem 0;
}

.src-note-row + .src-note-row {
  border-top: 1px dashed #f1f5f9;
}

.src-note-label {
  flex: 0 0 9.5rem;
  font-weight: 600;
  color: #6d28d9;
}

.src-note-value {
  flex: 1 1 auto;
  min-width: 0;
}

.src-note-value p {
  margin: 0;
}

/* Tailwind preflight menghapus bullet & indentasi bawaan <ul> — dikembalikan
   di sini supaya daftar "dari mana asalnya" tetap terbaca sebagai daftar. */
.src-note-list {
  margin: 0;
  padding-left: 1.05rem;
  list-style: disc;
}

.src-note-list li {
  margin: 0.12rem 0;
}

@media (max-width: 640px) {
  .src-note-row {
    flex-direction: column;
    gap: 0.15rem;
  }
  .src-note-label {
    flex: none;
  }
}

/* ---------------------------------------------------------------------------
   Percakapan WhatsApp (web/assets/js/panels/wa-percakapan.js).

   Satu keputusan menjelaskan seluruh blok ini: layar ini sengaja DIBELAH jadi
   dua dunia.

   Pane KIRI tetap Feremart -- kertas putih, aksen ungu, garis urgensi di tepi
   baris -- karena ia bukan daftar chat, melainkan ANTREAN KERJA: yang dijawab
   di sana adalah "siapa yang sudah menunggu paling lama", pertanyaan yang tak
   pernah ditanyakan WhatsApp.

   Kanvas KANAN dibuat semirip mungkin dengan WhatsApp Web -- dinding #efeae2,
   gelembung keluar #d9fdd3 berekor, bayangan 1px yang sama, pemisah hari yang
   mengambang -- karena di situlah ingatan otot staf tinggal. Permintaan owner
   memang harfiah: "senyaman pakai WhatsApp Web".

   Ditulis CSS biasa, bukan utilitas Tailwind, karena tiga benda di sini tak
   punya padanan utilitas sama sekali (ekor gelembung, wallpaper, jam yang
   ditumpangkan di sudut gelembung) -- dan karena preseden SCM melarang
   menggantungkan hal yang WAJIB hidup pada Tailwind CDN
   (scm-tailwind-subset-gotcha).
   ------------------------------------------------------------------------- */

/* Angka yang dirender ulang tiap 6 detik: tanpa tabular-nums, tepi kanan
   kolom jam dan hitungan bergoyang setiap denyut. */
.wa-angka {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- pane kiri: cari -- */
.wa-cari {
  position: relative;
  display: flex;
  align-items: center;
}

.wa-cari-ikon {
  position: absolute;
  left: 0.75rem;
  font-size: 0.75rem;
  color: #94a3b8;
  pointer-events: none;
}

.wa-cari-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 9999px;
  padding: 0.5rem 2.1rem;
  color: #1e293b;
}

.wa-cari-input:focus {
  outline: none;
  background: #fff;
  border-color: #c4b5fd;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.wa-cari-bersih {
  position: absolute;
  right: 0.375rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.wa-cari-bersih:hover {
  background: #e2e8f0;
  color: #475569;
}

/* Wajib: `display:flex` di atas mengalahkan display:none bawaan [hidden]. */
.wa-cari-bersih[hidden] {
  display: none;
}

/* ------------------------------------------------------ pane kiri: chip -- */
.wa-chip {
  font-size: 10px;
  line-height: 1;
  padding: 0.28rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wa-chip:hover {
  background: #f8fafc;
}

/* Angka di dalam chip saringan. DIREDUPKAN, supaya nama saringannya tetap yang
   terbaca lebih dulu saat mata menyapu barisnya: angka menjawab "ada isinya
   berapa", bukan "ini saringan apa". Bobotnya juga diturunkan -- pada chip
   aktif seluruh teks jadi 600, dan angka setebal namanya membuat keduanya
   berebut. */
.wa-chip-angka {
  opacity: 0.6;
  font-weight: 400;
}

.wa-chip-aktif .wa-chip-angka {
  opacity: 0.8;
  font-weight: 500;
}

.wa-chip-aktif,
.wa-chip-aktif:hover {
  background: var(--crm-accent);
  border-color: var(--crm-accent);
  color: #fff;
  font-weight: 600;
}

/* -------------------------------------------- panel pesanan (Trx) chat -- */
/* JANGAN diremas flexbox. Panel ini punya `overflow-y`, dan itu membuat ukuran
   minimum OTOMATISnya jadi 0 (`min-height: auto` hanya melindungi elemen yang
   overflow-nya `visible`). Akibatnya `flex-shrink` bawaan bebas menggencetnya
   jauh di bawah isinya: pada kanvas berisi 40 pesan, kartu Trx setinggi 100px
   diberi ruang 45px di desktop dan 36px di laptop pendek — nomor transaksi dan
   tombolnya terpotong tanpa ada yang tahu bahwa panelnya bisa digulir.
   Makin panjang riwayat chat, makin gepeng panelnya.

   `flex: 0 0 auto` mengembalikan janji `max-height` di bawah ini: panel tumbuh
   setinggi isinya SAMPAI batas, lalu menggulir sendiri. Itu memang rancangan
   aslinya — yang selama ini tak pernah sempat berlaku. */
/* Strip catatan internal. `flex: 0 0 auto` + `max-height` di kelas SENDIRI,
   bukan kelas utilitas di JS -- pelajaran dari panel pesanan tepat di bawah:
   elemen ber-`overflow` di dalam kolom flex kehilangan `min-height:auto`, dan
   `flex-shrink` bawaan meremasnya jauh di bawah isinya sampai `max-height` tak
   pernah sempat berlaku. Salinan kelas di JS akan kehilangan properti itu cepat
   atau lambat. */
.wa-catatan-panel {
  flex: 0 0 auto;
  /* Lebih pendek daripada panel pesanan: catatan dibaca sekilas sebelum
     membalas, bukan dikerjakan. Yang tak muat digulir di dalamnya. */
  max-height: 9rem;
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .wa-catatan-panel {
    max-height: 14rem;
  }
}

.wa-pesanan-panel {
  flex: 0 0 auto;
  /* 10rem diukur di 390x844: cukup untuk satu pesanan penuh beserta tombolnya,
     sisanya digulir. Kotak balasan tak boleh terdorong keluar layar di HP --
     staf lalu mengira chat itu tak bisa dibalas. */
  max-height: 10rem;
  overflow-y: auto;
}

/* Di layar lebar ruang vertikal jauh lebih longgar, dan justru di sanalah staf
   membuka Rincian (2 item + alamat = 156px). Batas HP memaksa gulir dalam yang
   tak perlu di layar yang sebenarnya lapang. */
@media (min-width: 1024px) {
  .wa-pesanan-panel {
    max-height: 16rem;
  }
}

/* --------------------------------------------- daftar template pesan -- */
/* Lembar dari BAWAH, bukan dropdown kecil: isi template kerap tiga-empat baris,
   dan daftar yang harus digulir dalam kotak 200px membuat CS memilih dari
   judulnya saja -- lalu mengirim kalimat yang tak sempat ia baca. */
.wa-tpl-lapis {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
}

.wa-tpl-kotak {
  width: 100%;
  max-width: 34rem;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.9rem 0.9rem 0 0;
  overflow: hidden;
}

@media (min-width: 640px) {
  .wa-tpl-lapis { align-items: center; }
  .wa-tpl-kotak { border-radius: 0.9rem; }
}

.wa-tpl-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.wa-tpl-daftar {
  overflow-y: auto;
  /* flex-shrink dimatikan bukan gaya-gayaan: kotak ini punya `overflow`, dan
     itu mematikan `min-height:auto` -- persis jebakan yang meremas panel Trx
     jadi 45px. Lihat .wa-pesanan-panel. */
  flex: 1 1 auto;
  min-height: 0;
}

.wa-tpl-baris {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid #f1f5f9;
}

.wa-tpl-baris:hover {
  background: #f8fafc;
}

.wa-tpl-judul {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.wa-tpl-isi {
  display: block;
  font-size: 12px;
  color: #64748b;
  white-space: pre-wrap;
  margin-top: 0.1rem;
}

/* ------------------------------------------------ popup Uji Coba bot -- */
/* Layar penuh, memakai kanvas dan gelembung yang SAMA dengan layar Percakapan.
   Bukan kemiripan kosmetik: yang sedang dinilai CS adalah "pantas tidak kalimat
   ini keluar atas nama toko saya", dan penilaian itu berubah kalau kalimatnya
   dibaca di kotak putih alih-alih di tempat pelanggan akan membacanya. */
.uji-layar {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: #efeae2;
}

.uji-kepala {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6rem 0.85rem;
  background: #f0f2f5;
  border-bottom: 1px solid #e2e8f0;
}

.uji-kanvas {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem;
}

/* Keterangan teknis di bawah gelembung bot: lapis mana yang menjawab, alat
   apa yang dipanggil, berapa lama. Sengaja DI LUAR gelembung -- pelanggan tak
   akan pernah melihatnya, jadi ia tak boleh ikut dinilai sebagai bagian dari
   kalimatnya. */
.uji-jejak {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  font-size: 10.5px;
  line-height: 1.5;
  margin: -1px 0 0.5rem auto;
  max-width: 85%;
  justify-content: flex-end;
}

.uji-tanda {
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
  font-weight: 600;
}

.uji-tanda-1 { background: #e2e8f0; color: #334155; }
.uji-tanda-2 { background: #d1fae5; color: #065f46; }
.uji-tanda-3 { background: #ede9fe; color: #5b21b6; }
.uji-tanda-kirim { background: #059669; color: #fff; }
.uji-tanda-tahan { background: #fef3c7; color: #92400e; }

/* Baris "bot sedang mengetik" -- model lokal bisa puluhan detik, dan layar
   yang diam saja membuat orang mengira fiturnya rusak lalu menekan Kirim lagi.
   Di mesin yang melayani satu permintaan pada satu waktu, tekanan kedua itu
   justru memperlama yang pertama. */
/* Giliran ketika bot DIAM. Sengaja bukan gelembung: pelanggan tak menerima
   apa pun, dan layar uji harus memperlihatkan ketiadaan itu apa adanya. */
.uji-catatan {
  display: flex;
  justify-content: center;
  margin: 0.35rem 0 0.6rem;
}

.uji-catatan span {
  font-size: 11.5px;
  font-style: italic;
  color: #64748b;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  padding: 0.2rem 0.7rem;
}

.uji-mengetik {
  font-size: 12px;
  color: #64748b;
  padding: 0.35rem 0.6rem;
  font-style: italic;
}

/* ------------------------------------------- togel penanganan (CS ⇄ AI) -- */
/* Keadaan DAN aksinya satu benda: sisi yang menyala = penanganan sekarang,
   sisi yang gelap = tombolnya. Menggantikan sebaris teks keadaan + satu tombol
   aksi yang dulu memakan satu baris penuh tepat di atas kotak balasan. */
.wa-togel {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: #fff;
  overflow: hidden;
}

.wa-togel-sisi {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.5rem;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.wa-togel-sisi i {
  font-size: 10px;
}

.wa-togel-sisi:not(.is-aktif):hover {
  background: #f1f5f9;
  color: #334155;
}

/* Sisi aktif diberi warna PEMILIKNYA, bukan satu warna aksen seragam: ungu
   sudah berarti "mesin" di seluruh layar ini (strip draf, label Agent AI pada
   gelembung), dan mengulanginya di sini membuat "siapa yang sedang memegang
   chat" terbaca tanpa membaca hurufnya. */
.wa-togel-sisi.is-aktif {
  background: #475569;
  color: #fff;
  cursor: default;
}

.wa-togel-sisi[data-agen="ai"].is-aktif {
  background: #6d28d9;
}

/* ------------------------------------------------- nomor & tautan chat -- */
/* Nomor telepon di kepala thread ADALAH tautan ke WhatsApp; tombol terpisah
   "Buka di WhatsApp" dihapus karena tak menambah kemampuan apa pun, hanya
   memadati baris tersempit di layar. */
.wa-nomor {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #047857;
  font-weight: 500;
}

.wa-nomor:hover {
  text-decoration: underline;
}

.wa-nomor i {
  font-size: 11px;
}

/* Tautan DI DALAM gelembung. Warnanya dipilih supaya sama terbacanya di atas
   gelembung putih (masuk) maupun hijau #d9fdd3 (keluar). */
.wa-tautan {
  color: #027eb5;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.wa-tautan:hover {
  color: #015d87;
}

/* ---------------------------------------------------------------- avatar -- */
.wa-avatar {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.wa-avatar-besar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
}

/* Foto profil MENUTUPI lingkaran inisial, tidak menggantikannya.
   Inisialnya tetap dirender di belakang: itulah yang terlihat selagi fotonya
   dimuat, dan yang tersisa utuh kalau fotonya gagal dimuat (onerror membuang
   <img>-nya). `position:absolute` di dalam `.wa-avatar` yang relative, jadi
   ukuran dan lingkarannya sudah ditentukan induknya -- foto persegi panjang
   apa pun dipangkas `object-fit:cover`, bukan dijadikan lonjong. */
.wa-avatar {
  position: relative;
  overflow: hidden;
}

.wa-avatar-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* Latarnya ikut warna lingkaran induk, bukan transparan: foto profil yang
     kebetulan punya alpha akan memperlihatkan HURUF INISIAL di baliknya, dan
     nama yang menembus wajah orang terbaca sebagai render yang rusak. */
  background-color: inherit;
}

/* ------------------------------------------------- kanvas: kepala & kaki -- */
/* Kepala thread bertumpuk: baris identitas + aksi di atas, deretan lencana di
   bawahnya. Dulu semuanya satu baris, dan di 390px lencana "Perlu dibalas · 7
   menit" mematahkan diri jadi dua baris di tengah tombol -- nama kontak,
   nomor, dan tombol Pesanan saling mendorong sampai tak satu pun terbaca. */
.wa-kepala {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  background: #f0f2f5;
}

.wa-kepala-baris {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.wa-ikon-kepala {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-left: -0.25rem;
  border-radius: 9999px;
  color: #54656f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wa-ikon-kepala:hover {
  background: rgba(11, 20, 26, 0.06);
}

.wa-komposer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: #f0f2f5;
  border-top: 1px solid #e2e8f0;
}

.wa-lampir {
  flex: 0 0 auto;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 9999px;
  color: #54656f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wa-lampir:hover {
  background: rgba(11, 20, 26, 0.06);
}

/* 16px di HP bukan selera: di bawah itu iOS memperbesar seluruh halaman begitu
   kotak ini difokuskan, dan kotak balasan melompat keluar layar. */
/* Wadah kotak tulis: memberi jangkar posisi untuk tombol emoji di dalamnya.
   Sifat flex pindah ke sini dari kotak teksnya sendiri. */
.wa-tulis-wadah {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.wa-kotak-tulis {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  border: 0;
  border-radius: 1.125rem;
  background: #fff;
  /* Kanan dilebihkan: tanpa itu teks berjalan tepat di bawah tombol emoji. */
  padding: 0.5rem 2.5rem 0.5rem 0.875rem;
  font-size: 16px;
  line-height: 21px;
  color: #111b21;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.08);
}

@media (min-width: 1024px) {
  .wa-kotak-tulis {
    font-size: 14.5px;
    line-height: 20px;
  }
}

.wa-kotak-tulis:focus {
  outline: 2px solid #00a884;
  outline-offset: -1px;
}

/* Hijau WhatsApp, bukan ungu Feremart, dan itu disengaja: di layar ini tombol
   ini satu-satunya yang mengirim pesan SUNGGUHAN keluar ke telepon orang.
   Semua tombol ungu di sekitarnya cuma mengubah data di dalam. */
.wa-kirim {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.375rem;
  padding: 0 0.95rem;
  border-radius: 9999px;
  background: #00a884;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
}

.wa-kirim:hover:not(:disabled) {
  background: #008f72;
}

.wa-kirim:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* Tinggi, overflow, dan arah kotak yang digulir TIDAK boleh datang dari
   utilitas Tailwind CDN, dan ini bukan selera.
   Tailwind CDN membangkitkan aturannya dengan MENGAMATI DOM: kelas yang baru
   pertama kali muncul di halaman baru punya CSS satu putaran KEMUDIAN. Kanvas
   ini dibuat lewat innerHTML lalu posisi gulirnya dihitung pada baris
   berikutnya juga -- di celah itu `h-full` belum ada, kotaknya belum punya
   tinggi, belum bisa digulir, dan seluruh perhitungan "turun ke pesan terbaru"
   atau "berhenti di garis belum dibaca" mendarat di nol. Gejalanya: percakapan
   panjang selalu terbuka di pesan PALING LAMA. */
.wa-kanvas-wadah {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.wa-gulung {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Dengan sedikit pesan, WhatsApp menaruhnya menempel di bawah dekat kotak
   balasan, bukan menggantung di puncak dinding kosong. */
.wa-isi-bawah {
  margin-top: auto;
}

/* ---------------------------------------------------- kanvas: dinding --- */
/* Dinding WhatsApp beserta corengannya. Tinta 4,5% -- cukup untuk membedakan
   kanvas dari kertas putih pane kiri, terlalu tipis untuk berebut perhatian
   dengan gelembung putih di atasnya. */
.wa-kanvas {
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%230b141a' stroke-opacity='0.032' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 30c5-8 13-8 18 0'/%3E%3Cpath d='M112 22h18M112 28h11'/%3E%3Cpath d='M63 58l8-8 8 8'/%3E%3Ccircle cx='150' cy='71' r='7'/%3E%3Cpath d='M26 96h14'/%3E%3Cpath d='M96 104c-4-5-11-5-15 0'/%3E%3Cpath d='M137 132h16M137 138h9'/%3E%3Cpath d='M40 146v13'/%3E%3Ccircle cx='72' cy='161' r='5'/%3E%3Cpath d='M168 166l-7-7'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* --------------------------------------------------- kanvas: gelembung --- */
.wa-baris {
  display: flex;
  margin-bottom: 2px;
}

.wa-baris.wa-keluar {
  justify-content: flex-end;
}

/* Jarak rapat di dalam satu rentetan, longgar di antara rentetan: itulah yang
   membuat "tiga pesan beruntun dari satu orang" terbaca sebagai satu kali
   bicara, bukan tiga. */
.wa-baris.wa-akhir {
  margin-bottom: 0.6rem;
}

.wa-gelembung {
  position: relative;
  max-width: 85%;
  border-radius: 0.5rem;
  padding: 0.375rem 0.5rem 0.5rem;
  font-size: 14.5px;
  line-height: 20px;
  color: #111b21;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

@media (min-width: 1024px) {
  .wa-gelembung {
    max-width: 70%;
  }
}

.wa-masuk .wa-gelembung {
  background: #fff;
}

.wa-keluar .wa-gelembung {
  background: #d9fdd3;
}

/* Ekor gelembung: segitiga kecil yang menempel di sudut ATAS, sisi pengirim.
   Dipasang dengan clip-path, bukan trik border, supaya bentuknya tetap benar
   saat gelembungnya melebar atau teksnya membungkus. */
.wa-ekor .wa-gelembung::before {
  content: "";
  position: absolute;
  top: 0;
  width: 0.5rem;
  height: 0.8125rem;
}

.wa-ekor.wa-masuk .wa-gelembung {
  border-top-left-radius: 0;
}

.wa-ekor.wa-masuk .wa-gelembung::before {
  left: -0.5rem;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.wa-ekor.wa-keluar .wa-gelembung {
  border-top-right-radius: 0;
}

.wa-ekor.wa-keluar .wa-gelembung::before {
  right: -0.5rem;
  background: #d9fdd3;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.wa-teks {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Atribusi pesan keluar: "siapa yang mengucapkan ini".

   Empat asal (staf di CRM, Agent AI, HP staf, otomasi) dulu dirender sebagai
   gelembung hijau yang identik, sehingga pertanyaan "ini siapa yang balas"
   hanya bisa dijawab dengan menebak dari gaya bahasanya.

   Ditaruh di DALAM gelembung, di atas teksnya, meniru nama pengirim pada chat
   grup WhatsApp -- pola yang sudah dikenal semua orang yang memakai WhatsApp,
   jadi tak perlu dijelaskan. Hanya pada gelembung PEMBUKA rentetan: mengulang
   nama yang sama di lima gelembung berurutan menambah nol fakta dan justru
   menenggelamkan pergantian pengirim yang sesungguhnya penting. */
.wa-pengirim {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 600;
  margin-bottom: 0.125rem;
  color: #1f7a5a;
}

.wa-pengirim i {
  font-size: 10px;
  opacity: 0.85;
}

/* Warna membedakan MESIN dari ORANG dalam sekali lihat -- itu perbedaan yang
   paling sering dicari saat menelusuri percakapan yang salah jawab. */
.wa-pengirim.is-ai {
  color: #6d28d9;
}

.wa-pengirim.is-sistem {
  color: #a16207;
}

.wa-pengirim.is-perangkat {
  color: #475569;
}

/* Pesan yang lahir sebelum kolom atribusi ada. Ditulis miring dan pucat karena
   ia BUKAN sebuah nama -- ia pengakuan bahwa datanya memang tak pernah
   direkam. Menampilkannya sebagai "Staf" akan membuat 18 pesan lama tampak
   punya penanggung jawab yang tak pernah tercatat. */
.wa-pengirim.is-kosong {
  color: #94a3b8;
  font-weight: 500;
  font-style: italic;
}

/* Kartu "Dari iklan" -- konteks Click-to-WhatsApp.

   Caption iklan dulu DISAMBUNG ke teks pesan, sehingga chat yang isinya cuma
   "P" terbaca sebagai paragraf panjang yang ditulis pelanggan. Keterangannya
   tidak dibuang -- justru dari situ pemilik toko tahu chat ini datang dari
   iklan mana -- tapi ia bukan ucapan orangnya.

   Karena itu: warna dan bingkai yang jelas BEDA dari gelembung, dan TERTUTUP
   secara bawaan. Terbuka secara bawaan cuma memindahkan masalahnya: paragraf
   panjang itu tetap mendominasi gelembung, hanya dengan bingkai. */
.wa-iklan,
.wa-iklan-polos {
  margin-bottom: 0.3rem;
  border-radius: 0.375rem;
  border-left: 3px solid #a855f7;
  background: rgba(168, 85, 247, 0.09);
  padding: 0.3rem 0.45rem;
  font-size: 12.5px;
  line-height: 17px;
  color: #4b5563;
}

.wa-iklan > summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-weight: 600;
  color: #7e22ce;
  /* Segitiga bawaan browser dimatikan di kedua mesin: Safari iOS memakai
     ::-webkit-details-marker, yang lain `list-style`. Melewatkan salah satunya
     menyisakan penanda ganda di sebagian perangkat. */
  list-style: none;
}

.wa-iklan > summary::-webkit-details-marker {
  display: none;
}

.wa-iklan > summary::after {
  content: "\25be";
  margin-left: auto;
  padding-left: 0.35rem;
  transition: transform 0.15s ease;
}

.wa-iklan[open] > summary::after {
  transform: rotate(180deg);
}

.wa-iklan-judul {
  margin-top: 0.3rem;
  font-weight: 600;
  color: #374151;
}

.wa-iklan-teks {
  margin-top: 0.3rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wa-iklan-tautan {
  display: inline-block;
  margin-top: 0.3rem;
  color: #7e22ce;
  text-decoration: underline;
}

/* Nota pesanan katalog di bawah teks gelembung. Ruang bawah memberi tempat
   jam yang ditumpangkan di sudut kanan-bawah. */
.wa-nota {
  width: 100%;
  margin: 0.4rem 0 1rem;
  border-top: 1px dashed #cbd5e1;
  border-collapse: collapse;
  font-size: 13px;
}

.wa-nota td {
  padding: 0.3rem 0;
  vertical-align: top;
  border-bottom: 1px dashed #e2e8f0;
}

.wa-nota-sub {
  font-size: 12px;
  color: #64748b;
}

.wa-nota-angka {
  padding-left: 0.75rem !important;
  text-align: right;
  white-space: nowrap;
}

.wa-nota-total td {
  font-weight: 700;
  border-bottom: 0;
}

/* Jam ditumpangkan di sudut kanan-bawah gelembung (cara WhatsApp), dan
   `.wa-sisip` adalah ruang kosong selebar jam yang ditempelkan di ujung teks
   supaya baris terakhir tak tertimpa. Tanpa sisipan itu, jam duduk di atas
   huruf; dengan baris sendiri, tiap gelembung pendek jadi dua kali lebih
   tinggi dari yang perlu. */
.wa-jam {
  position: absolute;
  right: 0.5rem;
  bottom: 0.3rem;
  font-size: 11px;
  line-height: 15px;
  color: rgba(17, 27, 33, 0.45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wa-sisip {
  display: inline-block;
  width: 3.25rem;
  height: 1px;
}

/* Gelembung bergambar: jam dikembalikan ke barisnya sendiri. Ditumpangkan di
   atas foto ia tak terbaca, dan gradien pelindung ala WhatsApp tak sepadan
   dengan kerumitannya di sini. */
.wa-jam-blok {
  text-align: right;
  font-size: 11px;
  line-height: 15px;
  color: rgba(17, 27, 33, 0.45);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.wa-media {
  display: block;
  margin-bottom: 0.25rem;
}

.wa-media img,
.wa-media video {
  display: block;
  max-width: 100%;
  border-radius: 0.375rem;
}

/* -------------------------------------- kanvas: pemisah hari & belum baca - */
/* `sticky`: tanggal rentetan yang sedang dibaca tetap menggantung di puncak
   kanvas selama digulir -- itu jawaban gratis untuk "ini percakapan kapan?"
   yang selalu ditanyakan orang di tengah riwayat panjang. */
.wa-pemisah {
  position: sticky;
  top: 0.25rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  margin: 0.75rem 0 0.5rem;
  pointer-events: none;
}

.wa-pemisah span {
  background: #fff;
  color: #54656f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

/* Margin negatif menembus padding kanvas: garis "belum dibaca" adalah BATAS,
   dan batas yang berhenti sebelum tepi layar tak terbaca sebagai batas. */
.wa-belum {
  display: flex;
  justify-content: center;
  margin: 0.5rem -0.75rem;
  padding: 0.35rem 0;
  background: rgba(255, 255, 255, 0.75);
}

.wa-belum span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #54656f;
}

.wa-muat-lama {
  font-size: 11.5px;
  font-weight: 500;
  color: #54656f;
  background: #fff;
  border-radius: 9999px;
  padding: 0.3rem 0.85rem;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.wa-muat-lama:hover {
  background: #f6f6f6;
}

/* Tombol "turun ke pesan terbaru" hidup DI LUAR kotak yang digulir. Di dalam,
   ia ikut tergulir ke atas bersama isinya dan menghilang tepat pada saat ia
   dibutuhkan. Kelas `.tampil` dipakai alih-alih `.hidden` Tailwind: keduanya
   selektor satu-kelas, dan urutan Tailwind CDN vs berkas ini tak dijamin. */
.wa-turun {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 6;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: #fff;
  color: #54656f;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(11, 20, 26, 0.24);
}

.wa-turun.tampil {
  display: inline-flex;
}

/* --- Kendali gulir kanvas pesan di Omni Chat ------------------------------
 *
 * Sengaja TIDAK menumpang `.wa-turun`: di sana tombolnya satu dan selalu di
 * pojok kanan bawah, di sini ada dua (naik dan turun) di dua sudut. Yang
 * DIPAKAI ULANG adalah rupanya -- ukuran, bayangan, warna -- supaya kedua
 * layar tetap terasa satu aplikasi.
 *
 * `.tampil` dipakai alih-alih `hidden` bawaan Tailwind dengan alasan yang
 * sama seperti `.wa-turun`: keduanya selektor satu-kelas, dan urutan Tailwind
 * CDN terhadap berkas ini tak dijamin.
 */
.oc-gulir {
  position: absolute;
  right: 0.75rem;
  z-index: 6;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #fff;
  color: #54656f;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(11, 20, 26, 0.24);
}

.oc-gulir.tampil {
  display: inline-flex;
}

.oc-gulir:hover {
  color: #111b21;
}

.oc-gulir-naik {
  top: 0.75rem;
}

.oc-gulir-turun {
  bottom: 0.75rem;
}

/* "N pesan baru". DI TENGAH, bukan menempel di tombol turun: ia mengumumkan
   sesuatu, dan pengumuman di pojok kanan bawah bersaing dengan tombol yang
   sudah tinggal di sana. Diklik = melompat ke pesan baru PERTAMA (lihat
   penangan kliknya), bukan ke dasar.

   Ada karena pandangan orang TIDAK lagi diseret ke bawah tiap denyut: begitu
   layar berhenti memaksa, harus ada yang memberi tahu bahwa di bawah sana
   memang ada sesuatu yang baru. */
.oc-pil-baru {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: none;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: var(--crm-accent, #7c3aed);
  box-shadow: 0 1px 4px rgba(11, 20, 26, 0.28);
}

.oc-pil-baru.tampil {
  display: inline-flex;
}

.oc-pil-baru:hover {
  filter: brightness(1.06);
}

/* --- Pemilih cepat template ("/" di kotak balasan) ------------------------
 *
 * MENGAMBANG di atas kanvas pesan, bukan mendorong kotak balasan turun: kotak
 * yang berpindah tempat tiap huruf diketik tak bisa dipakai mengetik. Karena
 * itu ia `absolute` di dalam wadah setinggi nol tepat di atas form.
 *
 * Tumbuh KE ATAS (`bottom: 0`) supaya baris pertama selalu paling dekat dengan
 * jari -- di ponsel, daftar yang tumbuh ke bawah akan tertutup papan ketik.
 */
.oc-slash {
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 8;
  display: none;
  flex-direction: column;
  /* Setinggi enam baris dulu (15rem), dan itu berarti daftar sembilan belas
     template Mizuke menampakkan enam. Dinaikkan bersama pencabutan batas
     `.slice(0, 8)` di panel: dua-duanya memotong hal yang sama, satu di kode
     satu di tinggi kotak, jadi memperbaiki salah satunya saja tak mengubah
     apa yang dilihat orang.

     `dvh`, BUKAN `vh`. Panel ini duduk tepat di atas kotak balasan; dengan
     `vh` ia diukur terhadap viewport besar seolah bilah browser tak ada, jadi
     saat papan ketik HP terbuka daftarnya lebih tinggi daripada ruang yang
     tersisa dan menutupi kotak yang sedang diketik. Jebakan yang sama dengan
     tinggi kerangka panel penuh -- lihat `.crm-penuh-doc`. */
  max-height: min(24rem, 45dvh);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 6px 20px rgba(11, 20, 26, 0.18);
}

.oc-slash.tampil {
  display: flex;
}

.oc-slash-baris {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.oc-slash-baris:last-child {
  border-bottom: 0;
}

/* Sorotan dipasang lewat KELAS, bukan `:hover` saja: yang menggerakkan pilihan
   di sini panah keyboard, dan sorotan yang hanya mengikuti tetikus membuat
   Enter menyisipkan template yang tak sedang terlihat dipilih. */
.oc-slash-baris.aktif,
.oc-slash-baris:hover {
  background: #f5f3ff;
}

.oc-slash-judul {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
}

.oc-slash-isi {
  display: block;
  font-size: 11px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kepala daftar: menyebut BERAPA yang cocok, dan mengatakan kalau masih ada
   yang harus digulir. `sticky` supaya angkanya tak hilang begitu digulir --
   yang perlu diketahui orang saat menggulir persis "dari berapa". */
.oc-slash-kepala {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.35rem 0.75rem;
  font-size: 10.5px;
  font-weight: 500;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

/* Baris aktif digulir ke pandangan oleh panah keyboard; tanpa marjin ini
   `scrollIntoView` menaruhnya PERSIS di bawah kepala yang sticky, jadi baris
   yang sedang dipilih tertutup oleh kepalanya sendiri. */
.oc-slash-baris {
  scroll-margin-top: 1.7rem;
}

.oc-slash-kosong {
  padding: 0.6rem 0.75rem;
  font-size: 12px;
  color: #64748b;
}

/* --- Daftar template pesan: KARTU, bukan tabel ---------------------------
 *
 * Tabel enam kolom memaksa isi pesan -- satu-satunya hal yang benar-benar
 * dibaca di halaman ini -- masuk ke kolom sempit yang dipotong, sementara
 * "Urut" dan "Aktif" mendapat lebar tetap yang tak pernah dibutuhkan. Di
 * ponsel tabelnya menggulir mendatar dan tombol Ubah/Hapus jatuh di luar
 * layar. Kartu membalik urutan itu.
 *
 * `auto-fill` + `minmax`, bukan jumlah kolom tetap: satu template di layar
 * lebar tak boleh melar selebar 1400px, dan enam template di ponsel harus
 * tetap satu kolom tanpa media query sendiri.
 */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.75rem;
}

.tpl-kartu {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: #fff;
}

.tpl-kartu:hover {
  border-color: #c4b5fd;
}

/* Nonaktif DIREDUPKAN, bukan disembunyikan: ia tetap harus bisa ditemukan dan
   dinyalakan lagi, dan yang perlu terbaca sekilas cuma "ini tidak dipakai". */
.tpl-mati {
  background: #f8fafc;
  opacity: 0.72;
}

.tpl-kepala {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.tpl-lencana-baris {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tpl-judul {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.tpl-urut {
  font-size: 10px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.tpl-lencana {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  border: 1px solid transparent;
}

.tpl-berkas {
  color: #6d28d9;
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.tpl-nonaktif {
  color: #64748b;
  background: #f1f5f9;
  border-color: #e2e8f0;
}

/* Isi pesan DIPOTONG di enam baris, bukan dibiarkan sepanjang apa pun: satu
   template 3.000 huruf akan membuat kartu tetangganya berdiri di bawah lipatan
   layar, dan yang dicari orang di halaman ini adalah membandingkan beberapa
   template sekaligus. */
.tpl-isi {
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tpl-kosong {
  font-style: italic;
  color: #94a3b8;
}

.tpl-aksi {
  display: flex;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

/* --- Balas, edit, dan tarik pesan ----------------------------------------- */

/* Kutipan di dalam gelembung. Garis tebal di tepi kiri, bukan kotak bergaris
   penuh: ia harus terbaca sebagai bagian DARI pesan ini, bukan sebagai pesan
   kedua yang berdiri sendiri. */
.oc-kutip {
  display: block;
  width: 100%;
  text-align: left;
  border-left: 3px solid var(--crm-accent, #7c3aed);
  background: rgba(124, 58, 237, 0.06);
  border-radius: 0.35rem;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.3rem;
  font-size: 11px;
  line-height: 1.35;
}

.oc-kutip[data-lompat-pesan] {
  cursor: pointer;
}

.oc-kutip[data-lompat-pesan]:hover {
  background: rgba(124, 58, 237, 0.12);
}

/* Yang tak ketemu diredupkan DAN tak bisa diklik: tautan yang tak menuju ke
   mana-mana lebih buruk daripada tulisan biasa. */
.oc-kutip-hilang {
  border-left-color: #cbd5e1;
  background: rgba(100, 116, 139, 0.08);
  font-style: italic;
  cursor: default;
}

.oc-kutip-siapa {
  display: block;
  font-weight: 600;
  color: #6d28d9;
}

.oc-kutip-hilang .oc-kutip-siapa {
  color: #64748b;
}

.oc-kutip-teks {
  display: block;
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sorotan sekejap sesudah melompat ke pesan yang dikutip. */
.oc-disorot .wa-gelembung {
  outline: 2px solid var(--crm-accent, #7c3aed);
  outline-offset: 2px;
  transition: outline-color 0.4s ease;
}

/* Tombol menu per pesan. Selalu ADA, bukan muncul saat kursor lewat: di ponsel
   tak ada "lewat", dan aksi yang cuma bisa dicapai tetikus sama saja dengan
   tak ada. Diredupkan supaya tak bersaing dengan isi pesannya. */
.oc-menu-tombol {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 9999px;
  font-size: 11px;
  color: #94a3b8;
  opacity: 0.55;
}

.oc-menu-tombol:hover {
  opacity: 1;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
}

.oc-gelembung {
  position: relative;
  /* Ruang untuk tombol menu di pojok kanan atas, supaya ia tak menimpa huruf
     pertama pesan pendek. */
  padding-right: 1.6rem;
}

.oc-menu-pesan {
  position: absolute;
  top: 1.6rem;
  right: 2px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  min-width: 9.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  box-shadow: 0 6px 18px rgba(11, 20, 26, 0.2);
  overflow: hidden;
}

/* Menu pesan MASUK duduk di SEBELAH KANAN gelembungnya, menempel.
 *
 * Bawaannya (dipatok ke tepi kanan gelembung, tumbuh ke kiri) baik-baik saja
 * selama isinya cuma "Balas"/"Edit"/"Tarik kembali". Tombol "Jadikan bukti
 * transfer" membuatnya jauh lebih lebar, dan gelembung yang paling sering
 * dikenainya justru yang paling KURUS -- foto bukti transfer itu potret,
 * struk difoto tegak. Menu selebar itu di atas gelembung sesempit itu tumbuh
 * melewati tepi kiri gelembung, lalu melewati tepi kiri panel: terukur 18 px
 * di luar layar, di semua lebar.
 *
 * `left: 100%` menaruhnya tepat di luar tepi kanan gelembung -- di selokan
 * yang memang kosong di sebelah pesan masuk -- jadi ia tetap MENEMPEL pada
 * kartu chat-nya, bukan melayang di pinggir panel. */
.wa-masuk .oc-menu-pesan {
  right: auto;
  left: 100%;
  margin-left: 0.25rem;
}

/* Cadangan saat selokan itu TAK CUKUP: gelembung lebar di layar sempit
 * (gelembung boleh 85% lebar panel di HP, dan menu ini ~10,5rem). Dipasang
 * `rapikanMenuPesan()` sesudah mengukur, bukan ditebak di CSS -- lebar
 * gelembung ditentukan isinya dan tak bisa dibaca aturan gaya. Kembali ke
 * perilaku lama: menindih tepi kanan gelembung, tumbuh ke kiri. Untuk
 * gelembung selebar itu, ke kiri memang muat. */
.wa-masuk .oc-menu-pesan.oc-menu-balik {
  left: auto;
  right: 2px;
  margin-left: 0;
}

.oc-menu-pesan button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  font-size: 12px;
  color: #334155;
  text-align: left;
  /* "Jadikan bukti transfer" tak boleh patah jadi dua baris: menu setinggi
     itu menutupi pesan di bawahnya, dan barisnya jadi susah dibidik jari. */
  white-space: nowrap;
}

/* Ikonnya tak ikut menyusut saat labelnya panjang -- tanpa ini `flex` memerasnya
   jadi setengah dan barisnya jadi tak sejajar dengan tetangganya. */
.oc-menu-pesan button i {
  flex: 0 0 auto;
  width: 0.9rem;
  text-align: center;
}

.oc-menu-pesan button:hover {
  background: #f8fafc;
}

.oc-menu-bahaya {
  color: #be123c !important;
}

.oc-menu-bahaya:hover {
  background: #fff1f2 !important;
}

/* Pesan yang DITARIK. Isinya tetap terbaca CS -- dicoret, bukan dihapus: yang
   ditarik adalah salinan di HP pelanggan, dan riwayat internal justru paling
   dibutuhkan sesudah sesuatu ditarik. */
.oc-ditarik .wa-teks {
  text-decoration: line-through;
  opacity: 0.55;
}

.oc-ditarik-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #be123c;
  margin-bottom: 0.15rem;
}

.oc-diedit {
  font-size: 10px;
  font-style: italic;
  opacity: 0.75;
}

/* Bilah konteks di atas kotak balasan: sedang membalas / sedang menyunting. */
.oc-konteks {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-left: 3px solid var(--crm-accent, #7c3aed);
  background: #f5f3ff;
  border-radius: 0.35rem;
  font-size: 11px;
  color: #4c1d95;
}

.oc-konteks-edit {
  border-left-color: #d97706;
  background: #fffbeb;
  color: #92400e;
}

.oc-konteks-teks {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-konteks button {
  flex: none;
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
}

.oc-konteks button:hover {
  opacity: 1;
}

.wa-turun:hover {
  color: #111b21;
}

/* ------------------------------------------------------------- kerangka -- */
/* Kerangka, bukan tulisan "Memuat…": bentuk yang sudah menempati posisi yang
   benar membuat isi yang datang terasa mengisi, bukan menggeser. */
/* Sedikit lebih gelap dari kertas: kerangka ini juga dipakai di kepala thread
   yang latarnya #f0f2f5, dan abu-abu yang lebih terang dari itu tak terlihat
   sama sekali di sana. */
.wa-skel {
  background: linear-gradient(90deg, #e4e9ef 25%, #d3dbe4 37%, #e4e9ef 63%);
  background-size: 400% 100%;
  animation: wa-kilau 1.4s ease infinite;
}

@keyframes wa-kilau {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.wa-chip:focus-visible,
.wa-kirim:focus-visible,
.wa-turun:focus-visible,
.oc-gulir:focus-visible,
.oc-pil-baru:focus-visible,
.wa-lampir:focus-visible,
.wa-ikon-kepala:focus-visible,
.wa-cari-bersih:focus-visible,
.wa-muat-lama:focus-visible {
  outline: 2px solid var(--crm-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .wa-skel {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Pemilih lokasi pengantaran (peta-pilih.js) + blok pengiriman di keranjang chat.

   Dipasang sebagai lapisan sendiri di atas modal keranjang, BUKAN di dalamnya:
   modal keranjang sudah bisa di-scroll dan berisi banyak field, dan peta yang
   ikut ter-scroll bersamanya membuat gerakan menggeser peta dan menggeser
   halaman saling berebut di layar sentuh.
--------------------------------------------------------------------------- */
.peta-bungkus {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.peta-latar {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.peta-kotak {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: 92vh; /* cadangan untuk peramban tanpa dvh */
  max-height: min(92vh, 92dvh);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #fff;
  border-radius: 0.75rem;
  padding: 0.75rem;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.25);
}

.peta-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.peta-cari {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  /* 16px di HP: apa pun di bawah itu membuat Safari iOS memperbesar halaman
     sendiri saat kolom difokuskan, dan petanya ikut melompat. */
  font-size: 16px;
}

.peta-hasil {
  max-height: 9rem;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.peta-hasil-baris {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  font-size: 12.5px;
  border-bottom: 1px solid #f1f5f9;
}

.peta-hasil-baris:last-child {
  border-bottom: 0;
}

button.peta-hasil-baris:hover {
  background: #f8fafc;
}

.peta-kanvas {
  flex: 1;
  min-height: 15rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #e2e8f0;
}

.peta-petunjuk {
  font-size: 11px;
  color: #64748b;
}

.peta-kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Blok pengiriman di dalam modal keranjang. */
.kirim-pilih {
  display: flex;
  gap: 0.5rem;
}

.kirim-pilih label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  font-size: 12.5px;
  cursor: pointer;
}

.kirim-pilih input:checked + span {
  font-weight: 600;
  color: #7e22ce;
}

.kurir-baris {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.4rem 0.55rem;
  font-size: 12.5px;
  margin-bottom: 0.3rem;
  cursor: pointer;
}

.kurir-baris:has(input:checked) {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.07);
}

/* ---------------------------------------------------------- layar penuh --
 *
 * Dipasang app.js lewat kelas `crm-penuh` pada #app, untuk panel yang terdaftar
 * di PANEL_PENUH. Sekarang hanya Percakapan.
 *
 * Percakapan adalah klien chat, bukan halaman laporan. Ia dibuka lewat tab
 * tersendiri per nomor dari layar Sesi WhatsApp, jadi menu samping di sebelahnya
 * tak menuju ke mana pun yang dituju orang dari sini -- sementara tinggi yang
 * dimakan sidebar dan bilah judul persis yang paling dibutuhkan: makin banyak
 * pesan yang muat, makin sedikit gulir saat membalas.
 *
 * Yang disembunyikan HANYA kerangka aplikasi. Panelnya sendiri tak tahu-menahu
 * soal mode ini kecuali satu hal: tingginya `100dvh` polos, tanpa angka ajaib
 * pengurang tinggi header (dulu `calc(100dvh - 150px)`) yang harus diperbaiki
 * tiap kali tinggi kerangka berubah satu piksel.
 */
.crm-penuh #sidebar,
.crm-penuh #sidebar-backdrop,
.crm-penuh #crm-topbar {
  display: none !important;
}

.crm-penuh main {
  padding: 0 !important;
  /* Panel chat mengurus gulirnya sendiri, per pane. Gulir di tingkat main
     membuat seluruh layar ikut bergeser saat rentetan pesan memanjang. */
  overflow: hidden !important;
}

/* Dokumennya sendiri ikut dikunci setinggi satu layar. Sakelarnya `crm-penuh-doc`
 * di <html> (dipasang app.js berbarengan dengan `crm-penuh`), BUKAN `crm-penuh`
 * di #app -- justru karena yang perlu dibatasi adalah <html> dan <body>, dua
 * leluhur yang tak bisa dijangkau dari sana.
 *
 * Kerangka aplikasi memakai `min-height: 100vh` di TIGA tempat: `body.crm-body`,
 * `#app`, dan pembungkus isinya (`.crm-utama`). Di HP `100vh` adalah viewport
 * BESAR -- tinggi layar seolah bilah alamat dan bilah bawah browser tak ada --
 * sedangkan panel penuh memakai `100dvh`, viewport yang SEDANG terlihat.
 * Selisihnya (74px diukur di Chrome iOS 390x844) menggantung sebagai pita kosong
 * di bawah kotak balasan.
 *
 * Dan pita itu bukan cuma jelek: dokumen yang lebih tinggi dari layar membuat
 * halaman BISA DIGULIR, jadi papan ketik yang muncul menggeser halaman ke bawah
 * dan browser tak mengembalikannya saat papan ketik ditutup -- pita kosongnya
 * menetap sampai orang menggulir sendiri. Itulah rupa laporannya (30 Agu 2026):
 * "ada space kosong di bawah setelah keyboard ditutup".
 *
 * `min-height: 0` wajib menyertai tiap `height`: tanpa itu `min-height` yang
 * lebih besar tetap menang dan tingginya tak berubah sedikit pun.
 */
.crm-penuh-doc,
.crm-penuh-doc body.crm-body {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  /* Tanpa ini, tarikan di ujung daftar chat memantulkan seluruh halaman. */
  overscroll-behavior: none;
}

.crm-penuh-doc #app.crm-penuh,
.crm-penuh-doc #app.crm-penuh > .crm-utama {
  height: 100dvh;
  min-height: 0;
}

/* Spanduk galat tetap perlu jarak; tanpa ini ia menempel di tepi jendela. */
.crm-penuh #global-alert:not(.hidden) {
  margin: 0.75rem;
}

/* Selama ada modal terbuka, spanduk MELAYANG DI ATAS modal. Tempat aslinya di
 * puncak <main>, di BAWAH latar modal (z-index 40) -- dulu alasan penolakan
 * simpan (mis. "wajib meminta balasan ADA atau AMAN") tertulis di balik modal
 * dan tombol Simpan terlihat tak berbuat apa-apa (owner 24 Sep 2026, di
 * /notifikasi-pesanan: "pesan gagal simpannya tidak terlihat"). Berlaku untuk
 * SEMUA modal, bukan satu layar: semuanya memakai showAlert yang sama. */
body:has(.modal-backdrop) #global-alert:not(.hidden) {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(36rem, calc(100vw - 2rem));
  margin: 0;
  z-index: 90;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.25);
}

/* Baris chip yang menggulir mendatar, dipakai saringan layar Percakapan.
 * Membungkus ke bawah membuat blok saringan tumbuh sampai lima baris dan
 * mendorong daftar chatnya sendiri keluar layar. Batang gulirnya disembunyikan
 * karena chip yang terpotong di tepi kanan sudah cukup memberi tahu bahwa masih
 * ada lagi -- batang gulir setinggi 15px di bawah tiap baris justru menambah
 * kebisingan yang hendak dikurangi. */
.wa-baris-saring {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Chip tak boleh diperas jadi tak terbaca saat barisnya penuh. */
  padding-bottom: 1px;
}
.wa-baris-saring::-webkit-scrollbar { display: none; }
.wa-baris-saring > * { flex: 0 0 auto; }

/* Baris penangan MEMBUNGKUS, tidak menggulir seperti dua baris di bawahnya.
 *
 * Diukur, bukan ditebak: kelima chipnya ("Chat saya", "Belum dipegang",
 * "Semua", "Agent AI", "Manusia") butuh 444px sedangkan sidebar hanya
 * menyisakan 295px. Digulir, "Manusia" tak pernah terlihat tanpa digeser lebih
 * dulu -- padahal kelimanya menjawab satu pertanyaan yang sama, dan gunanya
 * disandingkan justru supaya angkanya bisa DIBANDINGKAN sekali lihat. Satu
 * baris tambahan (~23px) lebih murah daripada saringan yang tak terlihat.
 *
 * Saringan keadaan di bawahnya tetap menggulir: delapan chip yang jarang
 * dipakai bersamaan tak sepadan dengan dua baris tetap di layar. */
.wa-baris-saring.wa-baris-bungkus {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 0.25rem;
}

/* Kelompok chip: pembungkusan baris jatuh di ANTARA kelompok, tak pernah
   membelah satu kelompok jadi dua baris. */
.wa-grup {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex: 0 0 auto;
}

/* Lihat catatan di `tandaiGulirSaring()`: pemisah yang tertinggal di ujung
   baris pertama terbaca sebagai kelompok kosong, bukan sebagai pemisah. */
.wa-terbungkus .wa-pisah {
  display: none;
}

/* Tanda "masih ada lagi ke kanan" pada baris saringan yang menggulir.
 *
 * Tanpa ini chip terakhir terpotong lurus di tepi, dan potongan lurus terbaca
 * sebagai KERUSAKAN, bukan sebagai undangan menggulir. Kelasnya dipasang JS
 * hanya bila isinya memang melebihi lebar -- memudarkan baris yang muat penuh
 * berarti membohongi mata tentang adanya isi yang tak ada. */
.wa-baris-saring.wa-bisa-gulir {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}

/* ------------------------------------------------------------------ kartu --
 *
 * `.card` dan kawan-kawannya dipakai tiga panel (agen-ai, template-pesan,
 * label-chat) tetapi TIDAK PERNAH didefinisikan -- ketiganya selama ini tampil
 * sebagai div telanjang di atas latar halaman, sementara panel lain yang
 * memakai `.panel-card` tampil berkotak. Di layar Agent AI keduanya bahkan
 * bertetangga, jadi halamannya terbaca seperti empat bagian yang tak sepakat
 * satu sama lain.
 *
 * Didefinisikan, bukan panelnya yang ditulis ulang: kosakata ini sudah dipakai
 * tiga panel, dan `card-head`/`card-title`/`card-body` tak punya padanan pada
 * `.panel-card` -- menyeragamkan ke sana berarti mengarang markup baru di tiga
 * tempat demi hasil yang sama persis.
 */
.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

.card-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
}

.card-body {
  padding: 1rem;
}

/* ----------------------------------------------------------------- emoji --
 *
 * Pemilih emoji kotak balasan. MELAYANG di atas komposer, bukan mendorongnya:
 * panel Percakapan setinggi 100dvh persis, jadi apa pun yang menambah tinggi di
 * dalamnya mendorong kotak balasan keluar layar — kesalahan yang persis sama
 * dengan strip "Sumber data" ([[crm-inbox-percakapan-per-nomor]]).
 */
.wa-komposer {
  position: relative;
}

.wa-emoji-lapis {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  /* Kedua sisi dipatok lalu `margin-left: auto` -- dengan max-width, kotaknya
     merapat ke KANAN mengikuti tombolnya di layar lebar, dan melebar penuh
     dengan sendirinya di layar sempit. Tanpa ini pemilih menggantung di ujung
     kiri sementara tombol pemicunya di kanan. */
  left: 0.625rem;
  right: 0.625rem;
  margin-left: auto;
  z-index: 30;
  max-width: 22rem;
  /* Dibatasi tingginya lalu digulir: daftar yang memanjang sampai menutupi
     seluruh percakapan membuat orang kehilangan kalimat yang sedang dibalasnya. */
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.wa-emoji-bagian + .wa-emoji-bagian {
  margin-top: 0.5rem;
}

.wa-emoji-judul {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 0.125rem 0.25rem;
}

.wa-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr));
  gap: 0.125rem;
}

.wa-emoji-btn {
  /* 2,25rem = 36px, di atas batas sasaran sentuh yang nyaman di ponsel. */
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 0.5rem;
  background: transparent;
  transition: background-color 0.12s;
}

.wa-emoji-btn:hover {
  background: #f1f5f9;
}

.wa-emoji-btn:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: -2px;
}

/* Tombol emoji DI DALAM kotak tulis, menempel kanan bawah.
   Bawah, bukan tengah: kotaknya tumbuh ke atas saat balasannya panjang, dan
   tombol yang mengambang di tengah berpindah tempat tiap kali orang menambah
   satu baris. Yang menempel di bawah selalu ada di titik yang sama. */
.wa-emoji-tombol {
  position: absolute;
  right: 0.375rem;
  bottom: 0.3125rem;
  width: 1.875rem;
  height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #64748b;
  font-size: 1rem;
  background: transparent;
  transition: background-color 0.12s, color 0.12s;
}

.wa-emoji-tombol:hover {
  background: #f1f5f9;
  color: #334155;
}

.wa-emoji-tombol[aria-expanded="true"] {
  background: #ede9fe;
  color: #6d28d9;
}

.wa-emoji-tombol:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 1px;
}

/* Penanda "template ini membawa berkas", di baris pemilih template.
   Ditulis bersama NAMA berkasnya, bukan cuma ikon klip: dua template berjudul
   mirip ("Daftar harga", "Daftar harga reseller") hanya bisa dibedakan dari
   berkas yang menempel padanya. */
.wa-tpl-media {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.375rem;
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  font-size: 0.6875rem;
  font-weight: 500;
  vertical-align: middle;
}

/* Kolom "tak ada lalu lintas" pada grafik laporan: arsiran, bukan warna solid.
   Arsiran dibaca sebagai "tidak terukur"; warna solid apa pun akan dibaca
   sebagai nilai yang benar-benar diukur, dan itu justru kebalikan artinya. */
.lap-kosong {
  background-image: repeating-linear-gradient(
    45deg, #e2e8f0 0 4px, #f1f5f9 4px 8px);
}

/* Pemisah antar-kelompok chip di baris saringan yang menggulir mendatar.
   Dipakai di baris penangan, memisah dua chip pemegang ("Chat saya", "Belum
   dipegang") dari tab penangan ("Semua", "Agent AI", "Manusia"): tanpa jeda
   visual kelimanya terbaca sebagai satu daftar pilih-salah-satu, padahal
   pemegang dan penangan justru dimaksudkan untuk dipakai bersamaan. */
.wa-pisah {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: #e2e8f0;
}

/* ----------------------------------------------------------- profil kontak -- */
/* Foto profil di kepala thread adalah PINTU MASUK profil kontak. Yang membuat
   sesuatu terlihat bisa diklik bukan kursornya (tak ada kursor di HP, dan CS di
   sini bekerja dari HP) melainkan tanda yang menempel padanya -- karena itu
   pena kecil di sudut, bukan sekadar :hover. Avatar di DAFTAR chat sengaja tak
   mendapat perlakuan ini: barisnya sendiri sudah sebuah tombol, dan tombol di
   dalam tombol bukan HTML yang sah. */
.wa-avatar-tombol {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  line-height: 0;
  border-radius: 9999px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.wa-avatar-tombol:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

.wa-avatar-pena {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  background: #7c3aed;
  color: #fff;
  font-size: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1.5px #f0f2f5;
}

/* Modal profil: kepala tetap, isi menggulir, kaki tetap.
   `.modal-card` biasa memakai `max-height: 90vh; overflow:auto` -- yang di HP
   berarti tombol Simpan duduk di ujung bawah isi yang panjang, TERSEMBUNYI di
   balik bilah alamat peramban. `dvh` mengikuti tinggi yang benar-benar terlihat,
   dan kaki yang `flex-shrink:0` tak bisa diperas keluar layar oleh isi form 26
   field. Anak yang menggulir wajib `min-height:0`: `overflow` mematikan
   `min-height:auto` bawaan flex, dan tanpa itu justru KEPALA yang terpotong. */
.modal-card.modal-profil {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 90dvh);
  overflow: hidden;
  padding: 0;
}

.modal-profil .profil-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.profil-kepala {
  flex: 0 0 auto;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
}

.profil-isi {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 1.25rem;
  /* `position: relative` bukan hiasan: pintasan grup menggulir ke
     `bagian.offsetTop`, dan `offsetTop` diukur terhadap offsetParent. Tanpa ini
     offsetParent-nya lompat ke kartu modal (atau <body>), dan pintasannya
     mendarat beberapa ratus piksel di bawah judul grup yang dituju. */
  position: relative;
}

.profil-kaki {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.profil-bar {
  flex: 1 1 auto;
  height: 0.375rem;
  border-radius: 9999px;
  background: #e2e8f0;
  overflow: hidden;
}

.profil-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #7c3aed;
  transition: width 0.2s ease;
}

.profil-grup + .profil-grup {
  margin-top: 0.875rem;
}

.profil-grup > h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.375rem;
}

.profil-grup > h4 > i {
  margin-right: 0.25rem;
  color: #94a3b8;
}

/* Ringkasan: label kiri dengan lebar TETAP supaya nilainya berbaris rata --
   kolom nilai yang bergeser tiap baris memaksa mata mencari titik mulai yang
   baru untuk tiap keterangan. */
.profil-baris {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8125rem;
  padding: 0.1875rem 0;
}

.profil-baris > span:first-child {
  flex: 0 0 9.5rem;
  color: #64748b;
}

/* Pintasan grup di kepala form. Menggulir mendatar, bukan membungkus jadi dua
   baris: kepala modal tingginya tetap, dan baris kedua yang muncul hanya di
   bahasa/label tertentu memotong isi form di bawahnya. */
.profil-pintasan {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.profil-pintasan::-webkit-scrollbar {
  display: none;
}

.profil-pintasan > button {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  color: #475569;
  background: #fff;
}

.profil-pintasan > button:hover {
  background: #f1f5f9;
}

.profil-isi-nilai {
  min-width: 0;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Dua kolom di layar lebar, satu di HP. Field teks panjang selalu selebar
   penuh: kotak catatan selebar setengah layar mengundang jawaban satu kata. */
.profil-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 40rem) {
  .profil-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .profil-field-lebar {
    grid-column: 1 / -1;
  }
}

.profil-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.8125rem;
}

.profil-label {
  color: #475569;
  margin-bottom: 0.125rem;
}

.profil-field input,
.profil-field select,
.profil-field textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
  background: #fff;
  color: #0f172a;
}

.profil-field input:focus,
.profil-field select:focus,
.profil-field textarea:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.profil-petunjuk {
  color: #94a3b8;
  font-size: 0.6875rem;
  margin-top: 0.125rem;
}

/* ------------------------------------------- profil: isian dari AI & usulan -- */
/* Lencana pada field yang DIISI AI. Kecil dan sewarna kertas, bukan mencolok:
   yang perlu diketahui CS adalah asal isian saat ia meragukannya, bukan tiap
   kali ia membaca profil. Kutipannya ada di `title` — bukti yang bisa dicari
   saat dibutuhkan, tanpa memakan baris saat tidak. */
.profil-lencana-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: 0.375rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #7c3aed;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  cursor: help;
  vertical-align: middle;
}

/* Blok usulan. Warna amber yang sama dengan catatan internal — di layar ini
   amber sudah berarti "urusan staf, bukan pelanggan", dan warna kelima untuk
   konsep keenam hanya membuat keduanya lebih sulit dibedakan. */
.profil-usulan {
  border: 1px solid #fcd34d;
  background: #fffbeb;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.875rem;
}

.profil-usulan > h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  margin-bottom: 0.375rem;
}

.profil-usulan-baris {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-top: 1px solid #fde68a;
}

.profil-usulan-baris:first-of-type {
  border-top: none;
}

/* Kutipan asalnya. Dipajang PERMANEN di sini, tidak disembunyikan di `title`
   seperti pada lencana: yang sedang diputuskan orang adalah "benarkah ini",
   dan pertanyaan itu dijawab persis oleh kalimat aslinya. */
.profil-usulan-kutipan {
  font-size: 0.6875rem;
  color: #92400e;
  opacity: 0.85;
  font-style: italic;
  margin-top: 0.125rem;
  overflow-wrap: anywhere;
}

.profil-usulan-ya,
.profil-usulan-tidak {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  border: 1px solid;
  font-size: 0.75rem;
  flex: 0 0 auto;
}

.profil-usulan-ya {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.profil-usulan-ya:hover {
  background: #dcfce7;
}

.profil-usulan-tidak {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

.profil-usulan-tidak:hover {
  background: #fee2e2;
}