/* Widget "Junio" - asisten AI (powered by AiNesia) di setiap halaman. Dipakai bersama oleh
   index.html DAN semua halaman statis artikel (lihat scripts/lib/layout.js), makanya file ini
   terpisah dari style.css - satu sumber, satu <link> di kedua template.
   Gaya: Material 3 Expressive di atas kaca cair ala Apple (frosted glass, blob morphing) - warna
   NETRAL (--surface, --border, --bg, --text, --muted, dst dari style.css) tetap dipakai supaya
   menyatu dengan situs, tapi warna AKSEN Junio SENGAJA ungu (--junio-purple di bawah), BUKAN
   --accent hijau zaitun situs - permintaan eksplisit supaya identitas Junio (bubble, tombol
   kirim, chip, fokus komposer, dst) beda dari elemen aksen lain di situs. Setiap elemen
   interaktif (tombol, chip, popup) punya animasi masuk dan/atau feedback hover/tekan sendiri -
   "tiap aksi harus terasa fluid", bukan cuma state statis yang berubah instan.

   Posisi: fab-wrap, quick-ask, panel, dan toast masing-masing position:fixed independen (BUKAN
   flex children dari satu container yang diposisikan). Ikon AI sendiri TIDAK bisa diseret -
   fixed di kanan-bawah, ditumpuk tepat di atas back-to-top/summarize-fab (lihat
   computeDefaultBottomPx() di junio-widget.js), sama seperti tombol mengambang lain di situs
   ini - jadi posisi quick-ask/panel/toast dihitung ulang relatif terhadap posisi fab itu (lihat
   positionNearFab()), tapi posisi fab sendiri konsisten, bukan berpindah-pindah. */

.junio-root{
  font-family:'Plus Jakarta Sans', sans-serif;
  /* Warna "primary" MD3 Junio - ungu, dipakai di SEMUA elemen aksen widget ini (bubble pengguna,
     tombol kirim, chip, fokus komposer, dst), bukan cuma ikon FAB seperti sebelumnya. */
  --junio-purple: #8B5CF6;
  --junio-purple-2: #6D28D9;
  --junio-purple-rgb: 139,92,246;
  --junio-on-primary: #fff;
}

/* ---------- FAB (blob cair, posisi fixed - lihat catatan di atas) ---------- */
.junio-fab-wrap{
  position:fixed; z-index:901; right:1.25rem; bottom:1.25rem;
  display:flex; align-items:center; gap:.55rem;
  transition:opacity .32s ease, transform .38s cubic-bezier(.34,1.56,.64,1), filter .32s ease;
}
/* Menghilang (bukan cuma diam di belakang panel) begitu obrolan dibuka - gaya liquid: menciut
   sekaligus "melebur" (blur naik lalu opacity ke 0) alih-alih sekadar fade biasa, jadi tetap
   terasa seperti bagian dari animasi buka panel (lihat clip-path morph di openPanel()), bukan
   dua elemen terpisah yang kebetulan bertukar tampil. */
.junio-fab-wrap.is-panel-open{
  opacity:0; transform:scale(.35); filter:blur(6px); pointer-events:none;
}
@media (max-width:640px){ .junio-fab-wrap{ right:.9rem; bottom:1rem; } }

