/* ==========================================================================
   Krandegan Chat — Front-end styles
   Struktur: Home dashboard (mobile) + Sidebar/Chat (desktop), sesuai referensi desain.
   Token warna/tipografi/spacing dari style.css (Civic Pulse).
   ========================================================================== */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* Tinggi bottom nav mobile (TIDAK termasuk safe-area-inset-bottom, itu
   ditambahkan terpisah tiap kali dipakai) — dijadikan 1 variabel supaya
   .krandegan-bottom-nav sendiri & elemen lain yang perlu tahu "seberapa
   tinggi nav ini" (composer chat yg sekarang mengambang FIXED tepat di
   atasnya, lihat .krandegan-chat-composer) selalu sinkron, tidak perlu
   diulang manual di beberapa tempat & gampang beda2 kalau nav-nya nanti
   diubah lagi. */
:root{ --krandegan-bottom-nav-height: 64px; }

/*
 * Scrollbar kustom (tipis, mengambang, warna ikut token Civic Pulse) — dipakai
 * di SEMUA area yang bisa di-scroll di dalam widget chat ini (pane menu
 * sidebar, Riwayat Chat di sidebar & modal "Lihat semua", daftar pesan chat,
 * hasil pencarian, dst), supaya tidak lagi memakai scrollbar tebal bawaan
 * browser yang terasa mengganggu/tidak menyatu dgn desain.
 *
 * Discope ke dalam .krandegan-shell (bukan global `*`/`html`) via selector
 * turunan `.krandegan-shell *` supaya TIDAK ikut mengubah tampilan scrollbar
 * di bagian lain situs WordPress induk (mis. saat widget ini ditaruh via
 * shortcode [krandegan_chat] di tengah halaman biasa yang punya konten lain).
 *
 * - WebKit (Chrome/Edge/Safari/Opera): pseudo-element ::-webkit-scrollbar*.
 * - Firefox: properti standar scrollbar-width/scrollbar-color (belum ada
 *   padanan WebKit utk pseudo-element ini, jadi keduanya perlu ditulis
 *   terpisah, bukan salah satu saja).
 * - warna thumb pakai --cp-outline-variant (redup, senada garis batas lain
 *   di UI ini) & auto ikut lebih terang/gelap saat dark mode aktif krn
 *   variabelnya sendiri sudah didefinisikan ulang di sana (lihat style.css).
 */
.krandegan-shell,
.krandegan-shell *{
  scrollbar-width:thin;
  scrollbar-color:var(--cp-outline-variant) transparent;
}
.krandegan-shell *::-webkit-scrollbar{
  width:6px;
  height:6px;
}
.krandegan-shell *::-webkit-scrollbar-track{
  background:transparent;
}
.krandegan-shell *::-webkit-scrollbar-thumb{
  background-color:var(--cp-outline-variant);
  border-radius:999px;
}
.krandegan-shell *::-webkit-scrollbar-thumb:hover{
  background-color:var(--cp-outline);
}

.krandegan-app-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--cp-background);
}

/* ==========================================================================
   Mode "full-page app" untuk halaman chat: tanpa header WordPress,
   satu layar penuh tanpa scroll di level body — header chat, sidebar,
   dan kolom input tetap di tempat ("sticky") karena hanya area pesan
   yang scroll, bukan lewat position:sticky saja tapi lewat layout flex 100dvh.
   ========================================================================== */
body.krandegan-fullscreen-chat{
  height:100dvh;
  overflow:hidden;
}
body.krandegan-fullscreen-chat .krandegan-topbar{ display:none; }
body.krandegan-fullscreen-chat .krandegan-app-shell{
  height:100dvh;
  min-height:0;
}
body.krandegan-fullscreen-chat .krandegan-chat-page{
  height:100%;
  padding:0;
}
body.krandegan-fullscreen-chat .krandegan-shell{
  height:100%;
  max-width:none;
  padding-bottom:76px; /* ruang bottom nav mobile */
}
body.krandegan-fullscreen-chat .krandegan-view-home{
  height:100%;
  overflow-y:auto;
}
body.krandegan-fullscreen-chat .krandegan-view-chat{
  height:100%;
}
/* SAMA seperti .krandegan-view-home di atas: mode full-page mematikan scroll
   di level body (body.krandegan-fullscreen-chat{ overflow:hidden }, lihat
   atas), jadi panel Profil WAJIB punya scroll-nya sendiri — sebelumnya tidak
   diberi apa pun di sini, jadi form Daftar yang panjang bisa TERPOTONG habis
   tanpa cara apa pun utk menggulir & melihat sisanya. */
body.krandegan-fullscreen-chat .krandegan-view-profil{
  height:100%;
  overflow-y:auto;
}

.krandegan-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--cp-space-sm) var(--cp-margin-mobile);
  background:var(--cp-surface-container-lowest);
  border-bottom:1px solid var(--cp-outline-variant);
}
/* Header situs WordPress (logo/nama situs + menu, dirender header.php) ini
   sebelumnya HANYA disembunyikan lewat body.krandegan-fullscreen-chat di atas
   — yaitu cuma di halaman dgn page template khusus "Krandegan - Chat Warga".
   Begitu tema ini dipakai lewat shortcode [krandegan_chat] di halaman biasa
   (lihat update "Tema Tidak Lagi Terikat Nama Krandegan"), header situs ini
   tetap nongol di atas widget-nya di mobile — "ikut" terus apa pun tab bottom
   nav yang disentuh (Home/Chat/dst), padahal widget di mobile SUDAH punya
   navigasi sendiri lewat bottom nav (Home/Search/Chat/Riwayat/Profil), jadi
   header situs di atasnya jadi berlebihan/mengganggu, apalagi begitu drawer
   sidebar/modal Riwayat tampil sbg overlay penuh layar. Disembunyikan saja di
   lebar mobile, apa pun page template-nya. Tetap tampil normal di desktop
   krn di sana widget-nya jadi bagian dari layout halaman biasa (bukan
   overlay/app penuh layar spt di mobile).
*/
@media (max-width:959px){
  .krandegan-topbar{ display:none; }
}
.krandegan-topbar-title{
  font-size:var(--cp-title-md-size);
  font-weight:var(--cp-title-md-weight);
  color:var(--cp-primary);
}

.krandegan-chat-page{ flex:1; display:flex; justify-content:center; }

/* ---------- Icon base ---------- */
.krandegan-icon{ width:20px; height:20px; display:block; }
.krandegan-icon-flip{ transform:rotate(180deg); }
.krandegan-icon-btn{
  position:relative;
  width:40px;height:40px;
  border-radius:var(--cp-radius-full);
  border:none;
  background:var(--cp-surface-container-lowest);
  color:var(--cp-on-surface);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:var(--cp-level1-shadow);
}
.krandegan-notif-dot{
  position:absolute; top:8px; right:8px;
  width:8px;height:8px;border-radius:50%;
  background:var(--cp-error);
  border:2px solid var(--cp-surface-container-lowest);
}

/* ==========================================================================
   Bell notifikasi Warga/Non-Warga (ikon bell home mobile & topbar Chat
   desktop, lihat "krandegan-notif-menu" di template-parts/chat-widget.php &
   openNotifPopover()/pollUserNotifications() di chat.js) — bubble angka +
   dropdown, dipoll berkala dari endpoint REST GET/POST /notifications
   (inc/rest-api.php) supaya real-time tanpa refresh manual, sama semangatnya
   dgn bell staf desa di dashboard (assets/css/dashboard.css), TAPI kelasnya
   SENGAJA beda ("krandegan-notif-*" di sini vs "krandegan-dash-notif-*" di
   sana) krn dashboard.css tidak dimuat di halaman chat & sebaliknya.
   ========================================================================== */
.krandegan-notif-menu{ position:relative; display:flex; }
.krandegan-notif-badge{
  position:absolute;
  top:2px; right:2px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-error);
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  border:2px solid var(--cp-surface-container-lowest);
  box-sizing:content-box;
}
.krandegan-notif-badge[hidden]{ display:none; }
.krandegan-notif-popover{
  position:absolute;
  top:calc(100% + 10px);
  /* right:0 (bukan left:0) krn ikon bell-nya SELALU ada di sisi KANAN header
     (baik di Home mobile maupun topbar Chat, lihat template-parts/chat-widget.php)
     — dgn left:0, popover melebar ke KANAN mulai dari ikon yg sudah mepet
     tepi kanan layar, jadi kepotong/lewat layar & memaksa seluruh halaman
     ikut ter-scroll horizontal (laporan: "bubble notifikasi di mobile
     melebar ke kanan"). right:0 membuatnya melebar ke KIRI dari ikon,
     tetap di dalam layar. */
  right:0;
  left:auto;
  width:300px;
  max-width:calc(100vw - 32px);
  padding:var(--cp-space-sm);
  background:var(--cp-surface-container-lowest);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
  box-shadow:var(--cp-level2-shadow, var(--cp-level1-shadow));
  z-index:20;
}
.krandegan-notif-popover[hidden]{ display:none; }
.krandegan-notif-popover-head{ padding:2px 6px 8px; margin-bottom:6px; border-bottom:1px solid var(--cp-outline-variant); }
.krandegan-notif-popover-head p{ margin:0; font-size:14px; font-weight:700; color:var(--cp-on-surface); }
.krandegan-notif-popover-list{ display:flex; flex-direction:column; gap:2px; max-height:320px; overflow-y:auto; }
.krandegan-notif-popover-empty{ margin:8px 0; font-size:13px; color:var(--cp-on-surface-variant); text-align:center; }
.krandegan-notif-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px;
  border-radius:var(--cp-radius-md, 10px);
  text-decoration:none;
  color:var(--cp-on-surface);
  cursor:pointer;
  border:none;
  background:transparent;
  text-align:left;
  width:100%;
  box-sizing:border-box;
  font-family:inherit;
}
.krandegan-notif-item:hover{ background:var(--cp-surface-container-low); }
/* Belum dibaca (is-unread): latar highlight + judul tebal + titik penanda.
   Sudah dibaca: latar polos, judul normal (tidak tebal) & sedikit
   diredupkan, spy beda warna terlihat jelas dgn yg belum dibaca. */
.krandegan-notif-item{ opacity:.72; }
.krandegan-notif-item.is-unread{ background:var(--cp-primary-container); color:var(--cp-on-primary-container); opacity:1; }
.krandegan-notif-item-title{ display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:400; }
.krandegan-notif-item.is-unread .krandegan-notif-item-title{ font-weight:700; }
.krandegan-notif-item-time{ margin-left:auto; flex-shrink:0; font-size:10px; font-weight:400; color:var(--cp-on-surface-variant); }
.krandegan-notif-item.is-unread .krandegan-notif-item-time{ color:inherit; opacity:.85; }
.krandegan-notif-item-msg{ font-size:12px; color:var(--cp-on-surface-variant); }
.krandegan-notif-item.is-unread .krandegan-notif-item-msg{ color:inherit; opacity:.85; }
.krandegan-notif-popover-footer{
  display:block;
  width:100%;
  margin-top:8px;
  padding-top:8px;
  border:none;
  border-top:1px solid var(--cp-outline-variant);
  background:transparent;
  text-align:center;
  font-size:12px;
  font-weight:700;
  font-family:inherit;
  color:var(--cp-primary);
  cursor:pointer;
}

/* (Dulu ada override khusus desktop di sini utk #krandegan-notif-popover-chat
   right:0 — sekarang jadi aturan DEFAULT di atas krn ikon bell-nya mepet
   kanan di mobile MAUPUN desktop, jadi cukup satu aturan utk semua ukuran layar.) */

/* ---------- Bot avatar (gradasi ungu-biru) ---------- */
.krandegan-bot-avatar{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--cp-radius-full);
  background:linear-gradient(135deg, var(--cp-primary) 0%, #6d5ff0 100%);
  color:#fff;
}
.krandegan-bot-avatar .krandegan-icon{ width:60%; height:60%; }
.krandegan-bot-avatar-xs{ width:28px; height:28px; }
.krandegan-bot-avatar-sm{ width:40px; height:40px; }
.krandegan-bot-avatar-md{ width:52px; height:52px; }
.krandegan-bot-avatar-lg{ width:68px; height:68px; }

/* ==========================================================================
   Shell & view switching
   ========================================================================== */
.krandegan-shell{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  position:relative;
  min-height:100vh;
  padding-bottom:88px; /* ruang utk bottom nav mobile */
  /* PENTING utk mode gelap: token --cp-background didefinisikan ulang
     (gelap) pada elemen INI (lihat .krandegan-shell[data-theme="dark"] &
     prefers-color-scheme di style.css), bukan pada .krandegan-app-shell
     pembungkusnya di header.php. Kalau latar belakangnya dilukis oleh
     .krandegan-app-shell (ancestor), warnanya tetap ambil nilai TERANG
     dari :root karena custom property tidak "menjalar ke atas" — makanya
     latar belakang harus dilukis di sini, di elemen yang sama dengan yang
     dikasih atribut data-theme, supaya layar Home mobile (yang sebelumnya
     hanya transparan menampilkan latar app-shell yang masih terang) ikut
     benar-benar gelap. */
  background:var(--cp-background);
}
.krandegan-view{ display:none; }
.krandegan-shell[data-active-view="home"] .krandegan-view-home{ display:block; }
.krandegan-shell[data-active-view="chat"] .krandegan-view-chat{ display:flex; }
/* .krandegan-view-profil SELALU display:block (bukan lagi flex) — class
   -auth (centering login/daftar) sekarang dipasang di .krandegan-view-profil-
   inner di DALAMNYA (lihat PHP & aturan .krandegan-view-profil-inner.
   krandegan-view-profil-auth di bawah), jadi tidak perlu lagi selector
   2-class/!important di sini hanya utk memenangkan perang spesifisitas. */
