/* SpikeSage API v6.5 Styles: genie top-right + padding + adjustable hover/puff */
.spikesage-wrapper { font-family: Georgia, serif; max-width: 800px; margin: 0 auto; }
.spikesage-form { display:flex; flex-direction:column; gap:10px; }
#spikesage-input-api65 { padding:12px; font-size:1rem; border:2px solid #ccc; border-radius:8px; }
.spikesage-btn { align-self:flex-start; background:#A64252; color:#fff; border:none; padding:10px 16px; border-radius:8px; font-weight:700; cursor:pointer; }
.spikesage-btn:hover { background:#8e3644; }
.status { margin-top:8px; color:#fff; font-weight:700; display:none; }

/* Top-right genie: add top/right padding so text never hides behind */
.answer-box { position:relative; background:#F7F2E8; border-radius:12px; padding:140px 280px 16px 16px; margin-top:12px; border:1px solid rgba(0,0,0,0.08); }
#spikesage-answer-api65 { color:#333; min-height:64px; }

.genie { position:absolute; right:10px; top:10px; width:240px; opacity:0; pointer-events:none; z-index:2; }
.hidden { display:none; }

/* Animations with CSS variables */
@keyframes puffIn { 0% {opacity:0; transform: scale(var(--spikesage-puff-scale, .6)) translateY(10px);} 100% {opacity:1; transform: scale(1) translateY(0);} }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px);} }
.genie.show { display:block; animation: puffIn .6s ease-out forwards, floaty var(--spikesage-hover-speed, 3s) ease-in-out infinite .6s; }

@media (max-width: 640px){
  .answer-box { padding-top: 120px; padding-right: 180px; }
  .genie { width: 180px; right: 6px; top: 6px; }
}