.junio-fab{
  position:relative; width:60px; height:60px; border:none; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; -webkit-tap-highlight-color:transparent;
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  background:linear-gradient(135deg, var(--junio-purple), var(--junio-purple-2));
  box-shadow:0 10px 28px rgba(var(--junio-purple-rgb),.4), 0 2px 8px rgba(0,0,0,.18);
  animation:junio-blob 7s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
/* Blob "kembar" tembus pandang di belakang FAB utama - dua ikon bertumpuk PERSIS saat diam, tapi
   jalan dengan seed animasi berbeda dari .junio-fab sendiri (durasi 5.4s bukan 7s, arah reverse,
   easing kurva M3 Emphasized cubic-bezier(.2,0,0,1) - lihat skill material-3 soal kenapa CSS
   easing/duration, bukan spring, yang jadi token motion yang benar di web) supaya fasenya terus
   melenceng dari yang utama - sisi blob transparan ini "mengintip" dari balik bentuk utama,
   kesan cair berlapis, bukan cuma satu blob solid. */
.junio-fab::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  background:linear-gradient(135deg, var(--junio-purple), var(--junio-purple-2));
  opacity:.5;
  animation:junio-blob 5.4s cubic-bezier(.2,0,0,1) infinite reverse;
}
.junio-fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 34px rgba(var(--junio-purple-rgb),.5); }
.junio-fab:active{ transform:translateY(0) scale(.96); }
.junio-fab svg{ width:24px; height:24px; position:relative; z-index:2; }
/* Label "AI" kecil di bulan sabit - supaya ikonnya sendiri (tanpa perlu baca label/tooltip)
   sudah jelas ini fitur AI, bukan sekadar toggle mode gelap/terang (path SVG-nya memang sama
   persis, lihat catatan MOON_ICON di JS) - beda dari .junio-fab-dot (notifikasi "belum dibuka")
   yang hilang setelah dipakai, badge ini identitas permanen jadi TIDAK pernah disembunyikan.
   Posisi PERSIS di atas cekungan bulan sabit (celah kosong antara dua ujung sabit di kuadran
   kanan-atas ikon, lihat MOON_ICON: busur dalamnya membentang dari ~(11,3) ke ~(21,13) pada
   viewBox 24x24) - bukan di sudut tombol. */
.junio-fab-ai-badge{
  position:absolute; top:14px; right:9px; z-index:3; pointer-events:none;
  background:#fff; color:var(--junio-purple-2);
  font-family:'Sora', sans-serif; font-size:.5rem; font-weight:800; letter-spacing:.03em;
  padding:.06rem .3rem; border-radius:999px; line-height:1.3;
  box-shadow:0 1px 5px rgba(0,0,0,.3);
}
.junio-fab.is-open{ box-shadow:0 6px 18px rgba(var(--junio-purple-rgb),.32); }
.junio-fab.is-unavailable{ animation:junio-shake .5s ease; }

@keyframes junio-blob{
  0%,100%{ border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; }
  25%{ border-radius:58% 42% 39% 61% / 55% 60% 40% 45%; }
  50%{ border-radius:50% 50% 33% 67% / 62% 38% 62% 38%; }
  75%{ border-radius:38% 62% 55% 45% / 44% 52% 48% 56%; }
}
@keyframes junio-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px) rotate(-4deg); }
  40%{ transform:translateX(5px) rotate(3deg); }
  60%{ transform:translateX(-4px) rotate(-2deg); }
  80%{ transform:translateX(3px) rotate(1deg); }
}

/* ---------- Highlight perhatian (sekali per kunjungan halaman baru, HANYA untuk pengunjung yang
   belum PERNAH menekan ikon Junio - lihat triggerAttentionHighlight() di JS). Beda dari
   label/dot yang sudah pulsing terus-menerus: ini dorongan visual ekstra yang lewat sekali lalu
   berhenti, bukan animasi permanen, supaya tidak berlebihan. Ring-nya numpang di .junio-fab-ping
   yang sudah ada di markup (dipakai juga untuk state "checking") - keyframes junio-ping sudah
   pas untuk efek ini, tidak perlu dibuat ulang. */
.junio-fab.is-attention{ animation: junio-blob 7s ease-in-out infinite, junio-attention-bounce 1.1s ease-in-out 2; }
.junio-fab.is-attention .junio-fab-ping{ animation: junio-ping 1.1s ease-out 2; }
@keyframes junio-attention-bounce{
  0%,100%{ transform:translateY(0) scale(1); }
  30%{ transform:translateY(-9px) scale(1.08); }
  50%{ transform:translateY(0) scale(.97); }
  70%{ transform:translateY(-3px) scale(1.03); }
}

/* Loading/checking (health-check sebelum panel dibuka).
   Desktop: cincin "ping" sederhana (perilaku lama, sengaja tidak diubah - "sudah bagus"). */