.krandegan-shell[data-active-view="profil"] .krandegan-view-profil{ display:block; }

/* ==========================================================================
   VIEW: PROFIL (login/registrasi warga & kartu profil, lihat menu Profil
   bottom-nav & template-parts/chat-widget.php)
   ========================================================================== */
/* .krandegan-view-profil SEKARANG jadi wadah posisi+scroll SAJA (position:
   relative supaya tombol Tutup absolute bisa nempel ke tepinya, TANPA padding
   di sini) — semua padding konten pindah ke .krandegan-view-profil-inner di
   bawah, supaya scrollbar (dari overflow-y:auto di aturan fullscreen di atas)
   tetap nempel PERSIS di tepi kanan section, bukan ikut ketarik ke dalam oleh
   padding. */
.krandegan-view-profil{ position:relative; }
.krandegan-view-profil-inner{
  padding:44px var(--cp-margin-mobile) 110px;
  /* padding-top jauh lebih besar drpd padding kiri/kanan (bukan cuma
     var(--cp-space-md) spt sebelumnya) supaya konten TIDAK mentok ke tepi
     atas & tidak tertindih tombol Tutup yg sekarang absolute di pojok
     kanan-atas section (lihat .krandegan-profil-close-btn). */
}
/* Tombol Tutup (x) — SEKARANG position:absolute nempel di pojok kanan-atas
   .krandegan-view-profil itu sendiri (bukan lagi baris flex tersendiri di
   alur dokumen), supaya ia "menyamping kanan" persis di tepi yg sama dgn
   scrollbar & TIDAK ikut mendorong konten di bawahnya turun — sebelumnya
   header terpisah (.krandegan-profil-header) memakan baris sendiri di alur
   normal, membuat jarak ke tombol jadi tidak konsisten dgn posisi scrollbar.
   right:0 (BUKAN var(--cp-margin-mobile) spt sebelumnya) supaya benar-benar
   MENTOK ke tepi kanan section — sebelumnya masih ada jarak selebar margin
   konten, jadi terlihat "mengambang" bukan nempel penuh ke tepi. */
.krandegan-profil-close-btn{
  position:absolute;
  top:8px;
  right:0;
  z-index:2;
}

/* Halaman "Masuk/Daftar" (warga belum login) ditengahkan vertikal & horizontal
   di sisa ruang layar — bukan cuma rata kiri-atas seperti sebelumnya — supaya
   terlihat lebih rapi persis seperti layar login pada umumnya. Teknik margin
   auto (bukan justify-content:center) dipilih SENGAJA: kalau kontennya lebih
   tinggi drpd layar (mis. form Daftar yang byk field), margin auto otomatis
   "menyerah" jadi 0 & kontennya rata atas + bisa discroll apa adanya —
   position/jaraknya jadi STABIL & tidak "meloncat" saat pindah tab Masuk<->
   Daftar (beda dgn justify-content:center yang selalu memusatkan ulang
   berdasar tinggi konten SAAT ITU, sehingga posisi ikut berubah tiap ganti tab).
   Class -auth ini sekarang dipasang di .krandegan-view-profil-inner (lihat
   PHP), bukan lagi di <section> itu sendiri — section-nya sendiri sudah
   cukup jadi block biasa krn scroll+posisi tombol Tutup ditangani terpisah
   di atas, jadi TIDAK perlu lagi selector 2-class + !important di breakpoint
   desktop hanya utk memenangkan perang spesifisitas. */
.krandegan-view-profil-inner.krandegan-view-profil-auth{
  display:flex;
  flex-direction:column;
  min-height:0;
  /* SENGAJA tidak diberi min-height:Xvh di sini — elemen ini SUDAH kebagian
     height:100% yg sebenarnya dari aturan mode full-page (lihat
     "body.krandegan-fullscreen-chat .krandegan-view-profil" di atas).
     min-height dalam vh akan BENTROK dgn height:100% itu (spesifikasi CSS:
     min-height selalu menang bila lebih besar drpd height), yg bisa membuat
     panel ini jadi LEBIH TINGGI drpd induknya sendiri & balik lagi jadi
     terpotong/tidak bisa digulir — persis bug yang sedang diperbaiki. */
}
.krandegan-view-profil-inner.krandegan-view-profil-auth .krandegan-auth-wrap{
  margin-top:auto;
  margin-bottom:auto;
  width:100%;
  padding-bottom:var(--cp-space-md);
}

/* ---------- Kepala profil: avatar + h2 nama + badge + statistik singkat ---------- */
.krandegan-profile-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding-bottom:var(--cp-space-md);
  margin-bottom:var(--cp-space-sm);
  border-bottom:1px solid var(--cp-outline-variant);
}
.krandegan-profile-avatar{
  width:72px;
  height:72px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-primary);
  color:var(--cp-on-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:600;
  margin-bottom:6px;
  text-transform:uppercase;
}
.krandegan-profile-name{ margin:0; font-size:18px; font-weight:700; color:var(--cp-on-surface); }
.krandegan-profile-role-badge{
  display:inline-flex;
  padding:3px 12px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-secondary-container);
  color:var(--cp-on-secondary-container);
  font-size:12px;
  font-weight:600;
  margin-bottom:4px;
}
/* Statistik singkat (jumlah percakapan/layanan + tanggal bergabung) — angka
   besar + label kecil di bawahnya, disusun sejajar dgn pemisah garis vertikal
   tipis supaya terbaca sbg satu grup "ringkasan", bukan daftar biasa. */
.krandegan-profile-stats{
  display:flex;
  align-items:stretch;
  gap:var(--cp-space-md);
  margin-top:4px;
}
.krandegan-profile-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:0 var(--cp-space-md);
  border-left:1px solid var(--cp-outline-variant);
}
.krandegan-profile-stat:first-child{ border-left:none; padding-left:0; }
.krandegan-profile-stat-value{ font-size:18px; font-weight:700; color:var(--cp-on-surface); line-height:1.1; }
.krandegan-profile-stat-value-sm{ font-size:13px; }
.krandegan-profile-stat-label{ font-size:11px; color:var(--cp-on-surface-variant); }

/* ---------- Tab Profil / Riwayat Chat / Riwayat Layanan ---------- */
.krandegan-profile-tabs{
  display:flex;
  gap:4px;
  padding:4px;
  margin-bottom:var(--cp-space-md);
  background:var(--cp-surface-container-low);
  border-radius:var(--cp-radius-full);
}
.krandegan-profile-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--cp-on-surface-variant);
  font-size:12px;
  font-weight:600;
  padding:8px 6px;
  border-radius:var(--cp-radius-full);
  cursor:pointer;
  text-align:center;
}
.krandegan-profile-tab.is-active{
  background:var(--cp-surface-container-lowest);
  color:var(--cp-primary);
  box-shadow:var(--cp-level1-shadow);
}
.krandegan-profile-tab-panel[hidden]{ display:none; }

.krandegan-profile-card[hidden]{ display:none; }
.krandegan-profile-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding:var(--cp-space-lg) var(--cp-space-md);
  background:var(--cp-surface-container-low);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
}
/* <dl> pembungkus SAJA yang jadi kolom vertikal — setiap pasangan dt/dd ada
   di div .krandegan-profile-detail-row masing-masing (lihat markup di
   template-parts/chat-widget.php). SEBELUMNYA .krandegan-profile-detail
   (elemen <dl>-nya sendiri) yang dipasangi display:flex, sehingga SEMUA
   <dt>/<dd> di dalamnya (Email/No HP/NIK/Alamat/Bergabung, bisa 10 elemen)
   ikut jadi satu baris flex raksasa & sejajar menyamping alih-alih turun
   satu per satu — itulah bug "penataan menyamping" yang dilaporkan. */
.krandegan-profile-detail{
  width:100%;
  display:flex;
  flex-direction:column;
  margin-top:6px;
  font-size:13px;
  text-align:left;
}
.krandegan-profile-detail-row{
  display:flex;
  justify-content:space-between;
  gap:var(--cp-space-sm);
  padding:10px 4px;
  border-top:1px solid var(--cp-outline-variant);
}
.krandegan-profile-detail-row:first-child{ border-top:none; }
.krandegan-profile-detail-row dt{ color:var(--cp-on-surface-variant); flex-shrink:0; }
.krandegan-profile-detail-row dd{ margin:0; color:var(--cp-on-surface); font-weight:500; text-align:right; word-break:break-word; }
.krandegan-profile-actions{ display:flex; gap:8px; width:100%; margin-top:var(--cp-space-md); }
.krandegan-profile-actions .krandegan-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.krandegan-profile-actions .krandegan-icon{ width:16px; height:16px; }

/* Tombol "netral" (Edit Profil, Batal) — dibedakan sengaja dari
   .krandegan-btn-secondary (warna solid, dipakai role badge) SUPAYA tombol
   aksi tidak menyatu/tertukar kesan dgn badge info & konsisten dgn gaya
   tombol "batal" di bagian lain widget ini (mis. .krandegan-msg-edit-cancel:
   netral, memerah saat hover utk aksi yg membatalkan/mengakhiri sesuatu). */
.krandegan-btn-outline{
  background:transparent;
  border:1px solid var(--cp-outline-variant);
  color:var(--cp-on-surface);
}
.krandegan-btn-outline:hover{ background:var(--cp-surface-container-low); }
/* "Keluar" (logout) tombol merah SOLID (bukan cuma pas hover spt
   sebelumnya) krn sudah dipindah keluar dari kartu/tab & berdiri sendiri di
   paling bawah panel Profil — perlu tegas terlihat sbg "aksi mengakhiri sesi"
   sejak awal, bukan baru kelihatan pas disentuh. Warna dasarnya (background/
   color/font-weight) sudah diatur bareng tombol "Ya, Keluar" modal konfirmasi
   lewat .krandegan-btn-danger di dekat style overlay pencarian (pakai token
   --cp-error/--cp-on-error yg SUDAH dark-mode-aware).
   PENTING: layout full-width + shadow di bawah ini SENGAJA ditarget lewat ID/
   class SPESIFIK (#krandegan-logout-btn & .krandegan-user-popover-logout),
   BUKAN langsung ke .krandegan-btn-danger — sebelumnya dipasang langsung ke
   .krandegan-btn-danger, jadi ikut "menular" ke tombol "Ya, Keluar" di modal
   konfirmasi (yang juga memakai class ini) & membuatnya melebar penuh scr
   tidak proporsional dibanding tombol "Batal" di sebelahnya (baris flex
   .krandegan-modal-actions). */
#krandegan-logout-btn,
.krandegan-user-popover-logout{
  display:block;
  width:100%;
  margin-top:var(--cp-space-lg);
  border:1px solid transparent;
  text-align:center;
  box-shadow:0 2px 10px rgba(186,26,26,0.35);
}
.krandegan-btn-danger:hover{ filter:brightness(0.92); }

/* Form "Edit Profil" dibangun dari class .krandegan-auth-form yang sama dgn
   form login/daftar (input/textarea/tombol submit konsisten) — cukup dibungkus
   kartu terpisah + judul sendiri di sini. */
.krandegan-profile-edit-form{
  margin-top:var(--cp-space-md);
  padding:var(--cp-space-md);
  background:var(--cp-surface-container-low);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
}
.krandegan-profile-edit-form .krandegan-profile-actions{ margin-top:6px; }
.krandegan-auth-input:disabled{ opacity:.65; cursor:not-allowed; }

/* "Riwayat Percakapan" & "Riwayat Layanan" — kini isi tab, bukan lagi kartu
   bertumpuk di bawah kartu profil (lihat template-parts/chat-widget.php),
   isinya sama-sama dimuat lewat JS (chat.js: loadConversationList()/
   loadMyPermohonanList()). */
.krandegan-profile-section{
  padding:var(--cp-space-md);
  background:var(--cp-surface-container-low);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
}
.krandegan-profile-history-list .krandegan-history-chat-row{ border-top:1px solid var(--cp-outline-variant); }
.krandegan-profile-history-list .krandegan-history-chat-row:first-child{ border-top:none; }

