/* ------------------------------------------------------------------ token */

:root {
  /* Panel ini SELALU gelap, tidak mengikuti tema sistem/browser. */
  color-scheme: dark;
  --bg: #0d1014;
  --permukaan: #16191f;
  --permukaan-2: #1d2128;
  --sisi: #161b23;
  --sisi-teks: #ccd5e0;
  --sisi-redup: #7d8794;
  --garis: #252a33;
  --garis-tegas: #363d49;
  --teks: #e8ecf1;
  --redup: #9aa3b1;
  --samar: #6c7682;

  --aksen: #5b92ff;
  --aksen-lembut: #16233c;
  --aksen-teks: #07101f;

  --bahaya: #ff9d93;
  --bahaya-lembut: #2a1614;
  /* Penanda "belum dibalas" di daftar chat. Lebih pekat daripada --bahaya:
     ini bukan galat, melainkan antrean yang harus terlihat dari jauh. */
  --belum: #ff5a4e;
  --sukses: #5fe0a0;
  --sukses-lembut: #0d2a1d;
  --hangat: #ffc46b;
  --hangat-lembut: #2a2011;

  --bayang-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --bayang-2: 0 12px 38px rgba(0, 0, 0, 0.62);
  --bayang-3: 0 -1px 14px rgba(0, 0, 0, 0.5);
  --bayang-kartu: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -10px rgba(0, 0, 0, 0.55);
  --bayang-kartu-hover: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 36px -12px rgba(0, 0, 0, 0.65);

  --r-kecil: 8px;
  --r: 12px;
  --r-besar: 16px;

  --w-sisi: 68px;
  --w-isi: 1180px;
  --h-atas: 50px;
  --h-bar: 64px;
}


* { box-sizing: border-box; }

/* Atribut `hidden` WAJIB menyembunyikan. Tanpa !important, aturan
   `.login-tirai{display:grid}` / `.ubah{display:flex}` di bawah menimpanya
   (specificity sama, author menang atas UA), sehingga elemen tetap tampil
   walau JS sudah menyetel .hidden = true. Inilah yang membuat layar login
   tidak mau hilang dan menutupi panel. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--teks);
  font: 15px/1.6 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------- latar beranimasi */

/* Gumpalan warna lembut yang bergerak pelan (efek "aurora"). Diletakkan
   paling belakang; kartu tetap menonjol di atasnya. */
.latar {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.latar span {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.2;
  will-change: transform;
}

/* Palet dingin yang cohesive (biru–indigo–sky) biar terasa tenang & profesional. */
.latar .b1 { width: 540px; height: 540px; top: -160px; right: -90px; background: #3f74e0; animation: apung-a 34s ease-in-out infinite; }
.latar .b2 { width: 470px; height: 470px; bottom: -180px; left: 10%; background: #6366f1; animation: apung-b 42s ease-in-out infinite; }
.latar .b3 { width: 420px; height: 420px; top: 36%; right: 14%; background: #38bdf8; animation: apung-c 48s ease-in-out infinite; }

@keyframes apung-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, 90px) scale(1.18); } }
@keyframes apung-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, -55px) scale(1.12); } }
@keyframes apung-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -70px) scale(1.22); } }

/* Konten di atas latar. */
.app { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .latar span { animation: none; }
}

svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--permukaan-2);
  color: var(--redup);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.76em;
  font-weight: 500;
}

a { color: var(--aksen); text-underline-offset: 2px; }

/* ------------------------------------------------------------------ rangka */

/* Tata letak dua kolom: sidebar tetap di kiri, isi memenuhi sisanya. Sidebar
   dipilih karena menunya 5 dan berlencana — daftar vertikal lebih terbaca
   daripada deretan tab, dan bagian atas jadi bebas untuk status halaman. */
.app { display: grid; grid-template-columns: var(--w-sisi) 1fr; min-height: 100vh; }

/* Keadaan awal sebelum status login diketahui. Dipasang di HTML supaya berlaku
   SEBELUM app.js sempat jalan — kalau diatur dari JS, kedipannya tetap lolos.
   Latar beranimasi ada di luar .app, jadi layar tidak jadi putih kosong. */
.app.menunggu { visibility: hidden; }

/* ---------------------------------------------------------------- sidebar */

.sisi-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 18px 12px 14px;
  /* Tanpa warna sendiri: sidebar menyatu dengan latar halaman, jadi tidak ada
     blok gelap terpisah di tepi layar. Batasnya cukup garis tipis. */
  background: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--sisi-teks);
}

.sisi-merek {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 2px 8px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bagian bawah sidebar: status bot & tombol keluar, didorong ke dasar. */
.sisi-kaki {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.sisi-kaki .jalur { margin: 0; }

/* Judul kecil di atas tombol kendali — tanpa ini tiga tombol itu muncul
   begitu saja di dasar sidebar tanpa keterangan apa pun. */
.sisi-judul {
  display: block;
  padding: 0 2px 2px;
  text-align: center;
  /* Oranye merek — sama dengan lambang LiveChat dan aksen layar login, supaya
     menonjol dari teks menu yang sengaja redup. */
  color: #ff8a4c;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Keluar dibuat seperti item menu biasa supaya menyambung dengan daftar di
   atasnya — hanya warnanya dibedakan saat disentuh. */
/* Menyambung langsung di bawah daftar menu, tanpa garis pemisah — jarak dan
   warna merah saat disentuh sudah cukup membedakannya dari menu halaman. */
.sisi-keluar {
  display: flex;
  gap: 11px;
  align-items: center;
  width: 100%;
  margin-top: 2px;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--sisi-redup);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.sisi-keluar svg { opacity: 0.75; transition: opacity 0.16s; }
.sisi-keluar:hover {
  background: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
}
.sisi-keluar:hover svg { opacity: 1; }
.sisi-keluar:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }
.sisi-keluar svg { width: 17px; height: 17px; }

/* Tiga tombol kendali dalam sidebar selebar 236px: dibiarkan membagi baris
   rata dan melipat sendiri kalau tidak muat, jadi tetap rapi. */
.layanan-bot .kendali { flex-wrap: wrap; }
.layanan-bot .kendali .tombol {
  flex: 1 1 auto;
  justify-content: center;
  font-weight: 620;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}

/* Warna per tindakan: hijau = menyalakan, kuning = memulai ulang, merah =
   menghentikan. Nilainya ditulis terang langsung (bukan token --sukses dll)
   karena sidebar selalu gelap, sementara token itu ikut berubah di mode terang.
   Tombol yang sedang tidak bisa dipakai tetap diredupkan oleh :disabled. */
.layanan-bot #botJalankan {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.14);
  color: #4ade8b;
}
/* Saat disentuh: warnanya DIPERTAJAM, bukan diganti putih. Teks putih di atas
   latar setengah tembus membuat warnanya jadi pudar dan tepinya terlihat kasar.
   Cincin tipis di luar memberi kesan terangkat tanpa menggeser tata letak. */
.layanan-bot #botJalankan:hover:not(:disabled) {
  border-color: rgba(52, 211, 153, 0.8);
  background: rgba(52, 211, 153, 0.22);
  color: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.13);
}

.layanan-bot #botMulaiUlang {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
}
.layanan-bot #botMulaiUlang:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.8);
  background: rgba(251, 191, 36, 0.22);
  color: #fcd34d;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.13);
}

.layanan-bot #botHentikan {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
}
.layanan-bot #botHentikan:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.8);
  background: rgba(248, 113, 113, 0.22);
  color: #fca5a5;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.13);
}

/* Yang mati tetap netral, supaya warna hanya dibaca sebagai "bisa ditekan". */
.layanan-bot .kendali .tombol:disabled {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sisi-redup);
  opacity: 0.6;
}


.logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--aksen);
  color: #fff;
}

.logo svg { width: 19px; height: 19px; stroke-width: 2; }


.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav button {
  position: relative;
  display: flex;
  gap: 11px;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--sisi-redup);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

/* Label mengisi ruang supaya lencana angka selalu rapat di kanan. */
.nav button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav button svg { opacity: 0.75; transition: opacity 0.16s; }

.nav button:hover { background: rgba(255, 255, 255, 0.06); color: var(--sisi-teks); }
.nav button:hover svg { opacity: 1; }

/* Keadaan aktif: gradien tipis yang memudar ke kanan, bukan blok warna rata.
   Blok rata terlihat berat di sidebar sempit dan menenggelamkan ikonnya. */
.nav button.aktif {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--aksen) 30%, transparent) 0%,
    color-mix(in srgb, var(--aksen) 10%, transparent) 100%
  );
  color: #fff;
  font-weight: 620;
}
.nav button.aktif svg { opacity: 1; color: #fff; }

/* Penanda tegas di tepi kiri menu aktif — di sidebar, latar saja kurang jelas
   membedakan mana yang sedang dibuka. */
.nav button.aktif::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--aksen);
  box-shadow: 0 0 10px color-mix(in srgb, var(--aksen) 65%, transparent);
}

.nav button:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }

/* Lencana angka: lebar minimum supaya "1" dan "12" sama-sama bulat rapi,
   bukan satu lonjong satu bundar. */
.lencana {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--sisi-redup);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: background 0.16s, color 0.16s;
}

.nav button:hover .lencana { background: rgba(255, 255, 255, 0.14); color: var(--sisi-teks); }
.nav button.aktif .lencana {
  background: var(--aksen);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--aksen) 45%, transparent);
}

.status-bot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--sisi-redup);
}

.titik {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sisi-redup);
}

