/* eBilling Chat — tema terang (bawaan) & gelap, gaya mengikuti cx.radboox.com */
[data-bs-theme=light] {
  --latar: #f6f8fb; --kartu: #ffffff; --kartu-2: #f1f5fb; --garis: #e4e9f2; --teks: #33415c; --redup: #6b7a99; --judul: #0b1f44;
  --utama: #0a6fd8; --utama-2: #0857ab; --aktif: #e8f1fd; --hijau: #12a150; --kuning: #e09a00; --merah: #e0393e; --gelap: #0b1f44;
  --gelembung-masuk: #ffffff; --gelembung-keluar: #dcecff; --latar-chat: #eef3f9;
}
[data-bs-theme=dark] {
  --latar: #0e1626; --kartu: #152034; --kartu-2: #1b2840; --garis: #26354f; --teks: #cdd6e6; --redup: #8797b4; --judul: #ffffff;
  --utama: #3b8ef0; --utama-2: #2a74cc; --aktif: rgba(59,142,240,.15); --hijau: #2ec46c; --kuning: #f3b33d; --merah: #f05555; --gelap: #0b1f44;
  --gelembung-masuk: #1b2840; --gelembung-keluar: #1d3b63; --latar-chat: #101b2e;
}
[data-bs-theme] {
  --bs-body-bg: var(--latar); --bs-body-color: var(--teks); --bs-border-color: var(--garis); --bs-primary: var(--utama);
  --bs-primary-rgb: 10, 111, 216; --bs-link-color: var(--utama); --bs-link-hover-color: var(--utama-2); --bs-secondary-color: var(--redup);
  --bs-tertiary-bg: var(--kartu-2); --bs-emphasis-color: var(--judul);
}
body { background: var(--latar); color: var(--teks); font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: .93rem; }
a { text-decoration: none; color: var(--utama); }
h1, h2, h3, h4, h5, h6, .judul { color: var(--judul); }
.text-judul { color: var(--judul) !important; }
.text-muted, .form-text { color: var(--redup) !important; }
.btn-primary { --bs-btn-bg: var(--utama); --bs-btn-border-color: var(--utama); --bs-btn-hover-bg: var(--utama-2); --bs-btn-hover-border-color: var(--utama-2); --bs-btn-active-bg: var(--utama-2); }
.btn-outline-primary { --bs-btn-color: var(--utama); --bs-btn-border-color: var(--utama); --bs-btn-hover-bg: var(--utama); --bs-btn-hover-border-color: var(--utama); --bs-btn-active-bg: var(--utama); }
.form-control, .form-select { background-color: var(--kartu); border-color: var(--garis); color: var(--teks); }
.form-control:focus, .form-select:focus { background-color: var(--kartu); color: var(--judul); border-color: var(--utama); box-shadow: 0 0 0 .2rem rgba(10,111,216,.18); }
.kode { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.lencana { display: inline-block; padding: .15rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 600; }
.lencana.hijau { color: var(--hijau); background: rgba(18,161,80,.12); }
.lencana.merah { color: var(--merah); background: rgba(224,57,62,.12); }
.lencana.kuning { color: var(--kuning); background: rgba(224,154,0,.14); }
.lencana.biru { color: var(--utama); background: var(--aktif); }
.lencana.abu { color: var(--redup); background: var(--kartu-2); }
.modal-content, .dropdown-menu { background: var(--kartu); border-color: var(--garis); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--teks); --bs-table-border-color: var(--garis); --bs-table-hover-bg: var(--kartu-2); --bs-table-hover-color: var(--judul); }
.table thead th { font-size: .78rem; color: var(--judul); white-space: nowrap; }
.table td { vertical-align: middle; }