.krandegan-profile-permohonan-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 2px;
  border-top:1px solid var(--cp-outline-variant);
}
.krandegan-profile-permohonan-item:first-child{ border-top:none; }
.krandegan-profile-permohonan-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.krandegan-profile-permohonan-layanan{ font-size:13px; font-weight:600; color:var(--cp-on-surface); word-break:break-word; }
.krandegan-profile-permohonan-date{ font-size:11px; color:var(--cp-on-surface-variant); }
.krandegan-profile-permohonan-status{
  flex-shrink:0;
  display:inline-flex;
  padding:3px 10px;
  border-radius:var(--cp-radius-full);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}
.krandegan-profile-permohonan-status.status-baru{ background:var(--cp-secondary-container); color:var(--cp-on-secondary-container); }
.krandegan-profile-permohonan-status.status-diproses{ background:var(--cp-primary-container); color:var(--cp-on-primary-container); }
.krandegan-profile-permohonan-status.status-selesai{ background:var(--cp-surface-container-highest); color:var(--cp-on-surface-variant); }

.krandegan-auth-wrap{ max-width:420px; margin:0 auto; }
.krandegan-auth-header{ text-align:center; margin-bottom:var(--cp-space-md); }
.krandegan-auth-bot-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:var(--cp-space-sm);
  font-size:12px;
  font-weight:600;
  color:var(--cp-on-surface-variant);
}
.krandegan-auth-title{ margin:0 0 4px; font-size:19px; font-weight:700; color:var(--cp-on-surface); }
.krandegan-auth-subtitle{ margin:0; font-size:13px; color:var(--cp-on-surface-variant); }

/* Tombol "Masuk dengan Google" SENGAJA dibiarkan lebar aslinya (bukan
   dipaksa 100% seperti sebelumnya, yang malah membuatnya tampak melar tidak
   proporsional) & ditengahkan lewat flex justify-content:center di dua level
   (block pembungkus & wadah tombolnya sendiri) — hasilnya tombol Google rata
   tengah, konsisten dgn permintaan desain. */
.krandegan-google-auth-block{ display:flex; justify-content:center; margin-bottom:var(--cp-space-sm); }
.krandegan-google-auth-block[hidden]{ display:none; }
.krandegan-google-signin-btn{ display:flex; justify-content:center; }
.krandegan-auth-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:var(--cp-space-sm) 0;
  color:var(--cp-on-surface-variant);
  font-size:12px;
}
.krandegan-auth-divider::before,
.krandegan-auth-divider::after{ content:""; flex:1; height:1px; background:var(--cp-outline-variant); }
.krandegan-auth-divider[hidden]{ display:none; }
.krandegan-auth-tabs{
  display:flex;
  gap:6px;
  margin-bottom:var(--cp-space-md);
  background:var(--cp-surface-container-low);
  border-radius:var(--cp-radius-full);
  padding:4px;
}
.krandegan-auth-tab{
  flex:1;
  border:none;
  background:transparent;
  color:var(--cp-on-surface-variant);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  padding:9px 10px;
  border-radius:var(--cp-radius-full);
  cursor:pointer;
}
.krandegan-auth-tab.is-active{ background:var(--cp-primary); color:var(--cp-on-primary); }

.krandegan-auth-message{
  margin:0 0 var(--cp-space-sm);
  padding:10px 12px;
  border-radius:var(--cp-radius-sm);
  font-size:13px;
  line-height:1.4;
}
.krandegan-auth-message[hidden]{ display:none; }
.krandegan-auth-message.is-error{ background:var(--cp-error-container); color:var(--cp-on-error-container); }
.krandegan-auth-message.is-success{ background:var(--cp-secondary-container); color:var(--cp-on-secondary-container); }
.krandegan-auth-message{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
/* Tombol "Kirim Ulang Email Verifikasi" — lihat showAuthMessageWithResend() di
   chat.js, muncul KHUSUS saat login ditolak krn email belum diverifikasi. */
.krandegan-auth-resend-btn{
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  border-radius:var(--cp-radius);
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.krandegan-auth-resend-btn:disabled{ opacity:.6; cursor:default; }

/* Toast hasil klik tautan Verifikasi Email — lihat IIFE di chat.js
   (krandegan_verify_result). Dibuat murni via JS (bukan markup PHP) krn cuma
   muncul sesekali & sebentar, tidak perlu punya elemen permanen di halaman. */
.krandegan-verify-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%, 16px);
  max-width:min(92vw, 420px);
  background:var(--cp-secondary-container);
  color:var(--cp-on-secondary-container);
  border-radius:var(--cp-radius);
  padding:12px 16px;
  font-size:13px;
  line-height:1.4;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  z-index:9999;
}
.krandegan-verify-toast.is-error{ background:var(--cp-error-container); color:var(--cp-on-error-container); }
.krandegan-verify-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

.krandegan-auth-form{ display:flex; flex-direction:column; gap:var(--cp-space-sm); }
.krandegan-auth-form[hidden]{ display:none; }
.krandegan-auth-field{ display:flex; flex-direction:column; gap:4px; }
.krandegan-auth-field label{ font-size:12px; font-weight:600; color:var(--cp-on-surface-variant); }
/* PENTING: atribut [hidden] (dipakai bindKependudukanToggle() di chat.js utk
   menyembunyikan field NIK saat Non-Warga dipilih) py spesifisitas CSS yang
   SAMA dgn ".krandegan-auth-field{ display:flex }" di atas — tanpa aturan
   eksplisit ini, [hidden] KALAH krn urutan deklarasi (aturan class datang
   belakangan), field NIK jadi tetap keliatan walau sudah "dihilangkan" via
   JS. Sama persis kasusnya dgn .krandegan-auth-form[hidden] di atas. */
.krandegan-auth-field[hidden]{ display:none; }

/* Form "Daftar" (& lanjutan lengkapi data Google) ditata 2 kolom supaya lebih
   ringkas — field yang butuh lebar penuh (Alamat, tombol submit, teks
   bantuan, pesan error/sukses) ditandai/dideteksi otomatis lewat aturan di
   bawah ini. */
.krandegan-auth-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:10px;
  row-gap:var(--cp-space-sm);
}
.krandegan-auth-form-grid > *:not(.krandegan-auth-field){ grid-column:1 / -1; }
.krandegan-auth-form-grid .krandegan-auth-field-full{ grid-column:1 / -1; }
@media (max-width:360px){
  /* Layar sangat sempit -> tetap 1 kolom supaya input tidak terlalu sempit dipakai jempol. */
  .krandegan-auth-form-grid{ grid-template-columns:1fr; }
}

/* Toggle Warga/Non-Warga di form Daftar & lanjutan Daftar dgn Google — lihat
   bindKependudukanToggle() di chat.js. */
.krandegan-auth-radio-group{ display:flex; gap:var(--cp-space-sm); flex-wrap:wrap; }
.krandegan-auth-radio{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--cp-on-surface);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius);
  padding:8px 12px;
  cursor:pointer;
}
.krandegan-auth-radio:has(input:checked){
  border-color:var(--cp-primary);
  background:var(--cp-secondary-container);
}
.krandegan-auth-radio input{ margin:0; }

/* Icon "i" info kependudukan (Warga/Non-Warga) — teks penjelasan panjangnya
   SENGAJA cuma muncul lewat tooltip (atribut title bawaan) saat idle di atas
   ikon atau fokus keyboard, bukan paragraf yang selalu tampil, spy form tidak
   kepanjangan. var(--cp-primary) otomatis jadi warna terang/kontras saat mode
   gelap krn token ini sendiri sudah didefinisikan ulang di style.css utk dark
   mode (lihat .krandegan-shell[data-theme="dark"]). */
.krandegan-info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  margin-left:4px;
  border-radius:50%;
  border:1px solid var(--cp-primary);
  color:var(--cp-primary);
  font-size:10px;
  font-style:italic;
  font-weight:700;
  line-height:1;
  cursor:help;
  vertical-align:middle;
}
.krandegan-auth-input,
.krandegan-auth-textarea{
  width:100%;
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius);
  padding:11px 12px;
  font-family:inherit;
  font-size:14px;
  color:var(--cp-on-surface);
  background:var(--cp-surface-container-lowest);
}
.krandegan-auth-input:focus,
.krandegan-auth-textarea:focus{ outline:2px solid var(--cp-primary); outline-offset:1px; }
.krandegan-auth-textarea{ resize:vertical; min-height:64px; }
.krandegan-auth-submit{
  margin-top:4px;
  width:100%;
  background:var(--cp-primary);
  color:var(--cp-on-primary);
  border:none;
  border-radius:var(--cp-radius);
  padding:13px 14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.krandegan-auth-submit:hover{ opacity:.92; }
.krandegan-auth-submit:disabled{ opacity:.6; cursor:not-allowed; }

/* ==========================================================================
   VIEW: HOME (dashboard mobile)
   ========================================================================== */
.krandegan-view-home{ padding:var(--cp-space-md) var(--cp-margin-mobile); }

.krandegan-home-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--cp-space-sm);
  margin-bottom:var(--cp-space-md);
}
.krandegan-home-greeting{
  font-size:28px;
  font-weight:700;
  line-height:1.2;
  color:var(--cp-on-surface);
  margin:0 0 6px;
  letter-spacing:-0.01em;
}
.krandegan-home-subgreeting{
  color:var(--cp-on-surface-variant);
  font-size:var(--cp-body-md-size);
  margin:0;
}

.krandegan-promo-banner{
  width:100%;
  display:flex;
  align-items:center;
  gap:var(--cp-space-sm);
  background:linear-gradient(120deg, var(--cp-primary-fixed) 0%, var(--cp-surface-container-lowest) 75%);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-full);
  padding:8px 20px 8px 8px;
  cursor:pointer;
  text-align:left;
  margin-bottom:var(--cp-space-lg);
}
.krandegan-promo-text{ display:flex; flex-direction:column; }
.krandegan-promo-label{
  font-size:var(--cp-label-sm-size);
  font-weight:700;
  color:var(--cp-primary);
}
.krandegan-promo-title{
  font-size:var(--cp-body-md-size);
  font-weight:700;
  color:var(--cp-on-surface);
}

.krandegan-section{ margin-bottom:var(--cp-space-lg); }
.krandegan-section-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:var(--cp-space-sm);
}
.krandegan-section-header h2{
  font-size:20px;
  font-weight:700;
  color:var(--cp-on-surface);
  margin:0;
}
.krandegan-link-btn{
  background:none;border:none;cursor:pointer;
  color:var(--cp-on-surface-variant);
  font-size:var(--cp-label-md-size);
  padding:0;
}

