/* wa-modul-c.css — Menu bot (#layar-bot) dan Balasan otomatis (#layar-otomatis) disamakan dengan halaman chat
   gaya WhatsApp desktop baru (Putra 27 Sep 2026): kartu bulat besar tanpa tepi keras, chip tipis, gelembung
   radius 18px, pratinjau HP berlatar doodle dengan kepala kaca. Hanya menimpa; aturan dasar di dasbor.css. */
#layar-bot,#layar-otomatis{--bayang-kartu:0 1px 3px rgba(11,20,26,.08),0 6px 20px rgba(11,20,26,.06);
  --chip-aktif-bg:#d9fdd3;--chip-aktif-tepi:#b8e6b2;--chip-aktif-tx:#0b5a38;--cincin:0 0 0 3px color-mix(in srgb,var(--aksen) 15%,transparent)}
@media (prefers-color-scheme:dark){
  #layar-bot,#layar-otomatis{--bayang-kartu:0 0 0 1px rgba(255,255,255,.05);--chip-aktif-bg:#103529;--chip-aktif-tepi:#1c5a43;--chip-aktif-tx:#25d366}
}

/* ---------- kartu dan isian bersama ---------- */
#layar-bot .kartu,#layar-otomatis .kartu{border-radius:18px;padding:20px;box-shadow:var(--bayang-kartu)}
#layar-bot .kartu h3,#layar-otomatis .kartu h3{font-size:16px;font-weight:600}
#layar-bot input:not([type=checkbox]),#layar-bot textarea,#layar-otomatis input:not([type=checkbox]),#layar-otomatis textarea{
  border:1px solid var(--garis2);border-radius:12px;transition:border-color .15s,box-shadow .15s}
#layar-bot input:not([type=checkbox]):focus,#layar-bot textarea:focus,#layar-otomatis input:not([type=checkbox]):focus,#layar-otomatis textarea:focus{
  outline:none;border-color:var(--aksen);box-shadow:var(--cincin)}

/* ---------- Menu bot ---------- */
#layar-bot .bot-nota{border-radius:14px}
#layar-bot .bot-kartu{padding:20px 20px 18px}
#layar-bot .sakelar-besar{padding:5px 12px 5px 6px;border-color:var(--garis2)}
#layar-bot #botSapa{border-radius:14px;padding:10px 14px}
/* Tiap pilihan menu: kotak lembut tanpa tepi; tepi hijau hanya saat sedang diisi. */
#layar-bot .daftar-menu-bot .menu-bot{border:1px solid transparent;border-radius:16px;padding:10px 12px 10px 8px;
  background:color-mix(in srgb,var(--kepala) 70%,var(--panel))}
#layar-bot .daftar-menu-bot .menu-bot:focus-within{border-color:var(--aksen);background:var(--panel);box-shadow:var(--cincin)}
#layar-bot .daftar-menu-bot .menu-bot.kurang{border-style:solid;background:color-mix(in srgb,var(--kuning) 9%,var(--panel))}
#layar-bot .daftar-menu-bot .menu-bot.kurang:focus-within{border-color:var(--aksen)}
#layar-bot .mb-judul{border-radius:12px;background:var(--panel)}
/* Jawaban = pesan yang diterima pelanggan: warna gelembung keluar, sudut 18px seperti .gel. */
#layar-bot .daftar-menu-bot .mb-balas{border-radius:18px;padding:9px 14px;border-color:transparent;background:var(--keluar);box-shadow:var(--bayang-gel)}
#layar-bot .daftar-menu-bot .mb-balas:focus{border-color:var(--aksen);box-shadow:var(--cincin)}
#layar-bot #daftarIce .ice{border-radius:20px;padding:9px 52px 9px 14px}
/* Saran pilihan: pil tipis seperti chip saring daftar chat. */
#layar-bot .saran-item{padding:3px 10px 3px 8px;border:1px solid var(--garis2);border-style:solid;font-size:13px;line-height:18px;font-weight:500;color:var(--tx2)}
#layar-bot .saran-item:hover{background:var(--chip-aktif-bg);border-color:var(--chip-aktif-tepi);color:var(--chip-aktif-tx)}