.status-bot.hidup .titik { background: #30d98b; box-shadow: 0 0 0 3px rgba(48, 217, 139, 0.18); }
.status-bot.hidup .status-teks { color: #30d98b; font-weight: 600; }
.status-bot.mati .titik { background: #6b7682; }

/* Di bilah status atas, penanda bot ikut berbentuk chip seperti tetangganya.
   Ditargetkan lewat ".atas" karena JS menulis ulang className elemen ini —
   kelas tambahan apa pun di HTML akan terhapus. */
.atas .status-bot {
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 550;
  color: var(--redup);
}
.atas .status-bot.hidup {
  border-color: color-mix(in srgb, var(--sukses) 32%, transparent);
  background: var(--sukses-lembut);
}
.atas .status-bot.hidup .titik { background: var(--sukses); box-shadow: none; }
.atas .status-bot.hidup .status-teks { color: var(--sukses); }
.atas .status-bot.mati {
  border-color: color-mix(in srgb, var(--bahaya) 32%, transparent);
  background: var(--bahaya-lembut);
}
.atas .status-bot.mati .titik { background: var(--bahaya); }
.atas .status-bot.mati .status-teks { color: var(--bahaya); font-weight: 600; }

.kendali { display: flex; gap: 5px; }

.tombol.mungil {
  padding: 5px 10px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--sisi-teks);
  font-size: 0.78rem;
}

.tombol.mungil:hover { border-color: var(--aksen); background: rgba(91, 146, 255, 0.16); color: #fff; }
.tombol.mungil:disabled { opacity: 0.35; }
.tombol.mungil:disabled:hover { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: var(--sisi-teks); }

/* ------------------------------------------------------------------- log */

.baris-log { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.baris-log .catatan { margin-right: auto; font-family: ui-monospace, Consolas, monospace; }
.sakelar.kecil { padding: 0; gap: 8px; align-items: center; }
.sakelar.kecil input[type="checkbox"] { width: 32px; height: 19px; margin: 0; }
.sakelar.kecil input[type="checkbox"]::after { width: 13px; height: 13px; }
.sakelar.kecil input[type="checkbox"]:checked::after { transform: translateX(13px); }

.kotak-log {
  max-height: 62vh;
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  /* Sengaja TIDAK memakai --sisi: sidebar kini lebih terang, sementara kotak
     log justru enak dibaca kalau latarnya gelap seperti terminal. */
  background: #0b0e13;
  color: #c7d2de;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kotak-log:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

/* Path file config: info teknis yang tidak perlu dilihat pemilik usaha. */
.jalur { display: none; }

.tombol.keluar {
  justify-content: center;
  gap: 7px;
}

/* ------------------------------------------------------------------ login */

/* Layar login sengaja selalu gelap — merek BOLACUAN (emas/perak di atas
   transparan) butuh latar gelap supaya kontrasnya benar, dan layar ini memang
   dipakai sebentar saja sebelum masuk ke panel. */
.login-tirai {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 18% -10%, #16233f 0%, transparent 62%),
    radial-gradient(900px 560px at 88% 112%, #2a1840 0%, transparent 60%),
    linear-gradient(168deg, #070a10 0%, #0b1018 52%, #080b12 100%);
  color: #e8ecf1;
}

/* Dua gumpalan cahaya yang bergerak pelan. */
.login-tirai::before,
.login-tirai::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.3;
  pointer-events: none;
}
.login-tirai::before { width: 470px; height: 470px; top: -120px; right: 6%; background: #ff5a1f; animation: apung-a 26s ease-in-out infinite; }
.login-tirai::after { width: 430px; height: 430px; bottom: -150px; left: 4%; background: #4f8bff; animation: apung-b 33s ease-in-out infinite; }

/* ---- kisi yang bergeser pelan, memudar ke tepi ---- */
.login-kisi {
  position: absolute;
  inset: -48px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
  animation: geser-kisi 14s linear infinite;
  pointer-events: none;
}
@keyframes geser-kisi { to { transform: translate(48px, 48px); } }

/* ---- sapuan cahaya yang turun berkala ---- */
.login-sapuan {
  position: absolute;
  left: 0;
  right: 0;
  top: -200px;
  height: 200px;
  background: linear-gradient(180deg, transparent, rgba(255, 90, 46, 0.08), transparent);
  animation: sapu 10s linear infinite;
  pointer-events: none;
}
@keyframes sapu { to { transform: translateY(calc(100vh + 200px)); } }

/* ---- vinyet: tepi digelapkan supaya kartu jadi pusat perhatian ---- */
.login-vinyet {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

/* ---- gelembung chat yang mengambang naik ---- */
.login-gelembung { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.login-gelembung span {
  position: absolute;
  bottom: -80px;
  width: 42px;
  height: 42px;
  background: url("img/lambang.png") center/contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 6px 18px rgba(255, 90, 31, 0.45));
  animation: naik-gelembung 19s linear infinite;
}
.login-gelembung span:nth-child(1) { left: 8%;  width: 30px; height: 30px; animation-duration: 21s; animation-delay: 0s; }
.login-gelembung span:nth-child(2) { left: 24%; width: 46px; height: 46px; animation-duration: 26s; animation-delay: 4s; }
.login-gelembung span:nth-child(3) { left: 46%; width: 24px; height: 24px; animation-duration: 17s; animation-delay: 9s; }
.login-gelembung span:nth-child(4) { left: 66%; width: 38px; height: 38px; animation-duration: 23s; animation-delay: 2s; }
.login-gelembung span:nth-child(5) { left: 82%; width: 28px; height: 28px; animation-duration: 29s; animation-delay: 12s; }
.login-gelembung span:nth-child(6) { left: 93%; width: 20px; height: 20px; animation-duration: 20s; animation-delay: 6s; }

@keyframes naik-gelembung {
  0%   { transform: translateY(0) rotate(0deg) scale(0.85); opacity: 0; }
  12%  { opacity: 0.5; }
  80%  { opacity: 0.32; }
  100% { transform: translateY(-112vh) rotate(26deg) scale(1.05); opacity: 0; }
}

.login-kotak {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 394px;
  padding: 34px 30px 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(27, 32, 43, 0.9) 0%, rgba(17, 21, 29, 0.94) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: masuk-kartu 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Nama sengaja dibedakan dari "masuk" milik .panel — nama @keyframes bersifat
   global, dan yang terdefinisi belakangan menimpa yang lebih dulu. */
@keyframes masuk-kartu {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Garis cahaya tipis di tepi atas kartu. */
.login-kotak::before {
  content: "";
  position: absolute;
  top: -1px; left: 16%; right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 76, 0.85), transparent);
}

/* ---- merek ---- */
.login-merek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  text-align: center;
}

.login-lambang {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  animation: lambang-apung 4.5s ease-in-out infinite;
}
.login-lambang img { width: 46px; height: 46px; object-fit: contain; }

/* Dua cincin yang berdenyut keluar dari lambang. */
.login-lambang::before,
.login-lambang::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 90, 31, 0.55);
  animation: denyut-cincin 2.8s ease-out infinite;
}
.login-lambang::after { animation-delay: 1.4s; }

@keyframes denyut-cincin {
  0%   { transform: scale(0.72); opacity: 0.75; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes lambang-apung {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.login-wordmark {
  width: 190px;
  max-width: 76%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
}

.login-subjudul {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8e99a8;
}

.login-pisah {
  height: 1px;
  margin: 0 0 20px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
}


/* ---- kolom isian ----
   Label di ATAS kolom (huruf kapital kecil & tebal), ikon dan tombol mata
   diposisikan absolut di dalam kolom. Kolomnya sendiri BUKAN flex: teks input
   mengisi penuh dan diberi padding kiri/kanan agar tidak menabrak ikon. */
.login-bidang { margin-bottom: 16px; }

.login-lbl {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #c3c7d0;
}

.login-input { position: relative; border-radius: 12px; }

/* Halo fokus dipasang di PEMBUNGKUS, bukan di input. Sebabnya: animasi CSS
   menimpa deklarasi biasa, jadi kalau `fokus` (yang menganimasikan box-shadow)
   dipasang di input, ia menghapus `-webkit-box-shadow` inset yang menutupi
   latar putih autofill Chrome — kolom yang terisi otomatis lalu menyala terang
   begitu diklik. Di pembungkus, keduanya tidak saling rebut. */
.login-input:focus-within { animation: fokus 2.2s ease-in-out infinite; }

.login-ikon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #8a8f9c;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 0.2s, transform 0.2s;
}
.login-input:focus-within .login-ikon {
  stroke: #ff5a2e;
  transform: translateY(-50%) scale(1.12);
}

/* Awalan .login-tirai WAJIB ada. Tanpa itu, `.login-input input` (0-1-1) punya
   spesifisitas SAMA dengan aturan global `input[type="text"]` (0-1-1) yang
   berada jauh lebih bawah di berkas ini — dan yang belakangan menang. Akibatnya
   padding global 9px 12px dipakai, padding kiri 44px untuk ruang ikon hilang,
   lalu ikonnya menimpa teks placeholder. */
.login-tirai .login-input input {
  width: 100%;
  padding: 14px 46px 14px 44px;
  border: 1px solid #33363f;
  border-radius: 12px;
  background: rgba(11, 12, 16, 0.85);
  color: #fff;
  font: inherit;
  font-size: 14px;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.login-tirai .login-input input::placeholder { color: #6b7180; }
.login-tirai .login-input input:hover { border-color: #4a4d57; }
.login-tirai .login-input input:focus {
  outline: none;
  border-color: #ff5a2e;
  background: rgba(11, 12, 16, 0.95);
}

/* Halo di sekeliling kolom aktif berdenyut pelan — penanda fokus yang hidup
   tanpa harus berkedip mengganggu. */
@keyframes fokus {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 90, 46, 0.16); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 90, 46, 0.28), 0 0 18px rgba(255, 90, 46, 0.18); }
}

/* Autofill Chrome memaksa latar putih — ditimpa supaya tetap gelap. */
/* Chrome memaksa latar kuning/putih pada kolom yang terisi otomatis. Satu-satunya
   cara menutupinya adalah box-shadow inset setebal kolom. `transition` sangat
   panjang menahan Chrome yang kadang menganimasikan latarnya kembali. */
.login-tirai .login-input input:-webkit-autofill,
.login-tirai .login-input input:-webkit-autofill:hover,
.login-tirai .login-input input:-webkit-autofill:focus,
.login-tirai .login-input input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #0b0c10 inset;
  box-shadow: 0 0 0 40px #0b0c10 inset;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}

.login-intip {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8a8f9c;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.login-intip:hover,
.login-intip.aktif { color: #eef0f4; background: rgba(255, 255, 255, 0.06); }
.login-intip:focus-visible { outline: 2px solid rgba(255, 90, 46, 0.8); outline-offset: 1px; }
.login-intip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Ikon mata berganti bentuk (dicoret) saat password sedang terlihat. */
.login-intip .mata-tutup { display: none; }
.login-intip.aktif .mata-buka { display: none; }
.login-intip.aktif .mata-tutup { display: block; }

/* Peringatan Caps Lock — penyebab paling sering "password salah" padahal
   ketikannya benar. */
.login-capslock {
  display: none;
  margin: 7px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffd452;
}
.login-capslock.aktif { display: block; animation: muncul 0.25s ease; }

/* ---- kemunculan bertahap ---- */
@keyframes muncul {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.muncul { animation: muncul 0.5s ease both; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.16s; }
.d3 { animation-delay: 0.24s; }

/* ---- merek di sidebar ----
   Tanpa subjudul, lambang dan wordmark berdiri sejajar — tingginya disamakan
   secara optis (wordmark lebih pendek dari kotak lambang) supaya tidak terlihat
   melayang. */
/* Lambang LiveChat di sidebar: kotaknya dibuat mengikuti gambar (bukan 34px
   tetap seperti .logo biasa), supaya tidak ada ruang kosong di kiri-kanan
   gambar yang bikin jaraknya ke nama merek terlihat jauh. */
.logo-gambar { background: transparent; box-shadow: none; width: auto; height: auto; }
.logo-gambar img { width: 30px; height: 30px; object-fit: contain; display: block; }

/* Nama merek disetel lewat TINGGI, bukan lebar: tiap merek punya perbandingan
   sisi yang beda (TOTO12 4:1, CASTOTO 3.3:1), jadi kalau lebarnya yang
   dipatok, tingginya jadi tidak seragam antar panel. */
.merek-wordmark {
  height: 30px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  object-position: left center;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Hormati pengguna yang mematikan animasi di sistemnya. */
@media (prefers-reduced-motion: reduce) {
  .login-gelembung span,
  .login-lambang,
  .login-lambang::before,
  .login-lambang::after,
  .login-tirai::before,
  .login-tirai::after,
  .login-kisi,
  .login-sapuan,
  .login-kotak,
  .login-tombol::before,
  .muncul { animation: none; }
  .login-gelembung span { opacity: 0.22; }
  .login-sapuan { display: none; }
  .login-input:focus-within { animation: none; box-shadow: 0 0 0 3px rgba(255, 90, 46, 0.22); }
}

.login-galat {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: var(--r-kecil);
  border: 1px solid color-mix(in srgb, var(--bahaya) 30%, transparent);
  background: var(--bahaya-lembut);
  color: var(--bahaya);
  font-size: 0.82rem;
}

/* `.tombol.login-tombol` (0-3-0 bersama awalannya) sengaja dipakai supaya
   menang atas `.tombol.utama` (0-2-0) yang terdefinisi lebih bawah — kalau
   tidak, tombolnya kembali biru memakai warna aksen bawaan panel. */
.login-tirai .tombol.login-tombol {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff5a2e, #d1350c);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(209, 53, 12, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
}

/* Kilau yang menyapu tombol sesekali — mengundang klik tanpa berisik. */
.login-tombol::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  animation: kilau-tombol 3.6s ease-in-out infinite;
}
@keyframes kilau-tombol {
  0%, 55% { left: -60%; }
  100%    { left: 135%; }
}

.login-tirai .tombol.login-tombol:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ff5a2e, #d1350c);
  box-shadow: 0 16px 34px rgba(209, 53, 12, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.login-tirai .tombol.login-tombol:active:not(:disabled) { transform: translateY(1px); }
.login-tirai .tombol.login-tombol:disabled { cursor: wait; filter: saturate(0.8); }

/* ------------------------------------------------------------------ utama */

/* Isi memakai seluruh lebar yang tersisa di sebelah sidebar — tanpa batas
   lebar, supaya layar lebar tidak menyisakan kolom kosong di kanan. */
.utama {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.atas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: var(--h-atas);
  padding: 16px 24px 0;
}

.kerat {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  color: var(--redup);
  font-size: 0.79rem;
  font-weight: 550;
  white-space: nowrap;
}

.kerat svg { width: 14px; height: 14px; }
.kerat.baik { border-color: color-mix(in srgb, var(--sukses) 32%, transparent); background: var(--sukses-lembut); color: var(--sukses); }
.kerat.awas { border-color: color-mix(in srgb, var(--hangat) 36%, transparent); background: var(--hangat-lembut); color: var(--hangat); }
.kerat.buruk { border-color: color-mix(in srgb, var(--bahaya) 32%, transparent); background: var(--bahaya-lembut); color: var(--bahaya); }

.ubah {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-left: auto;
  color: var(--hangat);
  font-size: 0.79rem;
  font-weight: 600;
}

.ubah .titik { background: var(--hangat); animation: denyut 1.8s ease-in-out infinite; }

@keyframes denyut {
  50% { opacity: 0.35; }
}

/* Lebar penuh — memakai seluruh sisa layar di sebelah sidebar. */
main {
  flex: 1;
  width: 100%;
  padding: 22px 28px calc(var(--h-bar) + 36px);
}

.panel { display: none; animation: masuk 0.18s ease; }
.panel.tampil { display: block; }


@keyframes masuk {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
  .ubah .titik { animation: none; }
}

.kop-bagian { margin-bottom: 24px; }
.kop-bagian h2 { margin: 0; font-size: 1.42rem; font-weight: 680; letter-spacing: -0.021em; }
/* Tanpa batas lebar: keterangan pendek seperti "Token dibuat di … →
   Authorization → Personal Access Tokens." jadi muat dalam satu baris,
   tidak terpotong turun ke bawah padahal ruang di sampingnya masih lega. */
.kop-bagian p { margin: 6px 0 0; color: var(--redup); font-size: 0.9rem; line-height: 1.55; }

.petunjuk {
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px solid var(--garis);
  border-left: 3px solid var(--aksen);
  border-radius: var(--r-kecil);
  background: var(--permukaan);
  color: var(--redup);
  font-size: 0.85rem;
}

.petunjuk strong { color: var(--teks); font-weight: 600; }

/* ----------------------------------------------------- kartu "cara kerja" */

.alur {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  background: var(--permukaan);
  box-shadow: var(--bayang-kartu);
}

.alur-kepala h3 { margin: 0; font-size: 0.97rem; font-weight: 650; letter-spacing: -0.005em; }
.alur-kepala p { margin: 3px 0 15px; color: var(--redup); font-size: 0.82rem; }

.langkah {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.langkah li { display: flex; gap: 10px; align-items: flex-start; }

.langkah .no {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--aksen-lembut);
  color: var(--aksen);
  font-size: 0.8rem;
  font-weight: 700;
}

.langkah li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.langkah strong { font-size: 0.855rem; font-weight: 620; }
.langkah span { color: var(--redup); font-size: 0.8rem; line-height: 1.45; }
.langkah b { color: var(--teks); font-weight: 600; }

/* Anak panah antar langkah di layar lebar. */
.langkah li { position: relative; }
.langkah li:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 2px;
  right: -11px;
  color: var(--samar);
  font-size: 0.9rem;
}

@media (max-width: 680px) {
  .langkah { grid-template-columns: 1fr; gap: 15px; }
  .langkah li:not(:last-child)::after { content: none; }
}

/* ------------------------------------------------------------------ kartu */

.kartu {
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  background: var(--permukaan);
  box-shadow: var(--bayang-kartu);
  transition: box-shadow 0.18s, border-color 0.18s;
}

/* Kartu yang terlipat (akun/aturan) = baris yang bisa dibuka: beri isyarat halus saat disentuh. */
.kartu.tutup:hover { border-color: var(--garis-tegas); box-shadow: var(--bayang-kartu-hover); }

/* Kartu terlipat dibuat serapat mungkin: daftar aturan jadi bisa dipindai
   sekali lihat, bukan digulir jauh ke bawah. */
.kartu.tutup { margin-bottom: 8px; padding: 10px 16px; cursor: pointer; }
.kartu.tutup .kepala { gap: 8px; }
/* Kolom nama dirampingkan saat terlipat — ia hanya dibaca, bukan diketik,
   jadi tinggi kotak isian penuh cuma menambah tinggi baris. */
.kartu.tutup .nama-besar { padding: 3px 8px; }
.kartu.tutup .ringkas { padding-left: 33px; }

/* ---- baris alat di atas daftar aturan ---- */
.alat-aturan {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.alat-aturan input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  padding: 9px 12px;
  border: 1.5px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--permukaan-2);
  color: var(--teks);
  font: inherit;
  font-size: 0.875rem;
}
.alat-aturan input[type="search"]:focus {
  outline: 0;
  border-color: var(--aksen);
  background: var(--permukaan);
  box-shadow: 0 0 0 3px var(--aksen-lembut);
}
.alat-hitung {
  flex: none;
  padding: 0 4px;
  color: var(--samar);
  font-size: 0.79rem;
  font-variant-numeric: tabular-nums;
}

.kartu.mati { opacity: 0.5; }

.kepala { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.kartu-isi { margin-top: 16px; }
.kartu.tutup .kartu-isi { display: none; }

.no {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--permukaan-2);
  color: var(--redup);
  font-size: 0.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.kepala .isi { flex: 1 1 170px; min-width: 0; }
.kepala .tombol { display: flex; gap: 3px; margin-left: auto; }

.nama-besar {
  border-color: transparent !important;
  background: none !important;
  font-size: 0.96rem !important;
  font-weight: 620 !important;
}

.nama-besar:hover { border-color: var(--garis) !important; }
.nama-besar:focus { background: var(--permukaan) !important; border-color: var(--aksen) !important; }

.ringkas {
  display: none;
  flex: 1 1 100%;
  padding-left: 34px;
  color: var(--samar);
  font-size: 0.79rem;
}

.kartu.tutup .ringkas { display: block; }

/* --------------------------------------------- halaman Aturan Balasan */

/* Dua kolom: menu topik di kiri, daftar aturan di kanan. Kolom kiri tetap
   terlihat saat daftar digulung, jadi berpindah topik tidak perlu naik dulu. */
.aturan-tata {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.aturan-menu {
  position: sticky;
  top: 8px;
  background: var(--permukaan-2);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  padding: 12px;
}

.menu-judul {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--samar);
  padding: 2px 6px 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 2px;
  border: 0;
  border-radius: var(--r-kecil);
  background: transparent;
  color: var(--teks);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}

.menu-item { position: relative; }
.menu-item:hover { background: var(--permukaan); }
.menu-item.aktif { background: var(--aksen); color: #fff; font-weight: 600; }

.menu-nama {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-hitung {
  flex: none;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--permukaan);
  color: var(--samar);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.menu-item.aktif .menu-hitung { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Ikon ubah/hapus muncul saat baris disentuh. Ditumpangkan di atas angka,
   bukan diberi kolom sendiri — kolom yang selalu dipesan memotong nama menu
   ("Keluhan / ma…") padahal ikonnya hampir selalu tidak terlihat. */
.menu-alat {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  gap: 2px;
  padding-left: 6px;
  border-radius: var(--r-kecil);
  background: inherit;
}
.menu-item:hover .menu-alat,
.menu-item:focus-within .menu-alat { display: flex; }
.menu-item:hover { background: var(--permukaan); }
.menu-ikon { width: 22px; height: 22px; }
.menu-item.aktif .menu-ikon { color: #fff; }

.menu-tambah {
  width: 100%;
  margin-top: 6px;
  border-style: dashed;
  font-size: 0.8rem;
}

.menu-catatan {
  margin: 10px 2px 0;
  color: var(--samar);
  font-size: 0.72rem;
  line-height: 1.5;
}

.kop-menu { margin-bottom: 10px; }
.kop-menu h3 { margin: 0 0 2px; font-size: 1.05rem; }

.pilih-menu {
  padding: 8px 10px;
  border: 1.5px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--permukaan-2);
  color: var(--teks);
  font: inherit;
  font-size: 0.85rem;
}
.pilih-menu:focus { outline: 0; border-color: var(--aksen); }

/* Ringkasan kartu terlipat: kata kunci sebagai cip, lalu balasannya. */
.sekilas { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }

/* Satu baris berlabel: "Kata kunci" di kiri, cip-cipnya di kanan. Labelnya
   lebarnya tetap supaya baris "Kecuali" di bawahnya lurus sejajar. */
.sekilas-baris {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sekilas-label {
  flex: none;
  width: 68px;
  padding-top: 4px;
  color: var(--samar);
  font-size: 0.72rem;
  line-height: 1;
}

/* align-items & align-content dikunci ke flex-start. Tanpa itu, bawaan
   `stretch` membuat tiap cip ikut setinggi baris — satu cip tinggi saja bisa
   menarik semuanya jadi kotak besar. */
.sekilas-cip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 5px;
  min-width: 0;
}

/* Ukuran cip dipatok eksplisit (tinggi, line-height, box-sizing) supaya tidak
   bisa ditarik melar oleh aturan lain atau oleh perataan flex induknya. */
.cip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 22px;
  max-width: 100%;
  padding: 0 9px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--permukaan-2);
  color: var(--redup);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cip-menu {
  background: var(--aksen-lembut);
  border-color: transparent;
  color: var(--aksen);
  font-weight: 600;
}

.cip.kosong { font-style: italic; opacity: 0.75; }

/* "+191 lagi" / "sembunyikan" — tombol sungguhan, bukan hiasan. */
.cip-lagi {
  border-style: dashed;
  color: var(--teks);
  cursor: pointer;
}
.cip-lagi:hover { border-color: var(--aksen); color: var(--aksen); }

/* Pengecualian dibedakan lewat warna garis & teks saja, bukan latar penuh:
   satu aturan bisa punya 150 pengecualian, dan deretan cip berlatar merah
   sepanjang itu membuat seluruh kartu terbaca seperti peringatan. */
.cip-kecuali {
  color: var(--bahaya);
  border-color: var(--bahaya-lembut);
  background: transparent;
}

/* Balasannya diberi latar sendiri: di daftar panjang, inilah yang dicari
   mata — "aturan ini menjawab apa" — jadi tidak boleh menyatu dengan sisanya. */
/* Kolom balasan, sejajar dengan baris cip di atasnya. */
.sekilas-balasan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.sekilas-balas {
  position: relative;
  align-self: stretch;
  padding: 9px 12px;
  border: 1px solid var(--garis);
  border-left: 3px solid var(--aksen);
  border-radius: 0 var(--r-kecil) var(--r-kecil) 0;
  background: var(--permukaan);
  color: var(--teks);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Varian acak: garis kirinya putus-putus — hanya SATU dari kotak-kotak ini
   yang benar-benar dikirim, tidak seperti balasan berurutan. */
.sekilas-balas.varian { border-left-style: dashed; }

/* Nomor urut ditempel absolut, bukan lewat flex: menjadikan panel ini flex
   container membuat anaknya di-blockify dan klamp dua barisnya ikut goyah. */
.sekilas-urut {
  position: absolute;
  left: -10px;
  top: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--aksen);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
}

/* Klamp dua baris dipasang DI SINI, bukan di panelnya: panel itu flex item dan
   display:-webkit-box padanya akan di-blockify browser jadi flow-root, yang
   mematikan -webkit-line-clamp dan membuat baris ketiga terpotong separuh. */
.sekilas-balas-teks {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Cadangan untuk peramban tanpa -webkit-line-clamp: tetap terpotong rapi
     di dua baris, bukan separuh baris ketiga. */
  max-height: calc(2 * 1.6em);
}

.sekilas-balas.kosong { border-left-color: var(--bahaya); color: var(--samar); font-style: italic; }
.sekilas-kaki { color: var(--samar); font-size: 0.72rem; }

.kosong-saring {
  padding: 18px;
  border: 1px dashed var(--garis-tegas);
  border-radius: var(--r);
  color: var(--samar);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 900px) {
  .aturan-tata { grid-template-columns: minmax(0, 1fr); }
  .aturan-menu { position: static; }
}

.pil {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pil.uji { background: var(--hangat-lembut); color: var(--hangat); }
.pil.live { background: var(--sukses-lembut); color: var(--sukses); }
.pil.mati { background: var(--permukaan-2); color: var(--samar); border: 1px solid var(--garis); }

/* ----------------------------------------------------------------- penguji */

.penguji { background: var(--permukaan-2); }
.penguji .judul { font-size: 0.9rem; font-weight: 620; }
.baris-uji { display: flex; gap: 8px; margin-top: 10px; }
.baris-uji input { flex: 1; min-width: 0; }

.uji-hasil {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--permukaan);
  font-size: 0.85rem;
}

.uji-hasil .cocok { font-weight: 620; }
.uji-hasil .cocok.ada { color: var(--sukses); }
.uji-hasil .cocok.tiada { color: var(--hangat); }

.uji-hasil .bubble {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 12px 12px 12px 3px;
  background: var(--aksen-lembut);
  color: var(--teks);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Kotak uji di dalam tiap kartu aturan. */
.uji-aturan { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--garis); }
.uji-aturan > .judul { display: block; font-size: 0.9rem; font-weight: 620; }
.uji-aturan > .bantu { display: block; margin-top: 3px; color: var(--redup); font-size: 0.8rem; line-height: 1.5; }

/* ------------------------------------------------------------------ input */

.bidang { display: block; margin-bottom: 17px; }
.bidang.rapat { margin-bottom: 0; }

.judul { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 0.88rem; font-weight: 620; }
.bantu { display: block; margin: 3px 0 7px; color: var(--redup); font-size: 0.805rem; }
.judul + textarea, .judul + input { margin-top: 7px; }

textarea,
input[type="text"],
input[type="number"],
input[type="time"],
input[type="password"] {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--permukaan-2);
  color: var(--teks);
  font: inherit;
  font-size: 0.895rem;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

textarea {
  display: block;
  resize: vertical;
  min-height: 62px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.845rem;
  line-height: 1.55;
}

textarea::placeholder, input::placeholder { color: var(--samar); }
textarea:hover, input:hover { border-color: var(--redup); }

textarea:focus, input:focus {
  outline: 0;
  background: var(--permukaan);
  border-color: var(--aksen);
  box-shadow: 0 0 0 3px var(--aksen-lembut);
}

/* Kolom kata kunci dibungkus "sumur" jelas dengan aksen warna: pemicu (biru) &
   pengecualian (merah), supaya kotak inputnya langsung kelihatan & mudah dibeda. */
.kunci {
  padding: 13px 14px;
  border: 1px solid var(--garis);
  border-left: 3px solid var(--garis-tegas);
  border-radius: var(--r);
  background: var(--permukaan-2);
}
.kunci .judul { font-weight: 640; }
.kunci textarea, .kunci input { background: var(--permukaan); }

/* Penghitung kata kunci, didorong ke ujung kanan judul. Memberi gambaran isi
   kotak tanpa harus menggulirnya. */
.kunci-hitung {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  color: var(--samar);
  font-size: 0.71rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kunci-hitung.nol { color: var(--samar); opacity: 0.65; }
.kunci textarea:focus, .kunci input:focus { background: var(--permukaan); }
.kunci.kunci-picu { border-left-color: var(--aksen); }
.kunci.kunci-saring { border-left-color: var(--bahaya); }
.kunci .judul::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: baseline;
  background: var(--garis-tegas);
}
.kunci.kunci-picu .judul::before { background: var(--aksen); }
.kunci.kunci-saring .judul::before { background: var(--bahaya); }

/* min-width:0 wajib: tanpa itu kolom grid memakai lebar MINIMUM KONTEN, dan
   kotak kata kunci yang berisi baris panjang mendorong kolom kanan keluar
   kartu alih-alih ikut menyempit. */
.kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.kisi > * { min-width: 0; }

/* -------------------------------------------- kaki kartu aturan (tindakan) */

/* Edit / Nonaktifkan / Hapus sebagai tombol berteks. Ikon kecil bersebelahan
   di kepala kartu tidak pernah jelas mana yang mana — dan ikon hapus tepat di
   sebelah ikon lipat adalah tetangga yang mudah salah pencet. */
.kartu-kaki {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--garis);
}

.kartu.tutup .kartu-kaki { margin-top: 10px; padding-top: 9px; }

.aksi-edit { border-color: var(--aksen); color: var(--aksen); }
.aksi-edit:hover { background: var(--aksen-lembut); }

.aksi-hidupkan { border-color: var(--sukses); color: var(--sukses); }

.aksi-hapus { color: var(--bahaya); }
.aksi-hapus:hover { border-color: var(--bahaya); background: var(--bahaya-lembut); }

/* --------------------------------- ruas pada editor aturan yang terbuka */

/* Editor dipecah jadi ruas berjudul supaya tidak terbaca sebagai satu kolom
   panjang berisi belasan kendali tanpa batas yang jelas. */
.ruas {
  margin-bottom: 16px;
  padding: 14px 16px 2px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--permukaan-2);
}

.ruas:last-of-type { margin-bottom: 14px; }

.ruas-kop { margin-bottom: 12px; }
.ruas-kop h4 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--redup);
}
.ruas-kop p { margin: 3px 0 0; color: var(--samar); font-size: 0.78rem; }

/* Opsi lanjutan — jarang disentuh, jadi dilipat. Terbuka sendiri kalau
   aturannya memang sudah memakai salah satunya (lihat renderAturan). */
.ruas-lanjutan {
  margin: 4px 0 14px;
  border-top: 1px solid var(--garis);
  padding-top: 10px;
}

.ruas-lanjutan > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--redup);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ruas-lanjutan > summary::-webkit-details-marker { display: none; }
.ruas-lanjutan > summary::before {
  content: '›';
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform .16s;
}
.ruas-lanjutan[open] > summary::before { transform: rotate(90deg); }
.ruas-lanjutan > summary:hover { color: var(--teks); }
.ruas-lanjutan > .bidang:first-of-type { margin-top: 12px; }

.ruas-tanda {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--aksen-lembut);
  color: var(--aksen);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ grup setelan */

.grup-kepala { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--garis); }
.grup-kepala h3 { margin: 0; font-size: 0.97rem; font-weight: 650; letter-spacing: -0.005em; }
.grup-kepala p { margin: 3px 0 0; color: var(--redup); font-size: 0.82rem; }

.satuan {
  display: block;
  margin-top: 5px;
  color: var(--aksen);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------- pratinjau percakapan */

.pratinjau { background: var(--permukaan-2); }

.jendela-chat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--permukaan);
}

.chat-baris { display: flex; gap: 9px; align-items: flex-end; }

.chat-baris::before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--aksen);
  opacity: 0.85;
}

.gelembung {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px 14px 14px 4px;
  background: var(--aksen);
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.jendela-chat .bantu { margin: 4px 0 0; }

/* ------------------------------------------------------------ keadaan kosong */

.kosong.besar { padding: 30px 26px; text-align: left; }
.kosong.besar h3 { margin: 0 0 7px; color: var(--teks); font-size: 1rem; font-weight: 650; }
.kosong.besar p { margin: 0 0 10px; max-width: 58ch; color: var(--redup); font-size: 0.86rem; }
.kosong.besar .bantu { margin-bottom: 12px; }

.templat { display: flex; flex-wrap: wrap; gap: 7px; }
.templat .tombol { padding: 7px 13px; font-size: 0.83rem; }

/* --------------------------------------------------------- rangka pemuatan */

.rangka {
  height: 92px;
  margin-bottom: 14px;
  border-radius: var(--r);
  background: linear-gradient(90deg, var(--permukaan) 25%, var(--permukaan-2) 50%, var(--permukaan) 75%);
  background-size: 400% 100%;
  animation: kilau 1.3s ease-in-out infinite;
}

@keyframes kilau {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rangka { animation: none; background: var(--permukaan-2); }
}

/* ----------------------------------------------------------- editor pesan */

.bubble-set { display: flex; flex-direction: column; gap: 8px; margin-top: 7px; }

.bubble-baris {
  padding: 8px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--permukaan-2);
}

.bubble-kiri {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.bubble-no {
  color: var(--samar);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bubble-alat { display: flex; gap: 3px; }
.bubble-alat .tombol.ikon { width: 26px; height: 26px; }
.bubble-alat .tombol.ikon svg { width: 15px; height: 15px; }

.tombol.tambah-pesan {
  align-self: flex-start;
  width: auto;
  padding: 6px 12px;
  border-style: dashed;
  color: var(--redup);
  font-size: 0.82rem;
}

.tombol.tambah-pesan::before { content: "+"; font-weight: 500; line-height: 1; }

/* --------------------------------------------------------------- sakelar */

.sakelar { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; cursor: pointer; }
.sakelar + .sakelar { border-top: 1px solid var(--garis); }

.sakelar input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 36px;
  height: 21px;
  margin: 1px 0 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: var(--garis-tegas);
  cursor: pointer;
  transition: background 0.18s;
}

.sakelar input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s;
}

.sakelar input[type="checkbox"]:checked { background: var(--aksen); }
.sakelar input[type="checkbox"]:checked::after { transform: translateX(15px); }
.sakelar input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--aksen-lembut); }

.sakelar .ket { font-size: 0.815rem; color: var(--redup); }
.sakelar .ket strong { display: block; margin-bottom: 1px; color: var(--teks); font-size: 0.88rem; font-weight: 620; }

/* Sakelar yang kalau dinyalakan menarik chat customer dari agent manusia. */
.sakelar.awas {
  margin: 11px 0;
  padding: 12px 14px;
  border: 1px solid var(--bahaya);
  border-color: color-mix(in srgb, var(--bahaya) 28%, transparent);
  border-radius: var(--r-kecil);
  background: var(--bahaya-lembut);
}

.sakelar.awas + .sakelar { border-top: 0; }
.sakelar.awas .ket, .sakelar.awas .ket strong { color: var(--bahaya); }
.sakelar.awas input[type="checkbox"]:checked { background: var(--bahaya); }

.hari { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.hari label {
  padding: 6px 13px;
  border: 1px solid var(--garis-tegas);
  border-radius: 999px;
  background: var(--permukaan);
  color: var(--redup);
  font-size: 0.815rem;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.14s;
}

.hari label:hover { border-color: var(--aksen); color: var(--aksen); }
.hari input { position: absolute; opacity: 0; width: 0; height: 0; }
.hari label:has(input:checked) { background: var(--aksen); border-color: var(--aksen); color: var(--aksen-teks); }
.hari label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--aksen-lembut); }

/* ----------------------------------------------------------------- tombol */

.tombol {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--permukaan);
  color: var(--teks);
  font: inherit;
  font-size: 0.87rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s;
}