.krandegan-service-scroll{
  display:flex;
  gap:var(--cp-space-sm);
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
}
.krandegan-service-scroll::-webkit-scrollbar{ display:none; }
.krandegan-service-tile{
  flex:0 0 auto;
  width:132px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  background:var(--cp-surface-container-lowest);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
  padding:var(--cp-space-md) var(--cp-space-sm);
  cursor:pointer;
  box-shadow:var(--cp-level1-shadow);
}
.krandegan-service-tile-icon{
  width:48px;height:48px;
  border-radius:var(--cp-radius-md);
  display:flex;align-items:center;justify-content:center;
}
.krandegan-service-tile-icon .krandegan-icon{ width:24px;height:24px; }
.krandegan-service-tile-icon.tipe-surat{ background:#dce9ff; color:#1e40af; }
.krandegan-service-tile-icon.tipe-bansos{ background:#d9f7e2; color:#006d30; }
.krandegan-service-tile-icon.tipe-kesehatan{ background:#ffdad6; color:#ba1a1a; }
.krandegan-service-tile-icon.tipe-aspirasi{ background:#e6e0ff; color:#4a3aad; }
.krandegan-service-tile-icon.tipe-lainnya{ background:var(--cp-surface-container-high); color:var(--cp-on-surface-variant); }
/* Varian mode gelap — warna pastel di atas sengaja terang di skema terang,
   tapi kalau dibiarkan sama di mode gelap jadi "tambalan" terang mencolok
   di layar Home (tampilan default di mobile). Digelapkan sesuai huenya
   masing-masing, teksnya dibikin terang supaya kontrasnya tetap terjaga. */
@media (prefers-color-scheme: dark){
  .krandegan-shell:not([data-theme="light"]) .krandegan-service-tile-icon.tipe-surat{ background:#1e2f52; color:#a8c1ff; }
  .krandegan-shell:not([data-theme="light"]) .krandegan-service-tile-icon.tipe-bansos{ background:#123821; color:#8fe6a6; }
  .krandegan-shell:not([data-theme="light"]) .krandegan-service-tile-icon.tipe-kesehatan{ background:#4a1f1f; color:#ffb4ab; }
  .krandegan-shell:not([data-theme="light"]) .krandegan-service-tile-icon.tipe-aspirasi{ background:#2c2650; color:#c9bdff; }
}
.krandegan-shell[data-theme="dark"] .krandegan-service-tile-icon.tipe-surat{ background:#1e2f52; color:#a8c1ff; }
.krandegan-shell[data-theme="dark"] .krandegan-service-tile-icon.tipe-bansos{ background:#123821; color:#8fe6a6; }
.krandegan-shell[data-theme="dark"] .krandegan-service-tile-icon.tipe-kesehatan{ background:#4a1f1f; color:#ffb4ab; }
.krandegan-shell[data-theme="dark"] .krandegan-service-tile-icon.tipe-aspirasi{ background:#2c2650; color:#c9bdff; }
.krandegan-service-tile-label{
  font-size:13px;
  font-weight:600;
  text-align:center;
  color:var(--cp-on-surface);
  line-height:1.3;
}

.krandegan-empty{ color:var(--cp-on-surface-variant); font-style:italic; font-size:14px; }

/* ==========================================================================
   VIEW: CHAT (sidebar desktop + percakapan)
   ========================================================================== */
.krandegan-view-chat{
  min-height:100vh;
  min-width:0;
}
body.krandegan-fullscreen-chat .krandegan-view-chat{
  min-height:0;
}

/* Backdrop & drawer sidebar mobile SELALU ada di DOM/render-tree (bukan
   display:none spt sebelumnya) supaya transisi CSS-nya jalan di KEDUA arah —
   sebelumnya buka drawer pakai CSS @keyframes (cuma jalan sekali pas class
   .is-open ditambah), sedangkan tutup cuma menghapus class itu & langsung
   "dilempar" balik ke display:none tanpa transisi apa pun (makanya animasi
   buka terasa mulus tapi animasi tutup kerasa "hilang begitu saja" — lihat
   openSidebar()/closeSidebar() di chat.js, sekarang cukup toggle class
   .is-open, transisinya otomatis jalan dua arah lewat `transition` di bawah). */
.krandegan-sidebar-backdrop{
  position:fixed;
  inset:0;
  z-index:55;
  background:rgba(13,28,46,0.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.krandegan-sidebar-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

.krandegan-sidebar{
  display:flex; /* posisinya di luar layar (transform) selama tertutup, lihat di bawah — BUKAN display:none lagi, supaya transisi tutup ikut jalan */
  flex-direction:column;
  width:280px;
  flex-shrink:0;
  background:var(--cp-surface-container-lowest);
  border-right:1px solid var(--cp-outline-variant);
  padding:var(--cp-space-md);
  height:100%;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:60;
  box-shadow:none;
  transform:translateX(-100%);
  transition:transform .18s ease;
}
.krandegan-sidebar.is-open{
  transform:translateX(0);
  box-shadow:0 0 32px rgba(0,0,0,0.25);
}
.krandegan-sidebar-brand{
  display:flex;
  align-items:center;
  gap:var(--cp-space-sm);
  padding-bottom:var(--cp-space-md);
  margin-bottom:var(--cp-space-md);
  border-bottom:1px solid var(--cp-outline-variant);
  flex-shrink:0;
}
.krandegan-sidebar-brand strong{ display:block; font-size:15px; color:var(--cp-on-surface); }
.krandegan-sidebar-brand span{ display:block; font-size:12px; color:var(--cp-on-surface-variant); }
.krandegan-close-sidebar{ margin-left:auto; box-shadow:none; }

/* Wrapper scroll internal: sidebar sendiri tidak ikut scroll (sticky secara visual),
   hanya konten di tengah (nav layanan + riwayat chat) yang scroll bila panjang. */
.krandegan-sidebar-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:var(--cp-space-sm);
}

.krandegan-new-chat-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  background:var(--cp-primary);
  color:var(--cp-on-primary);
  border:none;
  border-radius:var(--cp-radius);
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  flex-shrink:0;
  /* Sticky ke bagian atas ".krandegan-sidebar-scroll" (bukan ikut scroll bareng
     nav layanan & Riwayat Chat di bawahnya) — background-nya sudah solid (warna
     primary) jadi konten yang scroll di baliknya otomatis tertutup rapi. */
  position:sticky;
  top:0;
  z-index:2;
}
.krandegan-new-chat-btn:hover{ box-shadow:var(--cp-level1-shadow); }

.krandegan-sidebar-nav{ display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.krandegan-sidebar-nav-item{
  display:flex;
  align-items:center;
  gap:var(--cp-space-sm);
  background:none;
  border:none;
  border-radius:var(--cp-radius);
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  color:var(--cp-on-surface-variant);
  font-size:14px;
  font-weight:500;
}
.krandegan-sidebar-nav-item:hover{ background:var(--cp-surface-container-low); color:var(--cp-primary); }
.krandegan-sidebar-nav-item .krandegan-icon{ width:20px; height:20px; }

/* Tombol "Semua Layanan" (ikon grid) hanya utk sidebar statis desktop — di mobile
   drawer tetap menampilkan semua item Layanan apa adanya, jadi disembunyikan default. */
.krandegan-sidebar-nav-more{ display:none; }

@media (min-width:960px){
  /* Desktop: sidebar kiri cukup tampilkan 3 Layanan teratas + 1 menu "Semua Layanan"
     (buka modal grid yang sama dengan "Lihat semua" di Home mobile), supaya sidebar
     tidak terlalu panjang saat daftar Layanan banyak. */
  .krandegan-sidebar-nav-item-extra{ display:none; }
  .krandegan-sidebar-nav-more{ display:flex; }
}

.krandegan-sidebar-section-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--cp-on-surface-variant);
  padding:var(--cp-space-sm) 14px 0;
}

.krandegan-history-chat-list{ display:flex; flex-direction:column; gap:2px; }
.krandegan-history-chat-row{
  position:relative;
  display:flex;
  align-items:center;
}
.krandegan-history-chat-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-radius:var(--cp-radius);
  padding:10px 34px 10px 14px;
  cursor:pointer;
  color:var(--cp-on-surface);
}
.krandegan-history-chat-item:hover{ background:var(--cp-surface-container-low); }
.krandegan-history-chat-item.is-active{ background:var(--cp-surface-container); color:var(--cp-primary); }

.krandegan-history-delete-btn{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:none;
  border:none;
  border-radius:var(--cp-radius-full);
  color:var(--cp-on-surface-variant);
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.krandegan-history-delete-btn .krandegan-icon{ width:15px; height:15px; }
.krandegan-history-chat-row:hover .krandegan-history-delete-btn,
.krandegan-history-delete-btn:focus-visible{ opacity:1; }
.krandegan-history-delete-btn:hover{ background:var(--cp-error-container); color:var(--cp-on-error-container); }
.krandegan-history-chat-item-title{
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}
.krandegan-history-chat-item-time{
  font-size:11px;
  color:var(--cp-on-surface-variant);
  display:block;
  margin-top:2px;
}
.krandegan-sidebar-scroll .krandegan-empty{ padding:0 14px; margin:0; }

/* ==========================================================================
   Skeleton loading — Riwayat Chat (sidebar, Home, layar "Chat Baru")
   Dipakai sebagai konten AWAL (sebelum JS selesai fetch GET /conversations)
   supaya warga yang sebenarnya punya riwayat tidak sempat melihat pesan keliru
   "Belum ada riwayat percakapan." selama request masih berjalan.
   ========================================================================== */
@keyframes krandegan-skeleton-shimmer{
  0%   { background-position:-200px 0; }
  100% { background-position: 200px 0; }
}
.krandegan-skeleton-line,
.krandegan-skeleton-circle{
  display:inline-block;
  border-radius:var(--cp-radius-full);
  background:linear-gradient(90deg, var(--cp-surface-container) 25%, var(--cp-surface-container-low) 37%, var(--cp-surface-container) 63%);
  background-size:400px 100%;
  animation:krandegan-skeleton-shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .krandegan-skeleton-line,
  .krandegan-skeleton-circle{ animation:none; }
}

/* Varian baris polos (dipakai di riwayat sidebar: judul di atas, waktu di bawah). */
.krandegan-skeleton-list{ display:flex; flex-direction:column; gap:2px; }
.krandegan-skeleton-row{ display:flex; flex-direction:column; gap:6px; padding:10px 14px; }
.krandegan-skeleton-row .krandegan-skeleton-line-title{ width:70%; height:12px; }
.krandegan-skeleton-row .krandegan-skeleton-line-time{ width:35%; height:9px; }

/* Varian baris dgn ikon bulat (dipakai di riwayat Home & layar "Chat Baru",
   meniru bentuk ".krandegan-chat-empty-theme-item" yang akan menggantikannya). */
.krandegan-skeleton-theme-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:var(--cp-surface-container-lowest);
}
.krandegan-skeleton-theme-row + .krandegan-skeleton-theme-row{ border-top:1px solid var(--cp-outline-variant); }
.krandegan-skeleton-theme-row .krandegan-skeleton-circle{ width:32px; height:32px; flex-shrink:0; }
.krandegan-skeleton-theme-row .krandegan-skeleton-line-title{ flex:1; height:12px; }
.krandegan-skeleton-theme-row .krandegan-skeleton-line-time{ width:30px; height:9px; flex-shrink:0; }

/* Dibuat sesederhana & sekompak mungkin (satu tombol saja, tanpa card/judul/
   deskripsi) supaya tidak memakan banyak ruang vertikal di sidebar — sebelumnya
   card promo ini ber-flex-shrink:0 dan cukup tinggi, sehingga mengurangi ruang
   scroll untuk daftar Riwayat Chat di atasnya. */
.krandegan-sidebar-promo{
  flex-shrink:0;
  padding-top:var(--cp-space-xs);
}
.krandegan-btn-white{ background:#fff; color:var(--cp-primary); width:100%; }
/* Bentuk & ukurannya sengaja disamakan persis dengan ".krandegan-new-chat-btn"
   (tombol "Chat Baru" di atasnya) — display/gap/padding/radius/font-size/weight
   semua sama — supaya kedua tombol terasa satu keluarga desain (Civic Pulse),
   bukan tombol asing yang gaya & ukurannya beda sendiri. Warna hijau tetap
   dipertahankan sebagai isyarat "WhatsApp/prioritas", tapi diambil dari token
   warna secondary milik design system sendiri (var(--cp-secondary)), bukan
   warna brand WhatsApp mentah (#25d366) yang tidak ada di palet Civic Pulse. */
.krandegan-btn-whatsapp-solid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  background:var(--cp-secondary);
  color:var(--cp-on-secondary);
  border:none;
  border-radius:var(--cp-radius);
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.krandegan-btn-whatsapp-solid:hover{ box-shadow:var(--cp-level1-shadow); }
.krandegan-btn-whatsapp-solid .krandegan-icon{ width:20px; height:20px; }
.krandegan-sidebar-promo .krandegan-help-text{ font-size:12px; color:var(--cp-on-surface-variant); font-style:italic; margin:0; padding:0 2px; }

.krandegan-chat-main{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  background:var(--cp-background);
}

.krandegan-chat-topbar{
  display:flex;
  align-items:center;
  gap:var(--cp-space-sm);
  padding:var(--cp-space-md) var(--cp-margin-mobile);
  background:var(--cp-surface-container-lowest);
  border-bottom:1px solid var(--cp-outline-variant);
  flex-shrink:0;
  position:sticky;
  top:0;
  z-index:5;
}
/* Di mobile, layar sudah sempit & area baca pesan sangat berharga — padding
   vertikal header sebesar var(--cp-space-md) (24px, dirancang utk kartu2
   desktop yang lebih lega) bikin header makan tempat lebih dari perlu.
   Dipadatkan di sini supaya lebih banyak pesan yang kelihatan tanpa scroll,
   desktop TIDAK berubah (masih pakai padding aslinya di atas). */
@media (max-width:959px){
  .krandegan-chat-topbar{ padding:10px var(--cp-margin-mobile); }
}
.krandegan-back-to-home{ display:inline-flex; }
.krandegan-chat-topbar-title{ flex:1; min-width:0; }
.krandegan-chat-topbar-title h1{
  font-size:18px; font-weight:700; margin:0; color:var(--cp-on-surface);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Baris info (dibuat oleh/tanggal/diperbarui) — dibuat kecil & SELALU 1
   baris (tidak boleh melipat, beda dgn sebelumnya) supaya header chat tetap
   konsisten 2 baris (judul + info). Kalau isinya kepanjangan utk lebar
   kotaknya, JS (lihat renderChatSubtitle() di chat.js) akan menambahkan
   class .is-marquee & menduplikasi teksnya jadi "running text" yang
   bergeser terus — lihat .krandegan-marquee-track di bawah. */
.krandegan-chat-topbar-title p{
  font-size:11px;
  color:var(--cp-on-surface-variant);
  margin:2px 0 0;
  overflow:hidden;
  white-space:nowrap;
}
.krandegan-marquee-track{
  display:inline-flex;
  white-space:nowrap;
  will-change:transform;
}
.krandegan-chat-topbar-title p.is-marquee .krandegan-marquee-track{
  animation:krandegan-subtitle-marquee 14s linear infinite;
}
.krandegan-marquee-item{ padding-right:40px; }
@keyframes krandegan-subtitle-marquee{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .krandegan-chat-topbar-title p.is-marquee .krandegan-marquee-track{ animation:none; }
}
.krandegan-chat-topbar-actions{ display:flex; gap:8px; flex-shrink:0; }

.krandegan-chat-messages{
  flex:1;
  min-height:0;
  /* Padding-bottom sengaja dilebihkan (bukan cuma --cp-space-md spt sisi lain)
     supaya pesan paling akhir tidak ketutupan composer mengambang yang kini
     "ditumpuk" di atas area ini (position:absolute, lihat .krandegan-chat-composer) —
     ruang ekstra ini kira-kira setinggi composer dalam kondisi wajar (satu
     baris teks); kalau warga mengetik pesan sangat panjang sampai composer
     ikut membesar, cukup gulir sedikit lagi, tidak masalah. */
  padding:var(--cp-space-md) var(--cp-space-md) 110px;
  display:flex;
  flex-direction:column;
  gap:var(--cp-space-md);
  overflow-y:auto;
}
/* Di mobile, composer sekarang mengambang FIXED di atas bottom nav (lihat
   .krandegan-chat-composer) — ruang ekstra di bawah pesan paling akhir
   perlu menampung TINGGI KEDUANYA (composer + bottom nav), bukan cuma
   composer spt sebelumnya, supaya pesan terakhir tidak ketutupan. */
@media (max-width:959px){
  .krandegan-chat-messages{
    padding-bottom:calc(110px + var(--krandegan-bottom-nav-height) + env(safe-area-inset-bottom));
  }
}

.krandegan-date-divider{ text-align:center; margin-bottom:4px; }
.krandegan-date-divider span{
  display:inline-block;
  background:var(--cp-surface-container);
  color:var(--cp-on-surface-variant);
  font-size:12px;
  padding:4px 14px;
  border-radius:var(--cp-radius-full);
}

.krandegan-msg-group{ display:flex; flex-direction:column; gap:5px; max-width:78%; }
.krandegan-msg-group-bot{ align-self:flex-start; align-items:flex-start; }
.krandegan-msg-group-user{ align-self:flex-end; align-items:flex-end; }
/* Di mobile, 78% dari layar yg sudah sempit bikin bubble jd sempit banget &
   teks jd banyak baris pendek2. Dilebarkan ke 90% khusus mobile — krn
   bubble bot nempel rata kiri (align-self:flex-start), melebarkan
   max-width otomatis melebar ke KANAN; bubble warga nempel rata kanan
   (align-self:flex-end), melebarkan max-width otomatis melebar ke KIRI —
   jadi keduanya tetap "nempel" di sisi asalnya, cuma lebih lega. */
@media (max-width:959px){
  .krandegan-msg-group{ max-width:90%; }
}

/* Header di atas bubble: ikon kecil + nama pengirim (berlaku utk Asisten maupun Warga) */
.krandegan-msg-header{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 4px;
}
.krandegan-msg-group-user .krandegan-msg-header{ flex-direction:row-reverse; }
.krandegan-msg-sender{
  font-size:12px;
  font-weight:600;
  color:var(--cp-on-surface-variant);
}
.krandegan-msg-avatar{
  flex-shrink:0;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--cp-radius-full);
  color:#fff;
}
.krandegan-msg-avatar .krandegan-icon{ width:13px;height:13px; }
.krandegan-msg-avatar-bot{ background:linear-gradient(135deg, var(--cp-primary) 0%, #6d5ff0 100%); }
.krandegan-msg-avatar-user{ background:var(--cp-secondary); }

.krandegan-msg-edit-btn{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  background:none;
  border:none;
  border-radius:var(--cp-radius-full);
  color:var(--cp-on-surface-variant);
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.krandegan-msg-edit-btn .krandegan-icon{ width:13px; height:13px; }
.krandegan-msg-group:hover .krandegan-msg-edit-btn,
.krandegan-msg-edit-btn:focus-visible{ opacity:1; }
.krandegan-msg-edit-btn:hover{ background:var(--cp-surface-container-low); color:var(--cp-primary); }

.krandegan-msg-copy-btn{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  background:none;
  border:none;
  border-radius:var(--cp-radius-full);
  color:var(--cp-on-surface-variant);
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.krandegan-msg-copy-btn .krandegan-icon{ width:13px; height:13px; }
.krandegan-msg-group:hover .krandegan-msg-copy-btn,
.krandegan-msg-copy-btn:focus-visible{ opacity:1; }
.krandegan-msg-copy-btn:hover{ background:var(--cp-surface-container-low); color:var(--cp-primary); }
.krandegan-msg-copy-btn.is-copied{ opacity:1; color:var(--cp-secondary); }

.krandegan-msg-row{ display:flex; min-width:0; }
.krandegan-msg-group-user .krandegan-msg-row{ justify-content:flex-end; }

/* Saat pesan warga sedang diedit, lebarkan group-nya mengikuti lebar penuh
   panel chat (bukan lebar bubble asal yang menyempit mengikuti isi teks),
   supaya area edit nyaman dipakai seperti kotak ketik biasa. */
.krandegan-msg-group.is-editing{ width:100%; max-width:100%; }
.krandegan-msg-group.is-editing .krandegan-msg-row{ width:100%; }

/* Form edit pesan (menggantikan bubble sementara saat pesan warga diedit) */
.krandegan-msg-edit-form{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:100%;
  background:var(--cp-surface-container-lowest);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
  padding:10px;
  box-shadow:var(--cp-level1-shadow);
}
.krandegan-msg-edit-textarea{
  width:100%;
  min-height:44px;
  max-height:220px;
  resize:vertical;
  border:none;
  outline:none;
  background:transparent;
  color:var(--cp-on-surface);
  font-family:inherit;
  font-size:13px;
  line-height:1.45;
  padding:4px;
}
.krandegan-msg-edit-hint{
  font-size:11px;
  color:var(--cp-on-surface-variant);
  padding:0 4px;
}
/* Muncul HANYA saat submit edit gagal (lihat submitEditMessage() di chat.js) —
   form tetap terbuka dgn teks yg sudah diketik warga tetap ada, supaya bisa
   langsung coba lagi (tekan Enter / klik simpan) tanpa mengetik ulang. */
.krandegan-msg-edit-error{
  margin:0;
  padding:6px 8px;
  font-size:12px;
  color:var(--cp-on-error-container);
  background:var(--cp-error-container);
  border-radius:var(--cp-radius-sm);
}
.krandegan-msg-edit-error[hidden]{ display:none; }
.krandegan-msg-edit-actions{ display:flex; justify-content:space-between; align-items:center; gap:6px; }
.krandegan-msg-edit-actions-buttons{ display:flex; gap:6px; margin-left:auto; }
.krandegan-msg-edit-actions .krandegan-icon-btn{ width:32px; height:32px; box-shadow:none; }
.krandegan-msg-edit-save{ background:var(--cp-primary); color:var(--cp-on-primary); }
.krandegan-msg-edit-save:hover{ background:var(--cp-primary); opacity:.9; }
.krandegan-msg-edit-cancel{ background:var(--cp-surface-container); }
.krandegan-msg-edit-cancel:hover{ background:var(--cp-error-container); color:var(--cp-on-error-container); }

.krandegan-chat-bubble{
  padding:9px 13px;
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
  /* min-width:0 WAJIB di sini — bubble ini flex ITEM dari ".krandegan-msg-row"
     (row flex, lihat di atas). Tanpa ini, default browser min-width:auto pada
     flex item membuatnya menolak menyempit di bawah lebar konten terlebarnya
     (mis. tabel Markdown lebar dari jawaban AI, lihat ".krandegan-table-wrap"
     di bawah) — akibatnya BUKAN tabelnya yang scroll horizontal sendiri, tapi
     seluruh bubble/baris pesan (bahkan halaman) yang melebar & ikut ke-scroll
     ke kanan. Dengan min-width:0, bubble boleh menyempit sampai max-width
     ".krandegan-msg-group" di atas, dan overflow-x:auto milik
     ".krandegan-table-wrap" di dalamnya baru benar-benar berfungsi. */
  min-width:0;
}
.krandegan-chat-bubble-user{
  background:linear-gradient(135deg, var(--cp-primary) 0%, #6d5ff0 100%);
  color:var(--cp-on-primary);
  border-radius:var(--cp-radius-lg) 2px var(--cp-radius-lg) var(--cp-radius-lg);
}
.krandegan-chat-bubble-bot{
  background:var(--cp-surface-container-lowest);
  color:var(--cp-on-surface);
  border-radius:2px var(--cp-radius-lg) var(--cp-radius-lg) var(--cp-radius-lg);
  box-shadow:var(--cp-level2-shadow);
}
.krandegan-chat-bubble-error{ background:var(--cp-error-container); color:var(--cp-on-error-container); }
/* Kursor berkedip di akhir teks yang sedang "diketik" (lihat typewriterRevealBubble()
   di chat.js) — animasi mengetik ini murni kosmetik di sisi browser (balasan AI
   sebenarnya sudah lengkap sejak awal dari REST API, bukan streaming asli token demi
   token dari OpenAI), jadi elemen ini HANYA muncul sesaat selama teks sedang
   "diungkap" bertahap, lalu dihapus otomatis begitu selesai (lihat finish() di JS). */
.krandegan-typing-cursor{
  display:inline-block;
  width:2px;
  height:1em;
  vertical-align:text-bottom;
  background:currentColor;
  margin-left:1px;
  animation:krandegan-caret-blink 0.85s steps(1) infinite;
}
@keyframes krandegan-caret-blink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}
/* Tombol "Coba Lagi" di dalam bubble error (lihat appendBubble() di chat.js) —
   ditaruh di dalam bubble, bukan sejajar dgn ".krandegan-msg-row" yang flex
   row, supaya tampil di baris baru bawah teks error, bukan sejajar horizontal. */
.krandegan-msg-retry-btn{
  display:block;
  margin-top:8px;
  padding:6px 14px;
  border:1px solid var(--cp-on-error-container);
  border-radius:var(--cp-radius-full);
  background:none;
  color:var(--cp-on-error-container);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.krandegan-msg-retry-btn:hover{ background:rgba(0,0,0,0.06); }

/* Markdown ringan di dalam balasan asisten (lihat renderMarkdownLite() di chat.js) */
.krandegan-chat-bubble p{ margin:0 0 8px; }
.krandegan-chat-bubble p:last-child{ margin-bottom:0; }
.krandegan-chat-bubble ul,
.krandegan-chat-bubble ol{ margin:2px 0 8px; padding-left:20px; }
.krandegan-chat-bubble ul:last-child,
.krandegan-chat-bubble ol:last-child{ margin-bottom:0; }
.krandegan-chat-bubble li{ margin-bottom:4px; }
.krandegan-chat-bubble li:last-child{ margin-bottom:0; }
.krandegan-chat-bubble strong{ font-weight:700; }
.krandegan-chat-bubble code{
  background:rgba(0,0,0,0.06);
  padding:1px 5px;
  border-radius:4px;
  font-size:0.92em;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.krandegan-chat-bubble-user code{ background:rgba(255,255,255,0.22); }

/* Link (Markdown [teks](url) ATAU URL polos yang otomatis dibuat bisa diklik
   — lihat protectLink()/renderMarkdownLite() di chat.js). Selalu dibuka di tab
   baru + rel="noopener noreferrer" karena selalu mengarah ke situs eksternal. */
.krandegan-chat-bubble a{
  color:var(--cp-primary);
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-word;
}
.krandegan-chat-bubble a:hover{ opacity:.85; }
/* Bubble warga berlatar gradasi primary+putih (lihat .krandegan-chat-bubble-user
   di atas) — link warna --cp-primary di atasnya nyaris tak terlihat, jadi
   dioverride pakai warna teks bubble-nya sendiri (putih, digarisbawahi) supaya
   tautan lampiran yg warga kirim (lihat appendBubble() di chat.js) tetap jelas
   terbaca & terlihat bisa diklik. */
.krandegan-chat-bubble-user a{ color:inherit; }
.krandegan-chat-bubble-user a:hover{ opacity:.8; }

/* Gambar Markdown (mis. ![alt](url) — dipakai utk foto bukti penyelesaian
   permohonan yg dilampirkan staf desa, lihat krandegan_maybe_handle_status_check()
   di inc/form-wizard.php + dukungan ![alt](url) di renderMarkdownLite() chat.js).
   Dibatasi max-width supaya tidak melebihi lebar bubble chat di layar sempit. */
.krandegan-chat-bubble img{
  max-width:100%;
  height:auto;
  border-radius:var(--cp-radius-md, 10px);
  display:block;
  margin-top:6px;
}

/* Tabel Markdown (dipakai AI utk daftar produk/jadwal dgn beberapa atribut —
   lihat instruksi tabel di krandegan_build_system_prompt()). Dibungkus
   ".krandegan-table-wrap" dgn overflow-x:auto supaya tabel lebar tidak
   merusak lebar panel chat di layar sempit, tabelnya sendiri yang di-scroll
   horizontal, bukan seluruh halaman. */
.krandegan-table-wrap{
  overflow-x:auto;
  margin:0 0 8px;
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-md);
}
.krandegan-table-wrap:last-child{ margin-bottom:0; }
.krandegan-chat-bubble table{
  width:100%;
  border-collapse:collapse;
  font-size:0.94em;
}
.krandegan-chat-bubble th,
.krandegan-chat-bubble td{
  padding:7px 10px;
  text-align:left;
  border-bottom:1px solid var(--cp-outline-variant);
  white-space:nowrap;
}
.krandegan-chat-bubble thead th{
  background:var(--cp-surface-container);
  font-weight:700;
  color:var(--cp-on-surface);
}
.krandegan-chat-bubble tbody tr:last-child td{ border-bottom:none; }

/* Tombol "ke pesan terbaru" — muncul saat warga scroll ke atas menjauh dari
   pesan paling akhir, supaya tidak perlu geser manual untuk kembali ke bawah. */
.krandegan-scroll-bottom-btn{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:112px;
  width:38px;height:38px;
  border-radius:var(--cp-radius-full);
  border:1px solid var(--cp-outline-variant);
  background:var(--cp-surface-container-lowest);
  color:var(--cp-on-surface);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--cp-level2-shadow);
  cursor:pointer;
  z-index:8;
}
.krandegan-scroll-bottom-btn[hidden]{ display:none; }
.krandegan-scroll-bottom-btn:hover{ color:var(--cp-primary); border-color:var(--cp-primary); }
.krandegan-scroll-bottom-btn .krandegan-icon{ width:18px; height:18px; }

/* Layar "Chat Baru": tampil di dalam panel pesan selama percakapan masih kosong
   (lihat template #krandegan-chat-empty-state-template & chat.js). */
.krandegan-chat-empty-state{
  flex:1;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  width:100%;
  max-width:620px;
  padding:var(--cp-space-lg) var(--cp-space-sm);
}
.krandegan-chat-empty-title{
  font-size:18px;
  font-weight:700;
  color:var(--cp-on-surface);
  margin:10px 0 0;
}
.krandegan-chat-empty-desc{
  font-size:13px;
  line-height:1.5;
  color:var(--cp-on-surface-variant);
  margin:0 0 var(--cp-space-md);
}

/* Ikon Layanan dalam satu baris (memakai .krandegan-service-scroll yang sama
   dengan dashboard Home — flex nowrap + overflow-x:auto, jadi tetap satu baris
   & tetap bisa digeser di layar sempit alih-alih membungkus ke baris baru).
   PENTING: JANGAN pakai justify-content:center di sini — dikombinasikan dengan
   overflow-x:auto, sejumlah browser salah menghitung area yang bisa di-scroll
   sehingga tile paling kanan (atau kiri) jadi terpotong & tidak bisa dijangkau
   sama sekali walau digeser. Rata kiri + padding kanan secukupnya jauh lebih aman. */
.krandegan-chat-empty-services{
  width:100%;
  margin-bottom:var(--cp-space-md);
  padding-right:var(--cp-space-sm);
}

/* Form chat besar, di tengah — mengirim lewat fungsi sendMessage() yang sama
   dengan kotak chat biasa di bawah transkrip. Dibuat jauh lebih besar dari
   kotak chat biasa supaya terasa seperti titik awal percakapan (mirip search
   bar besar), bukan sekadar duplikat kotak ketik kecil. */
.krandegan-chat-empty-form{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin-bottom:var(--cp-space-md);
}
.krandegan-chat-empty-input{
  flex:1;
  min-width:0;
  border:1px solid var(--cp-outline);
  border-radius:28px;
  padding:20px 26px;
  font-family:var(--cp-font-family);
  font-size:16px;
  line-height:1.4;
  color:var(--cp-on-surface);
  background:var(--cp-surface-container-lowest);
  box-shadow:var(--cp-level1-shadow);
  /* Sekarang <textarea> (bukan <input> lagi) supaya bisa multi-baris —
     tinggi diatur otomatis oleh autoResizeTextarea() di chat.js, jadi
     resize manual bawaan browser dimatikan; radius lonjong penuh di atas
     (border-radius:28px, bukan var(--cp-radius-full)) sengaja dipertahankan
     hanya utk 1 baris pertama, baru membulat wajar begitu tingginya
     bertambah > 1 baris. */
  resize:none;
  overflow-y:auto;
  max-height:160px;
}
.krandegan-chat-empty-input:focus{
  outline:none;
  border-color:var(--cp-primary);
  box-shadow:0 0 0 3px rgba(0,40,142,0.12);
}
.krandegan-chat-empty-send{
  flex-shrink:0;
  width:60px;height:60px;
  border-radius:var(--cp-radius-full);
  border:none;
  background:linear-gradient(135deg, var(--cp-primary) 0%, #6d5ff0 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,40,142,0.25);
}
.krandegan-chat-empty-send:hover{ opacity:.92; }
.krandegan-chat-empty-send .krandegan-icon{ width:24px;height:24px; }
/* Default tombol ini mic (rekam suara), berubah jadi kirim begitu warga
   mengetik — lihat updateEmptyFormSendButton() di chat.js. Denyut merah
   sama seperti kotak ketik utama selama sedang merekam. */
.krandegan-chat-empty-send.is-listening{
  background:var(--cp-error);
  animation:krandegan-mic-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .krandegan-chat-empty-send.is-listening{ animation:none; }
}

/* Riwayat Chat, di bawah form — daftar vertikal (bukan chip) supaya jelas
   terbaca sebagai riwayat, bukan sekadar saran topik. */
.krandegan-chat-empty-themes{ width:100%; margin-top:var(--cp-space-sm); text-align:left; }
.krandegan-chat-empty-themes[hidden]{ display:none; }
.krandegan-chat-empty-themes-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--cp-on-surface-variant);
  margin-bottom:8px;
}
.krandegan-chat-empty-themes-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
  overflow:hidden;
}
.krandegan-chat-empty-theme-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  background:var(--cp-surface-container-lowest);
  border:none;
  padding:12px 14px;
  cursor:pointer;
  font-family:inherit;
  color:var(--cp-on-surface);
}
.krandegan-chat-empty-theme-item + .krandegan-chat-empty-theme-item{ border-top:1px solid var(--cp-outline-variant); }
.krandegan-chat-empty-theme-item:hover{ background:var(--cp-surface-container-low); }
.krandegan-chat-empty-theme-icon{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:var(--cp-radius-full);
  background:var(--cp-surface-container);
  display:flex;align-items:center;justify-content:center;
  color:var(--cp-on-surface-variant);
}
.krandegan-chat-empty-theme-icon .krandegan-icon{ width:16px;height:16px; }
.krandegan-chat-empty-theme-title{
  flex:1;
  min-width:0;
  font-size:13px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.krandegan-chat-empty-theme-time{ flex-shrink:0; font-size:11px; color:var(--cp-on-surface-variant); }

/* Saat layar "Chat Baru" aktif, kotak chat persisten di bawah disembunyikan —
   form besar di tengah layar ini yang jadi satu-satunya input, supaya tidak
   ada dua kotak ketik tampil bersamaan. */
.krandegan-chat-main.is-empty-state .krandegan-chat-composer{ display:none; }

/* ==========================================================================
   Composer mengambang ("floating")
   Dulu baris input adalah flex item biasa yang menempel penuh di tepi bawah
   .krandegan-chat-main (ikut makan tinggi layout secara permanen). Sekarang
   dilepas dari alur flex (position:absolute, ditumpuk DI ATAS area pesan yg
   sudah full-height) supaya area pesan terasa lebih lega/luas — composer-nya
   sendiri jadi "pulau" mengambang dgn pill/kartu bulat + shadow, bukan bar
   penuh lebar yg menempel di tepi. .krandegan-chat-main sudah position:relative
   dari sebelumnya jadi tidak perlu tambahan apa pun di situ.
   ========================================================================== */
.krandegan-chat-composer{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:0 var(--cp-margin-mobile) var(--cp-space-md);
  /* Gutter kiri/kanan di luar kartu (hasil dari max-width+margin:auto pada
     .krandegan-chat-input-row di bawah) sengaja TIDAK menangkap klik, supaya
     warga tetap bisa scroll/klik pesan di baliknya lewat celah itu — hanya
     kartu & elemen status di dalamnya (pointer-events:auto) yang interaktif. */
  pointer-events:none;
  transition:bottom .18s ease;
}
.krandegan-chat-composer > *{ pointer-events:auto; }

/**
 * Di mobile, "bottom:0" di atas berarti ketiban .krandegan-bottom-nav
 * (position:fixed, selalu di atas apa pun di bawahnya krn z-index lebih
 * tinggi) — makanya warga lapor kotak chat "ketutupan" bottom nav. Sebabnya:
 * .krandegan-chat-composer cuma dijamin ada di ATAS ruang kosong yang
 * disediakan .krandegan-shell (padding-bottom) SELAMA seluruh halaman
 * dikunci penuh 1 layar (mode "app" khusus template halaman Chat khusus) —
 * begitu tema ini dipakai lewat shortcode di halaman biasa, halamannya jadi
 * scroll normal spt biasa & composer (masih position:absolute mengikuti
 * konten) bisa "lewat" ke bawah tempat bottom nav yang fixed itu berdiri.
 * Perbaikan paling aman (tidak tergantung mode halaman): di mobile,
 * composer-nya dijadikan position:fixed relatif ke VIEWPORT, diganjal pas
 * di atas bottom nav — dijamin selalu kelihatan penuh di atas nav, di mode
 * halaman apa pun & di posisi scroll mana pun.
 */
@media (max-width:959px){
  .krandegan-chat-composer{
    position:fixed;
    bottom:calc(var(--krandegan-bottom-nav-height) + env(safe-area-inset-bottom));
  }
  /* Bottom nav disembunyikan (autohide saat scroll ke bawah — lihat
     chat.js) -> ruang yg tadinya dipakai nav itu ikut "diklaim" composer,
     supaya area baca pesan di belakangnya makin lega, bukan cuma nav-nya
     hilang tapi composer tetap menggantung tinggi menyisakan jarak kosong. */
  .krandegan-chat-main.krandegan-nav-hidden .krandegan-chat-composer{
    bottom:env(safe-area-inset-bottom);
  }
}

.krandegan-chat-typing{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 4px 4px;
  max-width:var(--cp-chat-max-width, 640px);
  margin:0 auto;
  width:100%;
}
.krandegan-chat-typing[hidden]{ display:none; }
.krandegan-typing-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cp-outline);
  animation:krandegan-typing-bounce 1s infinite ease-in-out;
}
.krandegan-typing-dot:nth-child(3){ animation-delay:.15s; }
.krandegan-typing-dot:nth-child(4){ animation-delay:.3s; }
@keyframes krandegan-typing-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.5; }
  40%{ transform:translateY(-4px); opacity:1; }
}

.krandegan-chat-input-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-xl);
  background:var(--cp-surface-container-lowest);
  box-shadow:var(--cp-level2-shadow);
  max-width:var(--cp-chat-max-width, 640px);
  margin:0 auto;
  width:100%;
}
.krandegan-attach-btn{ box-shadow:none; background:transparent; color:var(--cp-on-surface-variant); flex-shrink:0; margin-bottom:2px; }
.krandegan-chat-input{
  flex:1;
  min-width:0;
  border:none;
  border-radius:0;
  padding:8px 4px;
  font-family:var(--cp-font-family);
  font-size:14px;
  color:var(--cp-on-surface);
  background:transparent;
  /* Textarea auto-resize (lihat autoResizeInput() di chat.js): resize manual
     dimatikan (pojok tarik bawaan browser tidak dipakai, tingginya diatur
     otomatis oleh JS), tanpa scrollbar-nya sendiri selama di bawah
     max-height — baru scroll di dalam kotaknya kalau isinya sudah sangat
     panjang, supaya kartunya tidak membesar tak terbatas. */
  resize:none;
  overflow-y:auto;
  max-height:120px;
  line-height:1.4;
}
.krandegan-chat-input:focus{ outline:none; }
.krandegan-chat-input-row:focus-within{ border-color:var(--cp-primary); }
.krandegan-ai-badge{
  display:none; /* muncul di layar lebih lebar, lihat media query */
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:700;
  color:var(--cp-primary);
  white-space:nowrap;
}
.krandegan-ai-badge .krandegan-icon{ width:14px;height:14px; }
.krandegan-mic-btn{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:var(--cp-radius-full);
  border:none;
  background:linear-gradient(135deg, var(--cp-primary) 0%, #6d5ff0 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
/* Sedang merekam suara (lihat handleMicButtonClick() di chat.js) — denyut
   merah supaya jelas beda dari mode kirim biasa & terlihat "aktif mendengarkan". */
.krandegan-mic-btn.is-listening{
  background:var(--cp-error);
  animation:krandegan-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes krandegan-mic-pulse{
  0%   { box-shadow:0 0 0 0 rgba(186,26,26,0.45); }
  70%  { box-shadow:0 0 0 10px rgba(186,26,26,0); }
  100% { box-shadow:0 0 0 0 rgba(186,26,26,0); }
}
@media (prefers-reduced-motion: reduce){
  .krandegan-mic-btn.is-listening{ animation:none; }
}

/* Status singkat input suara ("Mendengarkan...", pesan error izin mikrofon,
   dst.) — muncul tepat di atas kotak ketik, hilang otomatis setelah beberapa
   detik (lihat showVoiceStatus()/hideVoiceStatus() di chat.js). */
.krandegan-voice-status{
  margin:0 auto;
  padding:6px 4px 0;
  max-width:var(--cp-chat-max-width, 640px);
  width:100%;
  font-size:12px;
  color:var(--cp-primary);
  text-align:center;
  flex-shrink:0;
}
.krandegan-voice-status.is-error{ color:var(--cp-error); }
.krandegan-voice-status[hidden]{ display:none; }

/* Progress bar unggah lampiran (foto/dokumen) — batangnya lebarnya diatur
   inline (style.width) oleh event XMLHttpRequest.upload.onprogress di
   uploadAttachment() (chat.js), animasi transisi lebar dibuat halus lewat
   CSS transition di bawah, bukan di-update lompat-lompat tiap event. */
.krandegan-upload-progress{
  margin:6px auto 0;
  max-width:var(--cp-chat-max-width, 640px);
  width:100%;
  height:4px;
  border-radius:999px;
  background:var(--cp-surface-variant, rgba(0,0,0,.08));
  overflow:hidden;
  flex-shrink:0;
}
.krandegan-upload-progress[hidden]{ display:none; }
.krandegan-upload-progress-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:var(--cp-primary);
  transition:width .2s ease-out;
}

/* ==========================================================================
   Bottom nav (mobile only)
   ========================================================================== */
.krandegan-bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-around;
  background:var(--cp-surface-container-lowest);
  border-top:1px solid var(--cp-outline-variant);
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));
  z-index:20;
  min-height:var(--krandegan-bottom-nav-height);
  /* Autohide (lihat chat.js) — digeser turun penuh keluar layar, BUKAN
     display:none, supaya transisinya mulus & tetap gampang dimunculkan lagi
     begitu warga scroll ke atas (lebih banyak ruang baca pesan selama
     scroll ke bawah, tanpa kehilangan akses navigasi selamanya). */
  transition:transform .22s ease;
}
.krandegan-bottom-nav.is-hidden{
  transform:translateY(100%);
}
@media (prefers-reduced-motion: reduce){
  .krandegan-bottom-nav{ transition:none; }
}
.krandegan-bottom-nav-item{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--cp-on-surface-variant);
  font-size:11px;
  padding:4px 10px;
}
.krandegan-bottom-nav-item .krandegan-icon{ width:22px;height:22px; }
.krandegan-bottom-nav-item.is-active{ color:var(--cp-primary); }
.krandegan-bottom-nav-fab{
  width:56px;height:56px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg, var(--cp-primary) 0%, #6d5ff0 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transform:translateY(-14px);
  box-shadow:0 8px 20px rgba(0,40,142,0.35);
  flex-shrink:0;
}
.krandegan-bottom-nav-fab .krandegan-icon{ width:24px;height:24px; }

/* ==========================================================================
   Buttons (shared)
   ========================================================================== */
.krandegan-btn{
  font-family:var(--cp-font-family);
  font-size:var(--cp-label-md-size);
  font-weight:600;
  border:none;
  border-radius:var(--cp-radius);
  padding:10px 18px;
  cursor:pointer;
}
/* .krandegan-btn kadang dipakai pada <a> (mis. tombol WhatsApp), bukan cuma
   <button> — pastikan tampil & berperilaku sama persis di kedua kasus. */
a.krandegan-btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.krandegan-btn-primary{ background:var(--cp-primary); color:var(--cp-on-primary); }
.krandegan-btn-secondary{ background:var(--cp-secondary-container); color:var(--cp-on-secondary-container); }

.krandegan-fallback-content{ padding:var(--cp-space-lg) var(--cp-margin-mobile); }
.krandegan-container{ max-width:var(--cp-container-max); margin:0 auto; }

.krandegan-close-sidebar{ display:inline-flex; }

/* Tombol ikon user (+ bubble popover menu akun) khusus desktop di topbar —
   di mobile trigger-nya tombol "Profil" di bottom nav (lihat
   #krandegan-bottom-nav-profil-btn di chat.js), yang membuka salinan
   "global" TERPISAH dari popover ini (".krandegan-user-popover-mobile",
   markup+alasannya di template-parts/chat-widget.php & CSS-nya di bawah) —
   jadi wadah topbar ini SENGAJA boleh tetap display:none total di mobile spt
   semula, tidak perlu trik apa pun lagi supaya isinya "bisa dilihat" di
   mobile, krn memang tidak pernah dipakai di mobile sama sekali. */
.krandegan-user-menu{ display:none; }

/* ==========================================================================
   Bubble popover menu akun (klik ikon user di topbar Chat, warga SUDAH
   login) — pengganti lompat langsung ke krandegan-view-profil, lihat
   template-parts/chat-widget.php ".krandegan-user-menu" & chat.js
   openUserPopover()/closeUserPopover(). Ditutup lewat klik tombol Tutup,
   klik di luar bubble, ATAU tombol Escape (pola sama dgn overlay lain di
   widget ini, mis. modal konfirmasi/riwayat/pencarian).
   ========================================================================== */
.krandegan-user-popover{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:230px;
  padding:var(--cp-space-sm);
  background:var(--cp-surface-container-lowest);
  border:1px solid var(--cp-outline-variant);
  border-radius:var(--cp-radius-lg);
  box-shadow:var(--cp-level2-shadow, var(--cp-level1-shadow));
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:var(--cp-space-sm);
}
.krandegan-user-popover[hidden]{ display:none; }
.krandegan-user-popover-head{
  padding:6px 8px 10px;
  border-bottom:1px solid var(--cp-outline-variant);
}
.krandegan-user-popover-name{ margin:0; font-size:14px; font-weight:700; color:var(--cp-on-surface); }
.krandegan-user-popover-nik{ margin:2px 0 0; font-size:12px; color:var(--cp-on-surface-variant); }
.krandegan-user-popover-menu{ display:flex; flex-direction:column; gap:2px; }
.krandegan-user-popover-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:none;
  background:transparent;
  color:var(--cp-on-surface);
  font-size:13px;
  font-weight:500;
  text-align:left;
  padding:9px 8px;
  border-radius:var(--cp-radius-md, 10px);
  cursor:pointer;
  box-sizing:border-box;
  /* text-decoration:none — item "Dashboard" (lihat di bawah) dirender
     sbg <a>, bukan <button> spt item menu lain, krn ia berpindah ke HALAMAN
     LAIN; baris ini menetralkan garis-bawah bawaan link supaya tampilannya
     tetap konsisten dgn item <button> di sekitarnya. */
  text-decoration:none;
}
.krandegan-user-popover-item:hover{ background:var(--cp-surface-container-low); }
.krandegan-user-popover-item .krandegan-icon{ width:18px; height:18px; flex-shrink:0; color:var(--cp-on-surface-variant); }
/* Item "Dashboard" (khusus Admin Desa/Kepala Desa/Super Admin, lihat
   $topbar_can_dashboard di template-parts/chat-widget.php) sengaja dibedakan
   warnanya (aksen primary + tebal) drpd item menu lain — ini satu-satunya
   item yg pindah ke HALAMAN LAIN (bukan tab di dalam krandegan-view-profil),
   jadi perlu terlihat sedikit menonjol/berbeda perannya. */
.krandegan-user-popover-item-dashboard{ font-weight:700; color:var(--cp-primary); }
.krandegan-user-popover-item-dashboard .krandegan-icon{ color:var(--cp-primary); }
.krandegan-user-popover-item-dashboard:hover{ background:var(--cp-surface-container-low); }
/* Tombol paling bawah bubble SEKARANG "Keluar" (logout beneran, BUKAN
   sekadar tutup bubble) — pakai gaya merah solid yang sama dgn "Keluar" di
   menu Profil (.krandegan-btn-danger, lihat chat.js utk konfirmasi custom
   sebelum benar-benar logout). margin-top:0 override versi .krandegan-btn-
   danger yg biasa (margin-top:var(--cp-space-lg)) krn di sini sudah ada gap
   flex dari .krandegan-user-popover, tidak perlu jarak tambahan. */
.krandegan-user-popover-logout{ margin-top:0; }

/* ==========================================================================
   Salinan "GLOBAL" bubble popover akun khusus mobile (".krandegan-user-popover-mobile",
   lihat markupnya di template-parts/chat-widget.php — sengaja elemen TERPISAH
   dari versi topbar desktop, sejajar/sibling dgn ketiga <section class=
   "krandegan-view">, BUKAN di dalam salah satunya). Kenapa perlu salinan
   terpisah (bukan cukup styling ulang elemen yang sama): elemen topbar
   (".krandegan-user-menu") ada DI DALAM ".krandegan-view-chat", dan
   ".krandegan-view-chat" itu sendiri display:none di mobile kecuali
   data-active-view="chat" (lihat aturan ".krandegan-view" di atas) — jadi
   kalau warga baru buka halaman (default "home") atau sedang di tab Profil,
   bubble di dalam topbar itu TIDAK MUNGKIN terlihat sama sekali (display:none
   pada leluhur selalu menang, position:fixed pada elemen di dalamnya tidak
   bisa mengalahkannya). Trigger-nya tombol "Profil" di ".krandegan-bottom-nav"
   (lihat #krandegan-bottom-nav-profil-btn di chat.js), yang SELALU ada di
   semua tab mobile — makanya popovernya jg harus SELALU ada di render tree,
   tidak boleh ikut tersembunyi bareng salah satu tab.
   Ditampilkan sbg "bottom sheet" mengambang tepat DI ATAS bottom nav
   (position:fixed, lebar penuh dikurangi margin kiri-kanan). z-index dinaikkan
   di atas .krandegan-bottom-nav (yg z-index:20) supaya tidak ketiban.
   Disembunyikan TOTAL di breakpoint desktop (lihat media query di bawah) krn
   desktop sudah punya jalur sendiri yang bekerja baik (topbar-nya tidak
   pernah ikut ter-display:none spt di mobile).
   ========================================================================== */
.krandegan-user-popover-mobile{
  position:fixed;
  top:auto;
  left:12px;
  right:12px;
  bottom:calc(var(--krandegan-bottom-nav-height) + env(safe-area-inset-bottom) + 10px);
  width:auto;
  max-width:360px;
  margin:0 auto;
  z-index:30;
}

/* ==========================================================================
   Breakpoint desktop: tampilkan sidebar + chat sekaligus, sembunyikan bottom nav & home view
   ========================================================================== */
@media (min-width:960px){
  .krandegan-shell{ padding-bottom:0; padding:var(--cp-space-lg) var(--cp-margin-mobile); }
  .krandegan-view-home{ display:none !important; }
  .krandegan-view-chat{ display:flex !important; }
  .krandegan-user-menu{ display:flex; position:relative; }
  /* Salinan bubble popover khusus mobile (lihat komentar lengkapnya di
     ".krandegan-user-popover-mobile" di atas) tidak relevan sama sekali di
     desktop — jalur topbar biasa (".krandegan-user-menu") sudah cukup &
     tidak py masalah display:none-ikut-tab spt di mobile. */
  .krandegan-user-popover-mobile{ display:none !important; }
  /* Panel Profil dibuka lewat data-active-view="profil" — di mobile ini
     otomatis menang karena .krandegan-view-chat/.krandegan-view-home tidak
     dipaksa !important, tapi di desktop dua baris di atas MEMAKSA
     .krandegan-view-chat selalu tampil & .krandegan-view-home selalu
     sembunyi apa pun data-active-view-nya. Override kedua baris di bawah
     (selector atribut lebih spesifik) supaya saat warga membuka Profil,
     panel Chat benar-benar disembunyikan & panel Profil yang tampil. */
  .krandegan-shell[data-active-view="profil"] .krandegan-view-chat{ display:none !important; }
  .krandegan-shell[data-active-view="profil"] .krandegan-view-profil{ display:block !important; }
  /* PENTING: max-width/centering dipasang di .krandegan-view-profil-inner
     (KONTEN-nya), BUKAN di .krandegan-view-profil (wadah scroll+posisi
     tombol Tutup itu sendiri) — sebelumnya max-width:640px ada di section
     luar, jadi section itu (& scrollbar overflow-y:auto + tombol Tutup
     absolute di dalamnya) ikut menyempit & "mengambang" di tengah layar
     desktop, bukan mentok ke tepi kanan layar. Dgn max-width dipindah ke
     inner, section luar tetap selebar penuh (scrollbar & tombol Tutup
     mentok ke tepi kanan sungguhan), sementara kontennya sendiri tetap
     nyaman dibaca (tidak melebar penuh di layar lebar). */
  .krandegan-view-profil-inner{ max-width:640px; margin-left:auto; margin-right:auto; }
  /* Di desktop sidebar-nya statis (bagian dari layout, bukan drawer lagi) —
     transform & transition dari gaya mobile-nya dimatikan supaya tidak ada
     sisa animasi geser saat lebar layar berubah (mis. resize/rotate). */
  .krandegan-sidebar{ display:flex; position:static; box-shadow:none; transform:none; transition:none; }
  .krandegan-sidebar-backdrop{ display:none !important; }
  .krandegan-close-sidebar{ display:none; }
  .krandegan-bottom-nav{ display:none; }
  .krandegan-back-to-home{ display:none; }
  /* Tombol "Riwayat Chat" (ikon jam) di header chat TETAP ditampilkan di
     desktop (beda dari .krandegan-back-to-home di atas yang memang cuma
     relevan di mobile) — sengaja diaktifkan supaya warga juga bisa membuka
     Riwayat Chat lewat modal ringkas ala mobile langsung dari header, tanpa
     harus menyusuri daftar riwayat penuh di sidebar kiri. Perilakunya generik
     lewat atribut data-open-history-modal (lihat chat.js), jadi tidak perlu
     kode JS tambahan apa pun utk mengaktifkannya di sini. */
  .krandegan-open-sidebar{ display:flex; }
  .krandegan-ai-badge{ display:inline-flex; }

  .krandegan-view-chat{
    border:1px solid var(--cp-outline-variant);
    border-radius:var(--cp-radius-lg);
    overflow:hidden;
    box-shadow:var(--cp-level1-shadow);
    min-height:80vh;
  }
}

/* Mode full-page: hilangkan bingkai kartu di desktop, benar-benar edge-to-edge satu layar penuh. */
@media (min-width:960px){
  body.krandegan-fullscreen-chat .krandegan-shell{ padding:0; }
  body.krandegan-fullscreen-chat .krandegan-view-chat{
    border:none;
    border-radius:0;
    box-shadow:none;
    min-height:0;
    height:100dvh;
  }
}

/* ==========================================================================
   Modal konfirmasi custom (mis. "Hapus percakapan?") — pengganti window.confirm()
   bawaan browser yang tampilannya tidak konsisten & terasa asing di tengah UI chat.
   ========================================================================== */
.krandegan-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--cp-space-md);
  background:rgba(17,17,26,0);
  transition:background .15s ease;
}
/* PENTING: atribut [hidden] harus menang atas ".krandegan-modal-backdrop{ display:flex }"
   di atas (spesifisitas keduanya setara, jadi urutan CSS yang menentukan) — tanpa ini,
   overlay fixed inset:0 tetap "ada" (walau transparan) saat disembunyikan dan memblokir
   SEMUA klik di seluruh halaman chat, membuat front-end terasa freeze. */
.krandegan-modal-backdrop[hidden]{ display:none; }
.krandegan-modal-backdrop.is-open{ background:rgba(17,17,26,0.45); }
.krandegan-modal{
  width:100%;
  max-width:360px;
  background:var(--cp-surface-container-lowest);
  border-radius:var(--cp-radius-lg);
  padding:var(--cp-space-md);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
  transform:translateY(8px) scale(.97);
  opacity:0;
  transition:transform .15s ease, opacity .15s ease;
}
.krandegan-modal-backdrop.is-open .krandegan-modal{ transform:translateY(0) scale(1); opacity:1; }
.krandegan-modal-title{
  font-size:17px;
  font-weight:700;
  color:var(--cp-on-surface);
  margin:0 0 8px;
}
.krandegan-modal-desc{
  font-size:14px;
  line-height:1.5;
  color:var(--cp-on-surface-variant);
  margin:0 0 var(--cp-space-md);
}
/* Kedua tombol (Batal & Ya/Hapus) dipaksa flex:1 (lebar SAMA persis, bukan
   lagi menyesuaikan panjang teks masing-masing) supaya baris aksi modal
   terlihat seimbang — sebelumnya (sebelum perbaikan .krandegan-btn-danger
   di atas) tombol merah malah melebar penuh 100% krn "menular" style tombol
   Keluar full-width, jauh lebih besar drpd tombol Batal di sebelahnya. */
.krandegan-modal-actions{ display:flex; justify-content:flex-end; gap:8px; }
.krandegan-modal-actions .krandegan-btn{ flex:1; text-align:center; }
.krandegan-btn-ghost{ background:var(--cp-surface-container); color:var(--cp-on-surface); }
.krandegan-btn-ghost:hover{ background:var(--cp-surface-container-low); }
/* color:var(--cp-on-error) (BUKAN #fff hardcode spt sebelumnya) — supaya
   kontrasnya tetap benar di mode gelap juga: token --cp-error di mode gelap
   berubah jadi merah muda TERANG (--cp-error di [data-theme="dark"] itu
   #ffb4ab), jadi teks putih polos di atasnya nyaris tidak kebaca; --cp-on-
   error sudah didefinisikan berpasangan (gelap #690005) khusus utk kasus
   ini. Dipakai bareng oleh tombol "Hapus" modal konfirmasi & tombol
   "Keluar" (menu Profil + bubble popover user), lihat aturan tambahan
   .krandegan-btn-danger di dekat .krandegan-profile-actions utk versi
   solid full-width-nya. */
.krandegan-btn-danger{ background:var(--cp-error); color:var(--cp-on-error); font-weight:700; }
.krandegan-btn-danger:hover{ opacity:.9; }

/* ==========================================================================
   Live search isi percakapan (ikon kaca pembesar di topbar chat)
   ========================================================================== */
.krandegan-search-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  justify-content:center;
  padding:72px var(--cp-space-md) var(--cp-space-md);
  background:rgba(17,17,26,0);
  transition:background .15s ease;
}
/* Sama seperti modal konfirmasi: [hidden] HARUS menang atas "display:flex" di
   atas, kalau tidak overlay tetap ada (walau transparan) & memblokir klik. */
.krandegan-search-overlay[hidden]{ display:none; }
.krandegan-search-overlay.is-open{ background:rgba(17,17,26,0.4); }

.krandegan-search-panel{
  width:100%;
  max-width:480px;
  max-height:calc(100% - 32px);
  display:flex;
  flex-direction:column;
  background:var(--cp-surface-container-lowest);
  border-radius:var(--cp-radius-lg);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
  overflow:hidden;
  transform:translateY(-8px) scale(.98);
  opacity:0;
  transition:transform .15s ease, opacity .15s ease;
}
.krandegan-search-overlay.is-open .krandegan-search-panel{ transform:translateY(0) scale(1); opacity:1; }

.krandegan-search-input-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px var(--cp-space-md);
  border-bottom:1px solid var(--cp-outline-variant);
  flex-shrink:0;
}
.krandegan-search-input-row > .krandegan-icon{ flex-shrink:0; width:20px; height:20px; color:var(--cp-on-surface-variant); }
.krandegan-search-input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-family:var(--cp-font-family);
  font-size:15px;
  color:var(--cp-on-surface);
}
.krandegan-search-close{ flex-shrink:0; width:32px; height:32px; box-shadow:none; }

