/* ===== EA RATA KANAN 2222 — gaya panel ===== */
:root{
  --bg:#0b1020; --bg2:#0f1526; --kartu:#141b2e; --kartu2:#182136;
  --line:#243049; --teks:#e6ecf7; --redup:#93a1bd;
  --primary:#5b6cff; --hijau:#2ecc71; --oranye:#f0b429; --merah:#ff5d73;
  --biru:#3fb6ff; --toska:#00c4cc; --ungu:#a879ff; --pink:#ff7ac8;
}
*{box-sizing:border-box}
html{background:#070b14}
body{
  margin:0;font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:var(--bg);color:var(--teks);font-size:14px;line-height:1.5;
}
h1,h2,h3{margin:0}
button{font-family:inherit}
.sembunyi{display:none !important}
.pill{background:#1d2740;border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:11.5px;color:var(--redup)}
.hint{color:var(--redup);font-size:11.5px;line-height:1.5;margin:6px 0 0}

/* ===== login ===== */
.layar-masuk{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(1000px 500px at 20% -10%,#1b2a5e 0%,transparent 60%),radial-gradient(800px 400px at 100% 100%,#2a1b4e 0%,transparent 60%),var(--bg)}
.masuk-kotak{width:100%;max-width:380px;background:var(--kartu);border:1px solid var(--line);border-radius:18px;padding:26px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
.masuk-label{font-size:10.5px;letter-spacing:2px;color:var(--redup)}
.masuk-kotak h1{font-size:24px;margin:6px 0 4px;letter-spacing:.5px}
.masuk-kotak h1 span{color:var(--primary)}
.masuk-ket{color:var(--redup);font-size:12px;margin:0 0 16px}
label{display:block;font-size:11.5px;color:var(--redup);margin:10px 0 4px}
input,select,textarea{
  width:100%;background:#0e1526;border:1px solid var(--line);color:var(--teks);
  border-radius:10px;padding:9px 11px;font-size:13.5px;outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}
textarea{resize:vertical}
.pesan{font-size:12.5px;margin-top:10px;min-height:18px}
.pesan.merah{color:var(--merah)}

/* ===== tombol ===== */
.btn{border:1px solid var(--line);background:#1b2438;color:var(--teks);border-radius:10px;padding:9px 14px;font-size:13px;cursor:pointer;
  transition:.15s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{filter:brightness(1.15)}
.btn.kecil{padding:7px 11px;font-size:12.5px;border-radius:9px}
.btn.lebar{width:100%;justify-content:center;margin-top:16px}
.btn.primary{background:linear-gradient(135deg,#4b5bff,#7a5cff);border-color:transparent;color:#fff;font-weight:600}
.btn.hijau{background:#173b28;border-color:#2b6b45;color:#9df3c2}
.btn.oranye{background:#3b2f13;border-color:#7d6420;color:#ffd97a}
.btn.merah{background:#3b1c22;border-color:#7d2c39;color:#ffb0bd}
.btn.biru{background:#122b40;border-color:#26557d;color:#a6dcff}
.btn.toska{background:#0d3336;border-color:#1d6b70;color:#8ff0f4}
.btn.ungu{background:#2a1f42;border-color:#5b3f8f;color:#d9c7ff}

/* ===== kerangka ===== */
#app{max-width:1520px;margin:0 auto;min-height:100vh;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:linear-gradient(180deg,#0c1222,#0b1020);display:flex;flex-direction:column}
.atas{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(11,16,32,.94);backdrop-filter:blur(6px);z-index:5;flex-wrap:wrap}
.atas-kiri{display:flex;align-items:center;gap:10px}
.logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#4b5bff,#a879ff);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;letter-spacing:.5px}
.judul{font-size:15px;font-weight:600;letter-spacing:.4px}
.judul b{color:var(--primary)}
.sub{font-size:11.5px;color:var(--redup)}
.atas-kanan{display:flex;align-items:center;gap:8px}
.pill.jam{background:#141f38;color:#cfe0ff}
.pill.ver{background:#1a1430;color:#c9b6ff}
.nav{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;background:#0c1324}
.nav::-webkit-scrollbar{display:none}
.nav-b{white-space:nowrap;border:1px solid var(--line);background:#141b2e;color:var(--redup);border-radius:999px;padding:7px 14px;font-size:12.5px;cursor:pointer}
.nav-b.aktif{background:linear-gradient(135deg,#4b5bff,#6b54ff);color:#fff;border-color:transparent;font-weight:600}
.isi{padding:14px;flex:1}
.panel{display:none}
.panel.aktif{display:block}

/* ===== kartu & grid ===== */
.kartu{background:var(--kartu);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.kartu-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kartu-kepala h2{font-size:14.5px;font-weight:600}
.aksi-kepala{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.baris-tombol{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.baris-cari{display:flex;gap:8px;align-items:center}
.saring{max-width:170px}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tiga{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.form-baris{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.form-baris input{flex:1;min-width:110px}
.cek{display:flex;align-items:center;gap:8px;color:var(--teks);font-size:12.5px;margin:8px 0}
.cek input{width:auto}
hr{border:none;border-top:1px solid var(--line);margin:10px 0;width:100%}
.ringkas{display:flex;gap:7px;flex-wrap:wrap;margin:6px 0}
.ringkas .chip{background:#1a2338;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:11.5px;color:#cdd8ee}
.proses{font-size:12px;color:var(--redup);display:flex;align-items:center;gap:7px;min-height:16px}
.proses.selesai{color:#8ef0bb}
.proses.gagal{color:#ffb0bd}
.spinner{width:12px;height:12px;border:2px solid #31405f;border-top-color:var(--biru);border-radius:50%;display:inline-block;animation:putar .8s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}

/* ===== agen ===== */
.agen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.agen-kartu{background:var(--kartu2);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.agen-atas{display:flex;align-items:center;gap:10px}
.agen-av{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#1f3a63,#2f2a63);display:flex;align-items:center;justify-content:center;font-weight:700}
.agen-nama{font-weight:600;font-size:13.5px}
.agen-nomor{font-size:11.5px;color:var(--redup)}
.badge{font-size:11px;border-radius:999px;padding:2px 9px;border:1px solid var(--line);background:#1a2338;color:var(--redup);white-space:nowrap}
.badge.ok{background:#12341f;border-color:#2a6b45;color:#8ef0bb}
.badge.qr{background:#3a2f10;border-color:#7d6420;color:#ffd97a}
.badge.putus{background:#3b1c22;border-color:#7d2c39;color:#ffb0bd}
.agen-aksi{display:flex;gap:6px;flex-wrap:wrap}

/* ===== brankas ===== */
.brankas-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;align-items:start}
.friend-grid{display:grid;grid-template-columns:1fr 1.1fr 1.4fr;gap:14px;align-items:start}
/* Mesin Blast: 2 kolom proporsional (kiri lebih ramping, kanan lebih lega) + baris bawah lebar penuh */
.blast-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.kolom-blast{display:flex;flex-direction:column;gap:14px;min-width:0}
.blast-grid .kartu{display:flex;flex-direction:column;gap:9px;padding:14px 16px}
.blast-grid .kartu label{margin-top:2px;font-size:12px;color:#8696a0}
.blast-grid .kartu input,.blast-grid .kartu select,.blast-grid .kartu textarea{margin:0}
.blast-grid .kartu .form-baris{margin:0}
.blast-grid .kartu .baris-tombol{margin:2px 0 0}
.blast-grid .kartu .hint{margin:0}
.tabel-blast{max-height:360px}
@media (max-width:1400px){.blast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.blast-grid{grid-template-columns:1fr}}
.lebar-penuh{grid-column:1/-1}
.setelan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.produksi-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px;align-items:start}
@media (max-width:1100px){.brankas-grid,.produksi-grid,.friend-grid,.blast-grid,.setelan-grid,.dua,.tiga{grid-template-columns:1fr}}
.daftar{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow:auto}
.daftar.pendek{max-height:220px}
.baris{background:var(--kartu2);border:1px solid var(--line);border-radius:11px;padding:8px 10px;display:flex;align-items:center;gap:9px}
.baris:hover{border-color:#31405f}
.av{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 30px}
.nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.no{font-size:11px;color:var(--redup)}
.baris-isi{flex:1;min-width:0}
.baris-aksi{display:flex;gap:5px;align-items:center}
.mini{border:1px solid var(--line);background:#1b2438;color:var(--teks);border-radius:8px;padding:4px 7px;font-size:11.5px;cursor:pointer}
.mini.merah{color:#ffb0bd}.mini.hijau{color:#9df3c2}.mini.biru{color:#a6dcff}
.empty{color:var(--redup);font-size:12px;text-align:center;padding:18px 8px;border:1px dashed var(--line);border-radius:12px}

/* ===== kampanye ===== */
.kamp{background:var(--kartu2);border:1px solid var(--line);border-radius:13px;padding:11px;display:flex;flex-direction:column;gap:8px}
.kamp-judul{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kamp-nama{font-weight:600;font-size:13.5px}
.kamp-meta{font-size:11.5px;color:var(--redup);display:flex;gap:9px;flex-wrap:wrap}
.progress{height:6px;background:#0e1526;border-radius:999px;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,#4b5bff,#2ecc71)}
.tag{font-size:10.5px;border-radius:999px;padding:2px 8px;border:1px solid var(--line)}
.tag.aktif{background:#12341f;border-color:#2a6b45;color:#8ef0bb}
.tag.jeda{background:#3a2f10;border-color:#7d6420;color:#ffd97a}
.tag.selesai{background:#122b40;border-color:#26557d;color:#a6dcff}
.tag.batal{background:#3b1c22;border-color:#7d2c39;color:#ffb0bd}

/* ===== tabel & grafik ===== */
.tabel-bungkus{overflow:auto}
.tabel{width:100%;border-collapse:collapse;font-size:12.5px}
.tabel th{text-align:left;color:var(--redup);font-weight:600;font-size:11.5px;border-bottom:1px solid var(--line);padding:7px 8px;white-space:nowrap}
.tabel td{border-bottom:1px solid #1b2438;padding:7px 8px;white-space:nowrap}
.skor{display:inline-block;min-width:38px;text-align:center;border-radius:999px;padding:1px 7px;font-weight:600;font-size:11.5px}
.skor.a{background:#12341f;color:#8ef0bb}
.skor.b{background:#3a2f10;color:#ffd97a}
.skor.c{background:#3b1c22;color:#ffb0bd}
.grafik{display:flex;align-items:flex-end;gap:8px;height:170px;padding:10px 4px;border:1px solid var(--line);border-radius:12px;background:#0e1526;overflow-x:auto}
.grafik .kutub{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:34px;flex:1}
.grafik .btg{width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center;height:120px}
.grafik .b1{width:9px;background:linear-gradient(180deg,#6b54ff,#4b5bff);border-radius:4px 4px 0 0;min-height:2px}
.grafik .b2{width:9px;background:linear-gradient(180deg,#4ce39a,#2ecc71);border-radius:4px 4px 0 0;min-height:2px}
.grafik .b3{width:9px;background:linear-gradient(180deg,#c9a2ff,#a879ff);border-radius:4px 4px 0 0;min-height:2px}

/* kesehatan nomor tembak per hari */
.spark{display:flex;gap:3px;margin:5px 0 2px;flex-wrap:wrap}
.spark i{width:11px;height:15px;border-radius:3px;background:#2a3550;display:inline-block}
.spark i.baik{background:#2ecc71}
.spark i.sedang{background:#f0b429}
.spark i.buruk{background:#ff5d73}
.spark i.kosong{background:#1d2740;border:1px solid #243049}
.spark.minggu i{width:22px;height:16px}
.spark i.libur{background:#161d2e;border:1px dashed #243049}
.spark i.isi{background:#4b5bff}
.spark i.penuh{background:#2ecc71}
.spark i.ini{outline:1px solid #a879ff;outline-offset:1px}
.grafik .tgl{font-size:10px;color:var(--redup)}
.kotak-aturan{background:var(--kartu2);border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin:8px 0;display:flex;flex-direction:column;gap:6px}
.aturan-baris{font-size:12px;color:var(--redup);line-height:1.55}
.aturan-baris b{color:var(--teks)}
.ket{display:flex;gap:12px;font-size:11.5px;color:var(--redup);margin-top:6px}
.tag-b{background:#3a1d24;color:#ff9aa6;border:1px solid #5c2a34;border-radius:6px;padding:1px 6px;font-size:10.5px;font-weight:700;margin-left:4px}
.ok-kecil{color:#7ee2a8;font-size:11.5px}
.tunggu-kecil{color:#f0c674;font-size:11.5px}
.gagal-kecil{color:#ff9aa6;font-size:11.5px}
.bt{display:inline-block;width:5px;margin-right:2px;background:#ff7a8a;border-radius:2px;vertical-align:middle}
.ket2{font-size:11.5px;color:var(--redup);margin-top:3px;overflow-wrap:anywhere}
.ket i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px}

.wa-grid{display:grid;grid-template-columns:minmax(250px,1fr) minmax(320px,1.65fr) minmax(220px,.85fr);gap:12px;align-items:stretch;height:calc(100vh - 132px)}
@media (max-width:1200px){.wa-grid{grid-template-columns:1fr;height:auto}}
.kolom-chat{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.kolom-isi{flex:1;min-height:0;overflow:auto;max-height:none}
.wa-grid .agen-grid{display:flex;flex-direction:column;gap:8px;grid-template-columns:none}
.wa-grid .agen-kartu{padding:9px 10px;gap:6px}
.wa-grid .agen-aksi{display:flex;flex-wrap:wrap;gap:5px}
.wa-grid .agen-aksi .mini{font-size:10.5px;padding:4px 7px}
.wa-grid .ringkas{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 8px}
.wa-grid .ringkas .chip{font-size:10.5px;padding:3px 8px}
.saring.lebar{width:100%;margin-bottom:8px}
.chat-jendela{display:flex;flex-direction:column;gap:8px;padding:11px;
  background:#0a1122;border:1px solid var(--line);border-radius:13px}
.gelembung{max-width:80%;padding:8px 11px;border-radius:13px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.gelembung.masuk{background:#1b2440;border:1px solid #2a3a63;align-self:flex-start;border-top-left-radius:4px}
.gelembung.keluar{background:#14432c;border:1px solid #1f6b45;align-self:flex-end;border-top-right-radius:4px}
.gelembung .jam{display:block;font-size:10.5px;color:#9fb0d4;margin-top:4px;text-align:right}
.gelembung .label{display:block;font-size:10px;color:#8fa0c4;margin-bottom:2px;text-transform:uppercase;letter-spacing:.4px}
.chat-balas{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.chat-balas textarea{width:100%;margin:0;resize:vertical;min-height:62px;padding:10px 12px;border-radius:12px;
  background:#111b21;border:1px solid #22303a;color:#e9edef;font-size:13px;line-height:1.45}
.chat-balas textarea:focus{outline:none;border-color:#25d366}
.alat-balas{display:flex;align-items:center;gap:8px}
.alat-balas .alat-kiri{display:flex;gap:6px;flex:0 0 auto}
.alat-ikon{background:#111b21;border:1px solid #22303a;color:#cfe9d8;border-radius:10px;font-size:15px;line-height:1;
  width:42px;height:34px;display:inline-grid;place-items:center;padding:0;cursor:pointer}
.alat-ikon:hover{border-color:#25d366;color:#8ef0b6}
.alat-ikon.ungu:hover{border-color:#a879ff;color:#d9c6ff}
.btn-kirim{margin-left:auto;background:#25d366;border:0;color:#04240f;font-weight:700;font-size:13px;
  padding:9px 18px;border-radius:11px;cursor:pointer;flex:0 0 auto}
.btn-kirim:hover{filter:brightness(1.06)}
.btn-kirim:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:860px){
  .alat-ikon{font-size:16px;width:44px;height:36px}
  .btn-kirim{padding:9px 14px;font-size:12.5px}
}
.chat-baris{cursor:pointer}
.chat-baris.aktif{border-color:#3a7bd5;box-shadow:0 0 0 1px #2a5da8 inset}
.tag-unread{background:#c0392b;color:#fff;border-radius:20px;padding:0 7px;font-size:11px;font-weight:700;margin-left:5px}
/* ===== gaya kolom chat mirip WhatsApp Web ===== */
.wa-kolom{background:#0b141a;border-color:#1f2c33}
.wa-kolom .kartu-kepala h2{font-size:14.5px}
.wa-daftar{gap:2px;padding:2px}
.chat-item{display:flex;gap:11px;padding:9px 10px;border-radius:11px;cursor:pointer;align-items:center;border:1px solid transparent}
.chat-item:hover{background:#111b21}
.chat-item.aktif{background:#2a3942;border-color:#2a3942}
.chat-item .avatar{width:49px;height:49px;flex:0 0 49px;border-radius:50%;overflow:hidden;position:relative;
  display:grid;place-items:center;font-weight:700;font-size:17px;color:#04121f;background:linear-gradient(135deg,#4a7fd6,#2f5fa8)}
.chat-item .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chat-item .mid{flex:1;min-width:0}
.chat-item .nm{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:#e9edef}
.chat-item .nm .waktu{margin-left:auto;font-size:11px;color:#8696a0;font-weight:400}
.chat-item .pv{font-size:12.5px;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item .unread{background:#25d366;color:#0b141a;border-radius:20px;min-width:20px;height:20px;padding:0 6px;
  font-size:11.5px;font-weight:800;display:grid;place-items:center}
.chip-baris{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:6px;align-items:center;
  scrollbar-width:none;-ms-overflow-style:none}
.chip-baris::-webkit-scrollbar{display:none;height:0}
.chip-tab{background:#111b21;border:1px solid #22303a;color:#8696a0;border-radius:20px;padding:3px 9px;font-size:11px;cursor:pointer;white-space:nowrap;flex:0 0 auto;line-height:1.5}
.chip-tab.aktif{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.55);color:#8ef0b6;font-weight:600}
.chip-tab .pill{margin-left:4px}
.wa-chat{background:#0b141a}
.wa-chat .chat-jendela{background:#0b141a;background-image:radial-gradient(rgba(255,255,255,.028) 1px,transparent 0);background-size:22px 22px}
.gelembung.masuk{background:#202c33;border:0;color:#e9edef}
.gelembung.keluar{background:#005c4b;border:0;color:#e9edef}
.gelembung .jam{color:rgba(233,237,239,.6)}
.gelembung .label{color:rgba(233,237,239,.55)}
.chip-cepat{background:#111b21;border:1px solid #2a3942;color:#d1d7db;border-radius:9px;padding:5px 10px;font-size:11.5px;cursor:pointer;white-space:nowrap}
.chip-cepat:hover{border-color:#25d366;color:#8ef0b6}
/* aksi per pesan (muncul saat gelembung disentuh) */
.gelembung{position:relative;padding-bottom:18px}
.gelembung .aksi-pesan{position:absolute;top:-13px;right:6px;display:flex;gap:2px;background:#111b21;border:1px solid #2a3942;
  border-radius:9px;padding:2px;opacity:0;pointer-events:none;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease;z-index:3}
/* muncul otomatis: saat kursor di atas pesan (PC) atau saat pesan ditekan (HP) */
.gelembung:hover .aksi-pesan,.gelembung.aksi-aktif .aksi-pesan{opacity:1;pointer-events:auto;transform:translateY(0)}
.gelembung{cursor:pointer}
@media (max-width:860px){ .gelembung .aksi-pesan{top:-15px} }
.gelembung .aksi-pesan button{background:transparent;border:0;color:#8696a0;cursor:pointer;font-size:14px;padding:3px 7px;border-radius:6px;line-height:1}
@media (max-width:860px){ .gelembung .aksi-pesan button{font-size:16px;padding:4px 8px} }
.gelembung .aksi-pesan button:hover{background:#2a3942;color:#e9edef}
.gelembung .aksi-pesan button.bahaya:hover{background:#5c1f1f;color:#ffb4b4}
.gelembung .kutipan{background:rgba(0,0,0,.25);border-left:3px solid #25d366;border-radius:6px;padding:4px 7px;margin-bottom:5px;font-size:11.5px;color:#c9d6f0;max-height:52px;overflow:hidden}
.gelembung .tanda-kecil{font-size:10.5px;color:rgba(233,237,239,.6);font-style:italic}
.kutip-balas{display:flex;align-items:center;gap:8px;background:#111b21;border:1px solid #2a3942;border-left:3px solid #25d366;border-radius:9px;padding:6px 9px;margin-top:8px}
.kutip-balas .kutip-isi{flex:1;min-width:0;font-size:11.5px;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emoji-panel{display:block;background:#111b21;border:1px solid #2a3942;border-radius:11px;padding:8px;margin-top:8px;max-height:230px;overflow:auto}
.emoji-tab{display:flex;gap:5px;overflow-x:auto;padding-bottom:6px;margin-bottom:5px;border-bottom:1px solid #22303a}
.emoji-tab button{background:#111b21;border:1px solid #22303a;color:#8696a0;border-radius:20px;padding:3px 10px;font-size:11px;cursor:pointer;white-space:nowrap}
.emoji-tab button.aktif{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.55);color:#8ef0b6;font-weight:600}
.emoji-isi{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:2px}
.emoji-isi button{background:transparent;border:0;font-size:20px;cursor:pointer;border-radius:7px;padding:3px;line-height:1}
.emoji-isi button:hover{background:#2a3942}
.stiker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px}
.stiker-kotak{position:relative;background:#0b141a;border:1px solid #2a3942;border-radius:10px;padding:5px;display:grid;place-items:center;cursor:pointer}
.stiker-kotak:hover{border-color:#25d366}
.stiker-kotak img{width:64px;height:64px;object-fit:contain}
.stiker-kotak .hapus{position:absolute;top:2px;right:2px;background:#3a1d24;border:1px solid #5c2a34;color:#ff9aa6;border-radius:6px;font-size:10px;cursor:pointer;padding:0 4px}
.emoji-panel button{background:transparent;border:0;font-size:19px;cursor:pointer;border-radius:7px;padding:3px}
.emoji-panel button:hover{background:#2a3942}
.menu-chat{position:absolute;right:12px;top:44px;z-index:20;background:#111b21;border:1px solid #2a3942;border-radius:11px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:210px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.menu-chat button{background:transparent;border:0;color:#d1d7db;text-align:left;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12.5px}
.menu-chat button:hover{background:#2a3942}
/* ===== tombol dinamis ===== */
.tombol-list{display:flex;flex-direction:column;gap:7px}
.tombol-item.wajib{background:#1a2340;border:1px dashed #3a4a7a;opacity:.95}
.tombol-item.wajib input,.tombol-item.wajib select{color:#9fb0d4}
.tombol-item{display:grid;grid-template-columns:1.1fr .8fr 1.4fr auto;gap:6px;align-items:center;background:var(--kartu2);
  border:1px solid var(--line);border-radius:10px;padding:7px}
.tombol-item input,.tombol-item select{padding:6px 8px;font-size:12px}
@media (max-width:1100px){.tombol-item{grid-template-columns:1fr 1fr;}}

/* ===== modal & toast ===== */
.modal{position:fixed;inset:0;background:rgba(5,8,16,.72);display:flex;align-items:center;justify-content:center;padding:16px;z-index:40}
.modal-kotak{background:var(--kartu);border:1px solid var(--line);border-radius:16px;width:100%;max-width:420px;padding:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-kepala{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal-isi{font-size:13px;display:flex;flex-direction:column;gap:8px}
#qr-gambar{background:#fff;padding:8px;border-radius:12px;align-self:center}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:#182136;border:1px solid var(--line);
  color:var(--teks);padding:10px 15px;border-radius:12px;font-size:12.5px;z-index:60;max-width:92vw;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.toast.ok{border-color:#2a6b45}
.toast.err{border-color:#7d2c39}

/* ---------- kaki daftar (arsip & grup) ---------- */
.kaki-daftar{display:flex;gap:8px;padding:8px 10px;border-top:1px solid #22303a;background:#111b21}
.tautan-kaki{flex:1;background:#111b21;border:1px solid #22303a;color:#8696a0;border-radius:9px;padding:7px 9px;font-size:12px;cursor:pointer;font-weight:600}
.tautan-kaki:hover{border-color:#25d366;color:#cfe9d8}
.tautan-kaki.aktif{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.55);color:#8ef0b6}
.tautan-kaki span{background:#202c33;border-radius:20px;padding:1px 7px;font-size:11px;margin-left:4px}
.grup-box{max-height:230px;overflow:auto;border-top:1px solid #22303a;background:#0f1a20;padding:6px}
.grup-item{background:#111b21;border:1px solid #1f2c34;border-radius:10px;margin-bottom:5px}
.grup-item.aktif{border-color:#25d366;background:#15251f}
.grup-av{background:linear-gradient(135deg,#1f3d2e,#2a3942);font-size:20px;display:grid;place-items:center}
.grup-pengirim{font-size:11px;font-weight:700;color:#8ef0b6;margin-bottom:2px}
.gelembung.grup .isi{white-space:pre-wrap}

/* ---------- jam digital: font 7-segment DSEG7 + hijau neon (SAMA dengan CRM) ---------- */
@font-face{font-family:'DSEG7';src:url('/fonts/DSEG7Classic-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'DSEG7';src:url('/fonts/DSEG7Classic-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
.jam-digital{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding:5px 11px;min-width:104px;
  border:1px solid rgba(43,255,136,.35);border-radius:11px;
  background:radial-gradient(120% 140% at 50% 0%,rgba(9,32,20,.9),rgba(6,14,10,.9));
  box-shadow:inset 0 0 14px rgba(43,255,136,.08);margin-right:8px}
.jd-jam{font-family:'DSEG7',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;
  font-size:20px;line-height:1.05;letter-spacing:1.5px;color:#2bff88;
  text-shadow:0 0 8px rgba(43,255,136,.55),0 0 18px rgba(43,255,136,.22);font-variant-numeric:tabular-nums}
.jd-tanggal{font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:rgba(43,255,136,.6);font-weight:600;margin-top:1px}
@media (max-width:860px){ .jam-digital{padding:4px 8px;min-width:90px} .jd-jam{font-size:17px;letter-spacing:1px} .jd-tanggal{font-size:8.5px} }
/* waktu pesan bergaya jam digital */
.chat-item .waktu,.gelembung .jam{font-family:'Courier New',ui-monospace,monospace;letter-spacing:.6px}

/* ---------- sembunyikan scrollbar (hemat ruang, tetap bisa digeser) ---------- */
.wa-daftar,.grup-box,.kolom-isi,.chat-jendela,#grup-daftar{scrollbar-width:none;-ms-overflow-style:none}
.wa-daftar::-webkit-scrollbar,.grup-box::-webkit-scrollbar,.kolom-isi::-webkit-scrollbar,
.chat-jendela::-webkit-scrollbar,#grup-daftar::-webkit-scrollbar{width:0;height:0;display:none}
/* ---------- chip "Belum dibaca" nyala saat ada pesan belum dibaca ---------- */
#chip-belum.nyala{background:rgba(37,211,102,.2);border-color:#25d366;color:#c9ffdd;animation:denyutBelum 1.6s ease-in-out infinite}
#chip-belum.nyala .pill{background:#25d366;color:#04240f;font-weight:700}
@keyframes denyutBelum{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}50%{box-shadow:0 0 0 6px rgba(37,211,102,0)}}

/* chip belum dibaca: ringkas, angka saja */
#chip-belum{display:inline-flex;align-items:center;gap:4px;padding:3px 10px}
#chip-belum #chat-belum{background:#202c33;border-radius:20px;padding:0 6px;font-size:10.5px;font-weight:700;min-width:16px;text-align:center}
#chip-belum.nyala #chat-belum{background:#25d366;color:#04240f}

/* ---------- baris atas kolom percakapan: chip + cari + sniper (satu baris rapi) ---------- */
.chat-atas{display:flex;align-items:center;gap:6px;padding:0 0 7px;flex-wrap:nowrap;min-width:0}
.chat-atas .chip-baris{flex:0 0 auto;padding-bottom:0;gap:5px}
.chat-atas #chat-cari{flex:1 1 auto;min-width:0;padding:6px 9px;font-size:12px;border-radius:9px;
  background:#111b21;border:1px solid #22303a;color:#e9edef}
.chat-atas #chat-cari:focus{outline:none;border-color:#25d366}
.chat-atas #chat-agen{flex:0 0 auto;max-width:38%;padding:6px 6px;font-size:11.5px;border-radius:9px;
  background:#111b21;border:1px solid #22303a;color:#cfe9d8}
@media (max-width:760px){
  .chat-atas{gap:5px}
  .chat-atas #chat-cari{font-size:11.5px;padding:6px 7px}
  .chat-atas #chat-agen{max-width:34%;font-size:11px}
}

/* ---------- indikator belum dibaca di kepala kolom ---------- */
.pill.belum-kepala{background:rgba(37,211,102,.18);border:1px solid #25d366;color:#c9ffdd;font-size:10.5px;
  animation:denyutBelum 1.6s ease-in-out infinite}
.pill.belum-kepala b{color:#25d366}
/* ---------- tombol aksi per percakapan (muncul saat disentuh) ---------- */
.chat-item{position:relative}
.chat-item .aksi-baris{position:absolute;right:6px;bottom:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.chat-item:hover .aksi-baris,.chat-item.aktif .aksi-baris{opacity:1}
.chat-item .aksi-baris button{background:#202c33;border:1px solid #2a3942;color:#cfe9d8;border-radius:7px;
  font-size:11px;padding:2px 6px;cursor:pointer;line-height:1.3}
.chat-item .aksi-baris button:hover{border-color:#25d366;color:#8ef0b6}
.chat-item .aksi-baris button.hapus:hover{border-color:#ff5d73;color:#ff9aa6}

/* ---------- nama profil di kepala jendela chat ---------- */
.profil-nama{font-size:12px;font-weight:700;color:#8ef0b6;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4);
  border-radius:20px;padding:3px 10px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){ .profil-nama{max-width:110px;font-size:11px} }

/* ---------- kepala jendela chat (rapi: nama → no HP → sniper) ---------- */
.kepala-chat{align-items:center;gap:8px}
.kepala-chat .kepala-kiri{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.kepala-chat .nama-baris{font-size:14px;font-weight:700;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kepala-chat .sub-baris{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow:hidden}
.kepala-chat .no-hp{font-family:'Courier New',ui-monospace,monospace;font-size:11.5px;color:#8696a0;letter-spacing:.4px;white-space:nowrap}
.kepala-chat .sniper{font-size:11px;font-weight:600;color:#8ef0b6;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.35);
  border-radius:20px;padding:1px 8px;white-space:nowrap}
.kepala-chat .pemisah{color:#4a5b63;font-size:11px}
.kepala-chat .label-kontak{font-size:10.5px;font-weight:700;color:#ffd580;background:rgba(240,180,41,.12);
  border:1px solid rgba(240,180,41,.4);border-radius:20px;padding:1px 7px;white-space:nowrap}
.aksi-kepala.kecil-rapi{gap:4px;flex:0 0 auto}
.mini-ikon{background:#111b21;border:1px solid #22303a;color:#cfe9d8;border-radius:8px;font-size:13px;line-height:1;
  padding:5px 7px;cursor:pointer}
.mini-ikon:hover{border-color:#25d366;color:#8ef0b6}
.mini-ikon.hijau:hover{border-color:#25d366;background:rgba(37,211,102,.12)}
@media (max-width:860px){ .kepala-chat .nama-baris{font-size:13px} .mini-ikon{font-size:14px;padding:5px 6px} }

/* ---------- pop up balasan cepat ---------- */
.bc-pop .bc-form{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.bc-pop .bc-form input{flex:1 1 130px;min-width:0;padding:7px 9px;font-size:12.5px;border-radius:9px;
  background:#111b21;border:1px solid #22303a;color:#e9edef}
.bc-daftar{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.bc-baris{display:flex;gap:8px;align-items:center;background:#111b21;border:1px solid #22303a;border-radius:10px;padding:8px 10px}
.bc-baris .bc-isi{flex:1 1 auto;min-width:0;font-size:12.5px;color:#e9edef;line-height:1.4}
.bc-baris .bc-pemicu{display:inline-block;margin-right:6px;background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.4);
  color:#8ef0b6;border-radius:20px;padding:0 8px;font-size:11px;font-weight:700}
.bc-baris .bc-aksi{display:flex;gap:4px;flex:0 0 auto}
.mini-ikon.merah:hover{border-color:#ff5d73;color:#ff9aa6}

/* ---------- kartu kapasitas server ---------- */
.kap-kartu{background:#0f1a20;border:1px solid #22303a;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.kap-kartu.kritis{border-color:#5c2a34;background:#1a1013}
.kap-atas{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kap-judul{font-size:13.5px;font-weight:700;color:#e9edef}
.kap-status{font-size:11px;font-weight:700;border:1px solid;border-radius:20px;padding:2px 10px;white-space:nowrap}
.kap-bar{height:9px;background:#111b21;border:1px solid #22303a;border-radius:20px;overflow:hidden}
.kap-bar span{display:block;height:100%;border-radius:20px;transition:width .4s ease}
.kap-angka{font-size:12.5px;color:#8696a0}
.kap-angka b{color:#e9edef;font-size:14px}
.kap-angka span{font-size:11.5px}
.kap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.kap-item{background:#111b21;border:1px solid #1f2c34;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.kap-item span{font-size:10.5px;color:#8696a0;text-transform:uppercase;letter-spacing:.4px}
.kap-item b{font-size:13px;color:#e9edef}
.kap-item b i{font-style:normal;font-size:11px;color:#8696a0;font-weight:500}
.kap-saran{font-size:11.5px;color:#ffd97a;background:rgba(240,180,41,.1);border:1px solid rgba(240,180,41,.35);border-radius:10px;padding:7px 10px}

/* ---------- centang status pesan ---------- */
.centang{font-size:12px;letter-spacing:-1px;color:#8696a0;margin-left:3px;font-weight:700}
.centang.pending{color:#8696a0;opacity:.85}
.centang.dibaca{color:#53bdeb}   /* dua centang berwarna = sudah dibaca */

/* ---------- Laporan Kampanye ---------- */
.lap-ringkas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.lap-kotak{background:#0f1a20;border:1px solid #22303a;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.lap-kotak span{font-size:10.5px;color:#8696a0;text-transform:uppercase;letter-spacing:.4px}
.lap-kotak b{font-size:20px;color:#e9edef;font-weight:700}
.lap-kotak.hijau b{color:#25d366}.lap-kotak.merah b{color:#ff5d73}.lap-kotak.kuning b{color:#f0b429}
.lap-saring{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:10px}
.lap-saring label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#8696a0;text-transform:uppercase;letter-spacing:.3px}
.lap-saring input,.lap-saring select{margin:0;font-size:12.5px}
.tabel-bungkus{overflow:auto;max-height:560px;border:1px solid #22303a;border-radius:12px}
table.tabel-lap{width:100%;border-collapse:collapse;font-size:12.5px}
table.tabel-lap th{position:sticky;top:0;background:#111b21;color:#8696a0;text-align:left;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.4px;padding:9px 10px;border-bottom:1px solid #22303a;white-space:nowrap;z-index:1}
table.tabel-lap td{padding:8px 10px;border-bottom:1px solid #1b262e;color:#e9edef;white-space:nowrap}
table.tabel-lap tr:nth-child(even) td{background:#0d161c}
table.tabel-lap tr:hover td{background:#132029}
table.tabel-lap .jam{font-family:"DSEG7","Courier New",monospace;color:#8ef0b6;letter-spacing:0}
table.tabel-lap .nomor{color:#8ef0b6;font-weight:600}
table.tabel-lap .sniper{color:#a879ff}
.tabel-lap .badge{font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid}
.tabel-lap .badge.terkirim{color:#8ef0b6;border-color:rgba(37,211,102,.45);background:rgba(37,211,102,.1)}
.tabel-lap .badge.gagal{color:#ff9aa6;border-color:rgba(255,93,115,.45);background:rgba(255,93,115,.1)}
.tabel-lap .badge.menunggu{color:#ffd97a;border-color:rgba(240,180,41,.4);background:rgba(240,180,41,.1)}
@media (max-width:700px){.tabel-bungkus{max-height:420px}table.tabel-lap td,table.tabel-lap th{padding:7px 8px;font-size:11.5px}}

/* ---------- Bank Email ---------- */
#panel-email .tabel-bungkus{max-height:560px}

/* ---------- kotak perintah (token terima berkas) ---------- */
pre.perintah{background:#0b141a;border:1px solid #22303a;border-radius:10px;padding:10px 12px;color:#8ef0b6;
  font-size:11.5px;line-height:1.5;overflow:auto;white-space:pre-wrap;word-break:break-all;margin:0}