/* ==========================================================================
   GELORA — WIDGET CHATBOT (berdiri sendiri)
   ==========================================================================

   KENAPA BERKAS TERPISAH, BUKAN DI app.css

   Widget ini dipasang di DUA layout yang memakai sistem gaya berbeda:
     - layouts/app.blade.php    -> app.css (token --color-*, sistem Sneat)
     - layouts/public.blade.php -> public.css (token --g-*, sistem Bootstrap)

   Menaruhnya di app.css membuat widget tak bergaya di situs publik;
   menyalinnya ke public.css melanggar aturan "satu selector = satu tempat"
   yang dijaga seluruh proyek ini. Berkas sendiri menyelesaikan keduanya:
   satu definisi, dipakai dua layout.

   Karena itu blok di bawah TIDAK BOLEH bergantung pada token dari salah satu
   sistem. Semua var() diberi nilai cadangan lewat argumen kedua, sehingga
   tampilannya benar walau dimuat tanpa app.css maupun public.css. Di dalam
   shell staf, token yang ada akan menang dan widget otomatis ikut tema gelap.

   Dimuat oleh partials/_chat-widget.blade.php lewat @push('styles') — jadi
   halaman yang tidak memasang widget tidak ikut menanggung berkas ini.
   ========================================================================== */

:root {
  /* Token milik widget sendiri. Menunjuk ke token aplikasi kalau ada,
     dan jatuh ke nilai brand kalau tidak. */
  --chat-primary: var(--color-primary-500, var(--g-primary-500, #14B8A6));
  --chat-primary-dark: var(--color-primary-700, var(--g-primary-700, #0F766E));
  --chat-primary-soft: var(--color-primary-50, #F0FDFA);
  --chat-ink: var(--color-ink-900, var(--g-ink-900, #0F172A));
  --chat-ink-soft: var(--color-ink-600, var(--g-ink-600, #475569));
  --chat-line: var(--color-ink-200, var(--g-ink-200, #E2E8F0));
  --chat-line-strong: var(--color-ink-300, var(--g-ink-300, #CBD5E1));
  --chat-surface: var(--color-surface, var(--g-surface, #FFFFFF));
  --chat-bg: var(--color-bg, var(--g-ink-50, #F6F8FB));
  --chat-radius: 16px;
  --chat-shadow: 0 10px 24px -6px rgb(15 23 42 / .18), 0 4px 8px -4px rgb(15 23 42 / .08);
  --chat-font: var(--font-sans, "Plus Jakarta Sans", "Inter", system-ui, sans-serif);
  --chat-ease: cubic-bezier(.4, 0, .2, 1);
}


.chat-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* z-index 1040 dipilih, bukan angka kecil.
     Di layar HP panel membentang penuh (inset:0), dan situs publik menaruh
     .pub-bottomnav di z-index 1030 — dengan nilai di bawah itu, bar navigasi
     menutupi bagian bawah panel dan MENELAN tombol kirim (terbukti: klik
     .chat-send timeout, elementFromPoint mengembalikan tautan navigasi).
     1040 menempatkan widget di atas bar itu tapi tetap di bawah modal
     Bootstrap (1050+), SweetAlert (1060+), dan toastr — jadi dialog konfirmasi
     apa pun tetap muncul di atas chat. */
  z-index: 1040;
  font-family: var(--chat-font);
}

/* ---- Tombol mengambang ------------------------------------------------- */
.chat-fab {
  width: 54px; height: 54px;
  border: none;
  border-radius: 50%;
  background: var(--chat-primary);
  color: #04302B;
  font-size: 21px;
  cursor: pointer;
  box-shadow: var(--chat-shadow);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .16s var(--chat-ease);
}
.chat-fab:hover { background: #2DD4BF; }
.chat-fab:focus-visible { outline: 2px solid var(--chat-primary-dark); outline-offset: 3px; }
.chat-fab__close { display: none; }
.chat-widget.is-open .chat-fab__open { display: none; }
.chat-widget.is-open .chat-fab__close { display: block; }

/* ---- Panel ------------------------------------------------------------- */
.chat-panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--chat-surface);
  border: 1px solid var(--chat-line);
  border-radius: var(--chat-radius);
  box-shadow: var(--chat-shadow);
}
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(120deg, var(--chat-primary-dark), var(--chat-primary));
  color: #fff;
  flex-shrink: 0;
}
.chat-head__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgb(255 255 255 / .2);
  font-size: 14px;
  flex-shrink: 0;
}
.chat-head__title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat-head__title strong { font-size: 14px; font-weight: 800; }
.chat-head__title small { font-size: 11px; opacity: .85; }
.chat-close {
  margin-left: auto;
  background: transparent; border: none; color: rgb(255 255 255 / .9);
  font-size: 16px; cursor: pointer; padding: 6px; border-radius: 8px;
  line-height: 1;
}
.chat-close:hover { background: rgb(255 255 255 / .18); color: #fff; }

/* ---- Riwayat pesan ----------------------------------------------------- */
.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  background: var(--chat-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg { display: flex; }
.chat-msg--user { justify-content: flex-end; }

.chat-bubble {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--chat-surface);
  border: 1px solid var(--chat-line);
  color: var(--chat-ink);
  overflow-wrap: anywhere;   /* nama produk panjang tanpa spasi tidak merusak lebar */
}
.chat-msg--user .chat-bubble {
  background: var(--chat-primary);
  border-color: var(--chat-primary);
  color: #04302B;
  font-weight: 600;
}
.chat-msg--warning .chat-bubble { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.chat-msg--denied .chat-bubble { background: #FEE2E2; border-color: #FECACA; color: #991B1B; }
.chat-text { margin: 0; }

/* ---- Daftar fakta (label + nilai) -------------------------------------- */
/* Dua kolom hanya kalau nilainya pendek (jam buka, saldo). Untuk nilai
   panjang seperti alamat cabang, kolom kanan jadi terlalu sempit — karena itu
   di bawah 340px isi gelembung, label dan nilai ditumpuk. Dipilih lewat
   container query supaya patokannya lebar GELEMBUNG, bukan lebar layar:
   gelembung sempit sama saja di HP maupun desktop. */
.chat-facts {
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 12px;
  font-size: 12.5px;
}
.chat-facts dt { font-weight: 700; color: var(--chat-ink); }
.chat-facts dd {
  margin: 0;
  color: var(--chat-ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

/* Nilai panjang: tumpuk. dd rata kiri karena rata kanan pada teks berbaris
   banyak membuat tepi kirinya bergerigi dan sulit dipindai. */
.chat-facts--stacked { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.chat-facts--stacked dt { margin-top: 6px; }
.chat-facts--stacked dt:first-child { margin-top: 0; }
.chat-facts--stacked dd { text-align: left; }

/* ---- Tabel ------------------------------------------------------------- */
.chat-table-wrap {
  margin-top: 10px;
  overflow-x: auto;          /* tabel tarif bisa lebih lebar dari gelembung */
  -webkit-overflow-scrolling: touch;
}
.chat-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.chat-table th, .chat-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--chat-line);
}
/* Judul kolom tidak dibungkus (pendek dan jadi patokan lebar), tapi ISI SEL
   dibungkus. Panel chat hanya 380px: memaksa sel tetap satu baris membuat
   alamat cabang terpotong di tepi kanan dan pembaca harus menggeser tabel ke
   samping — di dalam gelembung chat itu gerakan yang canggung dan mudah tidak
   disadari. Dibungkus ke dua baris jauh lebih mudah dibaca. */
.chat-table th { white-space: nowrap; }
/* break-word, BUKAN anywhere: anywhere memutus di tengah kata
   ("Tangerang" jadi "Tangeran/g"). break-word hanya memutus kalau
   kata itu memang tidak muat sendirian. */
.chat-table td { overflow-wrap: break-word; }
/* Kolom angka tetap utuh supaya "Rp 100.000" tidak patah di tengah. */
.chat-table td:last-child { white-space: nowrap; }
.chat-table th {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--chat-ink-soft);
}
.chat-table tbody tr:last-child td { border-bottom: none; }

/* ---- Tautan & chip saran ----------------------------------------------- */
.chat-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-link {
  font-size: 12px; font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--chat-primary-soft);
  color: var(--chat-primary-dark);
  text-decoration: none;
}
.chat-link:hover { background: var(--chat-primary-soft); text-decoration: none; }

.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-chip {
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--chat-line-strong);
  background: var(--chat-surface);
  color: var(--chat-ink-soft);
  cursor: pointer;
  transition: border-color .15s var(--chat-ease), color .15s var(--chat-ease);
}
.chat-chip:hover { border-color: var(--chat-primary); color: var(--chat-primary-dark); }

/* ---- Indikator mengetik ------------------------------------------------ */
.chat-typing .chat-bubble { display: flex; gap: 4px; align-items: center; padding: 13px; }
.chat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--chat-line-strong);
  animation: chat-blink 1.3s infinite ease-in-out;
}
.chat-dot:nth-child(2) { animation-delay: .18s; }
.chat-dot:nth-child(3) { animation-delay: .36s; }
@keyframes chat-blink {
  0%, 80%, 100% { opacity: .28; }
  40% { opacity: 1; }
}

/* ---- Kotak ketik ------------------------------------------------------- */
.chat-form {
  display: flex; gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--chat-line);
  background: var(--chat-surface);
  flex-shrink: 0;
}
.chat-input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 13.5px;
  padding: 9px 13px;
  border: 1px solid var(--chat-line-strong);
  border-radius: 999px;
  background: var(--chat-surface);
  color: var(--chat-ink);
}
.chat-input:focus { outline: none; border-color: var(--chat-primary); box-shadow: 0 0 0 3px rgb(20 184 166 / .20); }
.chat-send {
  width: 38px; height: 38px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: var(--chat-primary); color: #04302B;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.chat-send:hover { background: #2DD4BF; }

.chat-backdrop { display: none; }

/* ==========================================================================
   KARTU KONFIRMASI AKSI TULIS
   --------------------------------------------------------------------------
   Ini bukan dialog "yakin?" melainkan FORM TER-ISI OTOMATIS. Rancangannya
   berangkat dari satu kenyataan: parser deterministik akan sesekali salah
   tangkap, dan yang menentukan apakah itu menjengkelkan atau sepele adalah
   seberapa mudah membetulkannya. Karena itu tiap kolom terlihat dan bisa
   disunting sejak awal — bukan disembunyikan di balik tombol "ubah".

   Tampilannya sengaja lebih "berat" dari gelembung biasa (garis tepi tegas,
   kepala berwarna) supaya jelas bahwa ini bukan jawaban, melainkan sesuatu
   yang menunggu keputusan.
   ========================================================================== */

.chat-card {
  margin-top: 12px;
  border: 1.5px solid var(--chat-primary);
  border-radius: 12px;
  overflow: hidden;
  background: var(--chat-surface);
}

.chat-card__head {
  padding: 9px 12px;
  background: var(--chat-primary);
  color: #04302B;
  font-size: 12.5px;
  font-weight: 800;
}

.chat-card__body { padding: 10px 12px 4px; }

/* ---- Satu kolom isian --------------------------------------------------- */
.chat-field { display: block; margin-bottom: 10px; }
.chat-field__label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--chat-ink-soft);
  margin-bottom: 3px;
}
.chat-field__input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--chat-line-strong);
  border-radius: 8px;
  background: var(--chat-surface);
  color: var(--chat-ink);
}
.chat-field__input:focus {
  outline: none;
  border-color: var(--chat-primary);
  box-shadow: 0 0 0 3px rgb(20 184 166 / .18);
}
.chat-field__input.is-invalid { border-color: #DC2626; }

/* Checkbox: label di kanan kotak, bukan di atasnya seperti kolom lain. */
.chat-field--check { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-field--check .chat-field__label { margin: 0; order: 2; text-transform: none; font-size: 12.5px; }
.chat-field--check .chat-field__input { order: 1; width: auto; flex: none; }
.chat-field--check small { order: 3; flex-basis: 100%; }

.chat-field__hint { display: block; font-size: 11px; color: var(--chat-ink-soft); margin-top: 3px; }
.chat-field__error { display: block; font-size: 11px; color: #B91C1C; margin-top: 3px; font-weight: 600; }

/* ---- Peringatan bisnis ---------------------------------------------------
   Diberi warna amber, bukan abu: isinya hal yang rutin disalahpahami (kuota
   bukan batas per orang; kupon berlaku lintas cabang) dan salah paham di situ
   mahal. Ia harus terbaca sebelum jari sampai ke tombol. */
.chat-card__notes {
  margin: 0;
  padding: 8px 12px 8px 28px;
  background: #FFFBEB;
  border-top: 1px solid #FDE68A;
  font-size: 11.5px;
  line-height: 1.5;
  color: #92400E;
}
.chat-card__notes li + li { margin-top: 4px; }

/* ---- Tombol -------------------------------------------------------------- */
.chat-card__foot {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--chat-line);
  background: var(--chat-bg);
}
.chat-card__cancel,
.chat-card__confirm {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
}
.chat-card__cancel {
  background: var(--chat-surface);
  border-color: var(--chat-line-strong);
  color: var(--chat-ink-soft);
}
.chat-card__cancel:hover { border-color: var(--chat-ink-soft); color: var(--chat-ink); }
.chat-card__confirm {
  flex: 1;
  background: var(--chat-primary);
  color: #04302B;
}
.chat-card__confirm:hover { background: #2DD4BF; }
.chat-card__confirm:disabled,
.chat-card__cancel:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Keadaan akhir ------------------------------------------------------- */
.chat-card__result {
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 700;
  border-top: 1px solid var(--chat-line);
}
.chat-card.is-done { border-color: #16A34A; }
.chat-card.is-done .chat-card__result { background: #DCFCE7; color: #166534; }
.chat-card.is-rejected { border-color: var(--chat-line-strong); }
.chat-card.is-rejected .chat-card__result { background: #FEE2E2; color: #991B1B; }

/* Kartu yang sudah selesai diredupkan supaya mata langsung ke percakapan
   terbaru, bukan ke kartu lama yang tidak bisa diapa-apakan lagi. */
.chat-card.is-done .chat-card__body,
.chat-card.is-rejected .chat-card__body,
.chat-card.is-done .chat-card__foot,
.chat-card.is-rejected .chat-card__foot { opacity: .55; }

/* ---- HP: panel jadi lembar penuh ---------------------------------------
   Titik henti 767.98px, bukan 560px — itu lebar tempat situs publik menukar
   navbar atas dengan .pub-bottomnav mengambang. Di bawah lebar itu tombol
   chat HARUS naik, kalau tidak ia tertimbun bar navigasi dan tidak bisa
   diklik sama sekali (terbukti: klik .chat-fab gagal, pointer-nya diambil
   .pub-bottomnav).

   Dua sistem memakai nama variabel berbeda untuk tinggi bar itu, dan widget
   ini tidak boleh bergantung pada salah satunya — jadi keduanya disebut,
   dengan cadangan 64px kalau tak satu pun ada. */
@media (max-width: 767.98px) {
  .chat-widget {
    right: 14px;
    bottom: calc(var(--bottomnav-height, var(--g-bottomnav-height, 64px)) + 22px);
  }

  .chat-panel {
    position: fixed;
    inset: 0;
    width: auto; max-width: none;
    height: auto; max-height: none;
    border-radius: 0;
    border: none;
  }
  .chat-widget.is-open .chat-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgb(15 23 42 / .45);
  }
  /* Tombol mengambang disembunyikan saat panel penuh — tombol tutup di header
     sudah mengambil perannya, dan dua tombol tutup membingungkan. */
  .chat-widget.is-open .chat-fab { display: none; }
}

/* ---- Cetak: widget tidak pernah ikut tercetak -------------------------- */
@media print {
  .chat-widget { display: none !important; }
}