/* dasbor.css — kotak masuk dan halaman masuk kitasapa.
   Tata letak dan nuansa mengikuti aplikasi obrolan desktop yang sudah akrab bagi pengguna
   (dua panel, gelembung berekor, centang status). Tanpa logo, nama, atau gambar milik pihak lain:
   latar obrolan memakai pola CSS buatan sendiri. */
:root{
  --latar-app:#eae6df; --panel:#ffffff; --kepala:#f0f2f5; --garis:#e9edef; --garis2:#d1d7db;
  --tx:#111b21; --tx2:#54656f; --tx3:#667781;
  --aksen:#00a884; --aksen-tua:#008069; --aksen-muda:#d9fdd3; --pilih:#f0f2f5; --hover:#f5f6f6;
  --obrolan:#efeae2; --pola:rgba(0,0,0,.035);
  --masuk:#ffffff; --keluar:#d9fdd3; --centang-baca:#53bdeb;
  --kuning:#f5b83d; --merah:#ea0038;
  --bayang-gel:0 1px .5px rgba(11,20,26,.13);
  --bayang2:0 20px 60px -15px rgba(11,20,26,.35);
}
@media (prefers-color-scheme:dark){
  :root{
    --latar-app:#0c1317; --panel:#111b21; --kepala:#202c33; --garis:#222d34; --garis2:#313d45;
    --tx:#e9edef; --tx2:#aebac1; --tx3:#8696a0;
    --aksen:#00a884; --aksen-tua:#00a884; --aksen-muda:#103529; --pilih:#2a3942; --hover:#202c33;
    --obrolan:#0b141a; --pola:rgba(255,255,255,.025);
    --masuk:#202c33; --keluar:#005c4b; --centang-baca:#53bdeb;
    --bayang-gel:0 1px .5px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--latar-app);color:var(--tx);
  font:14.2px/1.45 "Segoe UI","Helvetica Neue",Helvetica,"Lucida Grande",Arial,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
a{color:var(--aksen-tua)}
.redup{color:var(--tx2)} .kecil{font-size:13px}

/* tombol */
.tbl{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 20px;border-radius:24px;border:1px solid transparent;
  background:var(--aksen);color:#fff;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s}
.tbl:hover{background:#06cf9c}
.tbl:disabled{opacity:.55;cursor:default}
.tbl.lebar{width:100%}
.tbl-hantu{background:transparent;color:var(--aksen-tua);border-color:var(--garis2)} .tbl-hantu:hover{background:var(--hover)}
.tbl-ikon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--tx2);cursor:pointer}
.tbl-ikon:hover{background:rgba(11,20,26,.06)}
@media (prefers-color-scheme:dark){.tbl-ikon:hover{background:rgba(255,255,255,.06)}}
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px}