.junio-fab.is-checking{ cursor:wait; animation:junio-blob 1.4s ease-in-out infinite; }
.junio-fab-ping{
  position:absolute; inset:-6px; border-radius:inherit; border:2px solid rgba(var(--junio-purple-rgb),.55);
  opacity:0; pointer-events:none;
}
.junio-fab.is-checking .junio-fab-ping{ animation:junio-ping 1s ease-out infinite; }
@keyframes junio-ping{
  0%{ transform:scale(.85); opacity:.8; }
  100%{ transform:scale(1.55); opacity:0; }
}
/* HP: cincin conic-gradient berputar + ikon "goyang" - lebih hidup untuk layar sentuh. */
@media (max-width:640px){
  .junio-fab.is-checking{ animation:junio-blob 1.6s ease-in-out infinite; }
  .junio-fab.is-checking .junio-fab-ping{ animation:none; opacity:0; }
  .junio-fab.is-checking::before{
    content:''; position:absolute; inset:-7px; border-radius:50%; padding:3px;
    background:conic-gradient(from 0deg, transparent 0deg, rgba(var(--junio-purple-rgb),.95) 130deg, transparent 230deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:junio-spin .85s linear infinite;
  }
  .junio-fab.is-checking svg{ animation:junio-icon-wiggle .6s ease-in-out infinite; }
}
@keyframes junio-spin{ to{ transform:rotate(360deg); } }
@keyframes junio-icon-wiggle{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(.86) rotate(18deg); }
}

/* Titik notifikasi + label "Tanya AI" - hint persisten sampai pengguna pernah membuka panel
   sekali (lihat junio-seen di localStorage), supaya ikon AI jelas beda dari toggle mode
   gelap/terang di nav. */
.junio-fab-dot{
  position:absolute; top:1px; right:2px; width:13px; height:13px; border-radius:50%;
  background:#FF6B57; border:2px solid var(--bg); pointer-events:none;
  animation:junio-dot-pulse 1.7s ease-in-out infinite;
}
@keyframes junio-dot-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.3); opacity:.65; }
}
.junio-fab-label{
  white-space:nowrap; background:var(--surface); color:var(--text); border:1px solid var(--border);
  font-size:.8rem; font-weight:700; padding:.5rem .9rem; border-radius:999px 999px 6px 999px;
  box-shadow:0 8px 20px rgba(0,0,0,.22); pointer-events:none;
  animation:junio-label-pulse 2.6s ease-in-out infinite;
}
@keyframes junio-label-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.04); }
}
.junio-fab-wrap.is-dismissed .junio-fab-label,
.junio-fab-wrap.is-dismissed .junio-fab-dot{ display:none; }
@media (max-width:480px){ .junio-fab-label{ display:none; } }

/* ---------- Hint "sesekali" (lihat showHintBubble() di JS) - blob kecil ala percakapan, beda
   dari quick-ask di bawah (yang punya chip pertanyaan): ini murni ajakan singkat, cute & fluid,
   bahasa warna sama seperti fab (gradient ungu), auto-hilang sendiri kalau tidak disentuh. */
.junio-hint-bubble{
  position:fixed; z-index:899; max-width:230px; display:flex; align-items:center; gap:.5rem;
  padding:.65rem .6rem .65rem .9rem; cursor:pointer;
  background:linear-gradient(135deg, var(--junio-purple), var(--junio-purple-2)); color:#fff;
  border-radius:22px 22px 6px 22px; box-shadow:0 12px 30px rgba(var(--junio-purple-rgb),.4);
  opacity:0; transform:scale(.6) translateY(10px); transform-origin:bottom right;
  transition:opacity .3s ease, transform .42s cubic-bezier(.34,1.56,.64,1);
}
.junio-hint-bubble.is-in{
  opacity:1; transform:scale(1) translateY(0);
  animation:junio-hint-bob 2.6s ease-in-out .5s infinite;
}
.junio-hint-bubble.is-leaving{
  opacity:0; transform:scale(.7) translateY(8px);
  transition:opacity .22s ease, transform .22s ease; animation:none;
}
.junio-hint-bubble span{ font-size:.8rem; font-weight:600; line-height:1.35; }
.junio-hint-close{
  flex-shrink:0; width:1.35rem; height:1.35rem; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.22); color:#fff; font-size:.85rem; line-height:1;
  transition:background .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.junio-hint-close:hover{ background:rgba(255,255,255,.34); transform:scale(1.12); }