.tombol:hover { border-color: var(--aksen); color: var(--aksen); background: var(--aksen-lembut); }
.tombol:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--aksen-lembut); }
.tombol:disabled { opacity: 0.4; cursor: not-allowed; }
.tombol:disabled:hover { border-color: var(--garis-tegas); color: var(--teks); background: var(--permukaan); }

.tombol.utama {
  min-width: 112px;
  background: var(--aksen);
  border-color: var(--aksen);
  color: var(--aksen-teks);
  font-weight: 620;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--aksen) 32%, transparent);
}

.tombol.utama:hover { background: color-mix(in srgb, var(--aksen) 87%, #000); border-color: transparent; color: var(--aksen-teks); }
.tombol.utama:disabled:hover { background: var(--aksen); }

.tombol.bahaya { background: var(--bahaya); border-color: var(--bahaya); color: #fff; font-weight: 620; }
.tombol.bahaya:hover { background: color-mix(in srgb, var(--bahaya) 85%, #000); border-color: transparent; color: #fff; }

.tombol.ikon { width: 30px; height: 30px; padding: 0; color: var(--samar); }
.tombol.ikon:hover { color: var(--aksen); }
.tombol.ikon.hapus:hover { border-color: var(--bahaya); color: var(--bahaya); background: var(--bahaya-lembut); }

.tombol.tambah { width: 100%; padding: 13px; border-style: dashed; color: var(--redup); }
.tombol.tambah::before { content: "+"; font-size: 1.05rem; font-weight: 500; line-height: 1; }

.tombol.kecil { padding: 6px 12px; font-size: 0.8rem; }

/* Bar simpan lokal untuk tab Pengguna Panel (lepas dari bar simpan global). */
.bar-lokal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--garis);
}
.bar-lokal .catatan { margin-right: auto; color: var(--redup); font-size: 0.82rem; }
/* Daftar pengguna dibentuk seperti tabel: kolomnya sejajar dari baris ke baris,
   jadi mudah dipindai walau penggunanya banyak. Dua field saja per baris —
   tidak perlu kartu bertingkat. */
/* Daftar pengguna: baris baca-saja, semua tindakan lewat pop-up. Dibatasi
   lebarnya walau halaman lebar penuh — baris berisi satu nama tidak perlu
   membentang 1900px. */
.pengguna-baris {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--permukaan);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.pengguna-baris:hover { border-color: var(--garis-tegas); box-shadow: var(--bayang-kartu); }

.pengguna-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pengguna-teks strong { font-size: 0.94rem; font-weight: 620; }
.pengguna-teks span { color: var(--samar); font-size: 0.78rem; }

.pengguna-aksi { display: flex; gap: 6px; align-items: center; flex: none; }

@media (max-width: 620px) {
  .pengguna-baris { flex-wrap: wrap; }
  .pengguna-aksi { margin-left: auto; }
}

/* -------------------------------------------------------------- bar aksi */

/* Bilah melayang di tengah bawah, BUKAN sticky selebar layar. Dengan begitu
   muncul-hilangnya tidak menggeser isi halaman sedikit pun, dan saat tidak ada
   perubahan layar benar-benar bersih. */
.bar-aksi {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 8;
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--garis-tegas);
  border-radius: 14px;
  background: color-mix(in srgb, var(--permukaan) 94%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Keadaan tersembunyi: visibility (bukan display) supaya bisa dianimasikan
     dan tetap dikeluarkan dari urutan tab keyboard. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(14px);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.18s;
}

.bar-aksi.tampil {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Titik kuning berdenyut: penanda "belum disimpan" yang langsung terbaca. */
.bar-tanda {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hangat, #e0a526);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--hangat, #e0a526) 60%, transparent);
  animation: denyut-tanda 2s ease-out infinite;
}
@keyframes denyut-tanda {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hangat, #e0a526) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.bar-teks { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: 6px; }
.bar-teks strong { font-size: 0.85rem; font-weight: 620; color: var(--teks); }
.bar-teks .catatan { font-size: 0.74rem; }

@supports not (backdrop-filter: blur(1px)) {
  .bar-aksi { background: var(--permukaan); }
}

@media (prefers-reduced-motion: reduce) {
  .bar-aksi { transition: opacity 0.12s; transform: translateX(-50%); }
  .bar-aksi.tampil { transform: translateX(-50%); }
  .bar-tanda { animation: none; }
}

.catatan { margin-right: auto; color: var(--redup); font-size: 0.81rem; }
.catatan strong { color: var(--teks); font-weight: 620; }

/* ---------------------------------------------------------------- kosong */

.kosong {
  padding: 34px 20px;
  border: 1px dashed var(--garis-tegas);
  border-radius: var(--r);
  color: var(--samar);
  font-size: 0.87rem;
  text-align: center;
}

/* ---------------------------------------------------------------- dialog */

.dialog {
  width: min(400px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  background: var(--permukaan);
  color: var(--teks);
  box-shadow: var(--bayang-2);
}

.dialog::backdrop { background: rgba(8, 11, 16, 0.5); backdrop-filter: blur(2px); }
.dialog h3 { margin: 0 0 7px; font-size: 1.04rem; font-weight: 650; }
.dialog p { margin: 0; color: var(--redup); font-size: 0.88rem; }
.dialog-aksi { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; }
.dialog .bidang { margin-top: 16px; }
.dialog .login-galat { margin: 14px 0 0; }


/* Tanpa catatan di kiri, tombol simpan tidak perlu melebar penuh. Lebarnya
   disamakan dengan tabel di atasnya supaya tepi kanannya sejajar. */
.bar-lokal { justify-content: flex-end; max-width: 920px; }
.bar-lokal .tombol { flex: none; }

/* ----------------------------------------------------------------- pesan */

.pesan {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 30;
  max-width: min(540px, calc(100vw - 32px));
  padding: 12px 17px;
  border: 1px solid;
  border-radius: var(--r);
  box-shadow: var(--bayang-2);
  font-size: 0.86rem;
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.pesan.tampil { opacity: 1; transform: translate(-50%, 0); }
.pesan.sukses { background: var(--sukses-lembut); color: var(--sukses); border-color: currentColor; }
.pesan.gagal { background: var(--bahaya-lembut); color: var(--bahaya); border-color: currentColor; }

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .pesan.sukses { border-color: color-mix(in srgb, var(--sukses) 32%, transparent); }
  .pesan.gagal { border-color: color-mix(in srgb, var(--bahaya) 32%, transparent); }
}

/* ------------------------------------------------------------------ kecil */

/* Layar sempit: sidebar tidak muat berdampingan, jadi dilipat jadi bilah atas
   dengan menu yang bisa digeser mendatar. */
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }

  .sisi-nav {
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .sisi-merek { padding: 0; margin: 0; border: 0; }
  .sisi-kaki {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    flex-direction: row;
    align-items: center;
  }
  .nav {
    order: 3;
    flex: 1 1 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
  }
  .nav button { width: auto; padding: 8px 11px; }
  .nav button span { flex: none; }
  .nav button.aktif::before { display: none; }

  .atas { padding: 12px 16px 0; }
  main { padding: 16px 16px calc(var(--h-bar) + 28px); }
  .kisi { grid-template-columns: 1fr; }
  .catatan { flex: 1 1 100%; margin: 0; order: 3; }
}

/* --------------------------------------------- berlaku untuk akun (aturan) */
.pilih-akun { margin-top: 7px; }

.akun-mode { display: flex; gap: 18px; flex-wrap: wrap; }
.akun-radio {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--redup);
}
.akun-radio input[type="radio"] { margin: 0; accent-color: var(--aksen); cursor: pointer; }
.akun-radio:has(input:checked) { color: var(--teks); }

.akun-panel {
  margin-top: 10px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: var(--permukaan-2);
  overflow: hidden;
}
.akun-panel[hidden] { display: none; }

.akun-atas {
  display: flex;
  gap: 10px 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 9px 11px;
  border-bottom: 1px solid var(--garis);
}
.akun-cari {
  flex: 1 1 190px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--permukaan);
  color: var(--teks);
  font: inherit;
  font-size: 13px;
}
.akun-cari:focus { outline: none; border-color: var(--aksen); }
.akun-cari::placeholder { color: var(--samar); }

.akun-aksi { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.akun-hitung { color: var(--aksen); font-variant-numeric: tabular-nums; margin-right: 4px; }
.akun-hitung.nol { color: var(--samar); }
.akun-pemisah { color: var(--samar); }
.akun-tautan {
  padding: 0;
  border: 0;
  background: none;
  color: var(--redup);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.akun-tautan:hover { color: var(--teks); }

.akun-kotak {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 5px;
  max-height: 212px;
  overflow-y: auto;
  padding: 9px;
}

.akun-pilih {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-kecil);
  cursor: pointer;
  font-size: 13px;
  color: var(--redup);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.akun-pilih[hidden] { display: none; }
.akun-pilih:hover { background: var(--permukaan); color: var(--teks); }
.akun-pilih input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--aksen);
  cursor: pointer;
}
.akun-pilih span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akun-pilih.terpilih {
  border-color: var(--aksen);
  background: var(--aksen-lembut);
  color: var(--teks);
}

.akun-hilang span { color: var(--bahaya); text-decoration: line-through; }
.akun-hilang.terpilih { border-color: var(--bahaya); background: var(--bahaya-lembut); }

.akun-kosong {
  padding: 16px 12px;
  color: var(--samar);
  font-size: 13px;
  text-align: center;
}

.akun-awas {
  display: block;
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: var(--r-kecil);
  background: var(--bahaya-lembut);
  color: var(--bahaya);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ----------------------------------------------------- chat berjalan */
/*
 * Susunannya mengikuti dashboard LiveChat: daftar chat beravatar di kiri,
 * percakapan di kanan, kotak balasan menempel di dasar.
 *
 * Catatan nama kelas: daftar di sini memakai .chat-item, BUKAN .chat-baris —
 * nama itu sudah dipakai pratinjau sapaan di tab lain.
 *
 * Tab Chat memakai TINGGI LAYAR, bukan tinggi isi: yang menggulung hanya
 * daftar chat dan percakapannya, bukan halamannya. Tanpa ini muncul dua batang
 * gulung bertumpuk, dan kotak tulis balasan terdorong keluar layar. Kelas
 * `mode-chat` dipasang dari app.js, bukan lewat :has(), supaya perilakunya
 * pasti sama di semua browser.
 */
.app.mode-chat { height: 100vh; min-height: 0; overflow: hidden; }
.app.mode-chat .sisi-nav { overflow-y: auto; }
.app.mode-chat .utama { min-height: 0; }

.app.mode-chat main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* Bilah simpan ditahan di tab ini, jadi ruang untuknya tidak perlu disisakan. */
  padding-bottom: 20px;
}

.app.mode-chat #p-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Tab Chat tidak punya kop-bagian; isinya langsung mengisi tinggi yang ada. */
.app.mode-chat main { padding-top: 14px; }

/* Pita status di puncak halaman disembunyikan KHUSUS di tab Chat.
   Tab ini memakai tinggi layar, jadi tiap piksel di atas langsung memotong
   jumlah chat yang terlihat — sedangkan isinya (jam operasional, jumlah akun
   live, bot hidup/mati) tidak berubah sepanjang hari dan tetap bisa dilihat
   di tab lain. Penanda bot juga masih ada di dasar rel kiri. */
.app.mode-chat .atas { display: none; }

/* Satu bingkai untuk daftar DAN percakapan, dipisah garis — bukan dua kotak
   melayang berjauhan. Sudut membulat ada di bingkai luar saja, jadi isinya
   dipotong olehnya (overflow: hidden). */
.chat-wadah {
  display: grid;
  /* Lebar daftar ikut lebar layar, bukan angka mati. Di layar lebar, ruang
     kosong di sisi percakapan jauh lebih banyak daripada yang terpakai,
     sedangkan di daftar justru nama dan cuplikan pesan terpotong. Batas
     bawahnya menjaga daftar tetap terbaca di layar sempit; batas atasnya
     menjaga percakapan tidak ikut terdesak. */
  grid-template-columns: clamp(330px, 26vw, 460px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--permukaan);
  overflow: hidden;
}

/* ------------------------------------------------------------- avatar */

.chat-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1;
  user-select: none;
}

.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------- daftar chat */

.chat-sisi {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--garis);
  overflow: hidden;
}

.chat-sisi-kop {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border-bottom: 1px solid var(--garis);
  background: var(--permukaan-2);
}

.chat-sisi-kop input[type="search"] {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--bg);
  color: var(--teks);
  font: inherit;
  font-size: 13px;
}