.krandegan-search-results{
  overflow-y:auto;
  padding:6px;
}
.krandegan-search-results .krandegan-empty{ padding:var(--cp-space-md); margin:0; text-align:center; }

.krandegan-search-result{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-radius:var(--cp-radius);
  padding:10px;
  cursor:pointer;
  font-family:inherit;
  color:var(--cp-on-surface);
}
.krandegan-search-result:hover{ background:var(--cp-surface-container-low); }
.krandegan-search-result-icon{
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:var(--cp-radius-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--cp-surface-container);
  color:var(--cp-on-surface-variant);
}
.krandegan-search-result-icon .krandegan-icon{ width:14px;height:14px; }
.krandegan-search-result-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.krandegan-search-result-title-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.krandegan-search-result-title{
  font-size:13px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.krandegan-search-result-time{ flex-shrink:0; font-size:11px; color:var(--cp-on-surface-variant); }
.krandegan-search-result-snippet{
  font-size:13px;
  line-height:1.4;
  color:var(--cp-on-surface-variant);
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.krandegan-search-result-snippet mark{
  background:var(--cp-primary-fixed);
  color:var(--cp-primary);
  border-radius:2px;
  padding:0 1px;
}

/* ==========================================================================
   Modal Riwayat Chat & Modal "Semua Layanan" (khusus mobile — lihat komentar
   markup-nya di template-parts/chat-widget.php utk alasan kenapa ini dibuat
   terpisah dari drawer sidebar). Struktur & gaya visual keduanya sengaja
   dibuat sama (kartu mengambang di tengah layar dgn header + body yang bisa
   discroll, bukan drawer geser dari samping) — makanya selector-nya
   digabung (.krandegan-history-overlay, .krandegan-layanan-overlay, dst)
   supaya tidak ada duplikasi aturan; yang beda cuma isi body-nya (lihat
   .krandegan-layanan-grid di bawah utk grid kartu layanan 2 kolom).
   ========================================================================== */
.krandegan-history-overlay,
.krandegan-layanan-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  justify-content:center;
  padding:72px var(--cp-space-md) var(--cp-space-md);
  background:rgba(17,17,26,0);
  transition:background .15s ease;
}
.krandegan-history-overlay[hidden],
.krandegan-layanan-overlay[hidden]{ display:none; }
.krandegan-history-overlay.is-open,
.krandegan-layanan-overlay.is-open{ background:rgba(17,17,26,0.4); }

.krandegan-history-panel,
.krandegan-layanan-panel{
  width:100%;
  max-width:480px;
  max-height:calc(100% - 32px);
  display:flex;
  flex-direction:column;
  background:var(--cp-surface-container-lowest);
  border-radius:var(--cp-radius-lg);
  box-shadow:0 16px 40px rgba(0,0,0,0.25);
  overflow:hidden;
  transform:translateY(-8px) scale(.98);
  opacity:0;
  transition:transform .15s ease, opacity .15s ease;
}
.krandegan-history-overlay.is-open .krandegan-history-panel,
.krandegan-layanan-overlay.is-open .krandegan-layanan-panel{ transform:translateY(0) scale(1); opacity:1; }

.krandegan-history-panel-header,
.krandegan-layanan-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px var(--cp-space-md);
  border-bottom:1px solid var(--cp-outline-variant);
  flex-shrink:0;
}
.krandegan-history-panel-header h2,
.krandegan-layanan-panel-header h2{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--cp-on-surface);
}
.krandegan-history-close-btn{ flex-shrink:0; width:32px; height:32px; box-shadow:none; }