/* ---- landing */
.nav-landing { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--garis); }
[data-bs-theme=dark] .nav-landing { background: rgba(14,22,38,.92); }
.merek { font-weight: 800; color: var(--judul); display: inline-flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.merek .logo { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--utama), #18b5a6); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; }
.hero { padding: 4.5rem 0 3.5rem; background: linear-gradient(180deg, var(--kartu) 0%, var(--latar) 100%); }
.hero h1 { font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.12; letter-spacing: -.02em; }
.hero h1 span { color: var(--utama); }
.pil { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--garis); background: var(--kartu); border-radius: 99px; padding: .3rem .8rem; font-size: .8rem; }
.bagian { padding: 4.5rem 0; }
.bagian.gelap { background: var(--gelap); color: #c9d6ee; }
.bagian.gelap h2, .bagian.gelap h5 { color: #fff; }
.label-bagian { color: var(--merah); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: .6rem; }
.label-bagian::before { content: ""; width: 26px; height: 2px; background: var(--merah); }
.bagian h2 { font-weight: 800; letter-spacing: -.01em; }
.kartu-fitur { background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; padding: 1.4rem; height: 100%; }
.bagian.gelap .kartu-fitur { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.ikon-fitur { width: 44px; height: 44px; border-radius: 12px; background: var(--aktif); color: var(--utama); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: .9rem; }
.langkah b { display: block; font-size: 2.2rem; font-weight: 300; color: #9cc3f2; }
.mock { background: var(--kartu); border-radius: 16px; box-shadow: 0 24px 60px rgba(11,31,68,.18); overflow: hidden; border: 6px solid var(--utama); }
.mock .bar { height: 26px; background: var(--kartu-2); display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.mock .bar i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cta { background: linear-gradient(135deg, var(--gelap), #123a75); color: #c9d6ee; }
.cta h2 { color: #fff; }
footer.kaki { background: var(--gelap); color: #9fb2d3; padding: 3rem 0 1.5rem; }
footer.kaki a { color: #cfdcf1; }
.faq .accordion-button { background: var(--kartu); color: var(--judul); font-weight: 600; }
.faq .accordion-item { background: var(--kartu); border-color: var(--garis); }

/* ---- login */
.wadah-masuk { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--latar); }
.kartu-masuk { width: 100%; max-width: 420px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 22px; padding: 2.5rem 2.2rem 2rem; }
.kartu-masuk .form-control { padding: .8rem .9rem; border-radius: 10px; }
.kartu-masuk .btn-primary { padding: .7rem; border-radius: 10px; font-weight: 600; }
.mata { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--redup); padding: .35rem .5rem; }

/* ---- aplikasi */
.sisi { position: fixed; inset: 0 auto 0 0; width: 236px; background: var(--kartu); border-right: 1px solid var(--garis); padding: 1rem .75rem; overflow-y: auto; z-index: 1030; transition: transform .2s; }
.sisi .merek { padding: .3rem .6rem 1.2rem; }
.sisi a.menu { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 10px; color: var(--teks); margin-bottom: .15rem; }
.sisi a.menu i { width: 1.2rem; text-align: center; color: var(--redup); }
.sisi a.menu:hover { background: var(--kartu-2); }
.sisi a.menu.aktif { background: var(--aktif); color: var(--utama); font-weight: 600; }
.sisi a.menu.aktif i { color: var(--utama); }
.sisi .grup { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--redup); padding: .9rem .8rem .35rem; }
.angka-menu { margin-left: auto; background: var(--merah); color: #fff; border-radius: 99px; font-size: .68rem; font-weight: 700; padding: 0 .45rem; line-height: 1.3rem; }
.isi { margin-left: 236px; min-height: 100vh; }
.atas { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .6rem; padding: .8rem 1.4rem; background: var(--latar); border-bottom: 1px solid var(--garis); }
.atas h1 { font-size: 1.1rem; margin: 0; font-weight: 700; }
.konten { padding: 1.2rem 1.4rem 2rem; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; padding: 1.1rem 1.2rem; }
.angka { font-size: 1.6rem; font-weight: 800; color: var(--judul); line-height: 1.1; }
.tombol-ikon { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--garis); background: var(--kartu); color: var(--teks); display: inline-flex; align-items: center; justify-content: center; }
.bulat { width: 34px; height: 34px; border-radius: 50%; background: var(--utama); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }

/* ---- inbox */
.inbox { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 140px); min-height: 480px; background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; }
.daftar-chat { border-right: 1px solid var(--garis); display: flex; flex-direction: column; min-height: 0; }
.daftar-chat .gulir { overflow-y: auto; flex: 1; }
.item-chat { display: flex; gap: .65rem; padding: .7rem .9rem; border-bottom: 1px solid var(--garis); color: var(--teks); cursor: pointer; }
.item-chat:hover { background: var(--kartu-2); }
.item-chat.aktif { background: var(--aktif); }
.item-chat .cup { font-size: .8rem; color: var(--redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruang { display: flex; flex-direction: column; min-height: 0; }
.ruang .kepala { padding: .7rem 1rem; border-bottom: 1px solid var(--garis); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ruang .pesan-pesan { flex: 1; overflow-y: auto; padding: 1rem; background: var(--latar-chat); }
.gelembung { max-width: 72%; padding: .5rem .75rem; border-radius: 12px; margin-bottom: .45rem; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.gelembung.masuk { background: var(--gelembung-masuk); border-top-left-radius: 4px; }
.gelembung.keluar { background: var(--gelembung-keluar); margin-left: auto; border-top-right-radius: 4px; }
.gelembung .meta { font-size: .68rem; color: var(--redup); text-align: right; margin-top: .15rem; }
.ruang .tulis { border-top: 1px solid var(--garis); padding: .6rem; display: flex; gap: .5rem; align-items: flex-end; background: var(--kartu); }
.ruang .tulis textarea { resize: none; max-height: 140px; }
.kosong-chat { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--redup); flex-direction: column; gap: .5rem; background: var(--latar-chat); }

@media (max-width: 991.98px) {
  .sisi { transform: translateX(-100%); }
  .sisi.buka { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .isi { margin-left: 0; }
  .konten { padding: .8rem; }
  .inbox { grid-template-columns: 1fr; height: calc(100vh - 110px); }
  .inbox.buka-ruang .daftar-chat { display: none; }
  .inbox:not(.buka-ruang) .ruang { display: none; }
  .gelembung { max-width: 88%; }
}