/*
 * Asisten Buton — widget tanya-jawab untuk template butonkab-2026.
 * Semua aturan diikat ke .b26-asisten sehingga template lain tidak terpengaruh.
 * Tidak memakai font atau pustaka eksternal.
 */

.b26-asisten,
.b26-asisten *,
.b26-asisten *::before,
.b26-asisten *::after {
  box-sizing: border-box;
}

.b26-asisten {
  position: fixed;
  right: 34px;
  bottom: 0;
  z-index: 1080;
  width: 150px;
  height: 150px;
  /* ukuran riak: mulai -> akhir (ikut mengecil di layar kecil) */
  --b26-riak-awal: 72px;
  --b26-riak-akhir: 180px;
  font-family: inherit;
  line-height: 1.5;
}

/* Saat panel menu ponsel butonkab-2026 terbuka (kelas dipasang oleh
   butonkab-2026.js), launcher disembunyikan agar tidak menutupi tautan menu. */
body.b26-menu-terbuka .b26-asisten {
  display: none;
}

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

.b26-asisten-buka {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* riak lingkaran di belakang ilustrasi (padanan HELITA) */
.b26-asisten-buka::before,
.b26-asisten-buka::after,
.b26-asisten-riak {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--b26-riak-awal, 72px);
  height: var(--b26-riak-awal, 72px);
  border-radius: 50%;
  transform: translateX(-50%);
  background-color: var(--b26-brand, #1e3a5f);
  background-image: linear-gradient(90deg, var(--b26-brand, #1e3a5f), var(--b26-gold, #f0a92b));
  opacity: .4;
  pointer-events: none;
  z-index: 0;
  animation: b26-asisten-riak 1.8s ease-out infinite;
}

.b26-asisten-buka::before { animation-delay: 0s; }
.b26-asisten-buka::after  { animation-delay: .6s; }
.b26-asisten-riak         { animation-delay: 1.2s; }

@keyframes b26-asisten-riak {
  0%   { width: var(--b26-riak-awal, 72px);   height: var(--b26-riak-awal, 72px);   opacity: .55; }
  60%  { width: var(--b26-riak-akhir, 180px); height: var(--b26-riak-akhir, 180px); opacity: 0; }
  100% { width: var(--b26-riak-akhir, 180px); height: var(--b26-riak-akhir, 180px); opacity: 0; }
}

/* figur = dua lapis gambar (badan + lengan) yang menumpuk persis */
.b26-asisten-figur {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 18px rgba(11, 31, 55, .22));
  transition: transform .3s ease, filter .3s ease;
  pointer-events: none;
}

.b26-asisten-figur img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.b26-asisten-foto {
  z-index: 1;
}

/* Lengan berayun mengelilingi bahu: 74,09% 69,55% = titik (326,306) pada
   kanvas 440 px. Gerakan hanya sesekali supaya tidak mengganggu. */
.b26-asisten-lengan {
  z-index: 0;
  transform-origin: 74.09% 69.55%;
  animation: b26-asisten-lambai 7s ease-in-out infinite;
}

@keyframes b26-asisten-lambai {
  0%, 58%   { transform: rotate(0deg); }
  62%       { transform: rotate(-9deg); }
  66%       { transform: rotate(7deg); }
  70%       { transform: rotate(-9deg); }
  74%       { transform: rotate(7deg); }
  78%       { transform: rotate(-6deg); }
  82%       { transform: rotate(3deg); }
  86%, 100% { transform: rotate(0deg); }
}

.b26-asisten-buka:hover .b26-asisten-figur,
.b26-asisten-buka:focus-visible .b26-asisten-figur {
  transform: scale(1.06) translateY(-2px);
}

.b26-asisten-buka:focus-visible {
  outline: none;
}

.b26-asisten-buka:focus-visible .b26-asisten-figur {
  filter: drop-shadow(0 0 0 3px rgba(30, 120, 200, .55)) drop-shadow(0 10px 18px rgba(11, 31, 55, .22));
}

.b26-asisten-tip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 12px;
  transform: translateX(-50%) translateY(-6px);
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--b26-brand, #1e3a5f);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  box-shadow: 0 8px 24px rgba(4, 79, 160, .25);
}

.b26-asisten-tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--b26-gold, #f0a92b);
}

