/* Tema gelap dengan aksen merah. Ganti warna tema cukup di blok :root ini. */
:root {
  --latar: #0a0a0b;
  --panel: #131315;
  --panel-2: #1a1a1d;
  --aksen-rgb: 225, 29, 72;        /* merah crimson, dipakai untuk latar transparan */
  --garis: rgba(var(--aksen-rgb), 0.30);
  --garis-redup: #26262a;
  --aksen: #e11d48;
  --aksen-terang: #fb7185;
  --aksen-gelap: #9f1239;
  --teks-di-aksen: #ffffff;
  --teks: #e9e7e2;
  --teks-redup: #8f8c86;
  --hijau: #4ccf7d;
  --merah: #ff6b6b;
  --biru: #6aa8ff;
  --ungu: #b58cff;
  --oranye: #ffa94d;
  --toska: #3fd0c9;
  --kartu: rgba(19, 18, 21, 0.86);  /* kartu sedikit tembus supaya latar panel terlihat samar */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font: 12.5px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
a { color: inherit; text-decoration: none; }
h2 { font-size: 14px; margin: 0 0 10px; }
b, .tebal { font-weight: 600; }

/* --- Tata letak --- */
.tata-letak { display: flex; min-height: 100vh; position: relative; z-index: 1; }
.sidebar {
  width: 220px; flex-shrink: 0; padding: 16px 12px 12px;
  background: linear-gradient(180deg, rgba(22, 17, 20, 0.93), rgba(10, 9, 10, 0.95));
  border-right: 1px solid var(--garis); box-shadow: 1px 0 30px rgba(var(--aksen-rgb), 0.06);
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh; isolation: isolate;
}
.sidebar::before {  /* cahaya merah samar di belakang logo */
  content: ""; position: absolute; inset: 0 0 auto; height: 220px; z-index: -1; pointer-events: none;
  background: radial-gradient(240px 170px at 25% 0%, rgba(var(--aksen-rgb), 0.16), transparent 70%);
}
.utama { flex: 1; min-width: 0; padding: 12px 22px 30px; }

/* --- Latar panel (CSS/SVG murni, tanpa file gambar). Semua animasi memakai transform/opacity supaya ringan --- */
.latar-panel {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(225, 29, 72, 0.15), transparent 65%),
    radial-gradient(760px 520px at 0% 100%, rgba(136, 19, 55, 0.20), transparent 65%),
    linear-gradient(180deg, #0d0a0c, #080708);
}
.sinar { position: absolute; border-radius: 50%; animation: bernapas 14s ease-in-out infinite alternate; }
.sinar.s1 { width: 760px; height: 760px; right: -220px; top: -340px; background: radial-gradient(circle, rgba(225, 29, 72, 0.17), transparent 65%); }
.sinar.s2 { width: 680px; height: 680px; left: 6%; bottom: -400px; background: radial-gradient(circle, rgba(190, 18, 60, 0.20), transparent 65%);
  animation-duration: 18s; animation-delay: -5s; }
.sinar.s3 { width: 560px; height: 560px; left: 44%; top: 28%; background: radial-gradient(circle, rgba(251, 191, 36, 0.05), transparent 65%);
  animation-duration: 22s; animation-delay: -9s; }
@keyframes bernapas { from { opacity: 0.55; transform: scale(0.92); } to { opacity: 1; transform: scale(1.08); } }
.pola-titik {
  position: absolute; inset: 0; background-size: 24px 24px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.6px);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 88% 0%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 65% at 88% 0%, #000 10%, transparent 75%);
}
/* Radar pemantauan: lingkaran konsentris, sapuan berputar, dan gelombang yang memancar dari pusatnya */
.radar {
  position: absolute; width: 1000px; height: 1000px; right: -420px; top: -460px; border-radius: 50%; overflow: hidden;
  background: repeating-radial-gradient(circle, transparent 0 69px, rgba(251, 113, 133, 0.2) 70px, transparent 71.5px);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
          mask-image: radial-gradient(circle, #000 30%, transparent 72%);
}
.radar-sapu {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 0deg, rgba(225, 29, 72, 0.05) 25deg, rgba(225, 29, 72, 0.34) 69deg, rgba(251, 113, 133, 0.6) 69.6deg, transparent 70deg);
  animation: putar-radar 12s linear infinite;
}
.radar::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(251, 113, 133, 0.4);
  animation: pancar 6s ease-out infinite;
}
@keyframes putar-radar { to { transform: rotate(360deg); } }
@keyframes pancar { from { transform: scale(0.04); opacity: 0.9; } to { transform: scale(0.72); opacity: 0; } }
/* Grafik garis di bagian bawah, dengan kilau yang mengalir di sepanjang garisnya */
.grafik-latar { position: absolute; left: 0; bottom: 0; width: 100%; height: 34vh; min-height: 180px; }
.grafik-latar path { fill: none; vector-effect: non-scaling-stroke; }
.grafik-latar .area { fill: url(#isi-grafik); }
.grafik-latar .g1 { stroke: url(#garis-grafik); stroke-width: 1.5; }
.grafik-latar .g2 { stroke: rgba(251, 191, 36, 0.13); stroke-width: 1; stroke-dasharray: 3 7; }
.grafik-latar .jejak {
  stroke: #fb7185; stroke-width: 2.4; stroke-linecap: round; opacity: 0.6;
  stroke-dasharray: 55 945; animation: alir 10s linear infinite;
}
.grafik-latar .jejak.j2 { stroke: #fbbf24; stroke-width: 1.8; opacity: 0.45; animation-duration: 14s; animation-delay: -6s; }
@keyframes alir { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
/* Titik data yang naik pelan dari bawah */
.partikel {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: #fb7185; box-shadow: 0 0 8px 2px rgba(225, 29, 72, 0.55); animation: melambung 24s linear infinite;
}
.partikel.p1 { left: 16%; animation-delay: -3s; }
.partikel.p2 { left: 31%; animation-delay: -12s; animation-duration: 29s; background: #fbbf24; box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.4); }
.partikel.p3 { left: 46%; animation-delay: -7s; animation-duration: 26s; }
.partikel.p4 { left: 61%; animation-delay: -18s; }
.partikel.p5 { left: 76%; animation-delay: -10s; animation-duration: 31s; background: #fbbf24; box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.4); }
.partikel.p6 { left: 91%; animation-delay: -15s; animation-duration: 25s; }
@keyframes melambung {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.85; }
  70% { opacity: 0.45; }
  100% { transform: translate(34px, -96vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sinar, .radar-sapu, .radar::after, .grafik-latar .jejak, .partikel { animation: none; }
  .radar::after, .partikel { display: none; }
}

.merek { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.logo {
  width: 38px; height: 38px; border-radius: 50%; font-size: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; color: var(--teks-di-aksen);
  background: radial-gradient(circle at 30% 30%, var(--aksen-terang), var(--aksen-gelap));
  box-shadow: 0 0 0 2px rgba(var(--aksen-rgb), 0.35), 0 0 16px rgba(var(--aksen-rgb), 0.35);
}
.logo-gambar {
  width: 44px; height: 44px; padding: 0; background: none; object-fit: cover;
  box-shadow: 0 0 14px rgba(255, 190, 70, 0.35);  /* cahaya keemasan mengikuti bingkai logo */
}
.merek-nama { font-weight: 800; font-size: 15px; letter-spacing: 0.8px; }
.merek-sub { font-size: 9px; letter-spacing: 1.6px; color: var(--aksen); text-transform: uppercase; }

/* Ikon Font Awesome: lebar tetap supaya teks di sebelahnya rata */
.ikon { flex-shrink: 0; width: 1.2em; text-align: center; font-size: 14px; line-height: 1; }
.menu .ikon { font-size: 15px; }
.kotak-ikon .ikon, .stat-ikon .ikon, .kotak-ikon-besar .ikon { font-size: 15px; }
.kotak-ikon-besar .ikon { font-size: 17px; }
.ikon-kecil { font-size: 10px; width: auto; }
.bintang { font-size: 0.8em; color: var(--aksen-terang); vertical-align: 0.1em; }
.menu { display: flex; flex-direction: column; gap: 6px; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--garis-redup);
  background: var(--panel); color: var(--teks-redup); font-weight: 600;
}
.menu a:hover { color: var(--teks); border-color: var(--garis); }
.menu a.aktif {
  color: var(--aksen-terang); border-color: var(--aksen);
  background: linear-gradient(90deg, rgba(var(--aksen-rgb), 0.16), rgba(var(--aksen-rgb), 0.04));
}
.nav-lencana {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; text-align: center;
  font-size: 10.5px; font-weight: 800; line-height: 18px; color: #fff; background: var(--aksen);
}
.nav-lencana[hidden] { display: none; }

.status-worker {
  margin-top: auto; display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; border: 1px solid var(--garis-redup); border-radius: 9px; font-size: 11px;
}
.status-worker b { display: block; font-size: 11.5px; }
.status-worker span:not(.titik) { color: var(--teks-redup); font-size: 10.5px; }
.titik { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.titik.hijau { background: var(--hijau); box-shadow: 0 0 6px var(--hijau); }
.titik.oranye { background: var(--oranye); box-shadow: 0 0 6px var(--oranye); }
.titik.merah { background: var(--merah); }

.kotak-pengguna {
  display: flex; align-items: center; gap: 9px; padding: 8px 8px 8px 10px;
  border: 1px solid var(--garis); border-radius: 9px; background: var(--panel);
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 800; color: var(--aksen-terang); background: rgba(var(--aksen-rgb), 0.15);
  border: 1px solid var(--garis);
}
.pengguna-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pengguna-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pengguna-info span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--aksen); }

.atas {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--garis);
}
.atas-jejak { font-size: 11px; color: var(--teks-redup); }

.kepala-halaman { padding: 16px 18px; }
.kepala-judul h1 { margin: 0; font-size: 18px; letter-spacing: 0.2px; }
.kepala-judul p { margin: 3px 0 0; font-size: 11.5px; color: var(--teks-redup); }
.kepala-halaman .filter { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--garis-redup); }

/* --- Kartu & tombol --- */
.kartu {
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
}
/* Kepala halaman: kilau merah tipis dari kiri atas */
.kartu.kepala-halaman { background: linear-gradient(115deg, rgba(var(--aksen-rgb), 0.11), transparent 42%), var(--kartu); }
.tombol {
  display: inline-block; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--garis); background: var(--panel-2); color: var(--aksen-terang);
  font: inherit; font-weight: 600; white-space: nowrap;
}
.tombol:hover { border-color: var(--aksen); }
.tombol-utama { background: linear-gradient(180deg, var(--aksen), var(--aksen-gelap)); color: var(--teks-di-aksen); border-color: transparent; }
.tombol-redup { color: var(--teks-redup); }
.tombol-kecil { padding: 3px 8px; font-size: 11px; }
.tombol-ikon { padding: 5px 7px; line-height: 0; color: var(--teks-redup); }
.tombol-ikon:hover { color: var(--aksen-terang); }
.tombol .ikon { margin-right: 4px; }
.tombol .ikon.ikon-akhir { margin: 0 0 0 4px; }
.tombol-ikon .ikon { margin: 0; }

/* --- Filter --- */
.filter-isi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.filter label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--teks-redup); }
input, select {
  background: #0d0d0f; color: var(--teks); border: 1px solid var(--garis);
  border-radius: 7px; padding: 5px 8px; font: inherit; color-scheme: dark;
}
input:focus, select:focus { outline: none; border-color: var(--aksen); }
/* Daftar pilihan dropdown: latar gelap eksplisit. Tanpa ini, select berlatar transparan membuat browser
   memakai latar putih bawaan sementara teksnya tetap terang, sehingga pilihan tidak terbaca. */
select option, select optgroup { background-color: #17171a; color: var(--teks); }
select optgroup { color: var(--aksen-terang); font-style: normal; font-weight: 700; }
select option:checked { background-color: var(--aksen-gelap); color: #fff; }
select option:disabled, select option[value=""] { color: var(--teks-redup); }
.filter-tombol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.catatan { font-size: 11px; color: var(--teks-redup); }

/* --- Tab utama (Riwayat Kendala Agen) --- */
.tab-utama { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tab-utama a {
  padding: 7px 14px; border-radius: 9px; border: 1px solid var(--garis-redup);
  background: var(--panel); color: var(--teks-redup); font-weight: 600;
}
.tab-utama a:hover { color: var(--teks); border-color: var(--garis); }
.tab-utama a.aktif { color: var(--aksen-terang); border-color: var(--aksen); background: rgba(var(--aksen-rgb), 0.1); }

/* --- Tab kecil (jenis kendala) --- */
.tab { display: flex; gap: 6px; margin-bottom: 12px; }
.tab a {
  padding: 5px 11px; border-radius: 7px; border: 1px solid var(--garis-redup);
  background: var(--panel); color: var(--teks-redup);
}
.tab a.aktif { color: var(--aksen-terang); border-color: var(--aksen); background: rgba(var(--aksen-rgb), 0.1); }
.tab { flex-wrap: wrap; }
.tab a:hover { color: var(--teks); }
.tab-angka {
  display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 8px;
  font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, 0.07);
}
.tab a.tab-terlewat .tab-angka { color: var(--merah); }
.tab a.tab-respons_terlambat .tab-angka { color: var(--oranye); }
.tab a.tab-tidak_dibalas_tengah .tab-angka { color: var(--ungu); }

/* --- Kartu angka --- */
.deret-kartu { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.deret-kartu .kartu { margin-bottom: 0; }
.angka-kartu { display: block; transition: border-color 0.15s; }
a.angka-kartu:hover { border-color: var(--aksen); }
.angka-label { font-size: 11px; color: var(--teks-redup); }
.angka { font-size: 22px; font-weight: 800; color: var(--teks); line-height: 1.25; }
.angka-sub { font-size: 11px; color: var(--teks-redup); }
.angka-kartu.jenis-terlewat { border-left: 3px solid var(--merah); }
.angka-kartu.jenis-respons_terlambat { border-left: 3px solid var(--oranye); }
.angka-kartu.jenis-tidak_dibalas_tengah { border-left: 3px solid var(--ungu); }

/* Grafik kecil sebaran per jam di kartu (24 batang, 00–23 WIB). Area sentuh = satu kolom penuh. */
.angka-kartu.dengan-grafik { position: relative; padding-right: 46%; }
.grafik-jam {
  position: absolute; right: 12px; bottom: 12px; width: 42%; height: 34px;
  display: flex; align-items: flex-end; gap: 1px;
}
.grafik-jam span { flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.grafik-jam i { display: block; width: 100%; border-radius: 1px 1px 0 0; background: var(--teks-redup); min-height: 1px; opacity: 0.85; }
.grafik-jam i.nol { opacity: 0.18; }
.grafik-jam span:hover i { opacity: 1; filter: brightness(1.25); }
.grafik-jam.jenis-terlewat i { background: var(--merah); }
.grafik-jam.jenis-respons_terlambat i { background: var(--oranye); }
.grafik-jam.jenis-tidak_dibalas_tengah i { background: var(--ungu); }

/* --- Tabel --- */
.tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis-redup); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; }
th {
  font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--teks-redup); background: #101012; padding: 6px 10px; position: sticky; top: 0;
}
td { padding: 5px 10px; border-top: 1px solid var(--garis-redup); vertical-align: middle; }
/* Semua tabel rata tengah. Kolom nama dan teks panjang rata kiri: beri kelas .kiri (nama agen & teks
   terpotong otomatis rata kiri). */
th, td { text-align: center; }
th.kiri, td.kiri, td.nama-agen, td.teks-potong { text-align: left; }
td .daftar-lencana { justify-content: center; }
tbody tr:hover { background: rgba(var(--aksen-rgb), 0.04); }
td a:hover { color: var(--aksen-terang); }
.kanan { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
.kosong { text-align: center; color: var(--teks-redup); padding: 18px; }
.redup { color: var(--teks-redup); font-weight: 400; }
.kecil { font-size: 10.5px; }
.hijau { color: var(--hijau); }
.merah { color: var(--merah); }

.kepala-kartu { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kepala-kartu h2 { margin: 0; }
.paginasi { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--teks-redup); }

.lencana {
  display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 600;
  white-space: nowrap; border: 1px solid currentColor;
}
.lencana.jenis-terlewat { color: var(--merah); background: rgba(255, 107, 107, 0.08); }
.lencana.jenis-respons_terlambat { color: var(--oranye); background: rgba(255, 169, 77, 0.08); }
.lencana.jenis-tidak_dibalas_tengah { color: var(--ungu); background: rgba(181, 140, 255, 0.08); }

/* --- Daftar Kendala: rincian Chat Tidak Nyambung (pesan member vs balasan agen) --- */
.rinci-nyambung { display: flex; flex-direction: column; gap: 6px; min-width: 380px; max-width: 680px; padding: 2px 0; }
.baris-rinci { display: flex; align-items: baseline; gap: 7px; line-height: 1.45; }
.label-rinci { flex-shrink: 0; width: 74px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.label-rinci .ikon { margin-right: 2px; }
.label-rinci.member { color: var(--biru); }
.label-rinci.agen { color: var(--aksen-terang); }
.topik-rinci {
  flex-shrink: 0; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
  color: var(--biru); background: rgba(106, 168, 255, 0.12); border: 1px solid rgba(106, 168, 255, 0.35);
}
.rinci-nyambung q { quotes: "“" "”"; color: var(--teks); word-break: break-word; }
.rinci-nyambung q.balasan-rinci { color: var(--teks-redup); font-style: italic; }
.ket-rinci {
  flex-shrink: 0; margin-left: auto; padding: 0 7px; border-radius: 10px; font-size: 9.5px; font-weight: 700;
  white-space: nowrap; color: var(--oranye); background: rgba(255, 169, 77, 0.1);
}

/* --- Percakapan --- */
.info-chat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; margin-top: 10px; }
.info-chat > div { display: flex; flex-direction: column; font-size: 12px; }
.info-chat .lebar { grid-column: 1 / -1; }
.daftar-kendala { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }

.transkrip { display: flex; flex-direction: column; gap: 3px; }
.baris-pesan {
  display: grid; grid-template-columns: 60px 190px 1fr; gap: 10px;
  padding: 5px 10px; border-radius: 6px; border-left: 3px solid transparent;
}
.waktu-pesan { font-family: Consolas, monospace; color: var(--teks-redup); font-size: 11px; padding-top: 1px; }
.pengirim { font-weight: 600; font-size: 12px; }
.teks-pesan { word-break: break-word; }
.isi-pesan { white-space: pre-wrap; }  /* hanya isi pesan yang mempertahankan baris baru */
.teks-pesan .lencana, .penanda-mulai { display: inline-block; margin: 0 6px 4px 0; }
.penanda-mulai { font-size: 10.5px; font-weight: 600; opacity: 0.75; }
.penanda-mulai.jenis-terlewat { color: var(--merah); }
.penanda-mulai.jenis-respons_terlambat { color: var(--oranye); }
.penanda-mulai.jenis-tidak_dibalas_tengah { color: var(--ungu); }
.penanda-mulai.jenis-kesalahan_penanganan { color: var(--toska); }
.baris-pesan.customer { background: rgba(106, 168, 255, 0.07); border-left-color: var(--biru); }
.baris-pesan.customer .pengirim { color: var(--biru); }
.baris-pesan.agent { background: rgba(var(--aksen-rgb), 0.07); border-left-color: var(--aksen); }
.baris-pesan.agent .pengirim { color: var(--aksen-terang); }
.baris-pesan.sapaan { opacity: 0.6; border-left-color: var(--aksen); }
.baris-pesan.sistem, .baris-pesan.form { color: var(--teks-redup); font-size: 11.5px; font-style: italic; border-left-color: #3a3a40; }

/* --- Dashboard (pemantauan langsung) --- */
.menu-judul { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teks-redup); margin: 6px 4px -2px; }
.peringatan { border-color: rgba(255, 107, 107, 0.5); color: var(--merah); }
.peringatan code { color: var(--aksen-terang); }
.info-segar { font-size: 11px; color: var(--teks-redup); margin-bottom: 8px; }
.dua-kolom { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(400px, 1fr); gap: 12px; align-items: start; }
a.angka-kartu.kartu-terpilih { border-color: var(--aksen); box-shadow: 0 0 0 1px rgba(var(--aksen-rgb), 0.35), 0 10px 26px -12px rgba(var(--aksen-rgb), 0.5); }
.lencana.status-chat-menunggu { color: var(--oranye); background: rgba(255, 169, 77, 0.08); }
.lencana.status-chat-antre { color: var(--ungu); background: rgba(181, 140, 255, 0.08); }
.lencana.status-chat-dibalas { color: var(--hijau); background: rgba(76, 207, 125, 0.08); }
.lencana.status-chat-belum_ada_pesan { color: var(--teks-redup); }
.baris-lewat .lencana.status-chat-menunggu { color: var(--merah); background: rgba(255, 107, 107, 0.1); }
.nama-member { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pengirim-pesan { font-weight: 700; }
.pengirim-pesan.dari-member { color: var(--oranye); }
.pengirim-pesan.dari-agen { color: var(--aksen-terang); }
.baris-lewat { background: rgba(255, 107, 107, 0.06); }
.teks-potong { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oranye { color: var(--oranye); }
.lencana.status-siap { color: var(--hijau); background: rgba(76, 207, 125, 0.08); }
.lencana.status-tidak { color: var(--oranye); background: rgba(255, 169, 77, 0.08); }
.lencana.status-offline { color: var(--teks-redup); }

/* --- Status Agen (linimasa) --- */
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--teks-redup); margin-bottom: 10px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.contoh { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.linimasa { display: flex; flex-direction: column; }
.lini-baris { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; min-height: 24px; }
.lini-nama { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lini-jalur { position: relative; height: 14px; border-radius: 3px; background: var(--panel-2); }
.lini-seg { position: absolute; top: 0; bottom: 0; border-radius: 2px; cursor: default; }
.lini-seg:hover { filter: brightness(1.3); }
/* Tidak terima diberi arsiran supaya tetap beda dari Siap bagi pembaca buta warna merah-hijau */
.lini-seg.status-accepting_chats, .contoh.status-accepting_chats { background: var(--hijau); }
.lini-seg.status-not_accepting_chats, .contoh.status-not_accepting_chats {
  background: repeating-linear-gradient(135deg, var(--oranye) 0 4px, rgba(255, 169, 77, 0.45) 4px 6px);
}
.lini-seg.status-offline, .contoh.status-offline { background: #4a4a52; }
.contoh.kosong-data { background: var(--panel-2); border: 1px solid var(--garis-redup); }
.lini-batas { position: absolute; top: -3px; bottom: -3px; border-left: 1px dashed var(--teks-redup); opacity: 0.5; }
.lini-sekarang { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--aksen-terang); z-index: 1; }
.sumbu { position: relative; height: 16px; font-size: 10.5px; color: var(--teks-redup); }
.sumbu span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.sumbu span:first-child { transform: none; }

/* --- Nama agen di tabel sempit: dipotong rapi, nama lengkap ada di tooltip --- */
.nama-agen { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Percakapan --- */
.alat-tabel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.alat-tabel form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.kotak-cari { position: relative; }
.kotak-cari .ikon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--teks-redup); }
.kotak-cari input { padding-left: 30px; width: 220px; }
.alat-tabel .paginasi { margin-left: auto; }
.daftar-lencana { display: flex; flex-wrap: wrap; gap: 4px; }

/* --- Pengaturan --- */
.dua-sama { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.daftar-nilai { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 8px 16px; margin: 0; }
.daftar-nilai dt { color: var(--teks-redup); }
.daftar-nilai dd { margin: 0; font-weight: 600; }
.daftar-nilai dd .catatan { display: block; font-weight: 400; }
.lencana.ok { color: var(--hijau); background: rgba(76, 207, 125, 0.08); }
.lencana.gagal { color: var(--merah); background: rgba(255, 107, 107, 0.08); }
.lencana.proses { color: var(--oranye); background: rgba(255, 169, 77, 0.08); }
.lencana.terkunci { color: var(--merah); background: rgba(255, 107, 107, 0.08); }
.lencana.dilindungi { color: #fbbf24; background: rgba(251, 191, 36, 0.08); margin-left: 4px; }
.menu-aksi-catatan { padding: 6px 10px 4px; font-size: 10.5px; line-height: 1.45; color: var(--teks-redup); max-width: 230px; }

/* --- Jenis Kesalahan Penanganan (warna toska) --- */
.lencana.jenis-kesalahan_penanganan { color: var(--toska); background: rgba(63, 208, 201, 0.08); }
.tab a.tab-kesalahan_penanganan .tab-angka { color: var(--toska); }
.angka-kartu.jenis-kesalahan_penanganan { border-left: 3px solid var(--toska); }
.grafik-jam.jenis-kesalahan_penanganan i { background: var(--toska); }
.lencana.jenis-salah_informasi, .lencana.jenis-lainnya { color: var(--teks); background: rgba(255, 255, 255, 0.05); }

/* --- Jenis Chat Tidak Nyambung (warna biru) --- */
.lencana.jenis-tidak_nyambung { color: var(--biru); background: rgba(106, 168, 255, 0.08); }
.tab a.tab-tidak_nyambung .tab-angka { color: var(--biru); }
.angka-kartu.jenis-tidak_nyambung { border-left: 3px solid var(--biru); }
.grafik-jam.jenis-tidak_nyambung i { background: var(--biru); }
.penanda-mulai.jenis-tidak_nyambung { color: var(--biru); }

/* --- Pesan kilat (setelah simpan / hapus) --- */
.kilat { padding: 9px 14px; margin-bottom: 12px; border-radius: 9px; border: 1px solid; font-weight: 600; }
.kilat-ok { color: var(--hijau); border-color: rgba(76, 207, 125, 0.45); background: rgba(76, 207, 125, 0.07); }
.kilat-galat { color: var(--merah); border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.07); }

/* --- Audit Chat --- */
.baris-tombol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; }
.tata-audit { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 12px; align-items: start; }
.alat-riwayat { margin-top: 0; }

/* --- Audit Chat: tiga kolom (profil | form | operator tercatat) --- */
.tata-audit3 {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: minmax(220px, 270px) minmax(330px, 1fr) minmax(320px, 420px);
}
.tata-audit3 > .kartu { margin-bottom: 0; padding: 16px; box-shadow: 0 0 24px rgba(var(--aksen-rgb), 0.06); }

.kartu-profil { display: flex; flex-direction: column; gap: 10px; }
.profil-gambar {
  aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--aksen);
  box-shadow: 0 0 26px rgba(var(--aksen-rgb), 0.3);
  /* cahaya oranye lembut di belakang logo (warna LiveChat) */
  background: radial-gradient(circle at 50% 42%, rgba(255, 81, 0, 0.2), transparent 62%), #0e0e10;
}
/* contain + padding: gambar tampil utuh tanpa terpotong, apa pun perbandingan sisinya */
.profil-gambar img {
  width: 100%; height: 100%; object-fit: contain; padding: 14%; display: block;
  filter: drop-shadow(0 0 16px rgba(255, 81, 0, 0.35));
}
.profil-gambar .logo { width: 100%; height: 100%; border-radius: 0; font-size: 42px; }
.profil-peran { margin-top: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--aksen-terang); }
.profil-nama { font-size: 24px; font-weight: 800; letter-spacing: 0.5px; line-height: 1.1; word-break: break-all; }
.profil-data { margin: 4px 0 0; display: flex; flex-direction: column; }
.profil-data > div {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 0; border-top: 1px solid var(--garis-redup);
}
.profil-data dt { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--teks-redup); }
.profil-data dt .ikon { color: var(--aksen-terang); font-size: 12px; }
.profil-data dd { margin: 0; font-weight: 800; font-size: 12px; letter-spacing: 0.5px; text-align: right; }
.profil-kutipan { margin: 2px 0 0; padding-top: 10px; border-top: 1px solid var(--garis-redup); font-size: 11px; font-style: italic; color: var(--teks-redup); text-align: center; }

.judul-form { text-align: center; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--garis); }
.judul-form h2, .judul-operator h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: 0.6px; }
.judul-form p, .judul-operator p { margin: 4px 0 0; font-size: 11px; color: var(--teks-redup); }
.judul-operator { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--garis); }
.judul-operator h2 { font-size: 15px; }

.form-kotak { gap: 13px; }
.grup-isian {
  display: flex; align-items: stretch; border: 1px solid var(--garis); border-radius: 9px; overflow: hidden;
  background: #0d0d0f; transition: border-color 0.15s, box-shadow 0.15s;
}
.grup-isian:focus-within { border-color: var(--aksen); box-shadow: 0 0 0 3px rgba(var(--aksen-rgb), 0.12); }
.kotak-ikon {
  width: 44px; flex-shrink: 0; display: grid; place-items: center; color: var(--aksen-terang);
  border-right: 1px solid var(--garis); background: rgba(var(--aksen-rgb), 0.06);
}
.grup-isian input, .grup-isian select, #pilih-operator-bungkus select {
  flex: 1; min-width: 0; width: 100%; border: 0; border-radius: 0; background: transparent;
  padding: 10px 12px; font-weight: 400; font-size: 12.5px;
}
.grup-isian input:focus, .grup-isian select:focus { border: 0; }
#pilih-operator-bungkus { flex: 1; min-width: 0; display: flex; }
.tombol-simpan {
  width: 100%; margin-top: 4px; padding: 13px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 1.5px; color: var(--teks-di-aksen);
  background: linear-gradient(180deg, var(--aksen-terang), var(--aksen) 45%, var(--aksen-gelap));
  box-shadow: 0 6px 22px rgba(var(--aksen-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.1s, box-shadow 0.15s;
}
.tombol-simpan:hover { box-shadow: 0 8px 28px rgba(var(--aksen-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.tombol-simpan:active { transform: translateY(1px); }
.catatan.tengah { text-align: center; margin: 2px 0 0; }

/* --- Shift: lencana & pilihan di form temuan --- */
.lencana.shift-1 { color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
.lencana.shift-2 { color: #93b4ff; background: rgba(106, 168, 255, 0.08); }
.lencana.shift-1 .ikon, .lencana.shift-2 .ikon { margin-right: 2px; }
.label-isian { font-size: 11.5px; color: var(--aksen-terang); font-weight: 600; margin-bottom: -5px; }
.label-isian .redup { font-weight: 400; font-size: 10.5px; }
.pilih-shift { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.form-audit .opsi-shift { display: block; position: relative; cursor: pointer; color: var(--teks-redup); }
.opsi-shift input { position: absolute; opacity: 0; pointer-events: none; }
.opsi-shift span {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 8px; text-align: center;
  border: 1px solid var(--garis); border-radius: 9px; background: #0d0d0f; font-size: 12.5px; font-weight: 700;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
}
.opsi-shift span .ikon { font-size: 15px; color: var(--aksen-terang); }
.opsi-shift.shift-1 span .ikon { color: #fbbf24; }
.opsi-shift.shift-2 span .ikon { color: #93b4ff; }
.opsi-shift small { font-size: 10.5px; font-weight: 500; color: var(--teks-redup); }
.opsi-shift:hover span { border-color: var(--aksen); }
.opsi-shift input:focus-visible + span { outline: 2px solid var(--aksen-terang); outline-offset: 2px; }
.opsi-shift input:checked + span {
  color: var(--teks); border-color: var(--aksen); background: rgba(var(--aksen-rgb), 0.09);
  box-shadow: 0 0 0 3px rgba(var(--aksen-rgb), 0.12);
}
.opsi-shift.shift-1 input:checked + span { border-color: #fbbf24; background: rgba(251, 191, 36, 0.08); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12); }
.opsi-shift.shift-2 input:checked + span { border-color: #6aa8ff; background: rgba(106, 168, 255, 0.08); box-shadow: 0 0 0 3px rgba(106, 168, 255, 0.12); }

/* --- Popup konfirmasi kendala (form Audit Chat di jendela modal) --- */
.popup-konfirmasi .kepala-kartu { align-items: flex-start; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--garis); }
.judul-form.kiri { text-align: left; padding: 0; margin: 0; border: 0; }
.judul-form.kiri h2 { font-size: 16px; }
.ringkas-kendala { padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--garis-redup); border-radius: 9px; background: var(--panel-2); }
.ringkas-kendala .isi-lebar { grid-column: 1 / -1; padding-top: 6px; border-top: 1px dashed var(--garis-redup); }
.ringkas-kendala .detail-kendala { font-weight: 400; color: #cfcac3; line-height: 1.5; }
.grup-isian textarea {
  flex: 1; min-width: 0; min-height: 72px; border: 0; background: transparent; color: var(--teks); resize: vertical;
  padding: 10px 12px; font: inherit; font-size: 12.5px; font-weight: 400; line-height: 1.5; color-scheme: dark;
}
.grup-isian textarea:focus { outline: none; }
.grup-teks .kotak-ikon { place-items: start center; padding-top: 11px; }
.tombol-popup { display: flex; gap: 8px; align-items: stretch; margin-top: 2px; }
.tombol-popup .tombol-simpan { flex: 1; margin-top: 0; }
.tombol-popup .tombol { display: grid; place-items: center; padding: 0 18px; }
.kartu-konfirmasi { max-width: 640px; margin: 0 auto; padding: 18px 20px; }

.statistik-operator { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat {
  display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 10px; min-width: 0;
  border: 1px solid var(--garis); background: var(--panel-2);
}
.stat > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.stat b { font-size: 20px; font-weight: 800; }
.stat-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--teks-redup); line-height: 1.2; }
.stat-satuan { font-size: 10px; color: var(--teks-redup); }
.stat-ikon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; }
.stat-ikon.merah { color: var(--merah); background: rgba(255, 107, 107, 0.12); }
.stat-ikon.ungu { color: var(--ungu); background: rgba(181, 140, 255, 0.12); }
.stat-ikon.biru { color: var(--biru); background: rgba(106, 168, 255, 0.12); }
.pilih-bulan-lebar {
  width: 100%; margin-bottom: 10px; padding: 8px; text-align: center; text-align-last: center;
  font-weight: 700; color: var(--aksen-terang); background: rgba(var(--aksen-rgb), 0.06);
}
.filter-hari { display: flex; align-items: stretch; gap: 6px; margin: 0 0 10px; }
.filter-hari .grup-isian { flex: 1; min-width: 0; }
.filter-hari .grup-isian input { text-align: center; font-weight: 700; color: var(--aksen-terang); }
.filter-hari .tombol-ikon { display: grid; place-items: center; min-width: 34px; font-size: 18px; line-height: 1; color: var(--aksen-terang); }
.filter-hari .tombol { display: grid; place-items: center; }
.tombol.nonaktif { opacity: 0.35; cursor: default; pointer-events: none; }
.daftar-operator { max-height: 430px; overflow-y: auto; margin-bottom: 10px; }
.baris-operator {
  display: grid; grid-template-columns: minmax(0, 1fr) 62px 52px 104px; align-items: center; gap: 6px;
  padding: 8px 6px; border-bottom: 1px solid var(--garis-redup); border-radius: 6px;
}
.baris-operator.kepala {
  position: sticky; top: 0; z-index: 1; background: var(--panel); padding-top: 4px;
  font-size: 10px; color: var(--teks-redup); border-bottom-color: var(--garis);
}
.baris-operator.kepala span:not(:first-child) { text-align: center; }
a.baris-operator:hover { background: rgba(var(--aksen-rgb), 0.07); }
.nama-operator { font-size: 11.5px; font-weight: 800; letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nama-operator i { font-style: normal; color: var(--aksen-terang); margin-right: 6px; }
.angka-operator { text-align: center; font-weight: 800; }
.baris-operator .lencana { display: block; text-align: center; padding: 3px 4px; }
.pilih-bulan { display: flex; align-items: center; gap: 8px; margin: 0; }
.alat-riwayat .pemisah { flex: 1; }
/* Saringan Riwayat Audit: periode (bulanan / mingguan / harian) + shift + agen */
.saring-audit { flex-wrap: wrap; row-gap: 8px; }
.aksi-riwayat { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.navigasi-periode { display: inline-flex; align-items: center; gap: 6px; }
.navigasi-periode .tombol-ikon { display: grid; place-items: center; min-width: 30px; }
.saring-audit select, .saring-audit input[type="date"] { padding: 6px 9px; }
.label-periode {
  padding: 4px 10px; border-radius: 7px; font-weight: 700; font-size: 11.5px; white-space: nowrap;
  color: var(--aksen-terang); border: 1px solid var(--garis); background: rgba(var(--aksen-rgb), 0.07);
}
.kartu h2 .ikon { color: var(--aksen-terang); margin-right: 4px; }
.form-audit { display: flex; flex-direction: column; gap: 11px; }
.form-audit label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--aksen-terang); font-weight: 600; }
.form-audit label .redup { font-weight: 400; font-size: 10.5px; }
.isian-ikon { position: relative; display: block; }
.isian-ikon > .ikon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--teks-redup); pointer-events: none; z-index: 1; }
.isian-ikon input, .isian-ikon select { width: 100%; padding: 8px 10px 8px 34px; font-weight: 400; }
.dua-isian { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tombol-lebar { width: 100%; padding: 10px; font-size: 13px; text-align: center; }
.info-cek { font-size: 11px; color: var(--teks-redup); margin-top: -4px; min-height: 0; }
.info-cek:empty { display: none; }
.info-cek a, .tautan-bukti, .tautan-operator:hover { color: var(--aksen-terang); }
.tautan-bukti { font-weight: 700; font-size: 11px; letter-spacing: 0.3px; margin-right: 6px; }
.tautan-bukti:hover { text-decoration: underline; }
.tautan-operator { border-bottom: 1px dashed var(--garis); }
.deret-mini { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.deret-mini .angka { font-size: 20px; }
.tinggi-terbatas { max-height: 460px; overflow-y: auto; }
.baris-tombol:last-of-type { margin-bottom: 4px; }

.lencana.operator-aman { color: var(--hijau); background: rgba(76, 207, 125, 0.08); }
.lencana.operator-perhatian { color: var(--oranye); background: rgba(255, 169, 77, 0.08); }
.lencana.operator-peringatan { color: #fff; background: var(--aksen); border-color: var(--aksen); }
.lencana.tingkat-0 { color: var(--oranye); background: rgba(255, 169, 77, 0.08); }
.lencana.tingkat-1 { color: var(--merah); background: rgba(255, 107, 107, 0.08); }
.lencana.tingkat-2 { color: #fff; background: var(--aksen-gelap); border-color: var(--aksen); }

/* Tombol tinjauan (Konfirmasi / Abaikan) */
.aksi-tinjau { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-left: 4px; }
.aksi-tinjau form { margin: 0; }
.tombol-konfirmasi { color: var(--hijau); border-color: rgba(76, 207, 125, 0.45); }
.tombol-konfirmasi:hover { border-color: var(--hijau); }
.pil-tinjau { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pil-tinjau a { padding: 3px 10px; border-radius: 20px; border: 1px solid var(--garis-redup); color: var(--teks-redup); font-size: 11.5px; }
.pil-tinjau a.aktif { color: var(--aksen-terang); border-color: var(--aksen); background: rgba(var(--aksen-rgb), 0.1); }

/* Jendela modal riwayat operator */
.modal {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 60px); padding: 18px 20px;
  background: var(--panel); color: var(--teks); border: 1px solid var(--aksen); border-radius: 12px;
  box-shadow: 0 0 40px rgba(var(--aksen-rgb), 0.25);
}
.modal::backdrop { background: rgba(0, 0, 0, 0.7); }
.modal form[method="dialog"] { margin: 0; }
.ringkas-operator { margin: 0 0 12px; color: var(--teks-redup); }
.kartu-temuan { border: 1px solid var(--garis); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; background: var(--panel-2); }
.kartu-temuan .kepala-kartu { margin-bottom: 6px; }
.isi-temuan { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 0; }
.isi-temuan dt { font-size: 10.5px; color: var(--teks-redup); }
.isi-temuan dd { margin: 0; font-weight: 600; }
.kaki-temuan { margin-top: 8px; font-size: 10.5px; color: var(--teks-redup); }
.aksen { color: var(--aksen-terang); }

/* Transkrip: pesan bukti & tombol Laporkan */
.baris-pesan { scroll-margin-top: 90px; }
.baris-pesan.pesan-bermasalah { border: 2px solid var(--merah); border-left-width: 3px; background: rgba(255, 107, 107, 0.09); }
.baris-pesan.pesan-tidak-nyambung { border: 2px solid var(--biru); border-left-width: 3px; background: rgba(106, 168, 255, 0.08); }
.baris-pesan.disorot { box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.35), 0 0 22px rgba(255, 107, 107, 0.3); border: 2px solid var(--merah); }
.tautan-lapor {
  display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 700;
  color: var(--aksen-terang); border: 1px solid var(--garis); opacity: 0; transition: opacity 0.15s;
}
.baris-pesan:hover .tautan-lapor, .tautan-lapor:focus { opacity: 1; }
.kartu-temuan-chat { border-color: var(--aksen); }

/* Lampiran gambar/file di transkrip. Gambar dimuat langsung dari CDN LiveChat. */
.lampiran-gambar {
  display: inline-block; margin-top: 2px; line-height: 0; border-radius: 10px; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--garis); background: #0d0d0f; transition: border-color 0.15s, box-shadow 0.15s;
}
.lampiran-gambar:hover { border-color: var(--aksen); box-shadow: 0 0 16px rgba(var(--aksen-rgb), 0.25); }
/* Lebar/tinggi dari atribut <img> (sudah dikecilkan) menyiapkan tempat sebelum gambar termuat */
.lampiran-gambar img { display: block; max-width: 240px; max-height: 240px; height: auto; object-fit: contain; }
.nama-lampiran { margin-top: 4px; font-size: 10.5px; color: var(--teks-redup); word-break: break-all; }
.lampiran-file {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--garis); background: var(--panel-2); color: var(--aksen-terang); font-weight: 600;
}
.lampiran-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lampiran-file:hover { border-color: var(--aksen); }
.modal-gambar { width: fit-content; max-width: min(1100px, calc(100vw - 40px)); padding: 12px; }
.kepala-gambar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kepala-gambar span { flex: 1; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--teks-redup); }
#isi-gambar { display: block; max-width: 100%; max-height: calc(100vh - 150px); margin: 0 auto; border-radius: 8px; cursor: zoom-out; }

/* --- Dasbor (ringkasan sistem) --- */
.statistik-dasbor { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.kotak-statistik { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px; transition: border-color 0.15s, box-shadow 0.15s; }
a.kotak-statistik:hover { border-color: var(--aksen); box-shadow: 0 0 18px rgba(var(--aksen-rgb), 0.15); }
.kotak-statistik > div { min-width: 0; }
.kotak-statistik b, .kotak-jenis b { display: block; font-size: 23px; font-weight: 800; line-height: 1.2; color: var(--aksen-terang); }
.kotak-ikon-besar {
  width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--garis); background: rgba(var(--aksen-rgb), 0.08); color: var(--aksen-terang);
}
.kotak-ikon-besar.merah { color: var(--merah); background: rgba(255, 107, 107, 0.1); }
.kotak-ikon-besar.hijau { color: var(--hijau); background: rgba(76, 207, 125, 0.1); border-color: rgba(76, 207, 125, 0.35); }
.label-statistik { display: block; font-size: 11px; color: var(--teks-redup); }
.sub-statistik { display: block; font-size: 10.5px; color: var(--teks-redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tata-dasbor { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
.kartu-dasbor { margin: 0; padding: 0; overflow: hidden; }
.kepala-dasbor { padding: 14px 16px; border-bottom: 1px solid var(--garis); background: rgba(255, 255, 255, 0.015); }
.kepala-dasbor h2 { margin: 0; }
.kepala-dasbor p { margin: 3px 0 0; font-size: 11px; color: var(--teks-redup); }
.ringkasan-jenis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 6px; }
.kotak-jenis {
  display: block; padding: 12px; border-radius: 10px; border: 1px solid var(--garis-redup); border-left-width: 3px;
  background: var(--panel-2); transition: border-color 0.15s;
}
a.kotak-jenis:hover { border-color: var(--aksen); }
.kotak-jenis.jenis-terlewat { border-left-color: var(--merah); }
.kotak-jenis.jenis-respons_terlambat { border-left-color: var(--oranye); }
.kotak-jenis.jenis-tidak_dibalas_tengah { border-left-color: var(--ungu); }
.kotak-jenis.jenis-kesalahan_penanganan { border-left-color: var(--toska); }
.kotak-jenis.jenis-tidak_nyambung { border-left-color: var(--biru); }
.dua-tombol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 16px 16px; }
.dua-tombol .tombol { text-align: center; padding: 9px; }
.daftar-status { margin: 0; padding: 4px 16px 10px; }
.daftar-status > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--garis-redup); font-size: 12px; }
.daftar-status > div:last-child { border-bottom: 0; }
.daftar-status dt { color: var(--teks-redup); }
.daftar-status dd { margin: 0; font-weight: 700; text-align: right; }

/* --- Akun Panel --- */
.statistik-dasbor.statistik-akun { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kotak-ikon-besar.oranye { color: var(--oranye); background: rgba(255, 169, 77, 0.1); border-color: rgba(255, 169, 77, 0.35); }
.kotak-ikon-besar.abu { color: var(--teks-redup); background: rgba(255, 255, 255, 0.04); border-color: var(--garis-redup); }
.kotak-statistik b.hijau { color: var(--hijau); }
.kotak-statistik b.oranye { color: var(--oranye); }
.kotak-statistik b.redup { color: var(--teks-redup); }

.kepala-akun { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.alat-akun { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.alat-akun .kotak-cari input { width: 250px; padding-top: 7px; padding-bottom: 7px; }
.alat-akun .tombol-utama { padding: 7px 14px; }
.tabel-akun-bungkus { overflow-x: auto; }
.tabel-akun th { padding: 9px 16px; white-space: nowrap; }
.tabel-akun td { padding: 11px 16px; }
.tabel-akun .sel-status { justify-content: center; }
.tabel-akun tbody tr:first-child td { border-top: 0; }
.kaki-akun {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--garis-redup); font-size: 11px; color: var(--teks-redup);
}
.kaki-akun b { color: var(--teks); }

.sel-akun { display: flex; align-items: center; gap: 11px; }
.nama-akun { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.35; }
.baris-nama { display: flex; align-items: center; gap: 7px; }
.baris-nama .lencana { font-size: 9.5px; padding: 0 6px; letter-spacing: 0.3px; text-transform: uppercase; }
.avatar-besar { width: 36px; height: 36px; font-size: 14px; }
/* Warna avatar berganti-ganti supaya akun mudah dibedakan sekilas */
.avatar.warna-0 { color: var(--biru); background: rgba(106, 168, 255, 0.13); border-color: rgba(106, 168, 255, 0.4); }
.avatar.warna-1 { color: var(--ungu); background: rgba(181, 140, 255, 0.13); border-color: rgba(181, 140, 255, 0.4); }
.avatar.warna-2 { color: var(--toska); background: rgba(63, 208, 201, 0.13); border-color: rgba(63, 208, 201, 0.4); }
.avatar.warna-3 { color: var(--oranye); background: rgba(255, 169, 77, 0.13); border-color: rgba(255, 169, 77, 0.4); }
.avatar.warna-4 { color: var(--hijau); background: rgba(76, 207, 125, 0.13); border-color: rgba(76, 207, 125, 0.4); }
.avatar.warna-5 { color: #f472b6; background: rgba(244, 114, 182, 0.13); border-color: rgba(244, 114, 182, 0.4); }
.lencana.peran { color: var(--aksen-terang); background: rgba(var(--aksen-rgb), 0.08); }
.lencana.peran-master { color: #fbbf24; background: rgba(251, 191, 36, 0.1); }  /* keemasan, senada bingkai logo */
/* Pilihan role di form Tambah Akun */
.pilih-peran { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.label-form { grid-column: 1 / -1; display: block; font-size: 11.5px; font-weight: 600; color: var(--aksen-terang); }
.form-audit .kartu-peran {
  flex-direction: row; align-items: flex-start; gap: 9px; padding: 10px 12px; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--garis-redup); background: #0d0d0f; color: var(--teks); font-weight: 400;
  transition: border-color 0.15s, background 0.15s;
}
.kartu-peran input { margin-top: 2px; accent-color: var(--aksen); }
.kartu-peran:has(input:checked) { border-color: var(--aksen); background: rgba(var(--aksen-rgb), 0.08); }
.kartu-peran.master:has(input:checked) { border-color: #fbbf24; background: rgba(251, 191, 36, 0.07); }
.isi-peran { display: flex; flex-direction: column; gap: 3px; }
.isi-peran b { font-size: 12.5px; color: var(--aksen-terang); }
.kartu-peran.master .isi-peran b { color: #fbbf24; }
.isi-peran .catatan { line-height: 1.4; }
.sel-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pil-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.pil-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pil-status.aktif { color: var(--hijau); background: rgba(76, 207, 125, 0.1); }
.pil-status.aktif::before { box-shadow: 0 0 6px var(--hijau); }
.pil-status.nonaktif { color: var(--teks-redup); background: rgba(255, 255, 255, 0.06); }
.tombol-titik {
  width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; line-height: 1;
  color: var(--teks-redup); border-radius: 8px;
}
.tombol-titik .ikon { margin: 0; font-size: 15px; }
.tombol-titik:hover, .tombol-titik[aria-expanded="true"] { color: var(--aksen-terang); border-color: var(--aksen); background: rgba(var(--aksen-rgb), 0.1); }
.ikon-terkunci { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--teks-redup); opacity: 0.6; }

/* Menu aksi (muncul dari tombol titik tiga) */
.menu-aksi {
  position: fixed; z-index: 50; min-width: 210px; padding: 6px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--garis); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 22px rgba(var(--aksen-rgb), 0.12);
  animation: menu-muncul 0.12s ease-out;
}
.menu-aksi[hidden] { display: none; }
@keyframes menu-muncul { from { opacity: 0; transform: translateY(-4px); } }
.menu-aksi-judul {
  padding: 5px 10px 7px; margin-bottom: 4px; border-bottom: 1px solid var(--garis-redup);
  font-size: 10.5px; color: var(--teks-redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.menu-aksi [role="menuitem"] {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--teks); font: inherit; font-weight: 600; text-align: left; cursor: pointer; white-space: nowrap;
}
.menu-aksi [role="menuitem"] .ikon { color: var(--teks-redup); font-size: 13px; }
.menu-aksi [role="menuitem"]:hover, .menu-aksi [role="menuitem"]:focus-visible {
  outline: none; color: var(--aksen-terang); background: rgba(var(--aksen-rgb), 0.1);
}
.menu-aksi [role="menuitem"]:hover .ikon, .menu-aksi [role="menuitem"]:focus-visible .ikon { color: var(--aksen-terang); }
.menu-aksi [role="menuitem"].bahaya, .menu-aksi [role="menuitem"].bahaya .ikon { color: var(--merah); }
.menu-aksi [role="menuitem"].bahaya:hover, .menu-aksi [role="menuitem"].bahaya:focus-visible { background: rgba(255, 107, 107, 0.1); }
.menu-aksi hr { border: 0; border-top: 1px solid var(--garis-redup); margin: 5px 2px; }
.menu-aksi [role="menuitem"].sorot, .menu-aksi [role="menuitem"].sorot .ikon { color: var(--hijau); font-weight: 700; }
/* Pemberitahuan akun / jaringan terkunci di Akun Panel */
.kartu-terkunci {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px;
  border-color: rgba(255, 107, 107, 0.5); background: linear-gradient(90deg, rgba(255, 107, 107, 0.09), var(--kartu) 60%);
}
.isi-terkunci { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 280px; }
.isi-terkunci > b { font-size: 13px; }
.isi-terkunci .catatan b { color: var(--teks); }
.akun-nonaktif td { opacity: 0.55; }
.akun-nonaktif td:last-child { opacity: 1; }

/* Password sementara setelah reset */
.kartu-sandi-baru {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px;
  border-color: rgba(76, 207, 125, 0.5); background: linear-gradient(90deg, rgba(76, 207, 125, 0.09), var(--panel) 60%);
}
.isi-sandi-baru { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 280px; }
.isi-sandi-baru > b { font-size: 13px; }
.isi-sandi-baru .catatan b { color: var(--teks); }
.kredensial { display: flex; flex-direction: column; gap: 8px; }
.salin-sandi { display: flex; align-items: center; gap: 8px; }
.label-kredensial { width: 64px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--teks-redup); text-align: right; }
.salin-sandi code { min-width: 230px; text-align: center; }
.salin-sandi .kode-username { color: var(--teks); border-color: var(--garis); letter-spacing: 0.5px; }
.salin-sandi code {
  padding: 8px 14px; border: 1px dashed rgba(76, 207, 125, 0.6); border-radius: 8px; background: #0d0d0f;
  font: 800 18px/1.2 Consolas, "Cascadia Mono", monospace; letter-spacing: 2px; color: var(--hijau); user-select: all;
}
.salin-sandi .tombol { padding: 8px 12px; }

/* Dialog akun (tambah / ganti password / konfirmasi) */
.modal-akun { width: min(480px, calc(100vw - 32px)); padding: 0; }
.isi-dialog { padding: 20px 22px; }
.kepala-dialog { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.kepala-dialog h3 { margin: 0; font-size: 16px; }
.kepala-dialog h3 .ikon { color: var(--aksen-terang); margin-right: 4px; }
.kepala-dialog p { margin: 3px 0 0; font-size: 11.5px; color: var(--teks-redup); }
.kaki-dialog { display: flex; justify-content: flex-end; gap: 8px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--garis-redup); }
.kaki-dialog .tombol { padding: 8px 16px; }
.modal .tombol:focus { outline: none; }
.modal .tombol:focus-visible { box-shadow: 0 0 0 2px rgba(var(--aksen-rgb), 0.55); }
.form-audit label .catatan { font-weight: 400; }
.modal-konfirmasi { width: min(420px, calc(100vw - 32px)); text-align: center; }
.modal-konfirmasi h3 { margin: 12px 0 6px; font-size: 16px; }
.modal-konfirmasi p { margin: 0 0 18px; color: var(--teks-redup); line-height: 1.55; }
.modal-konfirmasi .kaki-dialog { justify-content: center; }
.ikon-konfirmasi {
  width: 52px; height: 52px; margin: 4px auto 0; display: grid; place-items: center; border-radius: 50%;
  color: var(--aksen-terang); background: rgba(var(--aksen-rgb), 0.12); border: 1px solid var(--garis);
}
.ikon-konfirmasi .ikon { font-size: 20px; }
.ikon-konfirmasi.bahaya { color: var(--merah); background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.45); }
.tombol-bahaya { background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff; border-color: transparent; }
.tombol-bahaya:hover { border-color: var(--merah); }

/* Ganti password sendiri */
.kartu-sandi-saya { max-width: 440px; margin: 0 auto; padding: 20px 22px; }
.pemberitahuan-wajib {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 9px;
  color: var(--oranye); border: 1px solid rgba(255, 169, 77, 0.45); background: rgba(255, 169, 77, 0.07); font-weight: 600;
}
.aksi-pengguna { margin-left: auto; display: flex; gap: 4px; }
.aksi-pengguna form { margin: 0; }

/* --- Pengaturan (bisa diubah dari panel) --- */
.kotak-statistik b small { font-size: 12px; font-weight: 600; color: var(--teks-redup); }
.tab-setelan a { display: inline-flex; align-items: center; gap: 7px; }
.tab-setelan .tab-angka { color: var(--oranye); margin-left: 0; }
.panel-tab { margin-bottom: 12px; }
.form-setelan { padding: 16px; }
.grid-setelan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.isian-setelan {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--garis-redup); background: var(--panel-2); transition: border-color 0.15s;
}
.isian-setelan:focus-within { border-color: var(--garis); }
.isian-setelan.diubah { border-left: 3px solid var(--oranye); }
.isian-setelan.lebar { grid-column: 1 / -1; }
.isian-setelan label { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-weight: 700; color: var(--aksen-terang); }
.isian-setelan label .lencana { font-size: 9.5px; padding: 0 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.isian-setelan .catatan { margin: 0; line-height: 1.45; }
.isian-setelan .bawaan { font-size: 10.5px; opacity: 0.85; }
.isian-setelan .teks-peringatan { color: var(--oranye); }
.isian-setelan textarea {
  width: 100%; resize: vertical; min-height: 64px; padding: 9px 11px; border-radius: 9px;
  background: #0d0d0f; color: var(--teks); border: 1px solid var(--garis); font: 12px/1.6 Consolas, "Cascadia Mono", monospace;
}
.isian-setelan textarea:focus { outline: none; border-color: var(--aksen); box-shadow: 0 0 0 3px rgba(var(--aksen-rgb), 0.12); }
.isian-setelan textarea.isian-daftar { font: 600 12.5px/1.7 "Segoe UI", system-ui, sans-serif; }
.satuan-isian {
  display: grid; place-items: center; padding: 0 12px; flex-shrink: 0; font-size: 11px; font-weight: 700;
  color: var(--teks-redup); border-left: 1px solid var(--garis); background: rgba(var(--aksen-rgb), 0.05);
}
.kaki-setelan {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--garis-redup);
}
.kaki-setelan .tombol { padding: 8px 16px; }
.dua-tugas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.kotak-tugas {
  display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; border-radius: 10px;
  border: 1px solid var(--garis-redup); background: var(--panel-2);
}
.kotak-tugas h3 { margin: 0; font-size: 13.5px; }
.kotak-tugas h3 .ikon { color: var(--aksen-terang); margin-right: 4px; }
.kotak-tugas .catatan { margin: 0; line-height: 1.5; }
.kotak-tugas label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--teks-redup); }
.kotak-tugas .tombol { align-self: flex-start; padding: 8px 16px; }
#daftar-tugas { padding: 0 16px 16px; }
.tabel-polos { border: 0; border-radius: 0; border-bottom: 1px solid var(--garis-redup); }
.info-database { padding: 14px 16px 16px; }
.info-database h3 { margin: 0 0 10px; font-size: 13.5px; }
.info-database h3 .ikon { color: var(--aksen-terang); margin-right: 4px; }
.deret-database { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.deret-database > div { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--garis-redup); background: var(--panel-2); }
.deret-database b { display: block; font-size: 15px; font-weight: 800; color: var(--teks); }

/* --- Tinjau massal (Daftar Kendala) --- */
.alat-massal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px;
  padding: 8px 10px; border: 1px solid var(--garis-redup); border-radius: 9px; background: var(--panel-2); }
.form-massal, .form-massal-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.info-massal { margin-right: 4px; font-size: 11.5px; color: var(--teks-redup); }
.info-massal b { color: var(--aksen-terang); }
.tombol:disabled { opacity: 0.4; cursor: default; }
.kolom-pilih { width: 34px; padding-left: 12px !important; padding-right: 4px !important; }
.kolom-pilih input { width: 15px; height: 15px; accent-color: var(--aksen); cursor: pointer; }

.aksi-baris { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.aksi-baris form { margin: 0; }

/* --- Backup & riwayat aktivitas (Pengaturan) --- */
.daftar-cadangan { padding: 0 16px 16px; }
.daftar-cadangan h3 { margin: 0; font-size: 13.5px; }
.daftar-cadangan h3 .ikon { color: var(--aksen-terang); margin-right: 4px; }
.lencana.aksi-login, .lencana.aksi-logout, .lencana.aksi-sandi { color: var(--teks-redup); }
.lencana.aksi-temuan, .lencana.aksi-kendala { color: var(--aksen-terang); background: rgba(var(--aksen-rgb), 0.08); }
.lencana.aksi-akun, .lencana.aksi-setelan, .lencana.aksi-tugas { color: var(--oranye); background: rgba(255, 169, 77, 0.08); }
.lencana.aksi-cadangan { color: var(--toska); background: rgba(63, 208, 201, 0.08); }
/* Kolom Keterangan: kalimat aksi + butir rincian "Label nilai" */
.ket-aktivitas { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; }
.ket-kalimat { color: var(--teks); margin-right: 2px; }
.ket-butir {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; line-height: 18px; border-radius: 6px;
  border: 1px solid var(--garis-redup); background: rgba(255, 255, 255, 0.03); font-size: 11px;
}
.ket-butir i { font-style: normal; color: var(--teks-redup); white-space: nowrap; }
.ket-butir b { font-weight: 600; color: var(--teks); }
.ket-butir b.mono { font-size: 11px; color: #cfcac3; }
.ket-butir s { color: var(--teks-redup); }
.ket-butir .ikon-kecil { color: var(--teks-redup); font-size: 9px; }
.ket-butir b.peran-master { color: #fbbf24; letter-spacing: 0.4px; }
.ket-butir b.peran-admin { color: var(--aksen-terang); letter-spacing: 0.4px; }
.ket-butir:has(b.peran-master) { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.06); }
.ket-butir:has(b.peran-admin) { border-color: rgba(var(--aksen-rgb), 0.35); background: rgba(var(--aksen-rgb), 0.06); }

/* --- Akses ditolak --- */
.kartu-dilarang { display: flex; gap: 16px; align-items: flex-start; max-width: 620px; padding: 20px; }
.kartu-dilarang p { margin: 6px 0 12px; }

/* --- Login --- */
/* Gaya halaman login ada di static/login.css */
.lencana.gagal { color: var(--merah); background: rgba(255, 107, 107, 0.08); }

@media (max-width: 1500px) {
  .ringkasan-jenis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .statistik-dasbor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .statistik-dasbor.statistik-akun { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .tata-dasbor { grid-template-columns: 1fr; }
  .statistik-dasbor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ringkasan-jenis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1366px) {
  /* Layar laptop: kolom profil & operator sedikit dirampingkan supaya form tetap lega */
  .tata-audit3 { grid-template-columns: minmax(200px, 230px) minmax(330px, 1fr) minmax(300px, 380px); }
  .kartu-form .dua-isian { grid-template-columns: 1fr; }
  .judul-form h2 { font-size: 17px; }
  .profil-nama { font-size: 21px; }
}
@media (max-width: 1200px) {
  /* Audit Chat: kartu profil jadi pita mendatar di atas, form & operator berdampingan */
  .kartu-form .dua-isian { grid-template-columns: 1fr 1fr; }
  .tata-audit3 { grid-template-columns: minmax(330px, 1fr) minmax(300px, 400px); }
  .kartu-profil {
    grid-column: 1 / -1; display: grid; gap: 4px 20px; align-items: center;
    grid-template-columns: 96px minmax(120px, 200px) minmax(0, 1fr);
    grid-template-areas: "gambar peran data" "gambar nama data";
  }
  .kartu-profil .profil-gambar { grid-area: gambar; }
  .kartu-profil .profil-peran { grid-area: peran; align-self: end; margin: 0; }
  .kartu-profil .profil-nama { grid-area: nama; align-self: start; }
  .kartu-profil .profil-data { grid-area: data; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; margin: 0; }
  .kartu-profil .profil-kutipan { display: none; }
}
@media (max-width: 1100px) {
  .dua-kolom, .dua-sama, .tata-audit, .tata-audit3, .grid-setelan, .dua-tugas { grid-template-columns: 1fr; }
  .deret-database { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartu-profil { grid-template-columns: 80px 1fr; grid-template-areas: "gambar peran" "gambar nama" "data data"; }
  .info-chat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tata-letak { flex-direction: column; }
  .sidebar { width: auto; height: auto; position: static; gap: 12px; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .menu a { flex: 1 1 140px; }
  .status-worker { margin-top: 0; }
  .utama { padding: 14px 16px; }
  .angka-kartu.dengan-grafik { padding-right: 14px; padding-bottom: 54px; }
  .grafik-jam { left: 14px; width: auto; }
  .baris-pesan { grid-template-columns: 1fr; gap: 2px; }
  .lini-baris { grid-template-columns: 100px 1fr; }
}