.krandegan-history-panel-list,
.krandegan-layanan-panel-list{
  overflow-y:auto;
  padding:6px;
}
.krandegan-history-panel-list .krandegan-empty,
.krandegan-layanan-panel-list .krandegan-empty{ padding:var(--cp-space-md); margin:0; text-align:center; }

/* Grid 2 kolom kartu layanan di dalam modal "Semua Layanan" — beda dgn
   .krandegan-service-scroll (satu baris, scroll horizontal, dipakai di
   dashboard Home & layar "Chat Baru") krn di sini semua layanan sekaligus
   ditampilkan tanpa scroll horizontal, jadi disusun vertikal 2 kolom.
   Kartunya sendiri memakai ulang .krandegan-service-tile yang sama persis
   (icon warna-warni per tipe + label) — cuma lebarnya diubah dari lebar
   tetap (utk scroll) jadi 100% mengikuti kolom grid. */
.krandegan-layanan-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--cp-space-sm);
}
.krandegan-layanan-grid .krandegan-service-tile{ width:100%; }

/* Tombol pilihan ("quick replies") di bawah balasan bot — muncul saat wizard
   "Permohonan Layanan" (lihat inc/form-wizard.php) menanyakan field bertipe
   Dropdown, supaya warga bisa langsung klik salah satu opsi tanpa mengetik. */