.b26-asisten-buka:hover .b26-asisten-tip,
.b26-asisten-buka:focus-visible .b26-asisten-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* saat panel terbuka, figur disembunyikan agar tidak bertabrakan */
.b26-asisten--terbuka .b26-asisten-buka {
  display: none;
}

/* ---------------------------------------------------------------- panel */

.b26-asisten-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  width: 380px;
  height: min(560px, calc(100vh - 2.5rem));
  overflow: hidden;
  border-radius: 1.1rem;
  background: #f0f4f8;
  box-shadow: 0 24px 60px -18px rgba(11, 31, 55, .5), 0 4px 16px rgba(11, 31, 55, .12);
  transform-origin: bottom right;
  animation: b26-asisten-muncul .2s ease-out;
}

.b26-asisten-panel[hidden] {
  display: none !important;
}

@keyframes b26-asisten-muncul {
  from { opacity: 0; transform: translateY(.6rem) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------- kepala */

.b26-asisten-kepala {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem .9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--b26-brand, #1e3a5f) 0%, #2b5f8f 60%, var(--b26-sky, #1e78c8) 100%);
  overflow: hidden;
}

.b26-asisten-kepala::after {
  content: "";
  position: absolute;
  right: -2rem;
  top: -2.5rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  pointer-events: none;
}

.b26-asisten-avatar {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  color: var(--b26-brand, #1e3a5f);
  background: var(--b26-gold, #f0a92b);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}

.b26-asisten-kepala-teks {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.b26-asisten-kepala-teks strong {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b26-asisten-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .1rem;
  font-size: .68rem;
  color: rgba(255, 255, 255, .78);
}

.b26-asisten-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
  animation: b26-asisten-hidup 2s ease-in-out infinite;
}

@keyframes b26-asisten-hidup {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.b26-asisten-aksi {
  position: relative;
  z-index: 1;
  display: flex;
  gap: .25rem;
}

.b26-asisten-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}

.b26-asisten-ikon:hover,
.b26-asisten-ikon:focus-visible {
  background: rgba(255, 255, 255, .28);
}

.b26-asisten-ikon:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .8);
  outline-offset: 1px;
}

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

.b26-asisten-pesan {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .9rem .8rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.b26-asisten-pesan::-webkit-scrollbar {
  width: 4px;
}

.b26-asisten-pesan::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #c5d4e0;
}

.b26-asisten-baris {
  display: flex;
  align-items: flex-end;
  gap: .45rem;
  animation: b26-asisten-masuk .18s ease-out;
}

.b26-asisten-baris--pengguna {
  flex-direction: row-reverse;
}

@keyframes b26-asisten-masuk {
  from { opacity: 0; transform: translateY(.35rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.b26-asisten-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--b26-brand, #1e3a5f);
  color: var(--b26-gold, #f0a92b);
}

.b26-asisten-baris--pengguna .b26-asisten-mini {
  background: var(--b26-gold, #f0a92b);
  color: var(--b26-brand, #1e3a5f);
}

.b26-asisten-gelembung {
  max-width: 82%;
  padding: .6rem .8rem;
  border-radius: .9rem;
  font-size: .82rem;
  color: #1e293b;
  background: #fff;
  border-bottom-left-radius: .25rem;
  box-shadow: 0 1px 3px rgba(11, 31, 55, .07), 0 0 0 1px rgba(11, 31, 55, .05);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.b26-asisten-baris--pengguna .b26-asisten-gelembung {
  color: #fff;
  background: linear-gradient(135deg, var(--b26-brand, #1e3a5f), #2b5f8f);
  border-bottom-left-radius: .9rem;
  border-bottom-right-radius: .25rem;
}

.b26-asisten-waktu {
  display: block;
  margin-top: .3rem;
  font-size: .64rem;
  opacity: .5;
}

.b26-asisten-sumber {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .5rem;
}

.b26-asisten-sumber a {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .22rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--b26-brand, #1e3a5f);
  background: var(--b26-brand-soft, #eaf1f9);
  text-decoration: none;
  border: 1px solid rgba(30, 58, 95, .12);
}

.b26-asisten-sumber a:hover {
  background: #dce9f7;
}

.b26-asisten-sumber a::after {
  content: "↗";
  font-size: .7rem;
}

.b26-asisten-mengetik {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .15rem 0;
}

.b26-asisten-mengetik span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--b26-brand, #1e3a5f);
  opacity: .45;
  animation: b26-asisten-ketik 1.2s infinite;
}

.b26-asisten-mengetik span:nth-child(2) { animation-delay: .2s; }
.b26-asisten-mengetik span:nth-child(3) { animation-delay: .4s; }

@keyframes b26-asisten-ketik {
  0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------------------------------------------------------------- saran */

.b26-asisten-saran {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: 0 .8rem .55rem;
}

.b26-asisten-saran:empty {
  display: none;
}

.b26-asisten-saran button {
  padding: .3rem .6rem;
  border: 1px solid rgba(30, 58, 95, .16);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--b26-brand, #1e3a5f);
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.b26-asisten-saran button:hover,
.b26-asisten-saran button:focus-visible {
  background: var(--b26-brand-soft, #eaf1f9);
  border-color: rgba(30, 58, 95, .3);
}

/* ---------------------------------------------------------------- form */

.b26-asisten-form {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  padding: .55rem .7rem .35rem;
  background: #fff;
  border-top: 1px solid #e2eaf1;
}

.b26-asisten-form textarea {
  flex: 1;
  min-height: 36px;
  max-height: 96px;
  padding: .45rem .6rem;
  border: 1.5px solid #e2eaf1;
  border-radius: .6rem;
  font: inherit;
  font-size: .82rem;
  line-height: 1.45;
  color: #1e293b;
  background: #f8fafc;
  outline: none;
  resize: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.b26-asisten-form textarea:focus {
  border-color: var(--b26-sky, #1e78c8);
  box-shadow: 0 0 0 3px rgba(30, 120, 200, .14);
  background: #fff;
}

.b26-asisten-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 0;
  border-radius: .6rem;
  color: #fff;
  background: var(--b26-brand, #1e3a5f);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}

.b26-asisten-form button[type="submit"]:hover:not(:disabled) {
  background: var(--b26-sky, #1e78c8);
  transform: scale(1.05);
}

.b26-asisten-form button[type="submit"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.b26-asisten-catatan {
  margin: 0;
  padding: 0 .8rem .55rem;
  font-size: .64rem;
  color: #94a3b8;
  text-align: center;
  background: #fff;
}

.b26-asisten-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- responsif */

@media (max-width: 991.98px) {
  .b26-asisten {
    right: 16px;
    width: 120px;
    height: 120px;
    --b26-riak-awal: 60px;
    --b26-riak-akhir: 150px;
  }

  .b26-asisten-tip {
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 9px;
  }

  .b26-asisten-tip::before {
    border-width: 6px;
  }
}

@media (max-width: 575.98px) {
  .b26-asisten {
    right: 12px;
    width: 96px;
    height: 96px;
    --b26-riak-awal: 48px;
    --b26-riak-akhir: 120px;
  }

  .b26-asisten-tip {
    display: none !important;
  }

  .b26-asisten-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    animation: none;
  }

  .b26-asisten-kepala {
    padding-top: max(.8rem, env(safe-area-inset-top));
  }

  .b26-asisten-form {
    padding-bottom: max(.35rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .b26-asisten-buka::before,
  .b26-asisten-buka::after,
  .b26-asisten-riak,
  .b26-asisten-lengan,
  .b26-asisten-status i,
  .b26-asisten-baris,
  .b26-asisten-panel {
    animation: none !important;
  }

  .b26-asisten-figur,
  .b26-asisten-tip {
    transition: none !important;
  }
}