/* ---------- pratinjau HP: sama dengan halaman chat ---------- */
#layar-bot .hp-tiruan{border-radius:40px;padding:9px;background:#1c1c1e;box-shadow:0 18px 50px -12px rgba(11,20,26,.35)}
#layar-bot .hp-layar{position:relative;border-radius:32px;min-height:0;
  background:var(--obrolan) url(wa-bg.jpg) repeat;background-size:300px auto}
@media (prefers-color-scheme:dark){
  #layar-bot .hp-layar{background:linear-gradient(rgba(11,20,26,.93),rgba(11,20,26,.93)),#0b141a url(wa-bg.jpg) repeat;background-size:auto,300px auto}
}
/* Kepala kaca tipis melayang di atas aliran, seperti .obrolan-kepala. */
#layar-bot .hp-kepala{position:absolute;top:0;left:0;right:0;z-index:1;height:62px;gap:10px;padding:10px 14px 8px;color:var(--tx);font-size:14px;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--obrolan) 70%,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 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
#layar-bot .hp-kepala b{font-weight:700;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#layar-bot .hp-avatar{width:36px;height:36px;background:#d6f3ea;color:#1f8a6f;font-size:12px;box-shadow:0 1px 3px rgba(11,20,26,.1)}
@media (prefers-color-scheme:dark){
  #layar-bot .hp-kepala{background:linear-gradient(to bottom,rgba(11,20,26,.6),rgba(11,20,26,.15))}
  #layar-bot .hp-avatar{background:#1f3b33;color:#7fd8bd}
}
#layar-bot .hp-isi{height:460px;padding:66px 12px 10px;gap:4px}
/* Gelembung: radius 18px, huruf 14px (skala HP), ekor melengkung seperti .gel.ujung. */
#layar-bot .hp-gel{position:relative;max-width:84%;margin-top:6px;padding:7px 11px 8px 12px;border-radius:18px;border-bottom-left-radius:6px;
  background:var(--masuk);color:var(--tx);font-size:14px;line-height:19px;box-shadow:var(--bayang-gel)}