.krandegan-quick-replies{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:-6px 0 12px 40px; /* 40px ≈ lebar avatar + gap header bubble bot, biar sejajar isi bubble */
  max-width:calc(100% - 40px);
}
.krandegan-quick-reply-btn{
  padding:8px 14px;
  border:1px solid var(--cp-primary);
  border-radius:var(--cp-radius-full);
  background:var(--cp-surface-container-lowest, transparent);
  color:var(--cp-primary);
  font-size:13px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.krandegan-quick-reply-btn:hover{
  background:var(--cp-primary);
  color:var(--cp-on-primary);
}

/* ==========================================================================
   Toggle Mode Gelap/Terang
   Tombolnya satu (ikon matahari utk ajak pindah ke terang, ikon bulan utk
   ajak pindah ke gelap), tapi HTML-nya berisi kedua ikon sekaligus — yang
   ditampilkan/disembunyikan cukup lewat CSS berdasarkan atribut
   data-theme di #krandegan-chat-app (lihat applyTheme() di chat.js), jadi
   tidak perlu ganti-ganti innerHTML dari JS tiap kali warga klik toggle.
   Default (data-theme belum diset / "light"): tampilkan ikon bulan (ajakan
   pindah ke gelap). Saat data-theme="dark": tampilkan ikon matahari (ajakan
   pindah ke terang). */
.krandegan-theme-toggle-btn .krandegan-theme-icon-sun{ display:none; }
.krandegan-theme-toggle-btn .krandegan-theme-icon-moon{ display:block; }
.krandegan-shell[data-theme="dark"] .krandegan-theme-toggle-btn .krandegan-theme-icon-sun{ display:block; }
.krandegan-shell[data-theme="dark"] .krandegan-theme-toggle-btn .krandegan-theme-icon-moon{ display:none; }