/* ========== AI Summary Card ========== */
.ai-summary-card{
  position:relative;
  margin:22px auto 0;
  border-radius:16px;
  padding:14px 16px 16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(2,132,199,.10), 0 2px 8px rgba(0,0,0,.06);
  max-width:900px;
  width:min(92vw,900px);
  overflow:visible;
}

/* classic hue-shift border */
.ai-summary-card::before{
  content:"";
  position:absolute;
  inset:-2px;                 /* 2px border */
  border-radius:18px;
  background:linear-gradient(120deg,#7c3aed,#06b6d4,#22c55e);
  z-index:-1;
  animation:aiHue 8s linear infinite;
}
@keyframes aiHue{from{filter:hue-rotate(0)} to{filter:hue-rotate(360deg)}}

/* ---------- header ---------- */
.ai-card-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;padding:6px 4px 0}
.ai-badge{font:700 12px/1 system-ui;letter-spacing:.08em;padding:4px 8px;border-radius:999px;color:#fff;background:#0ea5e9;box-shadow:0 0 0 2px rgba(255,255,255,.9) inset}
.ai-card-head .ai-title{flex:1 1 auto;min-width:0}
.ai-powered{margin-left:auto;font-size:12px;color:#64748b;display:flex;gap:6px;align-items:center;white-space:nowrap;align-self:flex-start}
.ai-powered .sparkle{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 25%,#fde68a 55%,#f59e0b 70%);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.1);opacity:1}}
.ai-card-head .ai-title p{max-width:68ch;margin:6px auto 0}

/* short business disclaimer */
.ai-disclaimer{padding-top:4px;color:#5b6470;font-size:13px;max-width:68ch;margin:0 auto}

/* ---------- CTA ---------- */
.ai-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px}
#generate-ai-btn.ai-cta-btn{
  font-size:16px;padding:12px 18px;border-radius:999px;border:none;
  background:linear-gradient(90deg,#7c3aed,#06b6d4)!important;
  box-shadow:0 12px 24px rgba(2,132,199,.25),0 2px 6px rgba(0,0,0,.12)
}
#generate-ai-btn.ai-cta-btn.is-busy{opacity:.85;pointer-events:none}
.ai-loading{padding:10px 12px;background:#0b1220;color:#cbd5e1;border-radius:10px}
.ai-dots{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle}
.ai-dots span{width:6px;height:6px;background:#38bdf8;border-radius:50%;animation:bounce 1.2s infinite}
.ai-dots span:nth-child(2){animation-delay:.15s}
.ai-dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}

/* ---------- avatar & bubble ---------- */


/* mobile default: NO flex */
.ai-area{
  margin-top:4px;
  padding:0 10px 10px;
  display:block;               /* <-- was flex; now block on mobile */
  position:relative;
}

/* desktop/tablet: turn flex back on */
@media (min-width: 641px){
  .ai-area{
    display:flex;
    justify-content:center;
  }
}

/* avatar wrapper stays static so bubble anchors to the CARD */
#avatarResponse{
  position:static;
  display:block;
  margin-top:-6px;
}

/* speech bubble — DESKTOP: sits between avatar and right border */
#speechBubble{
  position:absolute;
  left:90%;                    /* between avatar and right border */
  top:-18%;
  transform:translateY(-50%);
  max-width:clamp(280px, 38vw, 520px);
  word-wrap:break-word;
  white-space:normal;
  z-index:3;
}

/* “Ga door / next” button — visible and left of avatar */
#nextChunkButton{
  position:absolute;
  left:-50%;                   /* left edge of the card */
  top:50%;
  transform:translateY(-50%);
  width:128px;                 /* fixed width so it stays compact */
  min-width:128px;
  white-space:nowrap;
  z-index:4;
}

/* ---------- text-only summary (no avatar) ---------- */
#ai-summary{display:none} /* hidden by default; shown after generation */
#ai-summary.ai-text{
  margin:10px 0 6px;
  padding:14px 16px;
  border-radius:12px;
  background:#fafafa;
  border:1px solid #e5e7eb;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  line-height:1.55;
}
#ai-summary.ai-text::before{
  content:"";
  display:block;
  width:100%;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,#7c3aed,#06b6d4,#22c55e);
  margin:-6px 0 10px;
  filter:hue-rotate(10deg);
}

/* ---------- “Back to top” button ---------- */
/* default (desktop/tablet): bottom-right floater */
.btn-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 5000;
}

/* mobile: tuck it under the navbar, top-right */
@media (max-width: 640px){
  .btn-to-top{
    top: calc(var(--navbar-height, 56px) + 8px); /* tweak if your navbar is taller */
    right: 10px;
    bottom: auto;
  }
}

.btn-to-top.show{
  display:inline-flex;
  opacity:1;
  transform:none;
}

/* ---------- responsive ---------- */
@media (max-width: 820px){
  /* give the card a touch more breathing room for bubble offsets */
  #speechBubble{ left:calc(100% - 48%); max-width:55vw; }
  #nextChunkButton{ left:12px; top:60%; }
}

@media (max-width: 640px){
  

  /* MOBILE: stack cleanly — bubble goes BELOW avatar, no overlaps */
  #speechBubble{
    position:static;
    transform:none;
    max-width:100%;
    margin:12px 0 0;
  }
  /* keep next button visible on the left, away from bubble */
  #nextChunkButton{
    position:absolute;
    left:60%;
    top:84%;
    transform:translateY(-50%);
    width:120px;
    min-width:120px;
  }
}