/* merek kitasapa */
.merek{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--tx);text-decoration:none}
.merek-titik{display:inline-block;width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#1fd18b,#0f7a4f);position:relative}
.merek-titik::after{content:"";position:absolute;inset:7px 6px 8px 7px;border-radius:3px 3px 3px 0;background:#fff}
.merek-titik.besar{width:72px;height:72px;border-radius:22px}
.merek-titik.besar::after{inset:21px 18px 24px 21px;border-radius:6px 6px 6px 0}

/* ================= halaman masuk ================= */
.hal-masuk{display:grid;place-items:center;min-height:100%;padding:24px;
  background:linear-gradient(var(--aksen-tua) 0 222px,var(--latar-app) 222px)}
@media (prefers-color-scheme:dark){.hal-masuk{background:linear-gradient(#1f2c33 0 222px,var(--latar-app) 222px)}}
.masuk-bungkus{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.hal-masuk .merek{color:#fff}
.masuk-kartu{width:100%;background:var(--panel);border-radius:6px;padding:34px;box-shadow:0 17px 50px 0 rgba(11,20,26,.19),0 12px 15px 0 rgba(11,20,26,.24);text-align:left;display:flex;flex-direction:column;gap:8px}
.masuk-kartu h1{font-size:24px;font-weight:300;margin:0}
.masuk-kartu .redup{margin:0 0 12px}
.masuk-kartu label{font-size:14px;color:var(--tx2);margin-top:6px}
.masuk-kartu input{padding:10px 2px;border:0;border-bottom:2px solid var(--garis2);background:transparent;border-radius:0}
.masuk-kartu input:focus{outline:none;border-bottom-color:var(--aksen)}
.masuk-kartu .tbl{margin-top:18px;padding:11px}
.galat{margin:6px 0 0;padding:9px 12px;border-radius:8px;background:color-mix(in srgb,var(--merah) 10%,transparent);color:var(--merah);font-size:14px}

/* ================= dasbor ================= */
.spanduk-demo{flex:none;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px 16px;font-size:13.5px;background:var(--aksen-tua);color:#e9f7f1}
@media (prefers-color-scheme:dark){.spanduk-demo{background:#1f2c33}}
.spanduk-demo strong{color:#fff}
.tbl-kecil{padding:5px 14px;font-size:13px;background:#fff;color:var(--aksen-tua)}
.tbl-kecil:hover{background:#d9fdd3}
.tautan-kembali{color:#cdeee2;font-size:13px}
.hal-dasbor{overflow:hidden;display:flex;flex-direction:column}
.spanduk-simulasi{flex:none;padding:7px 16px;font-size:13px;text-align:center;background:#fff4d6;color:#6b4e00;border-bottom:1px solid #f0dca3}
@media (prefers-color-scheme:dark){.spanduk-simulasi{background:#2b240f;color:#f1dc9b;border-color:#4a3d16}}
.rangka{flex:1;display:flex;min-height:0;max-width:1700px;width:100%;margin:0 auto;background:var(--panel);box-shadow:0 6px 18px rgba(11,20,26,.05)}

/* rel ikon */
.rel{width:64px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;background:var(--kepala);border-right:1px solid var(--garis)}
.rel-item{position:relative;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--tx2);cursor:pointer}
.rel-item:hover{background:rgba(11,20,26,.07)}
.rel-item.aktif{background:rgba(11,20,26,.1);color:var(--tx)}
@media (prefers-color-scheme:dark){.rel-item:hover{background:rgba(255,255,255,.07)}.rel-item.aktif{background:rgba(255,255,255,.1)}}
.rel-lencana{position:absolute;top:-2px;right:-4px;font-style:normal;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--aksen);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
.rel-bawah{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px}

.utama{flex:1;display:flex;flex-direction:column;min-width:0}
.layar{flex:1;min-height:0;display:none}
.layar.aktif{display:flex}

/* avatar */
.avatar{flex:none;width:49px;height:49px;border-radius:50%;display:grid;place-items:center;font-weight:500;font-size:16px;color:#fff;background:#dfe5e7}
.avatar.kecil{width:32px;height:32px;font-size:12px}
.avatar{overflow:hidden}
.avatar img{display:block;width:100%;height:100%;object-fit:cover}
.avatar[data-w="0"]{background:#25a28a}.avatar[data-w="1"]{background:#5b7fd6}.avatar[data-w="2"]{background:#9a6bd4}
.avatar[data-w="3"]{background:#e07b39}.avatar[data-w="4"]{background:#35a2b6}.avatar[data-w="5"]{background:#d9537b}

/* panel daftar */
.kotak{flex:1;display:flex;min-width:0}
/* Lebar daftar chat diatur pengguna (geser pembatas); batasnya dijaga dasbor.js. */
.daftar.lebar-diatur{min-width:0;max-width:none}
.geser-daftar{flex:none;width:9px;margin:0 -4px 0 -5px;position:relative;z-index:3;cursor:col-resize;touch-action:none;outline:none}
.geser-daftar::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:transparent;transition:background .15s,width .15s}
.geser-daftar:hover::after,.geser-daftar:focus-visible::after,.geser-daftar.aktif::after{left:3px;width:3px;background:var(--aksen)}
body.sedang-geser{cursor:col-resize;user-select:none}
.daftar{width:var(--lebar-daftar,30%);min-width:340px;max-width:460px;flex:none;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--garis)}
.daftar-kepala{padding:12px 16px 6px}
.judul-baris{display:flex;align-items:center;justify-content:space-between;height:40px}
.daftar-kepala h1{font-size:22px;font-weight:700;margin:0}
.status-sambung{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--aksen-tua)}
.status-sambung i{position:relative;width:7px;height:7px;border-radius:50%;background:#25d366}
.status-sambung i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;animation:detakSambung 1.8s ease-out infinite}
@keyframes detakSambung{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.8);opacity:0}}
.status-sambung.putus{color:var(--tx3)}
.status-sambung.putus i{background:var(--tx3);opacity:.6}
.status-sambung.putus i::after{display:none}
@media (prefers-reduced-motion:reduce){.status-sambung i::after{animation:none;display:none}}
@media (prefers-color-scheme:dark){.status-sambung{color:#00a884}}
.pilih-nomor{display:flex;align-items:center;gap:8px;margin-top:4px}
.pilih-nomor select{flex:1;min-width:0;border:0;background:transparent;color:var(--tx2);font-size:13.5px;padding:2px 0;cursor:pointer}
.pilih-nomor select:focus{outline:none}
.titik-kualitas{width:9px;height:9px;border-radius:50%;background:var(--tx3);flex:none}
.titik-kualitas.GREEN{background:var(--aksen)}.titik-kualitas.YELLOW{background:var(--kuning)}.titik-kualitas.RED{background:var(--merah)}
.saya{margin:2px 0 0;font-size:12.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saya strong{font-weight:500;color:var(--tx2)}

.cari-bungkus{padding:4px 12px 8px;border-bottom:1px solid var(--garis)}
.cari{display:flex;align-items:center;gap:14px;height:35px;padding:0 12px;border-radius:8px;background:var(--kepala);color:var(--tx3)}
.cari svg{width:18px;height:18px}
.cari input{flex:1;border:0;background:transparent;outline:none;color:var(--tx);font-size:14px}
.cari input::placeholder{color:var(--tx3)}
.saring{display:flex;gap:8px;margin-top:10px}
.saring-item{border:0;background:var(--kepala);border-radius:18px;padding:6px 12px;font-size:14px;color:var(--tx2);cursor:pointer}
.saring-item:hover{filter:brightness(.97)}
.saring-item.aktif{background:var(--aksen-muda);color:var(--aksen-tua)}
@media (prefers-color-scheme:dark){.saring-item.aktif{color:#00a884}}
.daftar-isi{flex:1;overflow-y:auto}
.baris{width:100%;display:flex;align-items:center;gap:0;padding:0 0 0 13px;height:72px;border:0;background:none;cursor:pointer;text-align:left}
.baris:hover{background:var(--hover)}
.baris.terpilih{background:var(--pilih)}
.baris .avatar{margin-right:15px}
.baris-isi{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--garis);padding-right:15px}
.baris:last-child .baris-isi{border-bottom:0}
.baris-atas,.baris-bawah{display:flex;align-items:center;gap:6px}
.baris-nama{flex:1;min-width:0;font-size:17px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.baris-jam{font-size:12px;color:var(--tx3);flex:none}
.baris-bawah{margin-top:2px}
.baris-cuplik{flex:1;min-width:0;display:flex;align-items:center;gap:3px;font-size:14px;color:var(--tx2);white-space:nowrap;overflow:hidden}
.baris-cuplik span{overflow:hidden;text-overflow:ellipsis}
.baris-cuplik svg{width:18px;height:18px}
.baris.baru .baris-jam{color:var(--aksen)}
.baris.baru .baris-cuplik{color:var(--tx)}
.baris-mulai .avatar svg{width:22px;height:22px}
.baris-mulai .baris-nama{color:var(--aksen)}
.lencana{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--aksen);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center}
@media (prefers-color-scheme:dark){.lencana{color:#111b21}}
.daftar-kosong{padding:48px 24px;text-align:center;color:var(--tx3);font-size:14px}

/* panel obrolan */
.obrolan{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--kepala);position:relative}
.obrolan-kosong{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;color:var(--tx2);border-bottom:6px solid var(--aksen)}
.obrolan-kosong h2{font-size:32px;font-weight:300;color:var(--tx);margin:28px 0 10px}
.obrolan-kosong p{max-width:460px;margin:0;font-size:14px;line-height:1.6}
.obrolan-kosong .kunci{display:flex;align-items:center;gap:6px;margin-top:40px;font-size:13.5px;color:var(--tx3)}
.obrolan-kosong .kunci svg{width:14px;height:14px}
.obrolan-isi{flex:1;display:flex;flex-direction:column;min-height:0}
.obrolan-kepala{flex:none;display:flex;align-items:center;gap:15px;height:59px;padding:0 16px;background:var(--kepala);border-left:1px solid var(--garis);z-index:2}
.obrolan-kepala .avatar{width:40px;height:40px;font-size:14px}
.obrolan-judul{flex:1;min-width:0;line-height:1.3}
.obrolan-judul strong{display:block;font-weight:400;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obrolan-judul small{display:block;color:var(--tx3);font-size:13px}
.kembali{display:none}
.chip{flex:none;font-size:12.5px;padding:4px 10px;border-radius:14px;color:var(--tx2);background:var(--panel)}
.chip.buka{color:var(--aksen-tua)}
@media (prefers-color-scheme:dark){.chip.buka{color:#00a884}}
.chip.tutup{color:#8a5a00;background:#fff4d6}
@media (prefers-color-scheme:dark){.chip.tutup{color:#f1d58c;background:#2b240f}}

/* aliran pesan + latar doodle chat (wa-bg.jpg, sama dengan panel Konter Antum; permintaan Putra 27 Sep 2026) */
.aliran{flex:1;overflow-y:auto;padding:20px 7% 8px;display:flex;flex-direction:column;
  background:var(--obrolan) url(wa-bg.jpg) repeat;background-size:360px auto}
@media (prefers-color-scheme:dark){.aliran{background:linear-gradient(rgba(11,20,26,.93),rgba(11,20,26,.93)),#0b141a url(wa-bg.jpg) repeat;background-size:auto,360px auto}}
.pemisah{align-self:center;margin:12px 0;font-size:12.5px;color:var(--tx2);background:var(--panel);padding:5px 12px;border-radius:7.5px;box-shadow:var(--bayang-gel);text-transform:uppercase;letter-spacing:.02em}
@media (prefers-color-scheme:dark){.pemisah{background:#182229;color:#8696a0}}
.gel{position:relative;max-width:65%;padding:8px 13px 9px 14px;margin-bottom:2px;border-radius:18px;box-shadow:var(--bayang-gel);font-size:15px;line-height:20px;color:var(--tx);white-space:pre-wrap;word-wrap:break-word}
.gel.in{align-self:flex-start;background:var(--masuk)}
.gel.out{align-self:flex-end;background:var(--keluar)}
.gel.ekor{margin-top:10px}
/* Gaya WhatsApp desktop baru (contoh dari Putra 27 Sep 2026): gelembung bulat penuh, ekor melengkung
   kecil di sudut bawah pesan terakhir tiap kelompok (.ujung). */
.gel.ujung.in{border-bottom-left-radius:6px}
.gel.ujung.out{border-bottom-right-radius:6px}
.gel.ujung::after{content:"";position:absolute;bottom:0;width:9px;height:14px}
.gel.ujung.in::after{left:-7px;background:var(--masuk);-webkit-mask:radial-gradient(ellipse 9px 14px at 0 0,transparent 97%,#000 100%);mask:radial-gradient(ellipse 9px 14px at 0 0,transparent 97%,#000 100%)}
.gel.ujung.out::after{right:-7px;background:var(--keluar);-webkit-mask:radial-gradient(ellipse 9px 14px at 100% 0,transparent 97%,#000 100%);mask:radial-gradient(ellipse 9px 14px at 100% 0,transparent 97%,#000 100%)}
.gel.gagal.ujung.out::after{background:color-mix(in srgb,var(--merah) 8%,var(--keluar))}
.gel-waktu{float:right;position:relative;top:8px;margin:-10px 0 -5px 12px;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--tx3);white-space:nowrap}
@media (prefers-color-scheme:dark){.gel.out .gel-waktu{color:rgba(233,237,239,.6)}}
.centang{width:16px;height:11px;stroke-width:1.6}
.centang.baca{color:var(--centang-baca)}
.gel.gagal{background:color-mix(in srgb,var(--merah) 8%,var(--keluar))}
.gel-galat{display:block;margin-top:4px;font-size:12px;color:var(--merah)}
.gel-jenis{display:block;font-size:11.5px;font-weight:600;color:var(--aksen-tua);margin-bottom:2px}
@media (prefers-color-scheme:dark){.gel-jenis{color:#00a884}}

/* kolom tulis */
.tulis-area{flex:none;background:var(--kepala);padding:5px 16px 6px;border-left:1px solid var(--garis)}
.tulis{display:flex;align-items:flex-end;gap:8px;min-height:52px;padding:5px 0}
.tulis-kotak{flex:1;min-width:0;background:var(--panel);border-radius:8px;padding:9px 12px}
.tulis textarea{display:block;width:100%;border:0;background:transparent;resize:none;max-height:140px;outline:none;font-size:15px;line-height:20px;padding:0}
.tulis textarea::placeholder{color:var(--tx3)}
.tulis textarea:disabled{cursor:not-allowed}
.tbl-kirim{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:var(--aksen);color:#fff;cursor:pointer;flex:none}
.tbl-kirim:disabled{background:var(--garis2);cursor:default}
@media (prefers-color-scheme:dark){.tbl-kirim:disabled{background:#2a3942;color:#8696a0}}
.tbl-kirim svg{width:20px;height:20px}
.tulis-nota{margin:0 0 2px 56px;font-size:12px;color:var(--tx3);min-height:16px}
.tulis-nota.peringatan{color:#8a5a00}
@media (prefers-color-scheme:dark){.tulis-nota.peringatan{color:#f1d58c}}

/* layar template & nomor */
.halaman{flex:1;overflow:auto;padding:28px 32px;background:var(--kepala)}
.halaman-kepala{margin-bottom:22px}
.halaman-kepala h1{font-size:22px;margin:0 0 6px}
.halaman-kepala p{margin:0;color:var(--tx2);max-width:880px}
.baris-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.baris-kepala .tbl svg{width:18px;height:18px}
.kisi-template,.kisi-nomor{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.kartu{background:var(--panel);border-radius:8px;padding:16px;box-shadow:var(--bayang-gel)}
.kartu h3{margin:0 0 6px;font-size:15px;font-weight:600}
.kartu .meta{display:flex;gap:6px;margin-bottom:10px}
.lbl,.status-tpl{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--kepala);color:var(--tx2)}
.lbl.MARKETING{background:#fdf0e3;color:#b4540a}.lbl.UTILITY{background:var(--aksen-muda);color:var(--aksen-tua)}
.status-tpl.APPROVED{background:var(--aksen-muda);color:var(--aksen-tua)}
.status-tpl.PENDING,.status-tpl.SIMULASI{background:#fff4d6;color:#8a5a00}
.status-tpl.REJECTED,.status-tpl.PAUSED,.status-tpl.DISABLED{background:color-mix(in srgb,var(--merah) 12%,transparent);color:var(--merah)}
.kartu p{margin:0;color:var(--tx);font-size:14px;white-space:pre-wrap;background:var(--keluar);padding:8px 10px;border-radius:7.5px}
.kartu p.alasan{margin-top:10px;background:none;padding:0;font-size:13px;color:var(--merah)}
.kartu-nomor p{background:none;padding:0}
.kartu-nomor .angka{font-size:20px;font-weight:600;margin:2px 0 12px}
.meter{display:flex;gap:6px;margin-bottom:10px}
.meter span{flex:1;height:8px;border-radius:4px;background:var(--kepala)}
.meter.GREEN span:nth-child(1){background:var(--aksen)}.meter.YELLOW span:nth-child(2){background:var(--kuning)}.meter.RED span:nth-child(3){background:var(--merah)}
.kosong-halaman{padding:36px;text-align:center;color:var(--tx3);background:var(--panel);border-radius:8px}

/* dialog */
.dialog{max-height:calc(100dvh - 32px);overflow:auto;border:0;padding:0;border-radius:8px;background:var(--panel);color:var(--tx);box-shadow:var(--bayang2);width:min(480px,calc(100% - 32px))}
.dialog.lebar{width:min(560px,calc(100% - 32px))}
.dialog::backdrop{background:rgba(11,20,26,.55)}
.dialog-isi{display:flex;flex-direction:column;gap:8px;padding:22px 24px}
.dialog-isi header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dialog-isi h2{font-size:19px;font-weight:500;margin:0}
.dialog-isi label{font-size:13.5px;color:var(--tx2);margin-top:4px}
.dialog-isi select,.dialog-isi input:not([type=radio]),.dialog-isi textarea{padding:9px 11px;border:1px solid var(--garis2);border-radius:8px;background:var(--panel)}
.dialog-isi textarea{resize:vertical;min-height:96px;line-height:1.5}
.dialog-isi input:focus,.dialog-isi textarea:focus,.dialog-isi select:focus{outline:none;border-color:var(--aksen)}
.dialog-isi #isianTemplate,#contohIsian{display:flex;flex-direction:column;gap:6px}
.pratinjau{margin-top:6px;padding:0 0 2px;border-radius:7.5px;background:var(--keluar);box-shadow:var(--bayang-gel);font-size:14px;line-height:19px;min-height:38px;overflow:hidden}
.dialog-isi footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.bantu{margin:0;font-size:12.5px;color:var(--tx3)}
.bantu code{font-family:ui-monospace,Menlo,monospace;color:var(--tx2)}
.baris-bantu{display:flex;justify-content:space-between;align-items:center}
.tbl-teks{border:0;background:none;color:var(--aksen-tua);font-weight:600;cursor:pointer;padding:2px 0}
.pilihan-kategori{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opsi{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--garis2);border-radius:8px;cursor:pointer;margin:0!important;color:var(--tx)!important}
.opsi:has(input:checked){border-color:var(--aksen);background:var(--aksen-muda)}
.opsi input{margin-top:3px;accent-color:var(--aksen)}
.opsi strong{display:block;font-size:14px;font-weight:600}
.opsi small{display:block;color:var(--tx2);font-size:12.5px;line-height:1.4}


/* ---------- template: galeri, tambahan, pratinjau gelembung ---------- */
.aksi-kepala{display:flex;gap:8px;flex-wrap:wrap}
.aksi-kepala .tbl svg{width:18px;height:18px}
.tambahan{border:1px solid var(--garis2);border-radius:8px;padding:10px 12px;margin-top:6px;display:flex;flex-direction:column;gap:6px}
.tambahan summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--tx)}
.tambahan > label{display:block;margin-top:6px}
.tambahan > input{display:block;width:100%;margin-top:4px}
.tambahan > .tbl-teks{align-self:flex-start;margin-top:4px}
.tambahan[open]{gap:8px}
.tambahan[open] summary{margin-bottom:4px}
#daftarTombol{display:flex;flex-direction:column;gap:6px}
.baris-tombol{display:grid;grid-template-columns:110px 1fr auto;gap:6px;align-items:center}
.baris-tombol .tambahan-isi{grid-column:2/3}
.baris-tombol select,.baris-tombol input{min-width:0}
.pratinjau-latar{background:var(--obrolan);border-radius:8px;padding:14px;
  background-image:radial-gradient(circle at 20% 30%,var(--pola) 0 2px,transparent 2.5px),radial-gradient(circle at 70% 65%,var(--pola) 0 1.5px,transparent 2px);background-size:52px 52px,40px 40px}
.pratinjau-gel{max-width:320px;background:var(--masuk);border-radius:7.5px;border-top-left-radius:0;box-shadow:var(--bayang-gel);overflow:hidden;font-size:14px;line-height:19px}
.pg-judul{display:block;padding:8px 10px 0;font-weight:700}
.pg-isi{display:block;padding:6px 10px 2px;white-space:pre-wrap}
.pg-kaki{display:block;padding:0 10px 8px;font-size:12.5px;color:var(--tx3)}
.pg-kosong{display:block;padding:10px;color:var(--tx3)}
.pg-tombol{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-top:1px solid var(--garis);color:#027eb5;font-size:14px}
@media (prefers-color-scheme:dark){.pg-tombol{color:#53bdeb}}
.pg-tombol svg{width:16px;height:16px}
.kartu .pratinjau-gel{max-width:none;box-shadow:none;border:1px solid var(--garis);border-radius:8px}
.kartu p.pg-isi,.kartu p{background:none}
.dialog.galeri{width:min(920px,calc(100% - 32px))}
.galeri-grup{margin:14px 0 6px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tx3)}
.galeri-kisi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.galeri-item{display:flex;flex-direction:column;gap:8px;text-align:left;padding:12px;border:1px solid var(--garis2);border-radius:10px;background:var(--panel);cursor:pointer}
.galeri-item:hover{border-color:var(--aksen);box-shadow:var(--bayang-gel)}
.galeri-item .pratinjau-latar{padding:10px}
.galeri-item .pratinjau-gel{font-size:12.5px;line-height:17px}
.galeri-item strong{font-size:13.5px}
@media (max-width:760px){.baris-tombol{grid-template-columns:1fr auto}.baris-tombol select{grid-column:1/-1}}


/* ---------- fitur pembeda (Demo Aplikasi) ---------- */
.khusus-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:10px;background:var(--aksen-muda);color:var(--aksen-tua);margin-bottom:8px}
@media (prefers-color-scheme:dark){.khusus-tag{color:#00a884}}
.rel-item.khusus::after{content:"";position:absolute;right:4px;bottom:6px;width:7px;height:7px;border-radius:50%;background:var(--aksen);box-shadow:0 0 0 2px var(--kepala)}
.tbl-beda{background:#ffe38a;color:#4a3500}
.tbl-beda:hover{background:#ffd75a}
.tanda-label{flex:none;font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;background:var(--kepala);color:var(--tx2)}
.tanda-label[data-l="Pesanan"]{background:#e3f5ec;color:#0f7a4f}
.tanda-label[data-l="Komplain"]{background:#fdecea;color:#c0362c}
.tanda-label[data-l="Reseller"]{background:#efe9fb;color:#6d3fc8}
.tanda-label[data-l="Baru"]{background:#e6f1fb;color:#2266b8}
.gel-oleh{display:block;font-size:11.5px;font-weight:600;color:#6d3fc8;margin-bottom:2px}
@media (prefers-color-scheme:dark){.gel-oleh{color:#c4a7ff}}
.info-pelanggan{width:290px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 16px;background:var(--panel);border-left:1px solid var(--garis);overflow-y:auto;text-align:center}
.info-pelanggan[hidden]{display:none!important}
.avatar.besar{width:88px;height:88px;font-size:28px;margin:4px 0 6px}
.info-pelanggan > strong{font-size:17px;font-weight:500}
.info-pelanggan > small{color:var(--tx3);font-size:13px}
.ip-angka{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin:10px 0 4px}
.ip-angka div{background:var(--kepala);border-radius:8px;padding:8px}
.ip-angka span{display:block;font-size:11.5px;color:var(--tx3)}
.ip-angka b{font-size:15px;font-weight:600}
.info-pelanggan label{align-self:flex-start;font-size:12.5px;color:var(--tx2);margin-top:8px}
.info-pelanggan select,.info-pelanggan textarea{width:100%;padding:8px 10px;border:1px solid var(--garis2);border-radius:8px;background:var(--panel);text-align:left}
.info-pelanggan textarea{resize:vertical;background:#fff7df;border-color:#f0dca3}
@media (prefers-color-scheme:dark){.info-pelanggan textarea{background:#2b240f;border-color:#4a3d16}}
.info-pelanggan > .bantu{margin-top:8px}
.dua-kolom{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start;margin-top:14px}
.kartu h3{font-family:inherit}
.form-siaran,.form-kata{display:flex;flex-direction:column;gap:6px}
.form-siaran label{font-size:13px;color:var(--tx2);margin-top:4px}
.form-siaran input,.form-siaran select,.form-kata input,.form-kata textarea,.kartu textarea,.jam-baris input{padding:9px 11px;border:1px solid var(--garis2);border-radius:8px;background:var(--panel)}
.form-siaran .tbl{margin-top:8px;align-self:flex-start}
.riwayat{padding:10px 0;border-bottom:1px solid var(--garis)}
.riwayat:last-child{border-bottom:0}
.rw-atas{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rw-status{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.rw-status.kirim{background:var(--aksen-muda);color:var(--aksen-tua)}
.rw-status.jadwal{background:#fff4d6;color:#8a5a00}
.riwayat small{display:block;color:var(--tx3);font-size:12px;margin-top:2px}
.rw-bar{height:6px;border-radius:3px;background:var(--kepala);margin-top:6px;overflow:hidden}
.rw-bar i{display:block;height:100%;background:var(--aksen);transition:width .6s}
.aturan{padding:10px 0;border-bottom:1px solid var(--garis)}
.at-kata{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.at-kata span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:12px;background:#e6f1fb;color:#2266b8}
.at-kata .at-hapus{margin-left:auto;width:30px;height:30px}
.at-kata .at-hapus svg{width:16px;height:16px}
.aturan p{margin:6px 0 2px;background:var(--keluar);padding:7px 10px;border-radius:7.5px;font-size:13.5px}
.aturan small{color:var(--tx3);font-size:12px}
.form-kata{margin-top:12px}
.form-kata .tbl{align-self:flex-start}
.sakelar{display:flex;align-items:center;gap:8px;font-weight:600;margin:4px 0 8px}
.sakelar input{width:18px;height:18px;accent-color:var(--aksen)}
.jam-baris{display:flex;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.jam-baris label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx2)}
.kartu textarea{width:100%;margin-bottom:10px}
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi-kotak span{display:block;font-size:12.5px;color:var(--tx3)}
.kpi-kotak b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.grafik{width:100%;height:auto;max-height:230px;display:block;stroke:none}
.grafik *{stroke:none}
.grafik .bt{fill:#9fe0c7}
.grafik .bt.kini{fill:var(--aksen)}
.grafik .bt-angka{font-size:11px;fill:var(--tx2);font-weight:600}
.grafik .bt-hari{font-size:11px;fill:var(--tx3)}
.tabel-tim{width:100%;border-collapse:collapse;font-size:13.5px}
.tabel-tim th{text-align:left;font-size:12px;color:var(--tx3);font-weight:600;padding:6px 4px;border-bottom:1px solid var(--garis)}
.tabel-tim td{padding:9px 4px;border-bottom:1px solid var(--garis)}
.daftar-beda{margin:6px 0 0;padding:0;list-style:none;counter-reset:b;display:flex;flex-direction:column;gap:8px}
.daftar-beda li{counter-increment:b;display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--garis2);border-radius:10px}
.daftar-beda li::before{content:counter(b);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--aksen);color:#fff;font-size:12px;font-weight:700}
.daftar-beda li div{flex:1;min-width:0}
.daftar-beda b{font-size:14.5px}
.daftar-beda p{margin:2px 0 0;font-size:13px;color:var(--tx2)}
.tbl-kecil-2{padding:6px 14px;font-size:13px}
@media (max-width:1200px){.info-pelanggan{display:none!important}}
@media (max-width:900px){.dua-kolom{grid-template-columns:minmax(0,1fr)}.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ---------- fitur pembeda tahap 2: lampiran, pesanan, kontak, menu bot ---------- */
.tulis{position:relative}
.menu-lampiran{position:absolute;left:44px;bottom:58px;z-index:20;display:flex;flex-direction:column;padding:8px 0;min-width:240px;background:var(--panel);border-radius:12px;box-shadow:var(--bayang2)}
.menu-lampiran button{display:flex;align-items:center;gap:12px;padding:9px 18px;border:0;background:none;cursor:pointer;font-size:14.5px;text-align:left;color:var(--tx)}
.menu-lampiran button:hover{background:var(--hover)}
.ml{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:16px}
.ml.ungu{background:#ecdcff}.ml.biru{background:#d7ecff}.ml.hijau{background:#d9fdd3}.ml.oranye{background:#ffe3cc}
.ml.merah{background:#ffd9df}.ml.hijau2{background:#cdf3ee}.ml.kuning{background:#fff1bf}
.lebar-penuh{width:100%;margin-top:12px}
.baris-item{display:grid;grid-template-columns:minmax(0,1fr) 64px 110px 36px;gap:6px;margin-bottom:6px}
.baris-item input{min-width:0}
.total-pesanan{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--aksen-muda);font-size:14px}
.total-pesanan b{font-size:18px}
.tabel-bungkus{margin-top:12px;overflow-x:auto}
.tabel-pesanan{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.tabel-pesanan th{text-align:left;font-size:12px;color:var(--tx3);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--garis)}
.tabel-pesanan td{padding:10px 6px;border-bottom:1px solid var(--garis);vertical-align:middle}
.st-pesanan{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:10px;background:var(--kepala);color:var(--tx2)}
.st-pesanan[data-s="Baru"]{background:#e6f1fb;color:#2266b8}.st-pesanan[data-s="Diproses"]{background:#fff4d6;color:#8a5a00}
.st-pesanan[data-s="Siap"]{background:#efe9fb;color:#6d3fc8}.st-pesanan[data-s="Selesai"]{background:var(--aksen-muda);color:var(--aksen-tua)}
.nilai{font-size:11px;letter-spacing:-1px}
#saringPesanan{margin-top:0}
.kontak-kolom{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.baris-alat{display:flex;gap:8px;margin-bottom:8px}
.baris-alat input{flex:1;min-width:0;padding:8px 11px;border:1px solid var(--garis2);border-radius:8px;background:var(--panel)}
.unggah{cursor:pointer;white-space:nowrap}
.st-promo{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--kepala);color:var(--tx2)}
.st-promo[data-p="Setuju"]{background:var(--aksen-muda);color:var(--aksen-tua)}
.st-promo[data-p="Berhenti"]{background:#fdecea;color:#c0362c}
.qr-kartu{display:flex;flex-direction:column;gap:8px}
.qr-kartu .qr{width:200px;height:200px;align-self:center;background:#fff;padding:10px;border-radius:12px;border:1px solid var(--garis)}
.qr-kartu input{padding:9px 11px;border:1px solid var(--garis2);border-radius:8px;background:var(--panel)}
.qr-kartu label{font-size:13px;color:var(--tx2)}
.subjudul{margin:16px 0 8px!important;font-size:14.5px!important}
.menu-bot{border:1px solid var(--garis);border-radius:10px;padding:8px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px}
.mb-atas{display:flex;align-items:center;gap:8px}
.mb-no{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--aksen);color:#fff;font-size:12px;font-weight:700;flex:none}
.mb-judul{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--garis2);border-radius:8px;background:var(--panel);font-weight:600}
.mb-balas{padding:7px 10px;border:1px solid var(--garis2);border-radius:8px;background:var(--keluar);resize:vertical}
.mb-hapus{width:32px;height:32px}.mb-hapus svg{width:16px;height:16px}
#daftarIce{display:flex;flex-direction:column;gap:6px}
#daftarIce input,#botSapa{padding:8px 10px;border:1px solid var(--garis2);border-radius:8px;background:var(--panel);width:100%}
.hp-tiruan{margin:6px auto 0;width:280px;border-radius:30px;padding:10px;background:#1c1c1e;box-shadow:var(--bayang2)}
.hp-layar{border-radius:22px;overflow:hidden;background:#efeae2;min-height:460px;display:flex;flex-direction:column}
.hp-kepala{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#008069;color:#fff;font-size:13px}
.hp-kepala img{width:28px;height:28px;border-radius:50%}
.hp-isi{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px}
.hp-ice{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.hp-ice span{font-size:11.5px;padding:5px 10px;border-radius:14px;background:#fff;color:#027eb5;border:1px solid #d1e7f0}
.hp-gel{align-self:flex-start;max-width:88%;background:#fff;border-radius:8px;border-top-left-radius:0;padding:7px 9px;font-size:12.5px;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.hp-list{display:block;margin:6px -9px -7px;padding:7px;border-top:1px solid #e9edef;text-align:center;color:#027eb5;font-weight:600}
.hp-daftar{margin-top:auto;background:#fff;border-radius:12px 12px 0 0;padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:#111b21;box-shadow:0 -6px 16px rgba(0,0,0,.12)}
.hp-daftar b{text-align:center;margin-bottom:6px}
.hp-daftar span{padding:7px 2px;border-bottom:1px solid #f0f2f5;display:flex;justify-content:space-between}
.hp-daftar span::after{content:"◯";color:#00a884;font-size:11px}
@media (max-width:900px){.kontak-kolom{grid-template-columns:minmax(0,1fr)}.baris-item{grid-template-columns:minmax(0,1fr) 56px 90px 36px}}

/* kabar */
.kabar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#323739;color:#fff;padding:12px 20px;border-radius:6px;font-size:14px;box-shadow:var(--bayang2);z-index:50;max-width:calc(100% - 32px)}
.kabar.galat{background:#b00020}

/* responsif */
@media (min-width:1441px){.hal-dasbor:not(.demo){padding:19px 0;background:linear-gradient(var(--aksen-tua) 0 127px,var(--latar-app) 127px)}}
@media (min-width:1441px) and (prefers-color-scheme:dark){.hal-dasbor{background:var(--latar-app)}}
@media (max-width:900px){.daftar{min-width:300px}.aliran{padding:16px 4% 8px}.gel{max-width:80%}}
@media (max-width:760px){
  .hal-dasbor{height:100dvh}
  .rangka{flex-direction:column-reverse}
  .rel{width:100%;flex-direction:row;justify-content:space-around;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--garis)}
  .rel-bawah{display:contents}
  .rel-bawah .avatar{display:none}
  .daftar{width:100%;min-width:0;max-width:none;border-right:0}
  .geser-daftar{display:none}
  .obrolan{display:none}
  .kotak.buka .daftar{display:none}
  .kotak.buka .obrolan{display:flex}
  .kembali{display:grid;margin-left:-8px}
  .obrolan-kepala{gap:10px;padding:0 10px}
  .aliran{padding:12px 10px 6px}
  .gel{max-width:85%}
  .tulis-area{padding:4px 8px 6px}
  .tulis-nota{margin-left:4px}
  .halaman{padding:20px 16px}
  .baris-kepala{flex-direction:column}
  .pilihan-kategori{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- ikon sprite (Lucide) ---------- */
svg.i{width:18px;height:18px;stroke-width:1.9;vertical-align:-3px}
.rel-item svg.i{width:23px;height:23px;stroke-width:1.75}
.khusus-tag svg.i{width:12px;height:12px;margin-right:4px;stroke-width:2.4}
.tbl svg.i,.tbl-teks svg.i{width:16px;height:16px;margin-right:6px}
.tbl-ikon svg.i{margin:0}
.ml svg.i{width:18px;height:18px;margin:0}
.ml.ungu{color:#7c3aed}.ml.biru{color:#1d6fd6}.ml.hijau{color:#15803d}.ml.oranye{color:#c2410c}
.ml.merah{color:#be123c}.ml.hijau2{color:#0f766e}.ml.kuning{color:#a16207}
.gel-jenis svg.i{width:13px;height:13px;margin-right:4px;vertical-align:-2px}
#tblBeda svg.i{width:14px;height:14px;margin-right:6px}
.kosong-tabel{padding:28px 8px!important;text-align:center;color:var(--tx3)}

/* tombol di dalam gelembung chat, seperti di HP pelanggan */
.gel-tombol-baris{display:flex;flex-direction:column;margin:8px -13px -9px -14px;border-top:1px solid var(--garis)}
.gel-tombol{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;color:#027eb5;font-size:14px;font-weight:500}
.gel-tombol+.gel-tombol{border-top:1px solid var(--garis)}
.gel-tombol svg.i{width:15px;height:15px}
@media (prefers-color-scheme:dark){.gel-tombol{color:#53bdeb}}

/* template/menu utuh dari pesan.tampilan: judul, isi, catatan kaki, tombol, seperti di aplikasi WhatsApp */
.gel-judul{display:block;font-weight:700;margin-bottom:3px}
.gel-media{display:flex;align-items:center;justify-content:center;height:120px;margin:-4px -9px 6px -10px;border-radius:13px;background:color-mix(in srgb,var(--tx3) 18%,transparent);color:var(--tx3)}
.gel-media svg.i{width:34px;height:34px}
.gel-kaki{display:block;margin-top:4px;font-size:13px;line-height:17px;color:var(--tx3)}
@media (prefers-color-scheme:dark){.gel.out .gel-kaki{color:rgba(233,237,239,.6)}}
.gel-tombol[data-semua],.gel-tombol[data-daftar]{cursor:pointer}
.gel-tombol-lain{display:flex;flex-direction:column}
.gel-tombol-lain .gel-tombol,.gel-tombol+.gel-tombol-lain .gel-tombol:first-child{border-top:1px solid var(--garis)}
.gel-daftar{display:flex;flex-direction:column;border-top:1px solid var(--garis);padding:4px 12px 6px}
.gel-daftar-judul{padding:8px 0 2px;font-size:12.5px;font-weight:600;color:var(--aksen-tua)}
.gel-daftar-baris{display:block;padding:7px 0;font-size:14px;border-bottom:1px solid var(--garis)}
.gel-daftar-baris:last-child{border-bottom:0}
.gel-daftar-baris small{display:block;font-size:12.5px;color:var(--tx3)}
.gel-kutip{display:block;margin:-2px -7px 6px -8px;padding:6px 10px 7px 10px;border-left:4px solid #06cf9c;border-radius:10px;background:rgba(11,20,26,.05);font-size:13px;line-height:17px;color:var(--tx2);cursor:pointer;
  max-height:56px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.gel-kutip b{display:block;font-weight:600;color:#06cf9c}
.gel-kutip.in{border-left-color:#a5b337}.gel-kutip.in b{color:#a5b337}
@media (prefers-color-scheme:dark){.gel-kutip{background:rgba(0,0,0,.18)}}
.gel.sorot{animation:sorotGel 1.5s ease}
@keyframes sorotGel{0%,40%{filter:brightness(.85)}100%{filter:none}}
code.wa-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

/* bintang nilai */
.bintang{display:inline-flex;gap:1px;vertical-align:-2px;color:#d9dde0}
.bintang svg.i{width:13px;height:13px;stroke-width:1.5}
.bintang svg.i.isi,svg.i.isi{color:#f5a524;fill:currentColor}

/* KPI dengan ikon */
.kpi-kotak{position:relative}
.kpi-kotak>svg.i{position:absolute;top:14px;right:14px;width:20px;height:20px;color:var(--aksen)}
.kpi-kotak small{display:block;font-size:12px;color:var(--tx3);margin-top:2px}
#kpiPesanan{margin-bottom:14px}
.saring-item em{font-style:normal;font-weight:700;margin-left:2px;opacity:.75}
.pesanan-alat{align-items:center;flex-wrap:wrap}
.pesanan-alat .saring{margin-top:0;flex-wrap:wrap}
.pesanan-alat input{max-width:280px;margin-left:auto}
.tabel-pesanan td.no{font-variant-numeric:tabular-nums;color:var(--tx2)}
.tabel-pesanan td.angka{font-variant-numeric:tabular-nums;white-space:nowrap}
.tabel-pesanan td.lewat{color:#c0362c;font-weight:600}
.ke-chat{font-weight:600;color:var(--tx);text-align:left}
.ke-chat:hover{color:var(--aksen-tua);text-decoration:underline}
.tabel-kontak small{display:block}
#saringKontak{margin:0 0 6px;flex-wrap:wrap}
.kecil-atas{margin:0 0 6px;font-size:12.5px}
.pilih-promo{font:inherit;font-size:12.5px;font-weight:600;padding:3px 6px;border-radius:10px;border:1px solid transparent;background:var(--kepala);color:var(--tx2);cursor:pointer}
.pilih-promo[data-p="Setuju"]{background:var(--aksen-muda);color:var(--aksen-tua)}
.pilih-promo[data-p="Berhenti"]{background:#fdecea;color:#c0362c}

/* riwayat pesanan di panel pelanggan */
.ip-riwayat{width:100%;margin-top:10px}
.ip-riwayat h4{font-size:12px;color:var(--tx3);font-weight:600;margin:0 0 4px}
.ipr{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:7px 0;border-top:1px solid var(--garis);font-size:13px}
.ipr small{display:block;color:var(--tx3);font-size:12px;margin-top:1px}
.ipr .st-pesanan{flex:none}

/* kirim massal */
.rw-status{display:inline-flex;align-items:center;gap:4px}
.rw-status svg.i{width:12px;height:12px;stroke-width:2.4}
.rw-status.batal{background:var(--kepala);color:var(--tx3)}
.rw-batal{font-size:12.5px;margin-top:4px;color:#c0362c}
.konfirmasi{background:var(--aksen-muda);border-radius:10px;padding:12px 14px;margin-top:4px}
.konfirmasi p{margin:0 0 10px;font-size:14px;line-height:1.5}
.konfirmasi small{color:var(--tx2)}
.aksi-baris{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* balasan otomatis */
.at-aksi{margin-left:auto;display:flex;gap:2px}
.at-aksi .tbl-ikon{width:30px;height:30px}
.at-aksi svg.i{width:15px;height:15px}
.at-aksi .at-hapus:hover{color:#c0362c}
.aturan.diubah{background:var(--aksen-muda);margin:0 -10px;padding:10px;border-radius:8px}
.at-pakai{height:4px;border-radius:2px;background:var(--kepala);margin:6px 0 3px;overflow:hidden}
.at-pakai i{display:block;height:100%;background:#8fd6c4}
.uji-kata{margin-top:14px;padding:12px;border:1px dashed var(--garis2);border-radius:10px}
.uji-kata label{font-size:13px;color:var(--tx2);font-weight:600}
.uji-kata input{width:100%;margin-top:6px;padding:8px 11px;border:1px solid var(--garis2);border-radius:8px;background:var(--panel)}
.hasil-uji:empty{display:none}
.hasil-uji{display:flex;gap:10px;margin-top:10px;font-size:13px;padding:9px 11px;border-radius:8px}
.hasil-uji>svg.i{flex:none;margin-top:1px}
.hasil-uji p{margin:3px 0 0;color:var(--tx2)}
.hasil-uji.cocok{background:var(--aksen-muda);color:var(--aksen-tua)}
.hasil-uji.lewat{background:var(--kepala);color:var(--tx2)}

/* simulator bot di HP */
.hp-isi{height:400px;overflow-y:auto;scroll-behavior:smooth}
.hp-info{align-self:center;display:flex;align-items:center;gap:6px;max-width:92%;font-size:11.5px;color:#54656f;background:#fff9;padding:5px 10px;border-radius:8px;text-align:center}
.hp-info svg.i{width:13px;height:13px;flex:none}
.hp-ice-tbl{font:inherit;font-size:11.5px;padding:5px 10px;border-radius:14px;background:#fff;color:#027eb5;border:1px solid #d1e7f0;cursor:pointer}
.hp-ice-tbl:hover{background:#f0f8fb}
.hp-gel{white-space:pre-wrap}
.hp-gel.plg{align-self:flex-end;background:#d9fdd3;border-radius:8px;border-top-right-radius:0}
.hp-oleh{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#008069;margin-bottom:2px}
.hp-oleh svg.i{width:12px;height:12px}
button.hp-list{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% + 18px);font:inherit;font-size:12.5px;background:none;border:0;border-top:1px solid #e9edef;cursor:pointer}
button.hp-list svg.i{width:14px;height:14px}
.hp-pilih{font:inherit;font-size:12.5px;text-align:left;background:none;border:0;border-bottom:1px solid #f0f2f5;padding:8px 2px;cursor:pointer;color:#111b21;display:flex;justify-content:space-between}
.hp-pilih::after{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid #00a884}
.hp-pilih:hover{background:#f5f6f6}
.hp-daftar{margin-top:0;border-radius:12px}
.hp-tulis{display:flex;gap:6px;padding:8px;background:#f0f2f5}
.hp-tulis input{flex:1;min-width:0;border:0;border-radius:18px;padding:8px 12px;font-size:12.5px;background:#fff;color:#111b21}
.hp-tulis button{width:34px;height:34px;border-radius:50%;border:0;background:#00a884;color:#fff;display:grid;place-items:center;cursor:pointer}
.hp-tulis svg.i{width:16px;height:16px}
#ulangSimBot{display:flex;align-items:center;margin:10px auto 0}

/* QR chat */
.qr-bingkai{width:220px;height:220px;align-self:center;background:#fff;padding:10px;border-radius:14px;border:1px solid var(--garis);display:grid;place-items:center}
.qr-bingkai svg{width:100%;height:100%;stroke:none}
.qr-bingkai img{width:100%;height:100%}
.qr-kosong{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#8696a0;font-size:12.5px;padding:10px}
.qr-kosong svg.i{width:40px;height:40px;stroke-width:1.4}
.qr-kartu textarea{padding:9px 11px;border:1px solid var(--garis2);border-radius:8px;background:var(--panel);font:inherit;resize:vertical}
.qr-tautan{display:flex;align-items:center;gap:6px;background:var(--kepala);border-radius:8px;padding:4px 4px 4px 10px}
.qr-tautan code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--tx2)}
.qr-tautan:has(code:empty){display:none}
#qrLain h4{font-size:12px;color:var(--tx3);margin:6px 0 4px}
.qr-lain{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:inherit;font-size:13px;background:none;border:0;border-top:1px solid var(--garis);padding:8px 2px;cursor:pointer;color:var(--tx)}
.qr-lain:hover{color:var(--aksen-tua)}

/* sebaran nilai di laporan */
.sebaran{display:flex;flex-direction:column;gap:6px;max-width:420px}
.sb-baris{display:grid;grid-template-columns:38px 1fr 34px;align-items:center;gap:8px;font-size:13px}
.sb-baris span{display:flex;align-items:center;gap:3px}
.sb-baris svg.i{width:13px;height:13px}
.sb-bar{height:8px;border-radius:4px;background:var(--kepala);overflow:hidden}
.sb-bar i{display:block;height:100%;background:#f5a524;border-radius:4px}
.sb-baris b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:900px){.pesanan-alat input{max-width:none;margin-left:0;flex-basis:100%}}

/* peran staf: pengaturan hanya-baca */
.terkunci{opacity:.55}
body[data-peran="staf"] .at-aksi,body[data-peran="staf"] .rw-batal,body[data-peran="staf"] .mb-hapus{display:none}
.nota-peran{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 12px;border-radius:8px;background:#fff4d6;color:#8a5a00;font-size:13px}
.nota-peran svg.i{width:15px;height:15px;flex:none}
.nota-peran[hidden]{display:none}

/* ---------- langganan ---------- */
.spanduk-tagihan{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:8px 16px;font-size:13.5px;border-bottom:1px solid var(--garis)}
.spanduk-tagihan[hidden]{display:none}
.spanduk-tagihan svg.i{width:16px;height:16px;flex:none}
.spanduk-tagihan.biasa{background:#e7f6f0;color:#0b5c46}
.spanduk-tagihan.oranye{background:#fff1dc;color:#8a4b00}
.spanduk-tagihan.merah{background:#fdecea;color:#a1261d}
@media (prefers-color-scheme:dark){.spanduk-tagihan.biasa{background:#12302a;color:#9fe3cf}.spanduk-tagihan.oranye{background:#33250f;color:#f3c98b}.spanduk-tagihan.merah{background:#3a1715;color:#f3aaa3}}
.spanduk-tagihan .tbl{padding:5px 12px}
.spanduk-tagihan .tbl-teks{color:inherit;text-decoration:underline}
.lgn-atas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.lgn-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lgn-label{font-size:12.5px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.lgn-status{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:10px;background:var(--kepala);color:var(--tx2);white-space:nowrap}
.lgn-status[data-s="aktif"],.lgn-status[data-s="lunas"]{background:var(--aksen-muda);color:var(--aksen-tua)}
.lgn-status[data-s="tenggang"],.lgn-status[data-s="menunggu"]{background:#fff4d6;color:#8a5a00}
.lgn-status[data-s="terkunci"]{background:#fdecea;color:#c0362c}
.lgn-nama{font-size:24px;font-weight:750;margin:10px 0 0;letter-spacing:-.02em}
.lgn-harga{font-size:15px;font-weight:600;color:var(--tx2);margin:2px 0 12px}
.lgn-harga small{font-weight:500;color:var(--tx3);margin-left:2px}
.lgn-isi{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14px}
.lgn-isi li{display:flex;align-items:center;gap:8px}
.lgn-isi svg.i{width:16px;height:16px;color:var(--aksen)}
.lgn-jumlah{font-size:30px;font-weight:750;letter-spacing:-.02em;margin:10px 0 2px}
.lgn-tempo{display:flex;align-items:center;gap:7px;font-size:14px;margin:10px 0 14px;color:var(--tx)}
.lgn-tempo svg.i{width:16px;height:16px;color:#b7791f}
.lgn-lunas{display:flex;gap:12px;align-items:flex-start}
.lgn-lunas>svg.i{width:34px;height:34px;color:var(--aksen);flex:none}
.lgn-pilihan{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lgn-pilihan li{display:flex;flex-direction:column;padding:10px 12px;border:1px solid var(--garis);border-radius:10px;font-size:14px}
.lgn-pilihan span{color:var(--tx2);font-size:13px}
.lebar-penuh{width:100%;justify-content:center}
@media (max-width:760px){.lgn-atas{grid-template-columns:1fr}}
#layar-langganan .kartu p{padding:0;white-space:normal;border-radius:0}
#layar-langganan .kartu p.lgn-nama{font-size:24px;font-weight:750;margin:10px 0 0}
#layar-langganan .kartu p.lgn-harga{font-size:15px;font-weight:600;color:var(--tx2);margin:2px 0 12px}
#layar-langganan .kartu p.lgn-jumlah{font-size:30px;font-weight:750;margin:10px 0 2px}
#layar-langganan .kartu p.bantu{font-size:13px;color:var(--tx2);margin-top:6px}
#layar-langganan .kartu p.lgn-tempo{display:flex;font-size:14px;margin:10px 0 14px}
#layar-langganan .kartu p.nota-peran{padding:8px 12px;border-radius:8px}

/* ---------- jendela bayar tagihan ---------- */
#dialogBayar{width:min(440px,calc(100% - 32px))}
#dialogBayar .dialog-isi{padding:24px;gap:0}
#dialogBayar header{align-items:flex-start;margin-bottom:16px}
#dialogBayar header .tbl-ikon{margin:-6px -11px 0 0}
#dialogBayar h2{font-size:18px;line-height:1.3}
.by-sub{margin:2px 0 0;font-size:12.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.by-muat{display:flex;align-items:center;justify-content:center;gap:10px;height:320px;color:var(--tx2);font-size:14px}
.putar-hijau{width:18px;height:18px;border-radius:50%;border:2px solid var(--aksen-muda);border-top-color:var(--aksen);animation:byPutar .8s linear infinite}
@keyframes byPutar{to{transform:rotate(360deg)}}
.by-uji{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;border-radius:10px;background:#fff4d6;color:#7a5200;font-size:12.5px}
.by-uji svg.i{width:15px;height:15px;flex:none}
@media (prefers-color-scheme:dark){.by-uji{background:#2b240f;color:#f1dc9b}}

/* kartu QR */
.by-kartu{border:1px solid var(--garis);border-radius:16px;overflow:hidden;background:var(--panel)}
.by-kartu-atas{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--garis);font-size:12.5px;color:var(--tx2)}
.by-qris{font-size:11px;font-weight:800;letter-spacing:.12em;padding:3px 8px;border-radius:6px;background:var(--tx);color:var(--panel)}
.by-qr-bingkai{position:relative;display:grid;place-items:center;padding:22px 0 18px;background:var(--panel)}
.by-qr{width:216px;height:216px;padding:12px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgba(11,20,26,.08),0 6px 18px -8px rgba(11,20,26,.25)}
.by-qr svg{display:block;width:100%;height:100%;stroke:none}
.by-kartu.lewat .by-qr{opacity:.12;filter:blur(1px)}
.by-habis{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:14px}
.by-habis[hidden]{display:none}
.by-waktu{display:flex;align-items:center;gap:12px;padding:0 14px 14px;font-size:12.5px;color:var(--tx2);font-variant-numeric:tabular-nums}
.by-waktu span{min-width:92px}
.by-bar{flex:1;height:4px;border-radius:2px;background:var(--kepala);overflow:hidden}
.by-bar i{display:block;height:100%;width:100%;background:var(--aksen);border-radius:2px;transition:width 1s linear}
.by-kartu.mepet .by-bar i{background:#e5484d}
.by-kartu.mepet .by-waktu{color:#c0362c}

/* rincian nominal */
.by-rincian{margin:16px 0 0;display:flex;flex-direction:column}
.by-rincian>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.by-rincian dt{color:var(--tx2)}
.by-rincian dd{margin:0;font-variant-numeric:tabular-nums;color:var(--tx)}
.by-rincian .by-total{margin-top:4px;padding-top:12px;border-top:1px dashed var(--garis2);align-items:center}
.by-rincian>div>dd{text-align:right}
.by-rincian .by-total dt{color:var(--tx);font-weight:600}

.by-angka{font-size:24px;font-weight:760;letter-spacing:-.02em}
.by-angka em{font-style:normal;color:var(--aksen-tua);background:var(--aksen-muda);border-radius:5px;padding:1px 4px;margin:0 -4px 0 2px;line-height:1}
@media (prefers-color-scheme:dark){.by-angka em{color:#6ee7b7}}
.by-catatan{margin:6px 0 0;font-size:12.5px;color:var(--tx3);line-height:1.5}
.by-catatan b{color:var(--tx2);font-variant-numeric:tabular-nums}

/* status + aksi */
.by-status{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 12px;border-radius:10px;background:var(--kepala);font-size:13.5px;font-weight:600}
.by-status .redup{margin-left:auto;font-weight:400;font-size:12.5px;color:var(--tx3)}
.by-status svg.i{width:16px;height:16px;flex:none}
.by-status.berhenti{font-weight:500;color:var(--tx2)}
.by-titik{width:8px;height:8px;border-radius:50%;background:var(--aksen);box-shadow:0 0 0 0 rgba(0,168,132,.5);animation:byDenyut 1.6s ease-out infinite;flex:none}
@keyframes byDenyut{0%{box-shadow:0 0 0 0 rgba(0,168,132,.45)}100%{box-shadow:0 0 0 8px rgba(0,168,132,0)}}
@media (prefers-reduced-motion:reduce){.by-titik,.putar-hijau{animation:none}.by-bar i{transition:none}}
.by-aksi{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.by-aksi .tbl{justify-content:center}
.by-galat{display:flex;gap:10px;align-items:flex-start;padding:14px;margin-bottom:14px;border-radius:12px;background:#fdecea;color:#a1261d;font-size:14px}
.by-galat p{margin:2px 0 0;color:inherit;opacity:.9}
.by-galat svg.i{width:18px;height:18px;flex:none;margin-top:1px}

/* lunas */
.by-lunas{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0 0}
.by-lunas h3{margin:14px 0 0;font-size:19px}
.by-lunas-angka{margin:6px 0 0;font-size:26px;font-weight:760;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.by-lunas .redup{margin:2px 0 0;font-size:12.5px;color:var(--tx3)}
.by-lunas .by-rincian{width:100%;margin:20px 0 16px;padding:4px 0;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis);text-align:left}
.by-centang{width:64px;height:64px;border-radius:50%;background:var(--aksen);position:relative;animation:byMuncul .35s ease-out}
.by-centang::after{content:"";position:absolute;left:23px;top:15px;width:14px;height:27px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg)}
@keyframes byMuncul{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.dialog .tbl-ikon:focus:not(:focus-visible){outline:none;box-shadow:none;border-color:transparent}
#bayarBingkai:focus{outline:none}
.ip-penjawab{display:flex;gap:8px;align-items:center}.ip-penjawab select{flex:1;min-width:0}.ip-penjawab .tbl{white-space:nowrap}
/* pill pembalas terakhir di daftar chat */
.baris-atas{min-width:0}
.baris-nama{flex:0 1 auto}
.baris-atas .baris-jam{margin-left:auto}
.pil-pembalas{flex:none;display:inline-flex;align-items:center;gap:3px;padding:0 7px 0 5px;border:1px solid var(--garis2);border-radius:10px;font-size:11px;font-weight:600;line-height:17px;color:var(--tx2);background:transparent}
.pil-pembalas svg.i{width:11px;height:11px;stroke-width:2.4}
.pil-pembalas.saya{border-color:color-mix(in srgb,var(--aksen) 45%,transparent);color:var(--aksen-tua)}
.pil-pembalas.mesin{border-style:dashed;color:var(--tx3)}
@media (prefers-color-scheme:dark){.pil-pembalas.saya{color:#6ee7b7}}
/* menunggu balasan > 15 menit */
.pil-tunggu{flex:none;display:inline-flex;align-items:center;gap:3px;padding:0 7px 0 5px;border-radius:10px;font-size:11px;font-weight:700;line-height:18px;background:#fdecea;color:#c0362c;font-variant-numeric:tabular-nums}
.pil-tunggu svg.i{width:11px;height:11px;stroke-width:2.4}
@media (prefers-color-scheme:dark){.pil-tunggu{background:#3a1715;color:#f3aaa3}}
.angka-tunggu{display:inline-block;min-width:22px;padding:0 7px;border-radius:10px;background:#fdecea;color:#c0362c;font-weight:700;text-align:center}
.tabel-pegang .baris-kosong td{color:var(--tx2);font-style:italic}
/* tombol notifikasi di kepala daftar chat */
.judul-baris{justify-content:flex-start;gap:6px}
.judul-baris .status-sambung{margin-left:auto}
.tbl-notif{width:32px;height:32px;color:var(--tx3)}
.tbl-notif svg.i{width:18px;height:18px}
.tbl-notif.nyala{color:var(--aksen)}
/* saringan daftar chat: satu baris, geser ke samping bila sempit */
.cari-bungkus .saring{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-2px;padding:0 2px 2px}
.cari-bungkus .saring::-webkit-scrollbar{display:none}
.cari-bungkus .saring-item{flex:none;white-space:nowrap;padding:6px 11px;font-size:13.5px}
/* ---------- kabar dari Meta ---------- */
.rel-lencana.bahaya{background:var(--merah)}
.kabar-meta{padding:0;margin-bottom:16px;overflow:hidden}
.km-kepala{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px;border-bottom:1px solid var(--garis)}
.km-kepala h3{margin:0}
.km-hitung{font-size:11.5px;font-weight:700;line-height:18px;padding:0 8px;border-radius:9px;background:var(--aksen-muda);color:var(--aksen-tua);font-variant-numeric:tabular-nums}
.km-hitung.bahaya{background:#fdecea;color:#c0362c}
.km-baca-semua{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.km-baca-semua svg.i{margin-right:0}
.km-baca-semua:disabled{opacity:.5;cursor:default}
.km-daftar{list-style:none;margin:0;padding:0}
.km-item + .km-item{border-top:1px solid var(--garis)}
.km-baris{display:grid;grid-template-columns:32px minmax(0,1fr) 8px;column-gap:12px;align-items:start;width:100%;padding:12px 16px;border:0;background:none;text-align:left;font:inherit;color:inherit}
button.km-baris{cursor:pointer}
button.km-baris:hover{background:var(--hover)}
button.km-baris:focus-visible{outline:2px solid var(--aksen);outline-offset:-2px}
.km-ikon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e8f0fb;color:#1f5fa8}
.km-ikon svg.i{width:17px;height:17px;stroke-width:2}
.km-item[data-tingkat="peringatan"] .km-ikon{background:#fff4d6;color:#8a5a00}
.km-item[data-tingkat="bahaya"] .km-ikon{background:#fdecea;color:#c0362c}
.km-teks{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px}
.km-atas{display:flex;align-items:baseline;gap:12px;min-width:0}
.km-judul{flex:1;min-width:0;font-weight:500;line-height:20px;overflow-wrap:anywhere}
.km-item.belum .km-judul{font-weight:650}
.km-waktu{flex:none;font-size:12px;color:var(--tx3);white-space:nowrap}
.km-item.belum .km-waktu{color:var(--aksen-tua);font-weight:600}
.km-isi{max-width:760px;font-size:13.5px;line-height:1.45;color:var(--tx2);overflow-wrap:anywhere}
.km-titik{width:8px;height:8px;margin-top:7px;border-radius:50%}
.km-item.belum .km-titik{background:var(--aksen)}
.km-item.belum[data-tingkat="bahaya"] .km-titik{background:var(--merah)}
.km-item.sorot .km-baris,.kabar-meta.sorot{animation:kmSorot 1.6s ease-out}
@keyframes kmSorot{0%,30%{background:color-mix(in srgb,var(--merah) 10%,transparent)}100%{background:transparent}}
.km-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.km-lagi{display:block;width:100%;padding:11px 16px;border:0;border-top:1px solid var(--garis);background:none;color:var(--aksen-tua);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.km-lagi:hover{background:var(--hover)}
.km-kosong{display:flex;align-items:center;gap:12px;padding:20px 16px;color:var(--tx2);font-size:13.5px}
.km-kosong > svg.i{width:20px;height:20px;flex:none;color:var(--tx3)}
.km-kosong .putar-hijau{flex:none}
.km-kosong.galat > svg.i{color:#c0362c}
.km-kosong .tbl-teks{margin-left:auto;white-space:nowrap}
.km-nota{display:flex;align-items:center;gap:6px;padding:9px 16px;border-top:1px solid var(--garis);font-size:12.5px;color:var(--tx3)}
.km-nota svg.i{width:14px;height:14px}
.km-nota .tbl-teks{font-size:12.5px}
@media (prefers-color-scheme:dark){
  .km-ikon{background:#16283d;color:#8cb8ec}
  .km-item[data-tingkat="peringatan"] .km-ikon{background:#2b240f;color:#f1d58c}
  .km-item[data-tingkat="bahaya"] .km-ikon,.km-hitung.bahaya{background:#3a1715;color:#f3aaa3}
  .km-item.belum .km-waktu,.km-baca-semua,.km-lagi{color:#00a884}
}
@media (prefers-reduced-motion:reduce){.km-item.sorot .km-baris,.kabar-meta.sorot{animation:none}}
@media (max-width:760px){
  .km-kepala{flex-wrap:wrap;row-gap:2px;padding-top:12px;padding-bottom:10px}
  .km-baca-semua{flex-basis:100%;margin-left:0}
  .km-atas{flex-direction:column;align-items:flex-start;gap:0}
}
/* rincian kartu nomor: nama tampilan dan batas kirim */
.nomor-rincian{margin:12px 0 0;border-top:1px solid var(--garis)}
.nomor-rincian > div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;border-bottom:1px solid var(--garis)}
.nomor-rincian > div:last-child{border-bottom:0}
.nomor-rincian dt{font-size:13px;color:var(--tx2)}
.nomor-rincian dd{margin:0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.pil-nama{display:inline-block;font-size:11.5px;font-weight:700;line-height:18px;padding:0 8px;border-radius:9px;background:var(--kepala);color:var(--tx2)}
.pil-nama[data-s="APPROVED"]{background:var(--aksen-muda);color:var(--aksen-tua)}
.pil-nama[data-s="PENDING"]{background:#fff4d6;color:#8a5a00}
.pil-nama[data-s="DECLINED"]{background:#fdecea;color:#c0362c}
@media (prefers-color-scheme:dark){.pil-nama[data-s="PENDING"]{background:#2b240f;color:#f1d58c}.pil-nama[data-s="DECLINED"]{background:#3a1715;color:#f3aaa3}.pil-nama[data-s="APPROVED"]{color:#6ee7b7}}
/* kualitas dan kategori template */
.kartu .meta{flex-wrap:wrap;row-gap:6px}
.kualitas-tpl{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:1px 7px 1px 6px;border-radius:10px;border:1px solid var(--garis2);color:var(--tx2);line-height:normal}
.kualitas-tpl i{width:7px;height:7px;border-radius:50%;background:var(--tx3)}
.kualitas-tpl.GREEN i{background:var(--aksen)}
.kualitas-tpl.YELLOW{border-color:#f0d58a;color:#8a5a00}.kualitas-tpl.YELLOW i{background:var(--kuning)}
.kualitas-tpl.RED{border-color:#f3b8b3;color:#c0362c}.kualitas-tpl.RED i{background:var(--merah)}
@media (prefers-color-scheme:dark){.kualitas-tpl.YELLOW{border-color:#4a3d16;color:#f1d58c}.kualitas-tpl.RED{border-color:#5a2420;color:#f3aaa3}}
.nota-kategori{display:flex;align-items:flex-start;gap:6px;margin:-2px 0 10px;font-size:12.5px;line-height:1.4;color:#8a5a00}
.nota-kategori svg.i{width:14px;height:14px;flex:none;margin-top:1px}
@media (prefers-color-scheme:dark){.nota-kategori{color:#f1d58c}}
/* HP: spanduk kabar Meta cukup satu baris (judul lengkapnya ada di layar Nomor usaha) */
@media (max-width:760px){
  .spanduk-kabar-meta{flex-wrap:nowrap;justify-content:flex-start;gap:10px;text-align:left}
  .spanduk-kabar-meta > span{flex:1;min-width:0}
  .spanduk-kabar-meta .sk-rinci{display:none}
  .spanduk-kabar-meta .tbl-teks{flex:none}
}
/* HP: rel bawah bisa digeser kalau ikonnya tidak muat (360px memuat ±8 ikon) supaya Nomor usaha dan Langganan tetap terjangkau */
@media (max-width:760px){
  .rel{justify-content:space-between;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .rel::-webkit-scrollbar{display:none}
  .rel > .rel-item,.rel-bawah > .rel-item{flex:none}
  /* tanpa ini .utama ikut memanjang di tata letak kolom dan layar .halaman tidak bisa digulir */
  .utama{min-height:0}
}
/* spanduk tagihan di HP: satu baris ringkas (teks dipotong, tombol Bayar tetap terlihat) */
@media (max-width:600px){
  .spanduk-tagihan{flex-wrap:nowrap;justify-content:flex-start;gap:8px;padding:6px 12px;font-size:12.5px}
  .spanduk-tagihan>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .spanduk-tagihan [data-ke-langganan]{display:none}
  .spanduk-tagihan .tbl{flex:none;padding:4px 10px;font-size:12px}
}
/* ---------- label buatan sendiri (label.js): warna, pill, popover, penyunting, jendela kelola ---------- */
/* Tiap warna: --lb latar pill, --lt teks pill (kontras >= 5:1), --ld titik/swatch. */
[data-lw="hijau"]{--lb:#e3f5ec;--lt:#0f6b45;--ld:#1fa86b}
[data-lw="merah"]{--lb:#fdecea;--lt:#b42318;--ld:#e5484d}
[data-lw="ungu"]{--lb:#efe9fb;--lt:#6334b8;--ld:#8b5cf6}
[data-lw="biru"]{--lb:#e6f1fb;--lt:#1d5fa8;--ld:#3b82f6}
[data-lw="kuning"]{--lb:#fff3cc;--lt:#7a5200;--ld:#e0a000}
[data-lw="oranye"]{--lb:#ffebd9;--lt:#9a3f06;--ld:#f0782a}
[data-lw="teal"]{--lb:#dcf4f1;--lt:#0d6660;--ld:#12a194}
[data-lw="abu"]{--lb:#eceff1;--lt:#46555e;--ld:#8696a0}
@media (prefers-color-scheme:dark){
  [data-lw="hijau"]{--lb:#133a2b;--lt:#8ae6c0}
  [data-lw="merah"]{--lb:#43191a;--lt:#f6b0aa}
  [data-lw="ungu"]{--lb:#2e2250;--lt:#cdb8ff}
  [data-lw="biru"]{--lb:#172d47;--lt:#9cc4f2}
  [data-lw="kuning"]{--lb:#3a2f0e;--lt:#f3d68a}
  [data-lw="oranye"]{--lb:#3f2513;--lt:#f8b988}
  [data-lw="teal"]{--lb:#113835;--lt:#86ddd4}
  [data-lw="abu"]{--lb:#2a363d;--lt:#c0cbd1}
}
.tanda-label{display:inline-block;flex:none;max-width:120px;padding:0 7px;border-radius:5px;font-size:11px;font-weight:600;line-height:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;background:var(--lb,var(--kepala));color:var(--lt,var(--tx2))}
.tanda-label.lebih{padding:0 5px;line-height:16px;border:1px solid var(--garis2);background:transparent;color:var(--tx2);font-variant-numeric:tabular-nums;max-width:none}
.titik-label{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--ld,var(--tx3))}
.titik-label.semua{background:transparent;box-shadow:inset 0 0 0 1.5px var(--tx3)}

/* daftar chat: maks 2 pill + "+N", satu baris */
.baris-label{flex:none;display:flex;align-items:center;gap:4px;min-width:0}
.baris-label .tanda-label{max-width:84px}
@media (max-width:420px){.baris-label .tanda-label{max-width:64px}}
.obrolan-judul small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* baris saringan: tombol Label tetap di kiri, chip lain satu baris (digeser bila sempit) */
.saring-baris{display:flex;align-items:flex-start;gap:8px;margin-top:10px;min-width:0}
.saring-baris .saring{flex:1;min-width:0;margin-top:0}
.saring-label{flex:none;display:inline-flex;align-items:center;gap:5px;max-width:156px}
.saring-label svg.i{width:13px;height:13px;stroke-width:2.1;vertical-align:0}
.saring-label .sl-panah{width:13px;height:13px;margin-right:-3px;opacity:.7}
.saring-label .sl-teks{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saring-label[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--garis2)}
.saring-kontak{margin:0 0 6px}
.saring-kontak .saring{flex-wrap:wrap;margin:0}
#saringKontak{margin:0}

/* popover label (pilih banyak di panel pelanggan, pilih satu di saringan) */
.pop-label{position:fixed;z-index:60;width:264px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);color:var(--tx);border-radius:10px;box-shadow:0 0 0 1px var(--garis),var(--bayang2)}
.pop-saring{width:240px}
.pl-cari{flex:none;display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-bottom:1px solid var(--garis);color:var(--tx3)}
.pl-cari svg.i{width:16px;height:16px;vertical-align:0}
.pl-cari input{flex:1;min-width:0;border:0;padding:0;background:transparent;outline:none;color:var(--tx);font-size:14px}
.pl-cari input::placeholder{color:var(--tx3)}
.pl-daftar,.ps-daftar{max-height:248px;overflow-y:auto;padding:4px 0;overscroll-behavior:contain}
.pl-opsi{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 12px;border:0;background:none;font:inherit;font-size:14px;color:var(--tx);text-align:left;cursor:pointer}
.pl-opsi:hover,.pl-opsi.aktif{background:var(--hover)}
@media (prefers-color-scheme:dark){.pl-opsi:hover,.pl-opsi.aktif{background:#233138}}
.pl-opsi:focus-visible{outline:2px solid var(--aksen);outline-offset:-2px}
.pl-opsi[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.pl-nama{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-jumlah{flex:none;min-width:20px;text-align:right;font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums}
.pl-kotak{flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--garis2);color:#fff}
.pl-kotak svg.i{width:12px;height:12px;stroke-width:3.2;vertical-align:0;visibility:hidden}
.pl-opsi[aria-selected="true"] .pl-kotak{background:var(--aksen);box-shadow:none}
.pl-opsi[aria-selected="true"] .pl-kotak svg.i{visibility:visible}
@media (prefers-color-scheme:dark){.pl-kotak{color:#111b21}}
.pl-centang{flex:none;display:grid;place-items:center;width:16px;height:16px;color:var(--aksen-tua)}
.pl-centang svg.i{width:16px;height:16px;stroke-width:2.4;vertical-align:0}
@media (prefers-color-scheme:dark){.pl-centang{color:#00a884}}
.pl-buat{color:var(--aksen-tua)}
.pl-buat b{font-weight:650}
@media (prefers-color-scheme:dark){.pl-buat{color:#00a884}}
.pl-kosong{margin:0;padding:10px 12px;font-size:13px;color:var(--tx3)}
.pl-kaki{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:0 12px;border-top:1px solid var(--garis)}
.pl-kelola{display:inline-flex;align-items:center;font-size:13px}
.pl-kelola svg.i{width:15px;height:15px;margin-right:6px}
.pl-hitung{font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-hitung.penuh{color:#c0362c}

/* penyunting label di panel info pelanggan */
.ip-judul{align-self:flex-start;font-size:12.5px;color:var(--tx2);margin-top:8px}
.ip-label{width:100%;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;text-align:left}
.chip-label{display:inline-flex;align-items:center;gap:2px;max-width:100%;overflow:visible;padding:0 3px 0 9px;border-radius:6px;font-size:12px;line-height:24px}
.cl-nama{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-lepas{flex:none;display:grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer;opacity:.7}
.cl-lepas:hover{opacity:1;background:rgba(11,20,26,.09)}
.cl-lepas:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:-1px}
@media (prefers-color-scheme:dark){.cl-lepas:hover{background:rgba(255,255,255,.12)}}
.cl-lepas svg.i{width:12px;height:12px;stroke-width:2.6;vertical-align:0}
.tbl-tambah-label{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 9px 0 6px;border:1px dashed var(--garis2);border-radius:6px;background:transparent;color:var(--tx2);font-size:12px;font-weight:600;cursor:pointer}
.tbl-tambah-label:hover,.tbl-tambah-label[aria-expanded="true"]{border-color:var(--aksen);color:var(--aksen-tua)}
@media (prefers-color-scheme:dark){.tbl-tambah-label:hover,.tbl-tambah-label[aria-expanded="true"]{color:#00a884}}
.tbl-tambah-label svg.i{width:13px;height:13px;stroke-width:2.4;vertical-align:0}

/* layar kontak: kolom label */
.deret-label{display:flex;flex-wrap:wrap;gap:4px}
.tabel-kontak .kol-label{max-width:220px}

/* jendela kelola label */
#dialogLabel{width:min(500px,calc(100% - 32px))}
.kl-isi header{align-items:flex-start}
.kl-isi header .tbl-ikon{margin:-6px -11px 0 0}
#klHitung{font-variant-numeric:tabular-nums}
#klHitung.penuh{color:#c0362c;font-weight:600}
.kl-daftar{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--garis);max-height:min(52vh,420px);overflow-y:auto}
.kl-baris{display:grid;grid-template-columns:32px minmax(0,1fr) 96px 32px;column-gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--garis)}
.kl-warna{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer}
.kl-warna:hover,.kl-warna[aria-expanded="true"]{background:var(--hover)}
.kl-warna:disabled{opacity:.45;cursor:default}
.kl-warna .titik-label{width:16px;height:16px}
.kl-baris input.kl-nama{min-width:0;height:34px;padding:0 8px;border:1px solid transparent;border-radius:6px;background:transparent;font-size:14px}
.kl-baris input.kl-nama:hover{border-color:var(--garis2)}
.kl-baris input.kl-nama:focus{border-color:var(--aksen);background:var(--panel)}
.kl-baris input.kl-nama:disabled{opacity:.6}
.kl-baris input.salah,.kl-baris input.salah:focus{border-color:var(--merah)}
.kl-jumlah{text-align:right;font-size:12.5px;color:var(--tx3);white-space:nowrap;font-variant-numeric:tabular-nums}
.kl-hapus{width:32px;height:32px}
.kl-hapus svg.i{width:16px;height:16px}
.kl-hapus:hover{color:#c0362c}
.kl-sub,.kl-galat{grid-column:1/-1}
.kl-sub:empty{display:none}
.kl-galat{margin:4px 0 2px 42px;font-size:12.5px;color:var(--merah)}
.kl-kosong{padding:14px 0;border-bottom:1px solid var(--garis);font-size:13.5px;color:var(--tx3)}
.kl-palet{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0 6px 42px}
.kl-swatch{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--ld);color:#fff;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(11,20,26,.1)}
.kl-swatch[data-w="kuning"]{color:#3a2f00}
.kl-swatch[aria-checked="true"]{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ld)}
.kl-swatch svg.i{width:14px;height:14px;stroke-width:3;vertical-align:0}
.kl-swatch:focus-visible{outline:2px solid var(--tx);outline-offset:4px}
.kl-yakin{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:6px 0 2px 42px;padding:10px 12px;border-radius:8px;background:#fdecea;color:#7a1f18}
.kl-yakin p{flex:1 1 180px;margin:0;font-size:13.5px;line-height:1.45}
.kl-yakin-aksi{display:flex;gap:8px;margin-left:auto}
@media (prefers-color-scheme:dark){.kl-yakin{background:#3a1715;color:#f6c9c4}}
.tbl-bahaya{background:#d13b30;color:#fff}
.tbl-bahaya:hover{background:#b42318}
.kl-baris.yakin input.kl-nama{pointer-events:none}
.kl-baru{margin-top:6px;border-bottom:0;padding-bottom:0}
.kl-baru #klNamaBaru{height:34px;padding:0 8px}
.kl-baru #klTambahTbl{grid-column:3/5;height:34px;padding:0 12px}
.kl-baru #klTambahTbl svg.i{width:15px;height:15px;margin-right:4px}
@media (max-width:480px){
  #dialogLabel .dialog-isi{padding:18px 16px}
  .kl-baris{grid-template-columns:32px minmax(0,1fr) 40px 32px;column-gap:8px}
  .kl-jumlah .kl-kata{display:none}
  .kl-galat,.kl-yakin{margin-left:40px}
  .kl-palet{padding-left:40px;gap:8px}
}
.ip-penjawab{width:100%}
.kl-baru #klTambahTbl{gap:0}
.kl-baru #klTambahTbl svg.i{margin-right:5px}
/* teks bantu di kartu kontak sejajar tepi kiri chip dan tabel (bukan gaya gelembung .kartu p) */
.kontak-kolom .kartu p.bantu{padding:0;border-radius:0;white-space:normal}
.kontak-kolom .kartu p.kecil-atas{margin:2px 0 8px}
#ringkasKontak{margin-top:10px}
/* baris saringan kontak: tombol Label + chip promo; di layar sempit chip turun ke baris sendiri */
.saring-kontak{flex-wrap:wrap;row-gap:8px}
.saring-kontak .saring{flex:1 1 auto}
/* HP: kolom Sumber disembunyikan supaya tabel kontak muat tanpa geser ke samping */
@media (max-width:480px){
  .tabel-kontak th:nth-child(4),.tabel-kontak td:nth-child(4){display:none}
  .tabel-kontak .tanda-label{max-width:88px}
}
@media (max-width:480px){.kl-palet{gap:6px}.kl-swatch{width:24px;height:24px}}

/* ---------- sisa balasan gratis Meta (kuota.js) ---------- */
.kuota-layanan{margin-bottom:16px}
.kuota-layanan[hidden]{display:none}
.kq-kepala{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.kq-kepala h3{margin:0;font-size:15px}
.kq-periode{font-size:12.5px;color:var(--tx3)}
.kq-info{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--kepala);font-size:13.5px;color:var(--tx2);line-height:1.55}
.kq-info p{margin:0;background:none;padding:0;white-space:normal;color:inherit}
.kq-info svg.i{width:17px;height:17px;flex:none;margin-top:2px;color:var(--aksen)}
.kq-nomor{padding:12px 0;border-top:1px solid var(--garis)}
.kq-nomor:first-of-type{border-top:0;padding-top:0}
.kq-baris{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kq-tampil{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.kq-sisa{font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums}
.kq-sisa b{font-size:18px;color:var(--tx);margin-right:2px}
.kq-bar{height:8px;border-radius:4px;background:var(--kepala);margin:8px 0;overflow:hidden}
.kq-bar i{display:block;height:100%;border-radius:4px;background:var(--aksen);transition:width .6s}
.kq-nomor[data-t="tipis"] .kq-bar i{background:#e8a33d}
.kq-nomor[data-t="habis"] .kq-bar i{background:#e5484d}
.kq-nomor p.kq-ket{margin:0;background:none;padding:0;white-space:normal;font-size:12.5px;color:var(--tx2);display:flex;gap:6px;align-items:flex-start;line-height:1.5}
.kq-ket svg.i{width:14px;height:14px;flex:none;margin-top:2px}
.kq-nomor[data-t="tipis"] .kq-ket{color:#8a5a00}
.kq-nomor[data-t="habis"] .kq-ket{color:#c0362c}
.kuota-layanan p.kq-catatan{margin:10px 0 0;background:none;padding:0;white-space:normal;font-size:11.5px;color:var(--tx3)}

/* ---------- lonceng pemberitahuan (pemberitahuan.js) ---------- */
#tblLonceng.ada-kabar{color:var(--tx)}
.lonceng-panel{position:fixed;left:72px;bottom:16px;z-index:60;width:380px;max-height:min(560px,calc(100dvh - 32px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--garis);border-radius:16px;box-shadow:0 20px 50px -12px rgba(11,20,26,.35),0 2px 8px rgba(11,20,26,.08);overflow:hidden}
.lonceng-panel[hidden]{display:none}
.lonceng-panel header{display:flex;align-items:baseline;justify-content:space-between;padding:16px 18px 10px}
.lonceng-panel h2{margin:0;font-size:16px;font-weight:650}
#loncengJumlah{font-size:12.5px;color:var(--tx3)}
.lonceng-isi{overflow-y:auto;padding:0 10px 10px;display:flex;flex-direction:column;gap:8px}
.lonceng-isi>.spanduk-tagihan{flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:6px 10px;padding:12px 14px;border:0;border-radius:12px;font-size:13.5px;line-height:1.5;text-align:left}
.lonceng-isi>.spanduk-tagihan[hidden]{display:none}
.lonceng-isi>.spanduk-tagihan>svg.i{width:18px;height:18px;margin-top:1px}
.lonceng-isi>.spanduk-tagihan>span{flex:1 1 calc(100% - 30px);min-width:0;white-space:normal;overflow:visible;text-overflow:clip}
.lonceng-isi>.spanduk-tagihan .tbl,.lonceng-isi>.spanduk-tagihan .tbl-teks{display:inline-flex!important;margin-left:28px}
.lonceng-isi>.spanduk-tagihan .tbl+.tbl-teks{margin-left:4px}
.lonceng-kosong{display:flex;align-items:center;gap:8px;margin:0 18px 18px;padding:14px;border-radius:12px;background:var(--kepala);font-size:13.5px;color:var(--tx2)}
.lonceng-kosong[hidden]{display:none}
.lonceng-kosong svg.i{width:17px;height:17px;color:var(--aksen)}
@media (max-width:760px){.lonceng-panel{left:8px;right:8px;bottom:72px;width:auto}}

/* ---------- menu bot bertombol (tata letak 26 Sep 2026) ---------- */
.bot-kepala{align-items:flex-end}
.bot-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.sakelar-besar{display:inline-flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;padding:6px 14px 6px 8px;border:1px solid var(--garis2);border-radius:999px;background:var(--panel)}
.sakelar-besar input{position:absolute;opacity:0;width:1px;height:1px}
.sakelar-jalur{width:38px;height:22px;border-radius:11px;background:var(--garis2);position:relative;transition:background .15s;flex:none}
.sakelar-jalur::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sakelar-besar input:checked+.sakelar-jalur{background:var(--aksen)}
.sakelar-besar input:checked+.sakelar-jalur::after{transform:translateX(16px)}
.sakelar-besar input:focus-visible+.sakelar-jalur{outline:2px solid var(--aksen);outline-offset:2px}
.bot-simpan{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--tx3);min-height:18px}
.bot-simpan svg.i{width:14px;height:14px}
.bot-simpan.ok{color:var(--aksen)}
.bot-simpan.galat{color:var(--merah)}
.bot-simpan.proses i{width:10px;height:10px;border-radius:50%;border:2px solid var(--garis2);border-top-color:var(--aksen);animation:putar .7s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
.bot-nota{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 14px;border-radius:10px;background:#fff4d6;color:#8a5a00;font-size:13.5px}
.bot-nota svg.i{width:16px;height:16px;flex:none}
@media (prefers-color-scheme:dark){.bot-nota{background:#3a2e12;color:#f5d38a}}
.bot-kolom{grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr)}
.bot-form{display:flex;flex-direction:column;gap:14px;min-width:0}
.bot-kartu{padding:18px 18px 16px}
.bot-kartu-kepala{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.bot-kartu-kepala h3{margin:0 0 2px;font-size:15px;display:flex;align-items:center;gap:8px}
.bot-kartu-kepala p{margin:0}
.bot-langkah{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--aksen) 14%,transparent);color:var(--aksen);font-weight:700;font-size:13px}
.bot-jumlah{font-size:12px;font-weight:600;color:var(--tx3);background:var(--kepala);padding:1px 8px;border-radius:999px}
.bot-hitung{display:flex;justify-content:flex-end;margin-top:4px}
#botSapa{width:100%;padding:10px 12px;border:1px solid var(--garis2);border-radius:10px;background:var(--panel);resize:vertical;line-height:1.45}
#botSapaHitung,.mb-hitung{font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
#botSapaHitung.penuh,.mb-hitung.penuh{color:var(--merah)}
.daftar-menu-bot{display:flex;flex-direction:column;gap:8px}
.daftar-menu-bot .menu-bot{margin:0;padding:10px 10px 10px 6px;border-radius:12px;background:var(--panel);transition:box-shadow .15s,border-color .15s}
.daftar-menu-bot .menu-bot:focus-within{border-color:var(--aksen);box-shadow:0 0 0 3px color-mix(in srgb,var(--aksen) 15%,transparent)}
.daftar-menu-bot .menu-bot.kurang{border-style:dashed}
.daftar-menu-bot .menu-bot.diseret{opacity:.45}
.daftar-menu-bot .mb-atas{gap:6px}
.daftar-menu-bot .mb-balas{margin-left:34px;width:calc(100% - 34px);padding:8px 10px;line-height:1.4;border-radius:10px}
.mb-pegang{width:14px;height:24px;flex:none;cursor:grab;border-radius:4px;background:radial-gradient(circle,var(--tx3) 1.2px,transparent 1.6px) 0 0/7px 6px;opacity:.55;touch-action:none}
.mb-pegang:hover{opacity:1}
.pegangan-contoh{display:inline-block;width:10px;height:12px;vertical-align:-1px;background:radial-gradient(circle,var(--tx3) 1.1px,transparent 1.5px) 0 0/5px 4px}
.mb-judul-bungkus,.ice-bungkus{position:relative;flex:1;min-width:0;display:block}
.mb-judul-bungkus .mb-judul{width:100%;padding-right:52px}
.mb-judul-bungkus .mb-hitung,.ice-bungkus .mb-hitung{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.mb-aksi{display:flex;gap:0;flex:none}
.mb-aksi .tbl-ikon{width:30px;height:30px}
.mb-aksi .tbl-ikon svg{width:16px;height:16px}
.mb-aksi .tbl-ikon[disabled]{opacity:.3;cursor:default}
.mb-naik svg{transform:rotate(180deg)}
.mb-kurang{display:flex;align-items:center;gap:6px;margin:0 0 0 34px;font-size:12px;color:#8a5a00}
.mb-kurang svg.i{width:13px;height:13px;flex:none}
@media (prefers-color-scheme:dark){.mb-kurang{color:#f5d38a}}
.bot-tambah{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.saran-menu{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.saran-menu .bantu{margin-right:2px}
.saran-item{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:12.5px;padding:5px 10px 5px 8px;border-radius:999px;border:1px dashed var(--garis2);background:none;color:var(--tx2);cursor:pointer}
.saran-item svg.i{width:13px;height:13px}
.saran-item:hover{border-color:var(--aksen);color:var(--aksen);border-style:solid}
#daftarIce{gap:8px}
#daftarIce .ice{width:100%;padding-right:52px}
.bot-pratinjau{position:sticky;top:16px}
.bot-pratinjau-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bot-pratinjau-kepala h3{margin:0}
.bot-pratinjau .hp-tiruan{margin-top:12px;width:300px}
.hp-avatar{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;background:#ffffff33;font-size:11px;font-weight:700;overflow:hidden}
.hp-avatar img{width:100%;height:100%}
@media (max-width:900px){.bot-kolom{grid-template-columns:minmax(0,1fr)}.bot-pratinjau{position:static}.bot-kepala{align-items:flex-start;flex-direction:column}.bot-status{align-items:flex-start}}
@media (max-width:520px){.daftar-menu-bot .mb-balas,.mb-kurang{margin-left:0;width:100%}.mb-pegang{display:none}.bot-pratinjau .hp-tiruan{width:100%}}
#layar-bot .kartu p{padding:0;white-space:normal;border-radius:0;font-size:13px;color:var(--tx3);line-height:1.45}
#layar-bot .kartu p.nota-peran{padding:8px 12px;border-radius:8px;color:#8a5a00}
#layar-bot .kartu p.mb-kurang{font-size:12px;color:#8a5a00}
.bot-pratinjau-kepala h3{margin:0;flex:1}
.bot-pratinjau-kepala .tbl-teks{display:inline-flex;align-items:center;gap:5px;margin:0}
.bot-pratinjau>p{margin-top:4px!important}

/* Kotak cari + chip saring daftar chat, gaya WhatsApp desktop baru (contoh dari Putra 27 Sep 2026) */
.cari-bungkus{padding:6px 12px 10px;border-bottom:0}
.cari-bungkus .cari{height:40px;padding:0 14px;gap:10px;border-radius:20px;background:var(--panel);color:var(--tx2);
  box-shadow:0 1px 2px rgba(11,20,26,.06),0 4px 14px rgba(11,20,26,.07)}
.cari-bungkus .cari input{font-size:15px}
.cari-bungkus .cari input::placeholder{color:var(--tx2)}
.cari-bungkus .saring-item{padding:3px 10px;border:1px solid var(--garis2);background:transparent;font-size:13px;line-height:18px;font-weight:500;color:var(--tx2)}
.cari-bungkus .saring-item:hover{background:var(--hover);filter:none}
.cari-bungkus .saring-item.aktif{background:#d9fdd3;border-color:#b8e6b2;color:#0b5a38}
.cari-bungkus .saring-item em{font-weight:600;opacity:.8}
@media (prefers-color-scheme:dark){
  .cari-bungkus .cari{background:var(--kepala);box-shadow:none}
  .cari-bungkus .saring-item.aktif{background:#103529;border-color:#1c5a43;color:#25d366}
}

/* Kepala chat dan kolom tulis melayang di atas latar doodle, gaya WhatsApp desktop baru
   (contoh dari Putra 27 Sep 2026). Aliran pesan memenuhi seluruh area dan bergulir di belakang keduanya. */
.obrolan-isi{position:relative}
.obrolan-kepala{position:absolute;top:0;left:0;right:0;height:72px;gap:12px;padding:0 18px 6px;border-left:0;
  background:color-mix(in srgb,var(--obrolan) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.obrolan-kepala .avatar{width:44px;height:44px;font-size:15px}
.obrolan-judul strong{font-weight:600;font-size:17px}
.obrolan-judul small{font-size:12.5px}
.obrolan-kepala .chip{background:color-mix(in srgb,var(--panel) 85%,transparent);box-shadow:0 1px 3px rgba(11,20,26,.08)}
.tbl-info{width:44px;height:44px;flex:none;background:color-mix(in srgb,var(--panel) 88%,transparent);color:var(--tx);box-shadow:0 1px 3px rgba(11,20,26,.1)}
.tbl-info svg{width:20px;height:20px}
.tbl-info[aria-pressed="true"]{background:var(--panel)}
.kotak.info-tutup .info-pelanggan{display:none!important}
.aliran{padding-top:80px;padding-bottom:92px}
.tulis-area{position:absolute;left:0;right:0;bottom:0;padding:10px 16px 4px;border-left:0;background:transparent}
.tulis{gap:10px;min-height:52px;padding:0;align-items:flex-end}
.tulis .tbl-ikon{width:46px;height:46px;flex:none;background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--tx);box-shadow:0 1px 3px rgba(11,20,26,.12)}
.tulis .tbl-ikon svg{width:22px;height:22px}
.tulis-kotak{min-height:46px;display:flex;align-items:center;padding:12px 18px;border-radius:23px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 1px 3px rgba(11,20,26,.12)}
.tulis textarea{caret-color:var(--aksen)}
.tbl-kirim{width:46px;height:46px;background:#1daa61;box-shadow:0 1px 3px rgba(11,20,26,.15)}
.tulis-nota{margin:3px 0 0 66px;min-height:14px;font-size:11.5px;text-shadow:0 0 6px var(--obrolan)}
.tulis-nota:empty{min-height:0}
@media (prefers-color-scheme:dark){
  .obrolan-kepala{background:rgba(11,20,26,.72)}
  .tulis .tbl-ikon,.tbl-info,.tulis-kotak{background:#202c33;box-shadow:none}
}
@media (max-width:640px){
  .obrolan-kepala{height:64px;padding:0 10px 6px}
  .aliran{padding-top:70px;padding-bottom:86px}
  .tulis-area{padding:8px 8px 4px}
  .tulis .tbl-ikon{width:42px;height:42px}
}

/* Chat gratis di panel info pelanggan (public/kotak/kuota.js gambarPanel): kotak polos senada "Pesanan / Total belanja" */
.info-pelanggan .ip-kuota{margin-top:auto;width:100%;padding:8px 10px;border-radius:8px;background:var(--kepala);text-align:left}
.ip-kuota span{display:block;font-size:11.5px;color:var(--tx3)}
.ip-kuota b{display:block;font-size:15px;font-weight:600;color:var(--tx)}
.ip-kuota small{display:block;margin-top:1px;font-size:12px;line-height:16px;color:var(--tx3);white-space:pre-line}
.ip-kuota[data-t="tipis"] b{color:#a05f00}
.ip-kuota[data-t="habis"] b{color:var(--merah)}

/* Kepala chat serupa WhatsApp desktop (contoh Putra 27 Sep 2026): hanya foto, nama, dan tombol ⋯, lebih bening.
   "ditangani ... · nomor" sudah ada di panel info; chip jendela 24 jam hanya muncul saat chat tak bisa dibalas. */
.obrolan-kepala{background:color-mix(in srgb,var(--obrolan) 45%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.obrolan-kepala .obrolan-judul small{display:none}
.obrolan-kepala .obrolan-judul strong{font-size:17.5px}
.obrolan-kepala .chip.buka{display:none}
@media (prefers-color-scheme:dark){.obrolan-kepala{background:rgba(11,20,26,.5)}}

/* Foto profil bawaan (tanpa foto): siluet orang di lingkaran pastel, seperti WhatsApp (contoh Putra 27 Sep 2026) */
.avatar.tanpa-foto .siluet{width:52%;height:52%;fill:currentColor;margin-top:6%}
.avatar.tanpa-foto[data-w="0"]{background:#d6f3ea;color:#1f8a6f}.avatar.tanpa-foto[data-w="1"]{background:#dde6fb;color:#4a6fcf}
.avatar.tanpa-foto[data-w="2"]{background:#e8e0fb;color:#6e4fd0}.avatar.tanpa-foto[data-w="3"]{background:#fbe5d4;color:#c2682c}
.avatar.tanpa-foto[data-w="4"]{background:#d6eff4;color:#2b8ea0}.avatar.tanpa-foto[data-w="5"]{background:#fbdfe8;color:#c24469}
@media (prefers-color-scheme:dark){.avatar.tanpa-foto{filter:brightness(.55) saturate(1.3)}}
.obrolan-kepala .avatar{width:48px;height:48px;box-shadow:0 1px 3px rgba(11,20,26,.1)}
.obrolan-kepala .tbl-info{width:48px;height:48px;background:#fffdf9}
.obrolan-kepala .obrolan-judul strong{font-weight:700;font-size:18px;color:#111b21}
@media (prefers-color-scheme:dark){.obrolan-kepala .tbl-info{background:#202c33}.obrolan-kepala .obrolan-judul strong{color:var(--tx)}}

/* Efek kaca kepala chat (koreksi Putra 27 Sep 2026): kaca tipis seperti WhatsApp desktop — isi di belakang
   masih samar terbaca dan doodle tetap tampak; makin ke bawah makin bening, tanpa tepi keras. */
.obrolan-kepala{background:linear-gradient(to bottom,color-mix(in srgb,var(--obrolan) 62%,transparent),color-mix(in srgb,var(--obrolan) 18%,transparent));
  -webkit-backdrop-filter:blur(2.5px) saturate(1.15);backdrop-filter:blur(2.5px) saturate(1.15);
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.obrolan-kepala .tbl-info{background:rgba(255,253,249,.62);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(11,20,26,.1)}
.tulis .tbl-ikon,.tulis-kotak{background:rgba(255,253,249,.72);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border:1px solid rgba(255,255,255,.7)}
@media (prefers-color-scheme:dark){
  .obrolan-kepala{background:linear-gradient(to bottom,rgba(11,20,26,.6),rgba(11,20,26,.15))}
  .obrolan-kepala .tbl-info,.tulis .tbl-ikon,.tulis-kotak{background:rgba(32,44,51,.72);border-color:rgba(255,255,255,.08)}
}

/* Sidebar sederhana gaya WhatsApp desktop (contoh Putra 27 Sep 2026), hanya layar lebar: ikon + nama menu,
   angka di kanan, grup "Lainnya" yang bisa dilipat, dan baris profil (foto + nama) di bawah.
   Nama menu diambil dari atribut title (menu.js menamai ulang per jenis usaha lewat title). */
.rel-lainnya,.rel-saya-nama{display:none}
@media (min-width:1100px){
  .rel{width:216px;align-items:stretch;gap:2px;padding:14px 10px 10px;background:var(--kepala);overflow-y:auto;scrollbar-width:thin}
  .rel-item{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:auto;height:42px;padding:0 12px;border-radius:10px;color:var(--tx);font-size:15px}
  .rel-item::before{content:attr(title);order:2;flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rel-item svg.i{order:1;flex:none;width:22px;height:22px}
  .rel-item.aktif{background:rgba(11,20,26,.07);color:var(--tx)}
  .rel-item.khusus::after{display:none}
  .rel-lencana{order:3;position:static;min-width:0;height:auto;padding:0;background:none;color:var(--tx2);font-size:14px;font-weight:500}
  .rel-lencana.bahaya{background:none;color:var(--merah)}
  .rel-bawah{align-items:stretch;gap:2px}
  .rel-lainnya{display:flex;align-items:center;justify-content:space-between;margin:10px 0 2px;padding:6px 12px;border:0;background:none;
    color:var(--tx3);font-size:13.5px;font-weight:600;cursor:pointer;border-radius:8px}
  .rel-lainnya:hover{background:rgba(11,20,26,.05)}
  .rel-lainnya svg.i{width:16px;height:16px;transition:transform .15s}
  .rel.ringkas .rel-lainnya svg.i{transform:rotate(-90deg)}
  .rel.ringkas .rel-lain{display:none}
  .rel-saya{display:flex;align-items:center;gap:12px;margin-top:8px;padding:8px 10px}
  .rel-saya .avatar{width:34px;height:34px}
  .rel-saya-nama{display:block;min-width:0;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media (prefers-color-scheme:dark){.rel-item.aktif{background:rgba(255,255,255,.08)}.rel-lainnya:hover{background:rgba(255,255,255,.05)}}
}

/* Sidebar sebagai kartu melayang bersudut bulat (contoh Putra 27 Sep 2026) + pegangan geser lebar (#geserRel). */
.geser-rel{display:none}
@media (min-width:1100px){
  .rangka{background:var(--latar-app)}
  .rel{width:var(--lebar-rel,216px);margin:8px 0 8px 8px;border:0;border-radius:22px;background:#fafafa;
    box-shadow:0 0 0 1px rgba(11,20,26,.07),0 6px 20px rgba(11,20,26,.07)}
  .rel-item:hover{background:rgba(11,20,26,.05)}
  .rel-item.aktif{background:rgba(11,20,26,.075)}
  .geser-rel{display:block;flex:none;width:9px;margin:0 -1px 0 -1px;position:relative;z-index:3;cursor:col-resize;touch-action:none;outline:none}
  .geser-rel::after{content:"";position:absolute;top:30px;bottom:30px;left:3px;width:3px;border-radius:2px;background:transparent;transition:background .15s}
  .geser-rel:hover::after,.geser-rel:focus-visible::after,.geser-rel.aktif::after{background:var(--aksen)}
  /* Digeser sangat sempit: kembali ikon saja, tanpa label. */
  .rel-sempit .rel-item{justify-content:center;padding:0}
  .rel-sempit .rel-item::before,.rel-sempit .rel-lencana:not([hidden]){display:none}
  .rel-sempit .rel-lainnya{justify-content:center;padding:6px 0;font-size:0}
  .rel-sempit .rel-lainnya svg.i{width:18px;height:18px}
  .rel-sempit .rel-saya{justify-content:center;padding:8px 0}
  .rel-sempit .rel-saya-nama{display:none}
  @media (prefers-color-scheme:dark){.rel{background:#111b21;box-shadow:0 0 0 1px rgba(255,255,255,.06)}}
}

/* Kotak cari: redup saat tidak dipakai, menyala saat kursor di dalamnya (permintaan Putra 27 Sep 2026). */
.cari-bungkus .cari{background:color-mix(in srgb,var(--panel) 55%,var(--kepala));box-shadow:none;opacity:.8;
  transition:background .15s,box-shadow .15s,opacity .15s,color .15s;border:1px solid transparent}
.cari-bungkus .cari:hover{opacity:.95}
.cari-bungkus .cari:focus-within{opacity:1;background:var(--panel);color:var(--aksen-tua);border-color:color-mix(in srgb,var(--aksen) 45%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--aksen) 14%,transparent),0 4px 14px rgba(11,20,26,.08)}
.cari-bungkus .cari:focus-within input::placeholder{color:var(--tx3)}
@media (prefers-color-scheme:dark){.cari-bungkus .cari{background:#1b262d}.cari-bungkus .cari:focus-within{background:var(--kepala);color:#00a884}}

/* Kotak cari berefek kaca (permintaan Putra 27 Sep 2026): bening berembun + kilap tepi atas;
   redup saat tidak dipakai, kaca lebih terang dan bercincin hijau saat fokus. */
.cari-bungkus{position:relative;z-index:2}
.cari-bungkus .cari{opacity:1;color:var(--tx3);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(246,244,241,.42));
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(11,20,26,.04),0 1px 3px rgba(11,20,26,.06)}
.cari-bungkus .cari input::placeholder{color:var(--tx3)}
.cari-bungkus .cari:hover{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(248,246,243,.55))}
.cari-bungkus .cari:focus-within{color:var(--aksen-tua);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  border-color:color-mix(in srgb,var(--aksen) 40%,rgba(255,255,255,.8));
  box-shadow:inset 0 1px 0 #fff,0 0 0 3px color-mix(in srgb,var(--aksen) 14%,transparent),0 6px 18px rgba(11,20,26,.09)}
.cari-bungkus .cari:focus-within input::placeholder{color:var(--tx2)}
@media (prefers-color-scheme:dark){
  .cari-bungkus .cari{background:linear-gradient(180deg,rgba(42,57,66,.6),rgba(32,44,51,.4));border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  .cari-bungkus .cari:focus-within{background:linear-gradient(180deg,rgba(42,57,66,.9),rgba(32,44,51,.8));color:#00a884}
}

/* Daftar chat bergulir DI BAWAH kotak cari + chip saring, supaya efek kacanya terasa (permintaan Putra
   27 Sep 2026). Cari dan daftar menempati sel grid yang sama; tinggi pita cari (--tinggi-cari) diukur
   dasbor.js lewat ResizeObserver dan dipakai sebagai jarak atas daftar. */
.daftar{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.daftar > .daftar-kepala{grid-row:1;grid-column:1}
.daftar > .cari-bungkus{grid-row:2;grid-column:1;align-self:start;z-index:2;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--panel) 80%,transparent),color-mix(in srgb,var(--panel) 35%,transparent));
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  -webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);padding-bottom:14px}
.daftar > .daftar-isi{grid-row:2;grid-column:1;min-height:0;padding-top:var(--tinggi-cari,98px);scroll-padding-top:var(--tinggi-cari,98px)}

/* Halaman penuh layar di layar lebar (permintaan Putra 27 Sep 2026): tanpa pita hijau atas, tanpa rongga
   atas/bawah, tanpa batas lebar 1700px. */
@media (min-width:1441px){
  .hal-dasbor:not(.demo){padding:0;background:var(--latar-app)}
  .rangka{max-width:none;box-shadow:none}
}

/* Sidebar kaca berembun (permintaan Putra 27 Sep 2026): latar di sekitar kartu memakai doodle chat,
   kartu bening + blur, kilap tepi atas, item aktif seperti kaca yang lebih tebal. */
@media (min-width:1100px){
  .rangka{background:var(--obrolan) url(wa-bg.jpg) repeat;background-size:360px auto}
  .rel{background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(250,249,247,.5));
    -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(11,20,26,.05),0 8px 24px rgba(11,20,26,.08)}
  .rel-item:hover{background:rgba(255,255,255,.5)}
  .rel-item.aktif{background:rgba(255,255,255,.78);box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(11,20,26,.08)}
  @media (prefers-color-scheme:dark){
    .rangka{background:#0b141a url(wa-bg.jpg) repeat;background-size:360px auto;background-blend-mode:multiply}
    .rel{background:linear-gradient(180deg,rgba(32,44,51,.72),rgba(17,27,33,.6));border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
    .rel-item:hover{background:rgba(255,255,255,.06)}.rel-item.aktif{background:rgba(255,255,255,.1);box-shadow:none}
  }
}

/* Sidebar kaca lebih bening (permintaan Putra 27 Sep 2026): doodle di baliknya lebih tampak, blur lebih ringan. */
@media (min-width:1100px){
  .rel{background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.18));
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:rgba(255,255,255,.65)}
  .rel-item.aktif{background:rgba(255,255,255,.7)}
  @media (prefers-color-scheme:dark){.rel{background:linear-gradient(180deg,rgba(32,44,51,.45),rgba(17,27,33,.3))}}
}

/* Menu "+" gaya WhatsApp desktop (contoh Putra 27 Sep 2026): kartu kaca, ikon bulat besar, label di bawah. */
.menu-lampiran{left:14px;bottom:64px;display:grid;grid-template-columns:repeat(4,96px);gap:14px 6px;padding:22px 18px 18px;min-width:0;
  border-radius:28px;background:rgba(250,250,250,.88);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 40px rgba(11,20,26,.18)}
.menu-lampiran[hidden]{display:none}
.menu-lampiran::after{content:"";position:absolute;left:24px;bottom:-9px;width:18px;height:10px;background:rgba(250,250,250,.88);clip-path:polygon(0 0,100% 0,50% 100%)}
.menu-lampiran button{flex-direction:column;justify-content:flex-start;gap:8px;padding:0;border-radius:12px;background:none;font-size:13px;line-height:16px;text-align:center;color:var(--tx)}
.menu-lampiran button[hidden]{display:none}
.menu-lampiran button:hover{background:none}
.menu-lampiran button:hover .ml{transform:scale(1.05);box-shadow:0 3px 10px rgba(11,20,26,.14)}
.menu-lampiran .ml{width:64px;height:64px;background:#fff;box-shadow:0 1px 4px rgba(11,20,26,.08);transition:transform .12s,box-shadow .12s}
.menu-lampiran .ml svg.i{width:26px;height:26px}
.ml.biru2{color:#2f6fe4}
@media (prefers-color-scheme:dark){.menu-lampiran,.menu-lampiran::after{background:rgba(32,44,51,.92)}.menu-lampiran{border-color:rgba(255,255,255,.08)}.menu-lampiran .ml{background:#2a3942}}
@media (max-width:640px){.menu-lampiran{grid-template-columns:repeat(3,88px);left:8px}}

/* Foto, video, suara, dokumen di gelembung (inc/media.php) */
.gel-foto{display:block;margin:-4px -9px 6px -10px;border-radius:14px;overflow:hidden;background:rgba(11,20,26,.06);line-height:0}
.gel-foto img{display:block;width:100%;max-width:330px;max-height:360px;object-fit:cover}
.gel-foto.stiker{background:none;margin:0}.gel-foto.stiker img{width:140px;height:140px;object-fit:contain}
.gel-video{display:block;width:330px;max-width:100%;max-height:360px;margin:-4px -9px 6px -10px;border-radius:14px;background:#000}
.gel-audio{display:block;width:280px;max-width:100%;height:40px;margin:2px 0 4px}
.gel-dok{display:flex;align-items:center;gap:10px;min-width:240px;margin:-2px -6px 6px -7px;padding:10px 12px;border-radius:12px;
  background:rgba(11,20,26,.05);color:var(--tx);text-decoration:none}
.gel-dok:hover{background:rgba(11,20,26,.08)}
.gel-dok-ikon{flex:none;display:grid;place-items:center;width:38px;height:44px;border-radius:6px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.gel-dok-isi{flex:1;min-width:0;display:flex;flex-direction:column}
.gel-dok-isi b{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gel-dok-isi small{font-size:12px;color:var(--tx3)}
.gel-dok svg.i{flex:none;width:20px;height:20px;color:var(--tx3)}
.gel-media-tunggu{flex-direction:column;gap:6px;width:240px;height:150px;margin:-4px -9px 6px -10px;border-radius:14px}
.gel-media-tunggu small{font-size:12.5px}
@media (prefers-color-scheme:dark){.gel-dok{background:rgba(255,255,255,.06)}}

/* Dialog pratinjau sebelum kirim foto/file */
.dialog-media{width:min(520px,calc(100% - 32px))}
.media-pratinjau{display:grid;place-items:center;min-height:120px;max-height:56vh;margin:4px 0 12px;border-radius:14px;background:var(--kepala);overflow:hidden}
.media-pratinjau img,.media-pratinjau video{display:block;max-width:100%;max-height:56vh;object-fit:contain}
.media-pratinjau .gel-dok{margin:16px;min-width:0;width:calc(100% - 32px);background:var(--panel)}
#mediaKeterangan{width:100%;padding:11px 16px;border:1px solid var(--garis2);border-radius:22px;background:var(--panel);font-size:15px}
.dialog-media{border-radius:18px}
.dialog-isi #mediaKeterangan{padding:11px 16px;border-radius:22px;font-size:15px}

/* Jadwal kirim: [tanggal] [jam] berdampingan (Kirim massal, Menu hari ini). */
.jadwal-baris{display:flex;gap:8px;margin-top:8px}
.jadwal-baris[hidden]{display:none}
.jadwal-baris input{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--garis2);border-radius:12px;background:var(--panel);color:var(--tx);font:inherit}
.jadwal-baris input[type=time]{flex:0 0 130px}
.jadwal-baris input:focus{outline:none;border-color:var(--aksen);box-shadow:0 0 0 3px color-mix(in srgb,var(--aksen) 14%,transparent)}

/* Label "Khusus kitasapa" dan titik penandanya di rel dihapus dari semua layar (permintaan Putra 27 Sep 2026: tidak relevan). */
.khusus-tag{display:none!important}
.rel-item.khusus::after{display:none}

/* Keterangan di bawah judul layar: satu baris di layar lebar (permintaan Putra 27 Sep 2026); di layar sempit tetap membungkus. */
@media (min-width:1100px){.halaman-kepala p{max-width:none}.halaman-kepala > div{flex:1;min-width:0}}
#sRingkas:empty{display:none}

/* Tombol aksi di akhir form/kartu rata kanan, seperti tombol dialog (permintaan Putra 27 Sep 2026). */
.aksi-baris{justify-content:flex-end}
#sKirim,#oSimpan{display:block;margin-left:auto}
.mnu-aksi,.itg-aksi{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* Hanya kolom judul yang melebar; sakelar/tombol di kanan kepala tetap selebar isinya. */
@media (min-width:1100px){.halaman-kepala > div:not(:first-child){flex:none}}

/* Kotak centang tersembunyi di dalam sakelar (position:absolute) harus berpatokan pada sakelarnya sendiri.
   Tanpa ini ia berpatokan pada elemen di luar area gulir, menjorok ke bawah layar, dan saat sakelar diklik
   peramban menggulir SELURUH halaman sehingga aplikasi terdorong ke atas (bug Menu usaha, 27 Sep 2026). */
.sakelar,.sakelar-besar,label:has(> input[type=checkbox]),label:has(> input[type=radio]){position:relative}
html:has(body.hal-dasbor){overflow:hidden}

/* Foto pelanggan di panel info: klik untuk memasang (diunggah tim; Meta tidak mengirim foto profil pelanggan). */
.info-pelanggan .ip-foto{cursor:pointer;position:relative}
.info-pelanggan .ip-foto:hover::after{content:"Ganti foto";position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  background:rgba(11,20,26,.45);color:#fff;font-size:12.5px;font-weight:600}
.hal-dasbor:has(.demo) .info-pelanggan .ip-foto:hover::after{display:none}
.ip-hapus-foto{margin:-2px 0 2px;font-size:12.5px;color:var(--tx3)}

/* Gelembung chat mendekati tepi seperti WhatsApp desktop (permintaan Putra 27 Sep 2026): jarak samping tetap,
   bukan 7% lebar layar yang di layar lebar jadi sangat besar. */
.aliran{padding-left:28px;padding-right:28px}
@media (max-width:640px){.aliran{padding-left:12px;padding-right:12px}}

/* Tim: sakelar tanda petugas */
.tim-tanda{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:12px}
.tim-tanda .bantu{margin:0}