.chat-sisi-kop input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--aksen);
}

/* Pil saringan: satu pilihan aktif, sejajar dalam satu baris. Dibungkus
   supaya tetap rapi kalau kolomnya menyempit. */
.chat-pil {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chat-pil button {
  padding: 5px 11px;
  border: 1px solid var(--garis-tegas);
  border-radius: 999px;
  background: transparent;
  color: var(--redup);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.chat-pil button:hover:not(.aktif) {
  border-color: var(--redup);
  color: var(--teks);
}

.chat-pil button.aktif {
  border-color: var(--aksen);
  background: var(--aksen);
  color: var(--aksen-teks);
}

.chat-pil button:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

/* Saringan agent. Labelnya di kiri dan tetap lebarnya, jadi kotak pilihan
   sejajar dengan kotak pencarian di atasnya. */
.chat-pilih-agen {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--redup);
  font-size: 12.5px;
}

.chat-pilih-agen > span { flex: none; }

.chat-pilih-agen select {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--bg);
  color: var(--teks);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.chat-pilih-agen select:focus-visible { outline: none; border-color: var(--aksen); }

/* Pita peringatan saat penarikan ke LiveChat sedang bermasalah. Sengaja
   tenang: daftarnya masih dipakai, cuma mungkin tertinggal beberapa detik. */
.chat-gangguan {
  margin: 0;
  padding: 7px 10px;
  border-radius: var(--r-kecil);
  background: var(--hangat-lembut);
  color: var(--hangat);
  font-size: 11.5px;
  line-height: 1.45;
}

.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* Judul kelompok ikut menggulung tapi menempel di atas saat dilewati, jadi
   selalu jelas bagian mana yang sedang dilihat. */
.chat-kelompok {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 13px 7px;
  border-bottom: 1px solid var(--garis);
  background: var(--permukaan-2);
  color: var(--samar);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.chat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px 11px;
  border: 0;
  border-bottom: 1px solid var(--garis);
  border-left: 3px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.chat-item:hover { background: var(--permukaan-2); }
.chat-item:focus-visible { outline: 2px solid var(--aksen); outline-offset: -2px; }

.chat-item.terpilih {
  border-left-color: var(--aksen);
  background: var(--aksen-lembut);
}

.chat-item-teks { flex: 1; min-width: 0; }

.chat-item-atas {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Lencana MANUAL/AKTIF ikut di baris atas. Tidak boleh menyusut, dan tidak
   boleh menambah tinggi baris — jarak atasnya dinolkan dan perataannya
   ditengahkan terhadap nama. */
.chat-item-atas .chat-label {
  flex: none;
  margin-top: 0;
  align-self: center;
}

.chat-nama {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item .chat-jam { flex: none; color: var(--samar); font-size: 11.5px; }

/* Satu baris saja, sisanya dipotong "…" — sama seperti dashboard LiveChat.
   Ini bukan soal selera: cuplikan yang boleh membungkus membuat tinggi baris
   berubah-ubah antara satu dan dua baris tiap kali pesan baru masuk, sehingga
   seluruh daftar di bawahnya ikut bergeser. Dengan tinggi yang seragam, yang
   bergeser hanya saat memang ada chat baru atau chat tutup. */
.chat-cuplik {
  margin-top: 3px;
  color: var(--redup);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Panah balik = pesan terakhir dari pihak kita, lambang yang sama dengan
   dashboard LiveChat. */
.chat-balik { margin-right: 5px; color: var(--samar); }

/* --------------------------------------------- baris yang belum dibalas

   Di saringan "Belum dibalas" SELURUH daftar berisi baris semacam ini. Kalau
   tiap baris diberi penanda yang mencolok sendiri-sendiri, yang terbaca cuma
   dua puluh baris yang berteriak bersamaan. Jadi penandanya dibuat menyatu:
   satu rel tipis di tepi kiri dengan sapuan warna yang memudar ke kanan,
   sehingga dari jauh terbaca sebagai satu antrean yang rapi.

   Tidak satu pun aturan di sini menyentuh padding, border-width, atau tinggi
   baris — tinggi yang seragam itulah yang membuat daftar tidak bergeser-geser
   saat isinya berubah. */

.chat-item.baru {
  border-left-color: var(--belum);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--belum) 7%, transparent),
    transparent 42%
  );
}

.chat-item.baru:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--belum) 10%, transparent), transparent 42%),
    var(--permukaan-2);
}