@keyframes junio-hint-bob{
  0%,100%{ transform:scale(1) translateY(0); }
  50%{ transform:scale(1) translateY(-4px); }
}
@media (max-width:640px){ .junio-hint-bubble{ max-width:200px; } }

/* ---------- Quick-ask popup ---------- */
/* Animasi masuk dipasang LANGSUNG di selector dasar (bukan lewat class terpisah) - toggle
   [hidden]->tampil lewat display:none->block ini yang me-restart animasi setiap kali (pola yang
   sama dipakai .junio-toast di bawah), jadi tidak perlu ubah JS sama sekali untuk dapat entrance
   yang fluid tiap popup ini muncul. */
.junio-quick-ask{
  position:fixed; z-index:900; max-width:250px; padding:.9rem 1rem; border-radius:20px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 14px 34px rgba(0,0,0,.22);
  animation:junio-quick-in .42s cubic-bezier(.34,1.56,.64,1) both;
}
.junio-quick-ask[hidden]{ display:none; }
@keyframes junio-quick-in{
  0%{ opacity:0; transform:scale(.85) translateY(8px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
.junio-quick-ask p{ font-size:.86rem; color:var(--text); margin:0 1.2rem .55rem 0; line-height:1.4; }
.junio-quick-ask-close{
  position:absolute; top:.5rem; right:.5rem; width:1.5rem; height:1.5rem; border:none; cursor:pointer;
  border-radius:50%; background:var(--surface-2); color:var(--muted); font-size:.9rem; line-height:1;
  transition:background .2s ease, color .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.junio-quick-ask-close:hover{ background:rgba(var(--junio-purple-rgb),.16); color:var(--junio-purple); transform:scale(1.12); }
.junio-quick-ask-close:active{ transform:scale(.9); }
.junio-quick-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.junio-quick-chips button{
  border:1px solid var(--border); background:rgba(var(--junio-purple-rgb),.12); color:var(--junio-purple);
  border-radius:999px; padding:.4rem .7rem; font-size:.76rem; font-weight:600; cursor:pointer;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.junio-quick-chips button:hover{ background:rgba(var(--junio-purple-rgb),.22); transform:translateY(-2px); }
.junio-quick-chips button:active{ transform:translateY(0) scale(.96); }

/* ---------- Panel ---------- */
/* Radius 28px = token shape "extra-large" MD3 (dialog/bottom-sheet). Background TETAP polos
   --surface (permintaan eksplisit: tanpa gradasi ungu) - identitas ungu Junio cukup lewat FAB,
   bubble, dan tombol, bukan lewat warna latar jendela obrolannya sendiri. */
.junio-panel{
  position:fixed; z-index:900; right:1.25rem; bottom:5.75rem;
  width:min(392px, calc(100vw - 1.75rem)); height:min(600px, calc(100vh - 7.5rem));
  min-width:320px; min-height:400px;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border); border-radius:28px;
  box-shadow:0 30px 70px rgba(0,0,0,.35), 0 4px 18px rgba(0,0,0,.2);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.junio-panel[hidden]{ display:none; }

/* Backdrop di belakang panel - HANYA dipakai di HP (lihat di bawah), mengikuti pola modal yang
   sudah ada di situs ini (.more-articles-modal/.update-modal): dim + blur belakang, klik untuk
   menutup. Di desktop tidak dipakai sama sekali (panel mengambang tanpa backdrop, "sudah bagus"). */
.junio-backdrop{
  position:fixed; inset:0; z-index:899; background:rgba(0,0,0,.6);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s, backdrop-filter .45s ease;
}
.junio-backdrop.is-open{ opacity:1; visibility:visible; pointer-events:auto; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
@media (min-width:641px){ .junio-backdrop{ display:none; } }

/* HP: panel BUKAN freeform lagi (draggable+resizable itu terasa "ribet" di layar kecil dan
   pernah kepin di posisi salah saat scroll) - sekarang jadi bottom-sheet yang meluncur dari
   bawah, PERSIS pola ".more-articles-modal" (popup "artikel lainnya") yang sudah dipakai situs
   ini di halaman artikel: fixed di tengah-bawah, slide-up, backdrop dim+blur. Sengaja TIDAK
   pakai atribut [hidden] di sini (dampaknya display:none tidak punya "titik tengah" untuk
   ditransisikan) - buka/tutup ditoggle lewat class .is-open saja (lihat openPanel/closePanel). */
@media (max-width:640px){
  .junio-panel{
    left:50%; right:auto; top:auto; bottom:0;
    transform:translate(-50%, 100%);
    width:min(420px, calc(100vw - 1rem)); height:auto; max-height:82vh;
    min-width:0; min-height:0;
    border-radius:28px 28px 0 0;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, visibility .3s;
    /* Cegah scroll "bocor" ke halaman di belakang begitu isi obrolan mentok atas/bawah -
       lapisan CSS (browser modern); lapisan JS (lockBodyScroll di junio-widget.js) menutupi
       Safari lama yang belum dukung ini penuh. */
    overscroll-behavior:contain;
  }
  .junio-panel.is-open{
    transform:translate(-50%, 0); opacity:1; visibility:visible; pointer-events:auto;
  }
  .junio-panel-head{ cursor:default; }
}

.junio-panel-head{
  display:flex; align-items:center; gap:.65rem; padding:.9rem 1rem;
  border-bottom:1px solid var(--border); cursor:grab; user-select:none;
}
.junio-panel-head:active{ cursor:grabbing; }
.junio-avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--junio-purple), var(--junio-purple-2));
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.junio-avatar svg{ width:18px; height:18px; }
.junio-title{ display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.junio-title strong{ font-family:'Sora', sans-serif; font-size:.95rem; color:var(--text); }
.junio-title span{ font-size:.72rem; color:var(--muted); }
.junio-head-actions{ display:flex; gap:.3rem; }
.junio-head-actions button{
  width:1.9rem; height:1.9rem; border-radius:50%; border:1px solid var(--border); background:var(--surface-2);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.junio-head-actions button:hover{ background:rgba(var(--junio-purple-rgb),.16); color:var(--junio-purple); transform:scale(1.1); }
.junio-head-actions button:active{ transform:scale(.9); }

.junio-messages{
  flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.55rem;
  scroll-behavior:smooth; overscroll-behavior:contain;
}
.junio-messages::-webkit-scrollbar{ width:6px; }
.junio-messages::-webkit-scrollbar-thumb{ background:var(--border); border-radius:99px; }

.junio-bubble-row{ display:flex; }
.junio-bubble-row.from-user{ justify-content:flex-end; }
.junio-bubble-row.from-ai{ justify-content:flex-start; }
.junio-bubble{
  max-width:85%; padding:.6rem .85rem; border-radius:18px; font-size:.86rem; line-height:1.5;
  word-wrap:break-word; overflow-wrap:break-word;
}
.junio-bubble-row.from-user .junio-bubble{
  background:linear-gradient(135deg, var(--junio-purple), var(--junio-purple-2));
  color:var(--junio-on-primary); border-bottom-right-radius:6px;
}
.junio-bubble-row.from-ai .junio-bubble{
  background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:6px;
}
.junio-bubble p{ margin:0 0 .5em; }
.junio-bubble p:last-child{ margin-bottom:0; }
.junio-bubble a{ color:var(--junio-purple); text-decoration:underline; }
.junio-bubble pre{
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.6rem .7rem;
  overflow-x:auto; font-size:.78rem;
}
.junio-bubble code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em; }
.junio-bubble :not(pre) > code{ background:rgba(var(--junio-purple-rgb),.15); padding:.1em .35em; border-radius:5px; }
.junio-bubble ul, .junio-bubble ol{ margin:0 0 .5em 1.1em; padding:0; }
.junio-bubble h1, .junio-bubble h2, .junio-bubble h3{ font-family:'Sora', sans-serif; font-size:1em; margin:.3em 0; }
.junio-bubble blockquote{ border-left:3px solid var(--junio-purple); margin:.4em 0; padding-left:.6em; color:var(--muted); }

/* Tag provider kecil di bawah bubble jawaban terakhir (lihat addAiBubble() di junio-widget.js) -
   menunjukkan provider AI mana yang benar-benar menjawab REQUEST INI, terlepas dari label
   "Powered by ..." di header panel yang cuma menunjukkan provider PALING BARU dipakai. */
.junio-provider-tag{
  display:block; margin-top:.35rem; font-size:.68rem; color:var(--muted); opacity:.75;
}

.junio-bubble-in{ animation:junio-bubble-in .38s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes junio-bubble-in{
  0%{ opacity:0; transform:translateY(10px) scale(.94); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

.junio-typing{
  display:inline-flex; align-items:center; gap:4px; padding:.65rem .9rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:18px; border-bottom-left-radius:6px;
}
.junio-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--junio-purple);
  animation:junio-typing-bounce 1.1s ease-in-out infinite;
}
.junio-typing span:nth-child(2){ animation-delay:.15s; }
.junio-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes junio-typing-bounce{
  0%,60%,100%{ transform:translateY(0); border-radius:50%; opacity:.6; }
  30%{ transform:translateY(-5px); border-radius:40%; opacity:1; }
}

.junio-scope-actions{ display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.junio-scope-actions button{
  border-radius:999px; padding:.45rem .85rem; font-size:.8rem; font-weight:700; cursor:pointer;
  border:1px solid var(--border); transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.junio-scope-actions .junio-scope-yes{
  background:linear-gradient(135deg, var(--junio-purple), var(--junio-purple-2));
  color:var(--junio-on-primary); border-color:transparent;
}
.junio-scope-actions .junio-scope-no{ background:var(--surface); color:var(--text); }
.junio-scope-actions button:hover{ transform:translateY(-2px); }
.junio-scope-actions button:active{ transform:translateY(0) scale(.96); }
.junio-scope-actions button:disabled{ opacity:.5; cursor:default; transform:none; }

/* Saran pertanyaan lanjutan (diusulkan AI lewat blok JSON di akhir balasan, lihat
   extractSuggestions() di src/worker.js) - chip terpisah dari bubble jawaban, kolom teks bebas
   tetap bisa dipakai berdampingan. Animasi masuk pakai .junio-bubble-in yang sama dengan
   bubble/tombol kontak/scope-expansion (dipasang di kontainer lewat JS) - satu bahasa gerak. */
.junio-suggestions{ display:flex; flex-wrap:wrap; gap:.4rem; max-width:85%; }
/* SENGAJA tetap hijau (--accent situs), bukan ungu seperti elemen Junio lain - permintaan
   eksplisit supaya saran pertanyaan lanjutan ini masih terasa "terintegrasi" dengan aksen hijau
   yang dipakai di sisa situs (CTA, tautan, dst), bukan cuma milik Junio sendiri. */
.junio-suggestions button{
  border:1px solid var(--border); background:rgba(var(--accent-rgb),.12); color:var(--accent);
  border-radius:999px; padding:.4rem .75rem; font-size:.78rem; font-weight:600; cursor:pointer;
  text-align:left; transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.junio-suggestions button:hover{ background:rgba(var(--accent-rgb),.22); transform:translateY(-2px); }
.junio-suggestions button:active{ transform:translateY(0) scale(.96); }

/* Tombol kontak (WA/telepon/email/sosmed) - diusulkan AI lewat blok JSON di akhir balasan
   (lihat extractContactActions() di junio-shared.js), sudah divalidasi terhadap data kontak
   ASLI sebelum dirender (lihat renderContactActions() di junio-widget.js). Animasi masuknya
   SENGAJA disamakan dengan .junio-bubble-in (dipasang di kontainer lewat JS) - bubble jawaban,
   tombol saran, dan tombol scope-expansion semua pakai animasi masuk yang sama persis, supaya
   terasa satu bahasa gerak yang konsisten, bukan tiap elemen punya animasinya sendiri-sendiri. */
.junio-contact-actions{ display:flex; flex-wrap:wrap; gap:.5rem; max-width:90%; }
.junio-contact-btn{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  border-radius:999px; padding:.45rem .85rem .45rem .6rem; font-size:.8rem; font-weight:700;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .2s ease;
}
.junio-contact-btn svg{ width:16px; height:16px; flex-shrink:0; }
.junio-contact-btn:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 8px 18px rgba(var(--junio-purple-rgb),.22); }
.junio-contact-btn:active{ transform:translateY(0) scale(.97); }
.junio-contact-btn.is-whatsapp{ background:#25D366; color:#0b3b1e; border-color:transparent; }
.junio-contact-btn.is-whatsapp:hover{ box-shadow:0 8px 20px rgba(37,211,102,.45); }

.junio-composer{
  display:flex; align-items:flex-end; gap:.5rem; padding:.75rem; border-top:1px solid var(--border);
}
.junio-composer textarea{
  flex:1; resize:none; max-height:120px; border-radius:16px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); padding:.6rem .8rem; font:inherit; font-size:.86rem;
  line-height:1.4; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, height .15s ease;
}
.junio-composer textarea:focus{ border-color:var(--junio-purple); box-shadow:0 0 0 3px rgba(var(--junio-purple-rgb),.16); }
.junio-composer button{
  width:2.5rem; height:2.5rem; flex-shrink:0; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--junio-purple), var(--junio-purple-2)); color:var(--junio-on-primary);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, box-shadow .25s ease;
}
.junio-composer button:hover{ transform:scale(1.06); box-shadow:0 6px 16px rgba(var(--junio-purple-rgb),.4); }
.junio-composer button:active{ transform:scale(.92); }
.junio-composer button:disabled{ opacity:.45; cursor:default; transform:none; box-shadow:none; }
.junio-composer svg{ width:16px; height:16px; }

/* Grip resize - panel selalu ditambatkan di kanan (fab tidak lagi bisa pindah sisi), jadi
   handle-nya selalu di sudut kiri-bawah. Desktop: garis diagonal samar (perilaku lama, sengaja
   tidak diubah - "sudah bagus"). */
.junio-resize-handle{
  position:absolute; left:6px; bottom:6px; width:16px; height:16px; cursor:nwse-resize;
  opacity:.45; touch-action:none;
}
.junio-resize-handle::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 40%, var(--muted) 40%, var(--muted) 48%, transparent 48%,
      transparent 65%, var(--muted) 65%, var(--muted) 73%, transparent 73%);
}
/* HP: panel bukan freeform lagi (lihat komentar di .junio-panel media query di atas) - tidak ada
   yang perlu diresize. */
@media (max-width:640px){ .junio-resize-handle{ display:none; } }

/* ---------- Toast ---------- */
.junio-toast{
  position:fixed; right:1.25rem; bottom:6.6rem; z-index:950; max-width:280px;
  background:var(--pop-bg); color:var(--pop-text); border-radius:14px; padding:.65rem .9rem;
  font-size:.82rem; font-weight:600; box-shadow:0 14px 30px rgba(0,0,0,.3);
  animation:junio-toast-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
.junio-toast[hidden]{ display:none; }
@keyframes junio-toast-in{
  0%{ opacity:0; transform:translateY(10px) scale(.92); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@media (max-width:640px){ .junio-toast{ right:.9rem; left:.9rem; max-width:none; bottom:5.5rem; } }