/* Widget obrolan HERA — BSK Studio Bali (tone hijau BSK) */
:root {
  --hera-hijau: #6B7D5E;
  --hera-hijau-gelap: #5A6B4E;
  --hera-hijau-terang: #C9D4BA;
  --hera-teks: #2B3326;
  --hera-abu: #F6F7F4;
}
/* Font disamakan dengan situs BSK: 'Josefin Sans' (dimuat situs lewat @import di style-light.css).
   Bila situs belum memuatnya (mis. widget dipasang di tempat lain), widget.js menambahkan
   tautan Google Fonts-nya sendiri. */
#hera-widget, #hera-widget * {
  box-sizing: border-box;
  font-family: 'Josefin Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#hera-tombol {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px; border: 0; border-radius: 999px;
  background: var(--hera-hijau); color: #fff; font-size: 15px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(60, 70, 50, .28); cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
#hera-tombol:hover { background: var(--hera-hijau-gelap); transform: translateY(-1px); }
#hera-tombol svg { width: 20px; height: 20px; flex: none; }

#hera-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483001;
  width: 372px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 40px);
  display: none; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(40, 50, 35, .3);
  border: 1px solid rgba(107, 125, 94, .25);
}
#hera-panel.buka { display: flex; }

#hera-kepala {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  background: var(--hera-hijau); color: #fff;
}
#hera-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
#hera-avatar svg { width: 100%; height: 100%; display: block; }
/* cadangan bila pustaka avatar gagal dimuat */
#hera-avatar.cadangan::after { content: "H"; font-weight: 700; font-size: 16px; color: #fff; }
/* ayunan mata (satuan viewBox 0-100) — avatar kecil 38 px, jadi ditakar ulang
   supaya gerakannya terlihat (terukur ±5,8 satuan di setelan 4) */
#hera-avatar .mo-eyes { --mo-track-travel: 10px; }
#hera-kepala .nama { font-size: 15px; font-weight: 700; line-height: 1.15; }
#hera-kepala .ket { font-size: 11.5px; opacity: .9; }
#hera-tutup {
  margin-left: auto; background: rgba(255,255,255,.16); border: 0; color: #fff;
  width: 28px; height: 28px; border-radius: 8px; font-size: 16px; cursor: pointer; line-height: 1;
}
#hera-tutup:hover { background: rgba(255,255,255,.3); }

#hera-isi { flex: 1 1 auto; overflow-y: auto; padding: 14px; background: var(--hera-abu); }
.hera-pesan { display: flex; margin-bottom: 10px; }
.hera-pesan.hera-aku { justify-content: flex-end; }
.hera-balon {
  max-width: 84%; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  font-weight: 400; /* Josefin Sans 300 (bawaan situs) terlalu tipis di ukuran 14px */
  color: var(--hera-teks); background: #fff; border: 1px solid rgba(107,125,94,.18);
  white-space: pre-wrap; word-wrap: break-word;
}
.hera-aku .hera-balon { background: var(--hera-hijau); color: #fff; border-color: var(--hera-hijau); }
.hera-titik span {
  display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%;
  background: var(--hera-hijau); animation: hera-denyut 1.1s infinite ease-in-out;
}
.hera-titik span:nth-child(2) { animation-delay: .16s; }
.hera-titik span:nth-child(3) { animation-delay: .32s; }
@keyframes hera-denyut { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

#hera-cepat { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; background: var(--hera-abu); }
#hera-cepat button {
  border: 1px solid rgba(107,125,94,.4); background: #fff; color: var(--hera-hijau-gelap);
  font-size: 12.5px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
}
#hera-cepat button:hover { background: var(--hera-hijau-terang); }

#hera-kaki { border-top: 1px solid rgba(107,125,94,.18); background: #fff; padding: 10px 12px 8px; }
#hera-baris { display: flex; gap: 8px; align-items: flex-end; }
#hera-tulis {
  flex: 1 1 auto; resize: none; border: 1px solid rgba(107,125,94,.35); border-radius: 10px;
  padding: 9px 11px; font-size: 16px; line-height: 1.35; max-height: 96px; color: var(--hera-teks);
}
#hera-tulis:focus { outline: 2px solid rgba(107,125,94,.35); }
#hera-kirim {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: var(--hera-hijau); color: #fff; cursor: pointer;
}
#hera-kirim:hover { background: var(--hera-hijau-gelap); }
#hera-kirim:disabled { opacity: .5; cursor: not-allowed; }
#hera-catatan { margin: 7px 0 0; font-size: 11px; color: #7A8471; line-height: 1.35; }
#hera-catatan a { color: var(--hera-hijau-gelap); }

@media (max-width: 520px) {
  #hera-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: calc(100vh - 24px); }
  #hera-tombol { right: 12px; bottom: 12px; }
}