.chat-item.baru .chat-nama { font-weight: 700; }
.chat-item.baru .chat-cuplik { color: var(--teks); }

/* Sudah berapa lama customer menunggu adalah hal pertama yang dicari di
   antrean ini, jadi jamnya dinaikkan dari "samar" ke "redup" — cukup terbaca,
   tetap bukan judul. */
.chat-item.baru .chat-jam { color: var(--redup); }

/* Baris yang sedang dibuka tetap memakai rel biru: di antara semua penanda,
   yang paling perlu jelas adalah "mana yang sedang saya kerjakan". Aturannya
   di sini, bukan di atas, karena harus mengalahkan .baru. */
.chat-item.baru.terpilih {
  border-left-color: var(--aksen);
  background: var(--aksen-lembut);
}

/* Penanda belum dibalas, sejajar di tepi kanan baris seperti di LiveChat.
   Cincinnya digambar dengan box-shadow, bukan border, supaya titiknya tidak
   ikut memperlebar baris sedikit pun. */
.chat-titik {
  flex: none;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--belum);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--belum) 18%, transparent);
}

.chat-asing {
  margin-top: 5px;
  color: var(--samar);
  font-size: 11.5px;
  line-height: 1.4;
}

/* Penanda siapa yang membalas chat ini, di tiap baris daftar. Sengaja kecil:
   yang dicari operator saat memindai daftar tetap nama dan isi pesannya. */
