/* Komponen terisolasi, berada di atas tombol Q&A tanpa menimpa layout halaman. */
.portfolio-assistant { position: fixed; right: 22px; bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px)); z-index: 2400; width: min(320px, calc(100vw - 24px)); pointer-events: none; color: var(--title, #17203d); font-family: inherit; }
.portfolio-assistant [hidden], .portfolio-assistant[hidden] { display: none !important; }
.assistant-panel { display: flex; flex-direction: column; align-items: flex-end; }
.assistant-bubble { pointer-events: auto; width: 100%; padding: 18px; border: 1px solid rgba(126, 156, 246, 0.28); border-radius: 22px 22px 8px 22px; background: rgba(249, 252, 255, 0.97); box-shadow: 0 14px 42px rgba(73, 88, 165, 0.18); max-height: min(440px, calc(100dvh - 240px)); overflow-y: auto; }
.assistant-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: var(--accent, #357bfa); }
.assistant-heading button { border: 0; background: transparent; color: inherit; font-size: 1.6rem; width: 32px; height: 32px; cursor: pointer; }
.assistant-message { font-size: 0.9rem; line-height: 1.65; margin: 10px 0 16px; white-space: pre-line; }
.assistant-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.assistant-actions button, .assistant-actions a, .assistant-reopen { font: inherit; font-size: 0.78rem; border: 1px solid rgba(118, 151, 241, 0.28); border-radius: 12px; padding: 10px 12px; text-decoration: none; background: rgba(106, 148, 255, 0.08); color: inherit; cursor: pointer; }
.assistant-actions [data-assistant="listen"] { width: 100%; background: linear-gradient(120deg, #2684f5, #8274ec); color: white; border: 0; }
/* Setelah selesai, navigasi tampil dulu lalu aksi untuk mengulang cerita. */
.portfolio-assistant[data-state="finished"] [data-assistant="listen"] { order: 4; }
.assistant-actions button:disabled { opacity: 0.65; cursor: default; }
.assistant-character { display: block; width: 112px; height: 112px; padding: 0; border: 0; background: transparent; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.assistant-character img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(79, 107, 202, 0.2)); }
.assistant-sleep-hint { font-size: 0.75rem; padding: 6px 10px; border-radius: 12px; background: var(--panel, #f8fbff); color: var(--text-soft, #52617c); }
.assistant-reopen { pointer-events: auto; float: right; background: var(--panel, #f8fbff); box-shadow: 0 8px 24px rgba(73,88,165,0.15); }
.assistant-summon { position: fixed; right: calc(22px + 112px + 20px); bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px)); z-index: 2401; min-height: 38px; padding: 7px 10px; border: 1px solid rgba(118, 151, 241, 0.28); border-radius: 10px; background: var(--panel, #f8fbff); color: var(--title, #17203d); box-shadow: 0 8px 24px rgba(73, 88, 165, 0.15); font: inherit; font-size: 0.75rem; cursor: pointer; }
.assistant-summon[hidden] { display: none !important; }
.portfolio-assistant button:focus-visible, .portfolio-assistant a:focus-visible, .assistant-summon:focus-visible { outline: 3px solid #7aaaff; outline-offset: 3px; }
body.dark .assistant-bubble { background: rgba(22, 20, 58, 0.97); border-color: rgba(175, 149, 250, 0.28); }
body.dark .assistant-character img { filter: drop-shadow(0 0 14px rgba(148, 114, 255, 0.65)); }
body.dark .assistant-heading { color: #a9c9ff; }
@media (max-width: 768px) {
  .portfolio-assistant { left: auto; right: 16px; bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px)); width: min(280px, calc(100vw - 32px)); }
  .assistant-summon { right: calc(16px + 54px + 20px); bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px)); min-height: 34px; padding: 6px 8px; font-size: 11px; }
  .assistant-panel { align-items: stretch; }
  .assistant-bubble { box-sizing: border-box; align-self: flex-end; width: min(220px, calc(100vw - 32px)); max-height: 150px; padding: 10px 12px; overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; }
  .assistant-heading { gap: 6px; font-size: 13px; }
  .assistant-heading strong { font-size: 13px; }
  .assistant-message { margin: 4px 0 6px; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
  .assistant-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 5px; }
  .assistant-actions [data-assistant="listen"], .assistant-actions [data-assistant="stop"] { grid-column: 1 / -1; }
  .assistant-actions a, .assistant-actions button { box-sizing: border-box; width: 100%; min-width: 0; min-height: 30px; padding: 5px 8px; text-align: center; font-size: 11px; border-radius: 8px; }
  .portfolio-assistant[data-state="speaking"] .assistant-heading button { display: none; }
  .assistant-follow { align-self: flex-end; width: 54px; }
  .assistant-character { width: 54px; height: 54px; }
  .assistant-sleep-hint { display: none; }
}
@media (max-width: 390px) {
  .portfolio-assistant { bottom: max(105px, calc(env(safe-area-inset-bottom) + 105px)); width: min(250px, calc(100vw - 32px)); }
  .assistant-summon { right: calc(16px + 48px + 20px); bottom: max(105px, calc(env(safe-area-inset-bottom) + 105px)); }
  .assistant-bubble { padding: 10px 12px; }
  .assistant-follow { width: 48px; }
  .assistant-character { width: 48px; height: 48px; }
}