/* Gaya khusus halaman kelompok beranda-kotak: Beranda (views/dashboard.ejs + partials/mulai) dan Percakapan
   (views/kotak-masuk/index.ejs). Komponen bersama (.sapaan, .kartu-progres, .chip, .titik-kanal, .kosong, modal) ada di
   dasar.css/app.css; berkas ini hanya menata tata letak halaman. Semua warna lewat token (mode gelap ikut). */

/* ---------- Avatar inisial (daftar percakapan, tugas Beranda, kepala chat) ---------- */
.bk-av{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;letter-spacing:.01em;line-height:1;background:var(--av-bg);color:var(--av-fg)}
.bk-av .titik-kanal{position:absolute;right:-1px;bottom:-1px;flex:none;width:13px;height:13px;border:2px solid var(--surface)}
.av-0{--av-bg:#E0F2FE;--av-fg:#075985}
.av-1{--av-bg:#EAF1FE;--av-fg:#1D4ED8}
.av-2{--av-bg:#E6F6EC;--av-fg:#15803D}
.av-3{--av-bg:#FFF4E0;--av-fg:#A15C07}
.av-4{--av-bg:#FFEDE8;--av-fg:#B93A22}
.av-5{--av-bg:#EEF2F8;--av-fg:#44506A}
@media (prefers-color-scheme:dark){
  .av-0{--av-bg:#0B2A40;--av-fg:#7DD3FC}
  .av-1{--av-bg:#172A4F;--av-fg:#93C5FD}
  .av-2{--av-bg:#0F2A1C;--av-fg:#86EFAC}
  .av-3{--av-bg:#2E2210;--av-fg:#FCD34D}
  .av-4{--av-bg:#3A211C;--av-fg:#FFB4A3}
  .av-5{--av-bg:#1B2742;--av-fg:#C3CCDD}
}

/* ---------- Modal: judul + keterangan kecil, daftar poin panduan ---------- */
.bk-judul-modal{flex:1;min-width:0}
.bk-poin{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.55;color:var(--fg)}

/* =====================================================================================================
   BERANDA
   ===================================================================================================== */
.sapaan-peran{margin:4px 0 0;font-size:14px;color:var(--fg-muted)}
.br-isi{display:flex;flex-direction:column;gap:20px}
.br-isi>.card.kosong{padding:32px 20px}

/* Kartu "Mulai di sini" (navy, bar koral) */
.br-persiapan h2.kartu-progres-label{font-family:inherit;letter-spacing:0;line-height:1.4}
.br-persiapan .kartu-progres-teks a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.br-persiapan .kartu-progres-teks a:hover{color:var(--nav-fg)}
.br-persiapan>.btn{flex:0 0 auto}

/* Ringkasan (DB03): judul + saringan, empat angka, metrik kecil */
.br-ringkasan{display:flex;flex-direction:column;gap:14px}
.br-alat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin:0}
.br-alat-judul{flex:1 1 220px;min-width:0}
.br-alat-judul h2{display:flex;align-items:center;gap:6px;font-size:18px}
.br-alat-judul h2 .tombol-info{width:28px;height:28px}
.br-alat-judul p{margin:2px 0 0;font-size:13px;color:var(--fg-muted)}
.br-alat-saring{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.br-alat-saring select{width:auto;min-width:180px}
.br-tanggal-atur{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--fg-muted)}
.br-tanggal-atur input[type=date]{width:auto;min-width:150px}
.br-alat-saring .btn .nav-badge{margin-left:2px}
.br-chip-aktif{flex:1 1 100%}
.br-chip-aktif .chip svg{margin-left:2px;opacity:.75}
.br-stat{gap:16px}
.br-stat .stat{display:flex;flex-direction:column;box-shadow:var(--bayang-kartu)}
.br-stat .stat .n{font-size:32px}
.br-stat .stat .d{margin-top:auto;padding-top:4px}
.br-metrik{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px 28px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--bayang-kartu)}
.br-metrik-item{display:flex;flex-direction:column;gap:2px;min-width:150px}
.br-metrik-l{font-size:12.5px;font-weight:700;color:var(--fg-muted)}
.br-metrik-item b{font-size:20px;font-weight:800;line-height:1.25;color:var(--fg-heading)}
.br-metrik-d{font-size:12.5px;color:var(--fg-muted)}
.br-harian{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.br-harian .batang-harian{height:46px;margin:auto 0 0;padding:0;border-bottom-color:var(--border)}
@media (min-width:720px){.br-metrik>*+*{padding-left:28px;border-left:1px solid var(--garis-lembut)}}

/* Perlu tindakan (DB01/DB02) di samping corong (DB04) */
.br-baris{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);align-items:start}
.br-kolom{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));min-width:0}
.br-baris.ada-corong .br-kolom{grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.br-baris.ada-corong{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.br-panel .akordeon-head{align-items:center}
.br-panel .akordeon-head h2 .tombol-info{width:28px;height:28px}
.br-panel .akordeon-body{padding:6px 20px 14px}
.br-tugas{list-style:none;margin:0;padding:0}
.br-tugas li+li{border-top:1px solid var(--garis-lembut)}
.br-tugas a{display:flex;align-items:center;gap:12px;min-height:60px;margin:0 -8px;padding:10px 8px;border-radius:10px;color:inherit;text-decoration:none;transition:background-color .15s}
.br-tugas a:hover{background:var(--bg-kaki);color:inherit}
.br-tugas a:hover .br-tugas-aksi{border-color:var(--primary);color:var(--primary-hover)}
.br-tugas-isi{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.br-tugas-nama{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.br-tugas-nama b{max-width:100%;font-size:14px;color:var(--fg-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-tugas-isi small{font-size:13px;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-tugas-aksi{flex:0 0 auto;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--border-strong);border-radius:9px;font-size:13px;font-weight:700;color:var(--fg);transition:border-color .15s,color .15s}
.br-tugas .angka-peluang{flex:0 0 auto;font-size:15px;font-weight:800;color:var(--koral-kuat)}
.br-tugas .angka-peluang small{font-size:12px;font-weight:600}
.br-kosong{padding:18px 8px 12px}
.br-kosong .kosong-ikon{width:48px;height:48px;border-radius:14px}
.br-corong{list-style:none;margin:0;padding:6px 0 4px;display:flex;flex-direction:column;gap:14px}
.br-corong li{display:flex;flex-direction:column;gap:5px}
.br-corong-atas{display:flex;align-items:baseline;gap:8px;font-size:13.5px}
.br-corong-atas span{font-weight:700;color:var(--fg)}
.br-corong-atas b{margin-left:auto;font-size:15px;font-weight:800;color:var(--fg-heading)}
.br-batang{height:10px;border-radius:999px;background:var(--bg-subtle);overflow:hidden}
.br-batang i{display:block;height:100%;border-radius:999px;background:var(--primary)}
.br-corong small{font-size:12.5px;color:var(--fg-muted)}

/* Rincian per kelompok (DB05–DB09) dalam tab */
.br-rincian{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--bayang-kartu);overflow:hidden}
.br-rincian-kepala{padding:16px 20px 0}
.br-rincian-kepala h2{font-size:17px}
.br-rincian .tab-halaman{margin:4px 20px 0}
.br-rincian .table-wrap{border:0;border-radius:0}
.br-rincian-isi+.br-rincian-isi{border-top:1px solid var(--garis-lembut)}

/* Daftar langkah memulai (modal "Mulai di sini" & halaman Panduan memulai) */
.mulai-langkah{margin:0;padding:0;gap:0}
.mulai-langkah li{align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--garis-lembut)}
.mulai-langkah li:first-child{border-top:0;padding-top:4px}
.mulai-no{flex:0 0 28px;width:28px;height:28px;border:2px solid var(--border-strong);border-radius:999px;background:var(--surface);font-size:12px;font-weight:800;color:var(--fg-muted)}
.mulai-langkah li.berikut .mulai-no{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.mulai-langkah li.selesai .mulai-no{background:var(--accent-subtle);border-color:var(--accent-subtle);color:var(--accent)}
.mulai-isi b{display:block;font-size:14.5px;font-weight:700;line-height:1.4;color:var(--fg-heading)}
.mulai-langkah li.selesai .mulai-isi b{font-weight:500;color:var(--fg-muted)}
.mulai-isi p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--fg-muted)}
.mulai-isi .mulai-catatan{font-size:12.5px;font-style:italic}
.mulai-aksi{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;align-self:center}

@media (max-width:560px){
  .br-persiapan>.btn,.br-alat-saring,.br-alat-saring select{width:100%}
  .br-alat-saring>.btn{flex:1}
  .br-stat{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .br-stat .stat{padding:14px}
  .br-stat .stat .n{font-size:clamp(18px,5.6vw,24px);overflow-wrap:anywhere}
  .br-stat .stat .d{font-size:12px}
  .br-metrik-item{min-width:0;flex:1 1 40%}
  .br-panel .akordeon-body{padding:4px 16px 12px}
  .br-tugas-aksi{display:none}
  .mulai-langkah li{flex-wrap:wrap}
  .mulai-aksi{flex-basis:100%;justify-content:flex-start;padding-left:40px}
}

/* =====================================================================================================
   PERCAKAPAN — tiga kolom setinggi layar: daftar (KM01) · chat (KM02) · data calon pasien (KM03/KM04)
   ===================================================================================================== */
body:has(.km) .page-head{margin-bottom:16px}
.km-status-ai{gap:6px}
.km-status-ai svg{flex:none}
.km{display:grid;grid-template-columns:320px minmax(0,1fr);height:calc(100vh / var(--skala) - var(--topbar-h) - 32px);height:calc(100dvh / var(--skala) - var(--topbar-h) - 32px);min-height:520px;max-height:1400px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--bayang-kartu);overflow:hidden;scroll-margin-top:calc(var(--topbar-h) + 16px)}
.km.ada-lead{grid-template-columns:320px minmax(0,1fr) 312px}
.km [id^=KM]{scroll-margin-top:calc(var(--topbar-h) + 16px)}
.km .akordeon{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}

/* Kolom 1: cari, saring status, chip kanal, daftar */
.km-daftar{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--garis-lembut)}
.km-daftar-atas{display:flex;flex-direction:column;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--garis-lembut)}
.km-cari{position:relative;display:flex;align-items:center;margin:0}
.km-cari>svg{position:absolute;left:12px;color:var(--fg-muted);pointer-events:none}
.km-cari input[type=search]{min-height:42px;padding:8px 40px 8px 38px;border-color:var(--border);background:var(--bg-kaki)}
.km-cari input[type=search]:focus{background:var(--surface)}
.km-cari input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.km-cari-hapus{position:absolute;right:4px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--fg-muted)}
.km-cari-hapus:hover{background:var(--bg-subtle);color:var(--fg-heading)}
.km-segmen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:10px;background:var(--bg-subtle)}
.km-segmen a{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:36px;padding:0 8px;border-radius:8px;font-size:13px;font-weight:600;color:var(--fg-muted);text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.km-segmen a span{overflow:hidden;text-overflow:ellipsis}
.km-segmen a b{font-size:12px;font-weight:800;color:inherit}
.km-segmen a:hover{color:var(--fg-heading)}
.km-segmen a[aria-current]{background:var(--surface);color:var(--fg-heading);font-weight:700;box-shadow:0 1px 2px rgba(15,30,61,.10)}
.km-segmen a[aria-current] b{color:var(--primary)}
@media (prefers-color-scheme:dark){.km-segmen a[aria-current]{background:var(--primary-subtle);box-shadow:none}}
/* Semua pilihan kanal terlihat (dibungkus ke baris berikut), tidak digulir menyamping. */
.km-kanal{flex-wrap:wrap;gap:5px}
.km-kanal .chip{gap:5px;height:32px;padding:0 10px;font-size:12px}
.km-kanal .chip .jumlah{font-size:11.5px;color:var(--fg-muted)}
.km-kanal .chip[aria-current] .jumlah{color:inherit}
.km-segera{font-style:normal;font-weight:500;color:var(--fg-muted)}
.km-daftar-gulir{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 10px;scrollbar-width:thin}
/* position:relative: teks .sr-only (absolute) di tiap baris ikut terpotong area gulir — tanpa ini halaman ikut memanjang sepanjang daftar. */
.km-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.km-item{display:flex;gap:12px;padding:10px;border-radius:12px;color:inherit;text-decoration:none;transition:background-color .15s}
.km-item:hover{background:var(--bg-kaki);color:inherit}
.km-item.on{background:var(--primary-subtle)}
.km-item.on .bk-av .titik-kanal{border-color:var(--primary-subtle)}
.km-item:hover .bk-av .titik-kanal{border-color:var(--bg-kaki)}
.km-item-isi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.km-item-atas{display:flex;align-items:baseline;gap:8px}
.km-item-atas b{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--fg-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.km-item-atas time{flex:0 0 auto;font-size:12px;color:var(--fg-muted)}
.km-item.belum .km-item-atas time{font-weight:700;color:var(--koral-kuat)}
.km-item-cuplik{font-size:13px;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.km-item.belum .km-item-cuplik{font-weight:600;color:var(--fg)}
.km-item-bawah{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-top:3px}
.km-item-bawah .badge{padding:1px 8px;font-size:11px}
.km-item-peluang{font-size:12px;font-weight:700;color:var(--fg-muted)}
.km-item-bawah .menunggu{font-size:12px;font-weight:700;color:var(--warning)}
.km-item-bawah .nav-badge{margin-left:auto}
.km-lebih{display:flex;justify-content:center;padding:10px 0 4px}
.km-kosong-daftar{padding:40px 16px}

/* Kolom 2: chat */
.km-chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-kaki)}
.km .km-chat{overflow:hidden}
.km-chat-kosong{align-items:center;justify-content:center}
.km .km-chat-kepala{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--garis-lembut)}
.km-chat-kepala .judul{flex:1 1 120px;min-width:0}
.km-chat-kepala h2{display:block;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.km-chat-kepala .ringkas{margin:1px 0 0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.km-chat-kepala .aksi{flex:0 1 auto;justify-content:flex-end;gap:8px}
.km-chat-kepala .badge svg{flex:none}
.km-kembali{display:none;flex:0 0 40px;width:40px;height:40px;align-items:center;justify-content:center;margin-left:-8px;border-radius:10px;color:var(--fg)}
.km-kembali:hover{background:var(--bg-subtle);color:var(--fg-heading)}
.km-tombol-panel{display:none}
.km .km-pita{flex:0 0 auto;margin:0;padding:8px 16px;border-radius:0;font-size:13px}
.km .utas{flex:1 1 auto;min-height:0;max-height:none;margin:0;padding:18px 24px;gap:10px;border-radius:0;background:transparent;overscroll-behavior:contain}
.km .utas-hari{margin:8px 0}
.km .utas-hari span{padding:4px 12px;border:0;background:var(--bg-subtle);font-weight:600}
.km .ps{max-width:min(72%,560px);padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.5}
.km .ps-masuk{background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
.km .ps-keluar,.km .ps-keluar.ps-ai{background:var(--primary-subtle);border:1px solid transparent;border-bottom-right-radius:4px}
.km .ps-catatan{max-width:92%;border-radius:12px;font-size:13.5px}
.km .ps-sistem.ps-catatan{border:1px dashed var(--border-strong)}
.km .ps-meta{gap:4px 8px}
.km .ps-keluar .ps-meta{justify-content:flex-end}
.ps-kanal{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.ps-kanal .titik-kanal{flex:0 0 7px;width:7px;height:7px}
.km-utas-kosong{margin:auto;max-width:42ch;text-align:center;font-size:13px;color:var(--fg-muted)}
.km .pita-baru{flex:0 0 auto;align-self:center;margin:0 0 8px}
.km .jendela-wa{flex:0 0 auto;margin:0;padding:8px 16px;border:0;border-top:1px solid var(--garis-lembut);border-radius:0}
.km .jendela-wa.tertutup{border-color:var(--garis-lembut)}
.km-tulis{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;margin:0;padding:12px 16px 14px;background:var(--surface);border-top:1px solid var(--garis-lembut)}
.km-tulis textarea{min-height:52px;max-height:200px;resize:none;padding:12px 14px;border-color:var(--border);border-radius:12px;background:var(--bg-kaki)}
.km-tulis textarea:focus{background:var(--surface)}
.km-usulan-catatan{margin:0;font-size:12.5px;color:var(--fg-muted)}
.km-tulis-aksi{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.km-alat{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:9px;background:var(--bg-subtle);font:inherit;font-size:13px;font-weight:600;color:var(--fg);cursor:pointer;transition:background-color .15s,color .15s}
.km-alat:hover{background:var(--border);color:var(--fg-heading)}
.km-alat[disabled]{opacity:.6;cursor:progress}
.km-alat svg{flex:none}
.km-lewat{display:inline-flex;align-items:center;gap:6px}
.km-lewat label{margin:0;font-size:12.5px;font-weight:600;color:var(--fg-muted);white-space:nowrap}
.km-lewat select{width:auto;min-height:40px;padding:6px 10px;font-size:14px}
.km-bantu{margin:0;font-size:12.5px}

/* Kolom 3: data calon pasien */
.km-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-left:1px solid var(--garis-lembut);background:var(--surface);scrollbar-width:thin}
.km-panel-kepala{display:none}
.km-blok+.km-blok{border-top:1px solid var(--garis-lembut)}
.km .km-blok .akordeon-head{padding:16px 18px 4px;border:0;background:transparent}
.km-blok .akordeon-head h2{font-size:15px}
.km-blok .akordeon-head .ringkas{font-size:12.5px}
.km .km-blok .akordeon-body{padding:6px 18px 18px}
.km-blok .sub-judul{font-size:12px;font-weight:800;letter-spacing:.04em}
.km-label{margin:8px 0 4px}
.km .langkah-berikut{margin:10px 0;padding:12px 14px;border-radius:12px;background:var(--bg)}
.km .langkah-berikut p{color:var(--fg)}
.km .langkah-berikut .btn{margin-top:10px}
.km-analisa{margin-top:14px}
.km-tahap{list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.km-tahap li{display:flex;align-items:center;gap:10px;min-height:24px;font-size:13.5px;color:var(--fg-muted)}
.km-tahap-titik{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--border-strong);border-radius:999px;background:var(--surface)}
.km-tahap li.lewat .km-tahap-titik{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}
.km-tahap li.kini{font-weight:800;color:var(--fg-heading)}
.km-tahap li.kini .km-tahap-titik{border:6px solid var(--primary)}
.km-tahap li.kini.gugur .km-tahap-titik{border-color:var(--danger)}
.km-tahap li small{margin-left:auto;font-size:12px;font-weight:600;color:var(--fg-muted)}
.km-tahap li.kini.gugur small{color:var(--danger)}
.km-tahap-aksi{margin:0 0 16px}
.km-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0;font-size:13px}
.km-data>div{min-width:0}
.km-data>.penuh{grid-column:1/-1}
.km-data.satu{grid-template-columns:minmax(0,1fr)}
.km-data dt{color:var(--fg-muted)}
.km-data dd{margin:2px 0 0;font-weight:700;color:var(--fg-heading);overflow-wrap:anywhere}
.km-lainnya{margin-top:14px;padding-top:6px;border-top:1px solid var(--garis-lembut)}
.km-lainnya summary{display:flex;align-items:center;min-height:36px;font-size:13px;font-weight:700;color:var(--primary);cursor:pointer}
.km-lainnya[open] summary{margin-bottom:8px}
.km-lainnya .km-data dd{font-weight:600}
.km-tombol-riwayat{margin-top:12px}
.km-latar{display:none}

/* Modal Percakapan: template WhatsApp, riwayat */
#m-template .pilih-template{margin:0 0 10px;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
#m-template .pilih-template summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:48px;padding:10px 14px}
#m-template .pilih-template[open] summary{border-bottom:1px solid var(--garis-lembut)}
#m-template .pilih-template form{padding:12px 14px 14px}
#m-template .pilih-template .modal-foot{position:static;margin:12px 0 0;padding:0;border:0;background:none}
#m-riwayat .sub-judul:first-of-type{margin-top:0}
#m-riwayat .table-wrap{margin-top:6px}
#m-riwayat .tabel-kecil td{padding:8px 12px}

@media (max-width:1440px){.km.ada-lead{grid-template-columns:296px minmax(0,1fr) 288px}}
/* Layar sedang: kolom data jadi laci kanan (tombol "Data pasien" di kepala chat) */
@media (max-width:1280px){
  .km.ada-lead{grid-template-columns:300px minmax(0,1fr)}
  .km-tombol-panel{display:inline-flex}
  .km-panel{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(380px,92vw);border-left:0;box-shadow:-20px 0 50px rgba(15,30,61,.25);
    transform:translateX(105%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
  .km.panel-buka .km-panel{transform:none;visibility:visible;transition:transform .2s ease}
  .km-panel-kepala{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 18px;background:var(--surface);border-bottom:1px solid var(--garis-lembut)}
  .km-panel-kepala h2{flex:1;font-size:17px}
  .km.panel-buka .km-latar{display:block;position:fixed;inset:0;z-index:55;background:rgba(15,30,61,.5)}
}
@media (max-width:1024px){.km,.km.ada-lead{grid-template-columns:280px minmax(0,1fr)}}

/* HP & tablet kecil: daftar ATAU chat */
@media (max-width:860px){
  .km,.km.ada-lead{display:block;height:auto;min-height:0;max-height:none;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .km-daftar{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
  .km-daftar-gulir{overflow:visible}
  .km-chat-kosong{display:none}
  .km.ada-lead .km-daftar{display:none}
  .km.ada-lead .km-chat{height:calc(100vh - var(--topbar-h) - 36px);height:calc(100dvh - var(--topbar-h) - 36px);min-height:440px;border:1px solid var(--border);border-radius:var(--radius-lg)}
  .km-kembali{display:inline-flex}
  body:has(.km.ada-lead) .page-head{display:none}
  .km .utas{padding:14px 12px}
  .km .ps{max-width:86%}
  .km .km-chat-kepala{padding:10px 12px}
  .km-lewat label{display:none}
  .km-lewat select{font-size:16px}
}
@media (min-width:480px) and (max-width:860px){.km-segmen{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){
  .km-chat-kepala .aksi{flex:1 1 100%;justify-content:flex-start}
  .km-tombol-panel span,.km-alat span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .km-alat{padding:0 11px}
  .km-tulis{padding:10px 12px 12px}
}
@media (prefers-reduced-motion:reduce){.km-panel,.km.panel-buka .km-panel{transition:none}}
@media print{.km{height:auto;max-height:none;display:block}.km-daftar,.km-tulis,.km-tombol-panel,.km-latar{display:none}.km-panel{position:static;transform:none;visibility:visible}}

/* =====================================================================================================
   PERCAKAPAN — dua pilihan tampilan (tombol di kepala halaman, diingat di sesi):
   km-g1 = seperti WhatsApp (daftar + chat; data pasien di laci kanan) · km-g3 = saringan di kolom kiri + profil di kanan
   ===================================================================================================== */
.km-gaya{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--bg-subtle)}
.km-gaya a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:32px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--fg-muted);text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.km-gaya a:hover{color:var(--fg-heading)}
.km-gaya a[aria-current]{background:var(--surface);color:var(--fg-heading);box-shadow:0 1px 2px rgba(15,30,61,.10)}
.km-gaya-label{align-self:center;padding:0 6px 0 8px;font-size:12.5px;font-weight:700;color:var(--fg-muted)}
.km-item-titik{display:none}
.km-rail{display:none}
.km-pakai-usulan{gap:6px}

/* ---------- Gaya WhatsApp ---------- */
.km-g1,.km-g1.ada-lead{grid-template-columns:340px minmax(0,1fr)}
.km-g1 .km-daftar-atas{gap:10px;padding:14px 14px 4px;border-bottom:0}
.km-g1 .km-segmen{display:flex;gap:0;padding:0;border-radius:0;background:none;border-bottom:1px solid var(--garis-lembut);overflow-x:auto;scrollbar-width:none}
.km-g1 .km-segmen a{flex:1 0 auto;min-height:40px;margin-bottom:-1px;padding:0 8px;border-radius:0;border-bottom:2px solid transparent}
.km-g1 .km-segmen a[aria-current]{background:none;box-shadow:none;color:var(--primary);border-bottom-color:var(--primary)}
.km-g1 .km-segmen a[aria-current] b{color:inherit}
.km-g1 .km-daftar-gulir{padding:0;border-top:1px solid var(--garis-lembut)}
.km-g1 .km-list{gap:0}
.km-g1 .km-item{padding:12px 14px;border-radius:0;border-bottom:1px solid var(--garis-lembut)}
.km-g1 .bk-av{flex-basis:46px;width:46px;height:46px;font-size:15px}
.km-g1 .km-item .bk-av .titik-kanal{width:15px;height:15px}
.km-g1 .km-item-bawah .nav-badge{background:var(--primary);color:var(--on-primary)}
.km-g1 .km-chat{background:var(--bg-subtle)}
.km-g1 .ps-masuk{border-color:transparent;box-shadow:0 1px 1px rgba(15,30,61,.08)}
.km-g1 .km-tulis textarea{min-height:46px;padding:12px 18px;border-radius:22px}
.km-g1 .km-kirim{border-radius:999px;padding:0 20px}
.km-g1 .km-tombol-panel{display:inline-flex}
/* Data pasien selalu laci kanan (tombol "Data pasien" di kepala chat), di semua lebar layar */
.km-g1 .km-panel{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(380px,92vw);border-left:0;box-shadow:-20px 0 50px rgba(15,30,61,.25);
  transform:translateX(105%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
.km-g1.panel-buka .km-panel{transform:none;visibility:visible;transition:transform .2s ease}
.km-g1 .km-panel-kepala{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 18px;background:var(--surface);border-bottom:1px solid var(--garis-lembut)}
.km-g1 .km-panel-kepala h2{flex:1;font-size:17px}
.km-g1.panel-buka .km-latar{display:block;position:fixed;inset:0;z-index:55;background:rgba(15,30,61,.5)}

/* ---------- Gaya profil di samping ---------- */
.km-g3 .km-item .bk-av{display:none}
.km-g3 .km-item-titik{display:inline-block;flex:0 0 8px;width:8px;height:8px;align-self:center}
.km-g3 .km-item.on{box-shadow:inset 3px 0 0 var(--primary)}
.km-g3 .km-panel{background:var(--bg-kaki)}
.km-g3 .langkah-berikut{background:var(--primary-subtle)}
.km-g3 .meter-atas b{font-size:20px}
.km-rail nav{display:flex;flex-direction:column;gap:2px}
.km-rail-judul{margin:0 0 4px;padding:0 10px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)}
.km-rail a{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--fg);text-decoration:none;transition:background-color .15s,color .15s}
.km-rail a:hover{background:var(--bg-subtle);color:var(--fg-heading)}
.km-rail a[aria-current]{background:var(--primary-subtle);color:var(--primary-hover);font-weight:700}
.km-rail a span:not(.titik-kanal){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.km-rail a .titik-kanal{flex:0 0 8px;width:8px;height:8px}
.km-rail a b{font-size:12px;font-weight:700;color:var(--fg-muted)}
.km-rail a[aria-current] b{color:inherit}
.km-rail b.km-rail-perlu{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--koral);color:var(--koral-teks);text-align:center}
@media (min-width:1360px){
  .km-g3{grid-template-columns:176px 290px minmax(0,1fr)}
  .km-g3.ada-lead{grid-template-columns:176px 290px minmax(0,1fr) 300px}
  .km-g3 .km-rail{display:flex;flex-direction:column;gap:20px;min-height:0;overflow-y:auto;padding:16px 10px;background:var(--bg-kaki);border-right:1px solid var(--garis-lembut)}
  .km-g3 .km-segmen,.km-g3 .km-kanal{display:none}
}
@media (prefers-reduced-motion:reduce){.km-g1 .km-panel,.km-g1.panel-buka .km-panel{transition:none}}

/* ---------- Lampiran (gambar/dokumen) di kotak balas & di utas ---------- */
.km-lampiran-pilih{position:relative;cursor:pointer}
.km-lampiran-pilih input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.km-lampiran-pilih:focus-within{outline:2px solid var(--ring);outline-offset:2px}
.km-lampiran-chip{display:flex;align-items:center;gap:8px;margin:0;padding:4px 4px 4px 12px;border-radius:10px;background:var(--primary-subtle);font-size:13px;font-weight:600;color:var(--fg-heading)}
.km-lampiran-chip[hidden]{display:none}
.km-lampiran-chip svg{flex:none;color:var(--primary)}
.km-lampiran-chip span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.km-lampiran-hapus{flex:0 0 32px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--fg-muted);cursor:pointer}
.km-lampiran-hapus:hover{background:var(--surface);color:var(--fg-heading)}
.km .ps-gambar{display:block;max-width:280px;margin:0 0 6px;border-radius:12px;overflow:hidden;background:var(--bg-subtle)}
.km .ps-gambar img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.km .ps-berkas{display:flex;align-items:center;gap:10px;min-width:220px;margin:0 0 6px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:13.5px;font-weight:600;color:var(--fg-heading);text-decoration:none}
.km .ps-berkas:hover{border-color:var(--primary);color:var(--fg-heading)}
.km .ps-suara{display:block;width:260px;max-width:100%;height:40px;margin:0 0 6px}
.km .ps-berkas svg{flex:none;color:var(--primary)}
.km .ps-berkas span{flex:1;min-width:0;overflow-wrap:anywhere}
.km .ps-berkas small{flex:none;font-size:12px;font-weight:500;color:var(--fg-muted)}
/* Percakapan › Komentar (views/komentar/index.ejs) */
.kmt-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px;font-size:14px}
.kmt-kanal{display:inline-flex;align-items:center;gap:6px}
.kmt-redup{color:var(--fg-muted)}
.kmt-saring{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.kmt-saring a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--fg);font-size:13.5px;font-weight:600;text-decoration:none}
.kmt-saring a[aria-current]{border-color:var(--primary);background:var(--primary-subtle);color:var(--primary)}
.kmt-saring small{color:var(--fg-muted);font-weight:600}
.kmt-kosong{text-align:center;padding:32px 20px}
.kmt-daftar{display:flex;flex-direction:column;gap:14px}
.kmt-kartu{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--bayang-kartu);padding:16px 18px;scroll-margin-top:calc(var(--topbar-h) + 16px)}
.kmt-kartu.kmt-perlu{border-left:4px solid var(--koral)}
.kmt-post{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--garis-lembut);font-size:13px;line-height:1.5}
.kmt-post a{display:inline-flex;align-items:center;gap:4px;margin-left:6px;white-space:nowrap}
.kmt-post-teks{color:var(--fg)}
.kmt-utama{display:flex;gap:12px;align-items:flex-start}
.kmt-avatar{flex:0 0 36px;width:36px;height:36px}
.kmt-isi{flex:1;min-width:0}
.kmt-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:13.5px}
.kmt-kepala time{font-size:12.5px}
.kmt-teks{margin:4px 0 0;font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.kmt-cs{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--koral-kuat)}
.kmt-aksi{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.kmt-aksi:empty{display:none}
.kmt-tautan{padding:0;border:0;background:none;color:var(--fg-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.kmt-tautan:hover{color:var(--primary);text-decoration:underline}
.kmt-bahaya:hover{color:var(--danger)}
.kmt-balasan{list-style:none;margin:12px 0 0 48px;padding:0;display:flex;flex-direction:column;gap:10px}
.kmt-balasan li{padding:10px 12px;border-radius:12px;background:var(--bg-subtle)}
.kmt-balasan li.kmt-milik{background:var(--primary-subtle)}
.kmt-balas{margin:12px 0 0 48px}
.kmt-balas summary{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border:1px solid var(--primary);border-radius:999px;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--primary);list-style:none}
.kmt-balas summary:hover{background:var(--primary-subtle)}
.kmt-balas summary::-webkit-details-marker{display:none}
.kmt-balas[open] summary{margin-bottom:8px}
.kmt-balas .field{margin-bottom:10px}
.kmt-balas textarea{width:100%;min-height:0}
.kmt-catatan{margin:0 0 8px}
.kmt-konten{scroll-margin-top:calc(var(--topbar-h) + 16px)}
.kmt-konten-perlu{border-left:4px solid var(--koral)}
.kmt-konten .akordeon-head{cursor:pointer;align-items:center}
.kmt-konten .akordeon-head .toggle{margin-top:0}
.kmt-konten .akordeon-head h2{font-size:15px;font-weight:700;line-height:1.4}
.kmt-konten-teks{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.kmt-konten .ringkas a{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.kmt-hitung{flex:0 0 auto;justify-content:flex-end}
.kmt-konten-isi{display:flex;flex-direction:column;gap:12px;padding:14px 16px;background:var(--bg-subtle)}
.kmt-konten .kmt-kartu{box-shadow:none}
.kmt-konten .kmt-kartu.kmt-perlu{border-left-width:4px}
.kmt-sisa{margin:0;text-align:center}
.kmt-alat .kmt-urut{display:flex;align-items:center;gap:8px;margin:0}
.kmt-urut label{margin:0;font-size:13.5px;font-weight:600;color:var(--fg-muted);white-space:nowrap}
.kmt-urut select{width:auto;min-width:0}
.kmt-lampiran input[type=file]{max-width:100%;font-size:13.5px}
.kmt-lampiran input[type=file]::file-selector-button{margin-right:10px;padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.kmt-lampiran input[type=file]::file-selector-button:hover{border-color:var(--primary);color:var(--primary)}
@media (max-width:640px){.kmt-balasan,.kmt-balas{margin-left:0}.kmt-kartu{padding:14px}.kmt-konten .akordeon-head{flex-wrap:wrap}.kmt-hitung{width:100%;justify-content:flex-start;padding-left:30px}.kmt-konten-isi{padding:12px}.kmt-alat .kmt-urut{flex:1 1 0;min-width:0}.kmt-urut select{flex:1;min-width:0}}
/* Banyak nomor WhatsApp: tanda nomor berwarna di daftar, kepala percakapan, gelembung, dan saringan */
.km-nomor-titik{display:inline-block;flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--warna,#2563EB)}
.km .km-nomor{display:inline-flex;align-items:center;gap:5px;max-width:150px;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:18px;
  color:var(--warna);background:color-mix(in srgb,var(--warna) 10%,transparent);border:1px solid color-mix(in srgb,var(--warna) 35%,transparent)}
.km .km-nomor-nama{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.km .km-lewat-nomor{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:12.5px;color:var(--fg-muted)}
.km .km-lewat-nomor .km-nomor{max-width:260px}
.km .ps-lewat{display:inline-flex;align-items:center;gap:4px}
.km .km-saring-nomor .chip{gap:6px}