.chat-label {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.chat-label.aktif {
  border-color: color-mix(in srgb, var(--sukses) 30%, transparent);
  background: var(--sukses-lembut);
  color: var(--sukses);
}

.chat-label.manual {
  border-color: color-mix(in srgb, var(--hangat) 32%, transparent);
  background: var(--hangat-lembut);
  color: var(--hangat);
}

/* ----------------------------------------------------------- percakapan */

.chat-ruang {
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.chat-kosong {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--samar);
  font-size: 13.5px;
}

.chat-kosong p { margin: 0; }

.chat-kosong svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}

.chat-isi {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.chat-kepala {
  flex: none;
  padding: 11px 16px 12px;
  border-bottom: 1px solid var(--garis);
  background: var(--permukaan-2);
}

.chat-kepala-judul { display: flex; align-items: center; gap: 11px; }
.chat-kepala-nama { min-width: 0; flex: 1; }

/* Penanda siapa yang memegang chat, dan tombol pengembaliannya. Keduanya di
   ujung kanan kepala percakapan: penanda di kiri, tombol di kanannya. */
.chat-kendali {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Satu tombol, isinya kebalikan dari keadaan sekarang: warnanya mengikuti
   tujuan, bukan keadaan — hijau untuk menghidupkan, oranye untuk menghentikan. */
.chat-saklar-bot { font-weight: 600; white-space: nowrap; }

.chat-saklar-bot.nyalakan {
  border-color: color-mix(in srgb, var(--sukses) 32%, transparent);
  background: var(--sukses-lembut);
  color: var(--sukses);
}

.chat-saklar-bot.nyalakan:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--sukses) 55%, transparent);
}