#layar-bot .hp-gel.plg{border-radius:18px;border-bottom-right-radius:6px;background:var(--keluar)}
#layar-bot .hp-gel::after{content:"";position:absolute;bottom:0;left:-7px;width:9px;height:14px;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%)}
#layar-bot .hp-gel.plg::after{left:auto;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%)}
#layar-bot .hp-oleh{font-size:11px;color:var(--aksen-tua)}
#layar-bot button.hp-list{width:calc(100% + 23px);margin:7px -11px -8px -12px;padding:9px 7px;border-top:1px solid var(--garis);font-size:14px;font-weight:500;color:#027eb5}
@media (prefers-color-scheme:dark){#layar-bot button.hp-list,#layar-bot .hp-ice-tbl{color:#53bdeb}}
/* Keterangan sistem: seperti .pemisah di aliran chat. */
#layar-bot .hp-info{margin:6px 0 2px;padding:5px 10px;border-radius:8px;background:var(--panel);color:var(--tx2);font-size:12px;box-shadow:var(--bayang-gel)}
@media (prefers-color-scheme:dark){#layar-bot .hp-info{background:#182229;color:#8696a0}}
#layar-bot .hp-ice{gap:6px;margin-top:4px}
#layar-bot .hp-ice-tbl{padding:7px 14px;border:0;border-radius:18px;background:var(--masuk);color:#027eb5;font-size:13.5px;font-weight:500;box-shadow:var(--bayang-gel)}
#layar-bot .hp-ice-tbl:hover{background:var(--hover)}
/* Daftar pilihan: lembar bawah bersudut bulat. */
#layar-bot .hp-daftar{margin-top:8px;padding:12px 14px 6px;border-radius:18px;background:var(--panel);color:var(--tx);font-size:14px;box-shadow:0 6px 20px rgba(11,20,26,.14)}
#layar-bot .hp-daftar b{font-weight:600}
#layar-bot .hp-pilih{padding:10px 2px;border-bottom:1px solid var(--garis);color:var(--tx);font-size:14px}
#layar-bot .hp-pilih:last-child{border-bottom:0}
#layar-bot .hp-pilih:hover{background:var(--hover)}
#layar-bot .hp-pilih::after{width:14px;height:14px;border:1.5px solid var(--tx3);flex:none}
/* Kolom tulis: pil kaca + tombol kirim bulat hijau, seperti .tulis. */
#layar-bot .hp-tulis{gap:6px;padding:6px 8px 10px;background:transparent}
#layar-bot .hp-tulis input{height:40px;padding:0 14px;border-radius:20px;border:1px solid rgba(255,255,255,.7);font-size:14px;color:var(--tx);
  background:rgba(255,253,249,.8);box-shadow:0 1px 3px rgba(11,20,26,.12)}
#layar-bot .hp-tulis input:focus{outline:none;border-color:color-mix(in srgb,var(--aksen) 45%,transparent);box-shadow:var(--cincin)}
#layar-bot .hp-tulis button{width:40px;height:40px;flex:none;background:#1daa61;box-shadow:0 1px 3px rgba(11,20,26,.15)}
#layar-bot .hp-tulis button svg.i{width:18px;height:18px}
@media (prefers-color-scheme:dark){#layar-bot .hp-tulis input{background:rgba(32,44,51,.85);border-color:rgba(255,255,255,.08);box-shadow:none}}
@media (max-width:520px){#layar-bot .hp-isi{height:420px}}

/* ---------- Balasan otomatis ---------- */
#layar-otomatis .aturan{padding:12px 0}
#layar-otomatis .aturan.diubah{margin:0 -12px;padding:12px;border-radius:14px;border-bottom-color:transparent}
/* Kata kunci: chip tipis seperti chip saring daftar chat. */
#layar-otomatis .at-kata>span:not(.at-aksi){padding:3px 10px;border:1px solid var(--garis2);border-radius:999px;background:transparent;
  color:var(--tx2);font-size:13px;line-height:18px;font-weight:500}
#layar-otomatis .at-kata>.at-aksi{padding:0;border:0;background:none}
/* Balasan tampil sebagai gelembung keluar (yang diterima pelanggan). */
#layar-otomatis .aturan p{width:fit-content;max-width:100%;margin:8px 0 4px;padding:7px 13px 8px;border-radius:18px;
  background:var(--keluar);color:var(--tx);font-size:14.5px;line-height:19px;box-shadow:var(--bayang-gel)}
#layar-otomatis .at-pakai{height:4px;border-radius:2px}
#layar-otomatis .at-pakai i{border-radius:2px;background:#1daa61;opacity:.55}
/* Coba kata kunci: kotak lembut, isian berbentuk pil seperti kotak cari chat. */
#layar-otomatis .uji-kata{border:0;border-radius:16px;padding:14px;background:color-mix(in srgb,var(--kepala) 70%,var(--panel))}
#layar-otomatis .uji-kata input{height:40px;padding:0 16px;border-radius:20px;border-color:transparent;background:var(--panel)}
#layar-otomatis .hasil-uji{border-radius:14px;padding:10px 12px}
#layar-otomatis .form-kata{gap:8px}
#layar-otomatis #kKata{padding:9px 14px;border-radius:20px}
#layar-otomatis #kBalas,#layar-otomatis #oPesan{padding:9px 14px;border-radius:18px;background:var(--keluar);border-color:transparent;box-shadow:var(--bayang-gel);line-height:1.4}
#layar-otomatis #kBalas:focus,#layar-otomatis #oPesan:focus{border-color:var(--aksen);box-shadow:var(--cincin)}
#layar-otomatis .oto-sakelar{margin:2px 0 14px;padding:5px 12px 5px 6px;font-weight:500}
#layar-otomatis .jam-baris{gap:10px;margin-bottom:12px}
#layar-otomatis .jam-baris input{padding:7px 12px;border-radius:20px;background:var(--panel)}
@media (max-width:640px){
  #layar-bot .kartu,#layar-otomatis .kartu{padding:16px;border-radius:16px}
}
/* Tombol teks tanpa ikon hiasan, seperti WhatsApp (senada layar lain). */
:is(#layar-bot,#layar-otomatis) :is(.tbl,.tbl-teks) svg.i{display:none}

/* Pratinjau HP Menu bot sebagai iPhone tegak (contoh Putra 27 Sep 2026): bingkai hitam tipis bersudut besar,
   pulau hitam di atas, kepala nama usaha + "online", latar doodle memenuhi layar, kolom ketik di bawah.
   Tanpa logo WhatsApp (pagar klaim CLAUDE.md): foto/inisial usaha tetap dipakai. */
#layar-bot .hp-tiruan{width:300px;max-width:100%;margin:10px auto 4px;padding:7px;border-radius:52px;background:#111;
  box-shadow:0 0 0 1px #2a2a2a,0 24px 60px -18px rgba(11,20,26,.45)}
#layar-bot .hp-layar{position:relative;display:flex;flex-direction:column;height:620px;min-height:0;border-radius:45px;overflow:hidden;
  background:var(--obrolan) url(wa-bg.jpg) repeat;background-size:300px auto}
#layar-bot .hp-pulau{position:absolute;top:10px;left:50%;z-index:3;width:92px;height:27px;margin-left:-46px;border-radius:14px;background:#0a0a0a}
#layar-bot .hp-kepala{position:relative;top:auto;left:auto;right:auto;height:auto;flex:none;display:flex;align-items:center;gap:10px;
  padding:48px 16px 10px;background:rgba(252,251,249,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(11,20,26,.07);-webkit-mask-image:none;mask-image:none}
#layar-bot .hp-avatar{width:38px;height:38px;flex:none}
#layar-bot .hp-nama-blok{display:flex;flex-direction:column;min-width:0;line-height:1.2}
#layar-bot .hp-nama-blok b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#layar-bot .hp-status{display:flex;align-items:center;gap:5px;font-size:12px;color:#1f8a4c}
#layar-bot .hp-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#25d366}
#layar-bot .hp-isi{flex:1;height:auto;min-height:0;padding:12px 12px 8px;overflow-y:auto}
#layar-bot .hp-tulis{flex:none;padding:6px 10px 16px}
@media (prefers-color-scheme:dark){
  #layar-bot .hp-layar{background:#0b141a url(wa-bg.jpg) repeat;background-size:300px auto;background-blend-mode:multiply}
  #layar-bot .hp-kepala{background:rgba(32,44,51,.94);border-bottom-color:rgba(255,255,255,.06)}
  #layar-bot .hp-status{color:#25d366}
}
@media (max-width:640px){#layar-bot .hp-tiruan{width:270px}#layar-bot .hp-layar{height:540px}}

/* Pratinjau Menu bot: langsung HP besar tanpa kartu pembungkus (permintaan Putra 27 Sep 2026). Tinggi HP mengikuti
   tinggi layar; judul + teks bantu disembunyikan, tombol Ulangi tetap kecil di kanan atas. */
@media (min-width:901px){
  #layar-bot .bot-pratinjau{padding:0;background:none;box-shadow:none;border:0;top:12px}
  #layar-bot .bot-pratinjau-kepala{justify-content:flex-end;margin:0 auto -4px;width:min(390px,100%)}
  #layar-bot .bot-pratinjau-kepala h3,#layar-bot .bot-pratinjau > p{display:none}
  #layar-bot .bot-pratinjau .hp-tiruan{width:min(390px,100%);margin:8px auto 0;padding:8px;border-radius:58px}
  #layar-bot .hp-layar{height:clamp(520px,calc(100vh - 250px),820px);border-radius:50px}
  #layar-bot .hp-pulau{top:12px;width:110px;height:32px;margin-left:-55px;border-radius:16px}
  #layar-bot .hp-kepala{padding:56px 18px 12px}
  #layar-bot .hp-avatar{width:42px;height:42px}
  #layar-bot .hp-nama-blok b{font-size:16px}
  #layar-bot .hp-isi{padding:14px 14px 10px}
  #layar-bot .hp-gel,#layar-bot .hp-info{font-size:14.5px}
  #layar-bot .hp-tulis{padding:8px 12px 20px}
}

/* Kepala HP seperti chat WhatsApp di iPhone (koreksi Putra 27 Sep 2026): bilah status (jam, sinyal, baterai) di
   kiri-kanan pulau, lalu ‹ + foto kecil + nama + "online" abu + ikon video/telepon. */
#layar-bot .hp-statusbar{position:absolute;top:0;left:0;right:0;z-index:2;height:54px;display:flex;align-items:center;justify-content:space-between;
  padding:4px 30px 0 34px;font-size:15px;font-weight:600;color:#111;letter-spacing:-.01em}
#layar-bot .hp-sb-ikon{width:38px;height:12px;fill:currentColor}
#layar-bot .hp-kepala{gap:8px;padding:56px 12px 9px 8px;background:rgba(247,246,243,.92);border-bottom:1px solid rgba(11,20,26,.08)}
#layar-bot .hp-kembali{display:grid;place-items:center;width:22px;color:#027eb5}
#layar-bot .hp-kembali svg.i{width:24px;height:24px;transform:rotate(90deg);stroke-width:2.2}
#layar-bot .hp-avatar{width:36px;height:36px;font-size:13px;box-shadow:none;background:#d6f3ea;color:#1f8a6f}
#layar-bot .hp-nama-blok{flex:1}
#layar-bot .hp-nama-blok b{font-size:15.5px;font-weight:600}
#layar-bot .hp-status{font-size:12px;color:var(--tx3)}
#layar-bot .hp-status::before{display:none}
#layar-bot .hp-aksi{display:flex;gap:18px;padding-right:4px;color:#027eb5}
#layar-bot .hp-aksi svg.i{width:21px;height:21px;stroke-width:1.9}
@media (prefers-color-scheme:dark){
  #layar-bot .hp-statusbar{color:#fff}
  #layar-bot .hp-kepala{background:rgba(32,44,51,.94)}
  #layar-bot .hp-kembali,#layar-bot .hp-aksi{color:#53bdeb}
}

/* Efek kaca kepala + kolom ketik HP (permintaan Putra 27 Sep 2026). Isi chat (#botPratinjau) memenuhi seluruh layar HP
   dan bergulir DI BELAKANG kepala dan kolom ketik; doodle dipasang di isi chat (bukan di .hp-layar), karena
   backdrop-filter tidak menangkap latar milik elemen induk. */
#layar-bot .hp-layar{background:#111}
#layar-bot .hp-isi{position:absolute;inset:0;z-index:0;padding:118px 14px 86px;
  background:var(--obrolan) url(wa-bg.jpg) repeat;background-size:300px auto}
#layar-bot .hp-kepala{position:absolute;top:0;left:0;right:0;z-index:2;
  background:rgba(247,246,243,.55);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,.55);box-shadow:0 1px 0 rgba(11,20,26,.06)}
#layar-bot .hp-statusbar{z-index:3}
#layar-bot .hp-pulau{z-index:4}
#layar-bot .hp-tulis{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:10px 12px 22px;
  background:rgba(247,246,243,.5);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);
  border-top:1px solid rgba(255,255,255,.55)}
#layar-bot .hp-tulis input{background:rgba(255,255,255,.8)}
@media (prefers-color-scheme:dark){
  #layar-bot .hp-isi{background:#0b141a url(wa-bg.jpg) repeat;background-size:300px auto;background-blend-mode:multiply}
  #layar-bot .hp-kepala,#layar-bot .hp-tulis{background:rgba(32,44,51,.6);border-color:rgba(255,255,255,.06)}
  #layar-bot .hp-tulis input{background:rgba(42,57,66,.85)}
}

/* Kepala HP lebih tipis (koreksi Putra 27 Sep 2026). */
#layar-bot .hp-statusbar{height:44px;padding-top:2px;font-size:14px}
#layar-bot .hp-pulau{top:10px;height:28px;width:100px;margin-left:-50px}
#layar-bot .hp-kepala{padding:44px 10px 6px 6px;gap:7px}
#layar-bot .hp-avatar{width:32px;height:32px;font-size:12px}
#layar-bot .hp-nama-blok{line-height:1.15}
#layar-bot .hp-nama-blok b{font-size:14.5px}
#layar-bot .hp-status{font-size:11.5px}
#layar-bot .hp-kembali svg.i{width:22px;height:22px}
#layar-bot .hp-aksi{gap:16px}
#layar-bot .hp-aksi svg.i{width:19px;height:19px}
#layar-bot .hp-isi{padding-top:94px}
/* Kepala HP memakai foto profil bisnis dan "Tentang" dari Meta, seperti dilihat pelanggan (contoh Putra 27 Sep 2026). */
#layar-bot .hp-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff}
#layar-bot .hp-status{color:var(--tx2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}