.chat-saklar-bot.matikan {
  border-color: color-mix(in srgb, var(--hangat) 32%, transparent);
  background: var(--hangat-lembut);
  color: var(--hangat);
}

.chat-saklar-bot.matikan:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--hangat) 55%, transparent);
}

.chat-tangan {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.chat-tangan-titik {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.chat-tangan.bot {
  border-color: color-mix(in srgb, var(--sukses) 32%, transparent);
  background: var(--sukses-lembut);
  color: var(--sukses);
}

.chat-tangan.manual {
  border-color: color-mix(in srgb, var(--hangat) 34%, transparent);
  background: var(--hangat-lembut);
  color: var(--hangat);
}
.chat-kepala h3 { margin: 0; font-size: 15px; }

.chat-kepala .chat-rinci {
  margin-top: 1px;
  color: var(--samar);
  font-size: 12px;
}

/* Kartu Pre-chat form di dalam percakapan — jawaban yang diisi customer
   sebelum chat dimulai, ditampilkan sebagai kirimannya yang pertama. */
.chat-prechat {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--permukaan-2);
  border: 1px solid var(--garis);
}

.prechat-judul {
  margin-bottom: 10px;
  color: var(--teks);
  font-size: 13px;
  font-weight: 700;
}

.prechat-baris + .prechat-baris { margin-top: 10px; }

.prechat-label {
  color: var(--redup);
  font-size: 12.5px;
  line-height: 1.45;
}

.prechat-jawab {
  color: var(--teks);
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.chat-tubuh {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}

/*
 * Satu rumpun = satu giliran bicara: pesan beruntun dari penulis yang sama
 * dirapatkan, dengan avatar customer (kiri) atau nama agent (kanan) sebagai
 * kepalanya. Tanpa pengelompokan ini deretan pesan pendek jadi berjauhan dan
 * susah diikuti.
 */
.chat-rumpun {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin-bottom: 14px;
}

.chat-rumpun:last-child { margin-bottom: 0; }

/* Pemisah hari: garis tipis melintang dengan labelnya di tengah. Garisnya
   dibuat dari dua ::before/::after yang memanjang, bukan border pada teks,
   supaya labelnya tetap di tengah berapa pun panjangnya. */
.chat-hari {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
}

.chat-hari::before,
.chat-hari::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--garis);
}

.chat-hari-teks {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--redup);
  white-space: nowrap;
}

/* Rumpun pertama sesudah pemisah tidak perlu jarak atas tambahan. */
.chat-hari + .chat-rumpun { margin-top: 0; }

/* Kendali riwayat di puncak percakapan: muat percakapan sebelumnya. */
.chat-riwayat-atas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 0 12px;
}

.chat-riwayat-info {
  font-size: 11.5px;
  color: var(--redup);
}

.chat-riwayat-info.awas { color: var(--bahaya, #e06c6c); }

.chat-riwayat-tombol {
  border-radius: 999px;
  padding: 5px 14px;
}
.chat-rumpun.keluar { flex-direction: column; align-items: flex-end; gap: 3px; }

.chat-rumpun-isi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  max-width: min(74%, 560px);
}

.chat-rumpun.keluar .chat-rumpun-isi { align-items: flex-end; max-width: min(78%, 620px); }
.chat-rumpun.masuk .chat-rumpun-isi { align-items: flex-start; }

/* Nama agent di atas balasan kita — satu chat sering dipegang bergantian. */
.chat-penulis {
  padding-right: 3px;
  color: var(--samar);
  font-size: 11.5px;
  font-weight: 600;
}

/* Penanda balasan otomatis. Warnanya sengaja sama dengan lencana AKTIF di
   daftar chat dan tombol AUTO BOT di kepala percakapan — tiga penanda yang
   mengatakan hal yang sama, jadi tidak ada gunanya berbeda warna. */
.chat-auto {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--sukses) 30%, transparent);
  border-radius: 999px;
  background: var(--sukses-lembut);
  color: var(--sukses);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}

.chat-gel {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-rumpun.masuk .chat-gel {
  border: 1px solid var(--garis);
  background: var(--permukaan-2);
}

/* Birunya sedikit lebih pekat daripada --aksen supaya teks PUTIH di atasnya
   tetap terbaca (kontras ~4,6:1). Warna dan teks putih ini mengikuti gelembung
   agent di dashboard LiveChat. */
.chat-rumpun.keluar .chat-gel {
  background: #3a74e0;
  color: #fff;
}

/* Sudut yang menempel hanya pada gelembung terakhir tiap rumpun, jadi satu
   rumpun terbaca sebagai satu blok. */
.chat-rumpun.masuk .chat-gel:last-of-type { border-bottom-left-radius: 5px; }
.chat-rumpun.keluar .chat-gel:last-of-type { border-bottom-right-radius: 5px; }

.chat-rumpun .chat-jam {
  display: flex;
  gap: 7px;
  margin-top: 1px;
  padding: 0 4px;
  color: var(--samar);
  font-size: 11px;
}

/* Terkirim / Dibaca di bawah balasan terakhir kita, seperti di LiveChat. */
.chat-status { color: var(--samar); }
.chat-status.dibaca { color: var(--sukses); }

.chat-tulis {
  flex: none;
  padding: 12px 16px;
  border-top: 1px solid var(--garis);
  background: var(--permukaan-2);
}

/* Satu bingkai untuk kotak ketik DAN deretan alatnya — bentuk yang dipakai
   dashboard LiveChat. Garis tepinya ada di bingkai ini, bukan di kotak ketik,
   jadi menyorotnya saat mengetik menyalakan seluruh kotak sekaligus. */
.chat-kotak {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: var(--bg);
  transition: border-color 0.15s;
}

/* Bingkai TIDAK berubah warna saat diketik. Menyalakannya menambah satu
   gerakan lagi di layar yang sudah penuh gerakan, dan kursor yang berkedip di
   dalam kotak sudah cukup menunjukkan di mana ketikan akan jatuh. */

.chat-tulis textarea {
  /* Serapat mungkin dengan deretan alat di bawahnya. Jarak yang lega membuat
     kotak ketik terbaca sebagai kotak tersendiri di dalam bingkai — padahal
     yang dituju satu kolom utuh, seperti LiveChat. */
  min-height: 38px;
  max-height: 180px;
  padding: 10px 12px 0;
  border: 0;
  background: none;
  color: var(--teks);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  resize: none;
}

/* Tanpa garis sorot apa pun — bukan hanya :focus-visible, karena mengklik
   kotaknya dengan tetikus memicu :focus biasa. */
.chat-tulis textarea:focus,
.chat-tulis textarea:focus-visible { outline: none; box-shadow: none; }
.chat-tulis textarea:disabled { opacity: 0.5; cursor: not-allowed; }

/* Deretan alat di dasar bingkai: lampiran di kiri, Kirim di kanan. */
.chat-alat {
  display: flex;
  align-items: center;
  gap: 2px;
  /* Padding kiri disetel supaya mata ikon sejajar dengan huruf pertama di
     kotak ketik: tombolnya 28px dengan ikon 18px di tengah, jadi 7px + 5px
     menaruh ikonnya di 12px — sama dengan padding kiri kotak ketik. */
  padding: 0 8px 8px 7px;
}

/*
 * Tombol kirim mengikuti bentuk LiveChat: kecil, terang, dan tidak berteriak.
 *
 * Pil biru lebar yang dipakai sebelumnya menguasai seluruh deretan alat
 * padahal perannya cuma penutup — di LiveChat, Enter yang mengirim, dan
 * tombolnya sekadar pilihan kedua.
 */
.chat-tulis .tombol.utama {
  flex: none;
  height: 28px;
  margin-left: auto;
  padding-inline: 14px;
  /* Tombol utama panel punya lebar minimum 112px dan bayangan biru — pantas
     untuk tombol "Simpan" di halaman aturan, kebesaran di deretan alat ini. */
  min-width: 0;
  box-shadow: none;
  border-color: transparent;
  background: var(--teks);
  color: var(--bg);
  font-size: 12px;
  font-weight: 600;
}

.chat-tulis .tombol.utama:hover:not(:disabled) {
  background: #fff;
  border-color: transparent;
}

.chat-tulis .tombol.utama:disabled { background: var(--garis-tegas); color: var(--samar); }

/* Satu baris tetap, tidak pernah membungkus — di layar pendek keterangan yang
   melebar jadi dua-tiga baris ikut mendorong kotak balasan keluar bingkai.
   Teks penuhnya tetap terbaca lewat tooltip. */
.chat-catatan {
  flex: none;
  margin: 0;
  padding: 0 16px 11px;
  background: var(--permukaan-2);
  color: var(--samar);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-catatan.awas { color: var(--hangat); }

/* Tanpa isi, barisnya tidak boleh menyisakan ruang sama sekali — kalau tidak,
   yang hilang cuma tulisannya, sedangkan tingginya tetap memakan tempat. */
.chat-catatan:empty { display: none; }

.chat-memuat {
  margin: auto;
  padding: 24px 14px;
  color: var(--samar);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 1180px) {
  .chat-wadah { grid-template-columns: 272px minmax(0, 1fr); }
  .chat-rumpun-isi,
  .chat-rumpun.keluar .chat-rumpun-isi { max-width: 86%; }
}

/* Layar sempit: dua kolom tidak muat berdampingan, jadi tinggi layar dilepas
   dan halaman boleh menggulung seperti tab lain. */
@media (max-width: 860px) {
  .app.mode-chat { height: auto; min-height: 100vh; overflow: visible; }
  .app.mode-chat main { overflow: visible; }
  .chat-wadah { grid-template-columns: minmax(0, 1fr); }
  /* Bertumpuk: pemisahnya pindah ke sisi bawah. */
  .chat-sisi { max-height: 340px; border-right: 0; border-bottom: 1px solid var(--garis); }
  .chat-ruang { min-height: 460px; }
}

/* ------------------------------------------------- rel sidebar (ikon saja) */
/*
 * Sidebar dipersempit jadi rel ikon: judul menu dipindah ke tooltip, dan
 * ruang yang dibebaskan diberikan ke daftar chat dan percakapan — di situlah
 * operator bekerja seharian.
 *
 * Label <span> sengaja TIDAK dihapus dari HTML: pembaca layar tetap
 * membacanya, dan kalau rel ini perlu dilebarkan lagi cukup satu aturan CSS.
 */
.sisi-nav { padding: 14px 8px 12px; align-items: center; }

.sisi-merek {
  display: flex;
  justify-content: center;
  padding: 0 0 14px;
  margin-bottom: 12px;
  width: 100%;
}

/* Lambang situs: bulat berlatar terang. Ketiga lambangnya bergaris gelap dan
   berwarna merah tua — di atas latar gelap nyaris tidak terlihat, jadi
   latarnya dibuat terang dan gambarnya diberi sedikit ruang di dalam. */
.sisi-lambang {
  width: 40px;
  height: 40px;
  padding: 4px;
  border-radius: 50%;
  object-fit: contain;
  background: #f4f6f9;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.nav { width: 100%; align-items: center; gap: 4px; }

.nav button {
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
}

.nav button svg { width: 20px; height: 20px; }

/*
 * Tooltip rel. Teksnya memakai <span> yang MEMANG sudah ada di tiap tombol —
 * jadi pembaca layar tetap mendapat nama tombolnya, dan tidak ada teks yang
 * harus diurus di dua tempat.
 *
 * Tooltip bawaan browser sengaja tidak dipakai (atribut title dibuang):
 * munculnya lambat, tampilannya tidak bisa diatur, dan kalau keduanya ada
 * malah muncul dua kotak sekaligus.
 */
.sisi-nav .nav button > span,
.sisi-nav .sisi-keluar > span {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 60;
  display: block;
  flex: none;
  padding: 6px 10px;
  border: 1px solid var(--garis-tegas);
  border-radius: 8px;
  background: var(--permukaan-2);
  box-shadow: var(--bayang-2);
  color: var(--teks);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: visible;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.sisi-nav .nav button:hover > span,
.sisi-nav .nav button:focus-visible > span,
.sisi-nav .sisi-keluar:hover > span,
.sisi-nav .sisi-keluar:focus-visible > span {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Tooltip melayang keluar dari rel, jadi rel tidak boleh memotongnya. Enam
   ikon muat tanpa perlu menggulung, jadi tidak ada yang hilang. */
.nav { overflow: visible; }
.app.mode-chat .sisi-nav { overflow: visible; }
.sisi-keluar { position: relative; }

/* Penanda tepi kiri tidak cocok di rel sempit — keadaan aktif ditandai
   kotak warna penuh, seperti pada contoh yang dipakai sebagai acuan. */
.nav button.aktif::before { display: none; }
.nav button.aktif {
  background: color-mix(in srgb, var(--aksen) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aksen) 45%, transparent);
}

/* Lencana angka menempel di pojok ikon, bukan di ujung baris. */
.nav button .lencana {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--aksen);
  color: var(--aksen-teks);
  font-size: 9.5px;
  font-weight: 700;
  font-style: normal;
  line-height: 17px;
  text-align: center;
}

.sisi-kaki {
  width: 100%;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
}

/* Penanda hidup/mati layanan bot di dasar rel. */
.sisi-nadi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sisi-redup);
}

.sisi-nadi .titik {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sisi-redup);
}

.sisi-nadi.hidup .titik { background: #5fe0a0; box-shadow: 0 0 0 3px rgba(95, 224, 160, 0.16); }
.sisi-nadi.hidup { color: #5fe0a0; }
.sisi-nadi.mati .titik { background: #ff6b6b; }
.sisi-nadi.mati { color: #ff9d93; }

.sisi-keluar {
  justify-content: center;
  width: 44px;
  height: 38px;
  margin-top: 2px;
  padding: 0;
  gap: 0;
}

.sisi-keluar > span { display: none; }

/* Layar sempit: rel kembali jadi bilah mendatar seperti sebelumnya. */
@media (max-width: 860px) {
  .sisi-merek { padding: 0; margin: 0; width: auto; }
  .sisi-kaki { width: auto; }
  .sisi-nadi { flex-direction: row; margin-top: 0; }
}

/* --------------------------------------------- kendali layanan bot (setelan) */
/* Pindah dari dasar sidebar ke tab Pengaturan: di rel selebar 68px ketiganya
   cuma ikon tanpa keterangan, padahal "Stop" menghentikan bot sungguhan. */
.layanan-bot { margin-bottom: 16px; }
.layanan-kop { margin-bottom: 12px; }
.layanan-kop h3 { margin: 0 0 4px; font-size: 0.95rem; }
.layanan-kop .bantu { margin: 0; max-width: 62ch; }

.layanan-bot .kendali .tombol svg { width: 15px; height: 15px; }
.layanan-bot .jalur {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--garis);
  white-space: pre-line;
}

/* Rangka percakapan selagi isinya ditarik. Bentuknya meniru gelembung yang
   akan muncul, supaya perpindahan antar chat tidak terasa seperti layar
   kosong yang menunggu. */
.chat-rangka {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.chat-rangka-gel {
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--permukaan) 25%, var(--permukaan-2) 50%, var(--permukaan) 75%);
  background-size: 400% 100%;
  animation: kilau 1.3s ease-in-out infinite;
}

.chat-rangka-gel.masuk { align-self: flex-start; border-bottom-left-radius: 5px; }
.chat-rangka-gel.keluar { align-self: flex-end; border-bottom-right-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
  .chat-rangka-gel { animation: none; background: var(--permukaan-2); }
}

/* ------------------------------------------------ lampiran & kirim gambar */
.chat-gel.lampiran { padding: 4px; max-width: min(74%, 420px); }
.chat-gel.lampiran img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
}
.chat-gel.lampiran a { display: block; }
.chat-lampiran-teks { padding: 6px 8px 4px; font-size: 13px; }
.chat-tautan-berkas { display: block; padding: 8px 10px; color: inherit; font-size: 13px; }

/* Tombol lampiran: ikon saja di samping kotak ketik. */
/* Ikon alat di dalam bingkai tulis: tanpa garis tepi sendiri, karena bingkai
   yang melingkupinya sudah memberi batas. */
.chat-alat-ikon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-kecil);
  background: none;
  color: var(--redup);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.chat-alat-ikon:hover { background: var(--permukaan-2); color: var(--teks); }
.chat-alat-ikon:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }
.chat-alat-ikon:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-alat-ikon:disabled:hover { background: none; color: var(--redup); }
/* Labelnya cuma untuk pembaca layar; yang tampil ikonnya saja, seperti
   deretan alat di LiveChat. */
.chat-alat-ikon > span { display: none; }
.chat-alat-ikon svg { width: 18px; height: 18px; }

/* Seret gambar ke percakapan. */
.chat-ruang.seret { outline: 2px dashed var(--aksen); outline-offset: -6px; }

/* ------------------------------------------- dialog pengesahan kirim gambar */
.dlg-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dlg-kop h3 { margin: 0; }

.dlg-tutup {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--r-kecil);
  background: none;
  color: var(--redup);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.dlg-tutup:hover { background: var(--permukaan-2); color: var(--teks); }

#dlgGambar .bantu { margin: 10px 0 8px; }

.gb-daftar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.gb-baris {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--r-kecil);
  background: var(--permukaan-2);
}

.gb-baris img {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--bg);
}

.gb-nama {
  flex: 1;
  min-width: 0;
  color: var(--aksen);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gb-ukuran { flex: none; color: var(--samar); font-size: 12px; }

.gb-buang {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--samar);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.gb-buang:hover { background: var(--bahaya-lembut); color: var(--bahaya); }

.gb-tambah {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--aksen);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gb-tambah:hover { text-decoration: underline; }

/* ----------------------------------------------------- canned response */
/* Pemilih pintasan balasan, melayang tepat di atas kotak ketik. */
.canned-pilih {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 6px);
  z-index: 60;
  /* Tingginya dibatasi ruang yang benar-benar ada di atas kotak ketik. Tanpa
     batas ini, pada layar pendek kotaknya menjulur sampai ke bilah status dan
     bagian atasnya tertutup — isinya ada tapi tidak terbaca. */
  max-height: min(290px, calc(100vh - 230px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r);
  background: var(--permukaan);
  box-shadow: var(--bayang-2);
  overflow: hidden;
}

.chat-tulis { position: relative; }

.canned-kop {
  flex: none;
  padding: 7px 12px;
  border-bottom: 1px solid var(--garis);
  background: var(--permukaan-2);
  color: var(--samar);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.canned-daftar { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }

.canned-baris {
  display: flex;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--garis);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.canned-baris:hover,
.canned-baris.terpilih { background: var(--aksen-lembut); }

/* Baris = badan yang bisa ditekan + anak panah pembuka isi. */
.canned-baris { display: flex; align-items: stretch; gap: 0; padding: 0; }

.canned-isi {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 4px 8px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Anak panah kanan: membuka isi lengkapnya tanpa memakainya dulu. */
.canned-lanjut {
  flex: none;
  width: 30px;
  border: 0;
  border-left: 1px solid var(--garis);
  background: none;
  color: var(--samar);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.canned-lanjut:hover { background: var(--permukaan-2); color: var(--teks); }

/* ---- lapis kedua: isi satu pintasan ---- */
.canned-rinci-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--garis);
  background: var(--permukaan-2);
}

.canned-balik {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-kecil);
  background: none;
  color: var(--teks);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.canned-balik:hover { border-color: var(--aksen); }

.canned-rinci-teks {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  color: var(--teks);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.canned-rinci-aksi {
  flex: none;
  padding: 10px 12px;
  border-top: 1px solid var(--garis);
  background: var(--permukaan-2);
}

.canned-pakai { width: 100%; justify-content: center; }

.canned-kosong { margin: 0; padding: 14px 12px; color: var(--samar); font-size: 12.5px; text-align: center; }

.canned-atur { margin-bottom: 16px; }
.canned-atur textarea { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.canned-atur .kendali { align-items: center; gap: 12px; }