/* AI Quiz Generator widget (PF-V2).
   Two-step picker (purpose then source) that streams a draft quiz from the
   Vercel API and seeds the in-page Quiz Maker editor.
   Deployed by node/page-updater/integrate-pf-v2.js. */

/* Hide any legacy hero widget + its loader (belt + braces). */
#ai-hero-widget, #hw-loader { display:none !important; }

/* The editor block lives in the hero and must stay hidden until we hand off.
   The old widget's CSS relied on a sibling selector with #ai-hero-widget; we
   hide it unconditionally so the picker is the only thing visible on load. */
.lp-editor-block-top {
  display: none !important;
  opacity: 0;
  transition: opacity .45s ease .1s;
  min-height: 0;
}
.lp-editor-block-top.hw-visible { display: block !important; min-height: 500px; }
.lp-editor-block-top.hw-ready   { opacity: 1; }
/* Fullscreen editor mode overrides stay authoritative */
body[fs='1'] .lp-editor-block-top { display: block !important; opacity: 1 !important; }

/* ──────────────────────────────────────────────────────────────
   AI Quiz Generator Widget — styles
   Namespace: .pf-*
   Host:      lp-sec-grad blue-gradient hero section
   ────────────────────────────────────────────────────────────── */
.pf {
  --pf-accent: #0555e6;
  --pf-accent-strong: #0444b8;
  --pf-accent-soft: #eef4ff;
  --pf-text: #14213d;
  --pf-muted: #5f6b85;
  --pf-border: #dbe4f0;
  --pf-surface: #ffffff;
  --pf-soft: #f7f9fc;
  /* Widened for desktop — cards + builder both need more breathing
     room now that we've dropped the icons and the builder is a larger
     focal point. Mobile shrinks via the 700px breakpoint below. */
  max-width: 920px;
  margin: 0 auto;
  padding: 0 20px 48px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pf-text);
}
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf button, .pf input, .pf textarea { font: inherit; }

/* ── Steps ── */
.pf-s { display: none; animation: pfIn .28s cubic-bezier(.22,1,.36,1); }
.pf-s-active { display: block; }
@keyframes pfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Purpose cards ── */
.pf-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  transition: opacity .22s ease, transform .22s ease;
  transform-origin: top center;
}
.pf-cards-leave { opacity: 0; transform: translateY(-6px) scale(.985); pointer-events: none; }
.pf-cards-hidden { display: none !important; }

/* ── Purpose cards — vibrant gradient grid ────────────────────────
   Each card is a full-bleed coloured tile with a frosted-glass icon
   chip, white label, and a soft colour-matched shadow that intensifies
   on hover. Two tonal groups:
     - WARM family (share/social/shop): trivia, personality, marketing, poll
     - COOL family (learn/work/certify): study, classroom, training, compliance
   White `::before` top-left specular highlight gives depth. */
.pf-card {
  /* Card chrome driven by CSS vars so per-rid rules only set --bg and,
     for light backgrounds, override --fg / --fg-sub / --border to
     switch to dark text instead of white. */
  --fg: #fff;
  --fg-sub: rgba(255,255,255,.74);
  --border: rgba(255,255,255,.10);
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: 24px 22px;
  min-height: 148px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer; appearance: none;
  color: var(--fg);
  transition: border-color .15s ease-out, filter .15s ease-out;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (hover: hover) {
  .pf-card:hover { filter: brightness(1.06); }
}
.pf-card:active { filter: brightness(.96); }
.pf-card-on {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── Semantic palette ───────────────────────────────────────────────
   Six-colour palette mapped across the eight categories. Primary and
   Tertiary serve two cards each (semantic pairings: Study+Personality
   share Primary; Training+Poll share Tertiary). Backgrounds that are
   too light for white text at 4.5:1 (Tertiary / Success / Warning)
   switch to dark #0E1525 text so copy stays crisp and readable. */

/* Study & Practice — Primary purple (white text) */
.pf-card[data-rid="201"] { --bg: #695CFF; }

/* Classroom & Teaching — Success green (dark text) */
.pf-card[data-rid="202"] {
  --bg: #22C55E;
  --fg: #0E1525;
  --fg-sub: rgba(14,21,37,.72);
  --border: rgba(14,21,37,.10);
}

/* Trivia & Challenge — Destructive red (white text, bold display type) */
.pf-card[data-rid="203"] { --bg: #EF4444; }

/* Employee Training — Tertiary blue (dark text) */
.pf-card[data-rid="204"] {
  --bg: #42A5FF;
  --fg: #0E1525;
  --fg-sub: rgba(14,21,37,.72);
  --border: rgba(14,21,37,.10);
}

/* Compliance & Certification — Secondary near-black (white text) */
.pf-card[data-rid="205"] { --bg: #0E1525; --border: rgba(255,255,255,.12); }

/* Marketing & Lead Gen — Warning amber (dark text) */
.pf-card[data-rid="206"] {
  --bg: #F59E0B;
  --fg: #0E1525;
  --fg-sub: rgba(14,21,37,.74);
  --border: rgba(14,21,37,.10);
}

/* Personality & Social — Primary purple (shares with Study) */
.pf-card[data-rid="207"] { --bg: #695CFF; }

/* Poll & Survey — Tertiary blue (shares with Training) */
.pf-card[data-rid="208"] {
  --bg: #42A5FF;
  --fg: #0E1525;
  --fg-sub: rgba(14,21,37,.72);
  --border: rgba(14,21,37,.10);
}

/* Icons removed — we used to render a bare SVG glyph in the top-left
   of each card, but the label + sub now carry all the identification
   weight and flat colour handles the categorisation. Any leftover
   .pf-card-icon nodes would be hidden. */
.pf-card-icon { display: none !important; }

/* No text-shadow — shadow-glow on a saturated background smears
   letters. Plain text + the per-card --fg var is crispest. */
.pf-card-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
  letter-spacing: 0;
}
.pf-card-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-sub);
  margin-top: 6px;
  line-height: 1.45;
  letter-spacing: 0;
}

/* ── Builder pane ── */
.pf-builder {
  margin-top: 20px;
  background: var(--pf-surface);
  border-radius: 22px;
  box-shadow: 0 16px 48px rgba(12,24,60,.12);
  overflow: hidden;
  animation: pfIn .28s cubic-bezier(.22,1,.36,1);
}
.pf-builder-inner { padding: 36px 40px 32px; }
/* Back-to-purposes — a subtle, centered text link that lives BELOW
   the primary CTA. Deliberately quiet: no border, no background, no
   chip. It's an escape hatch, not a destination. */
.pf-back-row {
  margin-top: 14px;
  display: flex; justify-content: center;
}
.pf-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--pf-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  border-radius: 6px;
  transition: color .15s ease;
}
.pf-back:hover,
.pf-back:focus-visible { color: var(--pf-accent); }
.pf-back-arrow { font-size: 14px; line-height: 1; transition: transform .18s cubic-bezier(.22,1,.36,1); display: inline-block; }
.pf-back:hover .pf-back-arrow,
.pf-back:focus-visible .pf-back-arrow { transform: translateX(-3px); }
.pf-back:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; }
.pf-back #pf-back-label { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.pf-back:hover #pf-back-label,
.pf-back:focus-visible #pf-back-label { text-decoration-color: currentColor; }
/* ── Source tabs ── */
.pf-src-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.pf-src-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 10px;
  background: var(--pf-soft); border: 1px solid var(--pf-border); border-radius: 14px;
  color: var(--pf-text); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.pf-src-tab:hover { border-color: #aac4ef; color: var(--pf-accent); }
.pf-src-tab-on { background: var(--pf-accent-soft); color: var(--pf-accent); border-color: #bfd4ff; }

/* ── Source input ── */
.pf textarea {
  width: 100%; min-height: 140px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--pf-border); border-radius: 16px;
  color: var(--pf-text); font-size: 16px; font-weight: 400;
  resize: vertical; line-height: 1.55;
}
.pf textarea:focus { border-color: var(--pf-accent); outline: none; }
.pf textarea::placeholder { color: #9ca3af; }
.pf input[type=url], .pf input[type=text] {
  width: 100%; min-height: 56px; padding: 16px 20px;
  background: #fff; border: 1px solid var(--pf-border); border-radius: 16px;
  color: var(--pf-text); font-size: 16px; font-weight: 400;
}
.pf input[type=url]:focus, .pf input[type=text]:focus { border-color: var(--pf-accent); outline: none; }

/* ── Dropzone ── */
.pf-dropzone { border: 2px dashed #c8d5e6; border-radius: 16px; padding: 28px 20px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; background: #fafcff; }
.pf-dropzone:hover { border-color: var(--pf-accent); background: #f0f4ff; }
.pf-dropzone-label { font-size: 14px; color: #374151; margin: 4px 0; }
.pf-dropzone-types { font-size: 12px; color: #9ca3af; }
.pf-file-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: #ecfdf5; border: 1px solid #86efac; margin-top: 8px; font-size: 13px; color: #166534; border-radius: 12px; }
.pf-file-remove { margin-left: auto; cursor: pointer; color: #991b1b; font-size: 12px; font-weight: 500; }
.pf-file-sep { color: #86efac; opacity: .8; }
.pf-file-status { font-size: 12px; font-weight: 500; }
.pf-file-status-busy { color: #6b7280; font-style: italic; }
.pf-file-status-ok   { color: #047857; }
.pf-file-status-err  { color: #991b1b; }

/* ── Feature pills ── */
.pf-pills-section { margin-top: 16px; }
.pf-pills-label { font-size: 12px; font-weight: 500; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }
.pf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  background: var(--pf-soft); border: 1px solid var(--pf-border); border-radius: 999px;
  color: var(--pf-text); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  -webkit-user-select: none; user-select: none;
}
.pf-pill:hover { border-color: #aac4ef; background: #f0f5ff; }
.pf-pill-on { background: var(--pf-accent); color: #fff; border-color: var(--pf-accent); }
.pf-pill-on:hover { background: var(--pf-accent-strong); border-color: var(--pf-accent-strong); }
.pf-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Generate button — Primary action ─────────────────────────────
   Flat Primary purple from the semantic palette (same colour as the
   Study and Personality cards). No gradient, minimal hover. */
.pf-gen-row { margin-top: 28px; text-align: center; }
.pf-help { margin: 0 0 14px; font-size: 14px; color: var(--pf-muted); }
.pf-gen-btn {
  width: 100%; min-height: 58px; padding: 16px 24px;
  background: #695CFF;
  color: #fff; border: 0; border-radius: 14px;
  font-size: 17px; font-weight: 600; letter-spacing: 0;
  cursor: pointer;
  transition: filter .15s ease-out, background .15s ease-out;
}
.pf-gen-btn:hover:not(:disabled) { filter: brightness(1.08); }
.pf-gen-btn:active:not(:disabled) { filter: brightness(.94); }
.pf-gen-btn:focus-visible { outline: 2px solid #695CFF; outline-offset: 3px; }
.pf-gen-btn:disabled { background: #C7C3F5; cursor: default; }

/* ── Stage (generation) ── */
.pf-stage { background: #fff; padding: 28px; border-radius: 22px; box-shadow: 0 16px 48px rgba(12,24,60,.12); }
/* Stage header — the "Generating your first draft" title + subtitle.
   We set text-align on both the wrapper AND each child, because the host
   site's global `p { text-align: left }` otherwise overrides the inherited
   centre on <p class="pf-stage-sub">. Belt + braces. */
.pf-stage-top {
  text-align: center;
  margin: 0 auto 20px;
  max-width: 560px;
}
.pf-stage-top .pf-stage-title,
.pf-stage-top .pf-stage-sub { text-align: center; }
.pf-stage-title {
  margin: 0 auto 6px;
  font-size: 22px; font-weight: 600;
  color: var(--pf-text);
  letter-spacing: -0.01em;
}
.pf-stage-sub {
  margin: 0 auto;
  font-size: 14px;
  color: var(--pf-muted);
  line-height: 1.45;
  max-width: 460px;
}

.pf-gen-area {
  padding: 28px 24px 24px;
  border: 1px solid var(--pf-border);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfcff, #f4f7ff);
  /* Smoothly resize when we switch between "thinking" (compact) and
     "streaming" (full) layouts by toggling .is-thinking. */
  transition: padding 260ms ease;
}
/* ── Compact "thinking" layout ────────────────────────────────────
   Before the first question arrives the progress bar, stream box and
   pip row are empty and waste vertical space. While .is-thinking is
   present we collapse all three to zero with a smooth transition, and
   tighten the bottom padding so the sparkle + thinking pill sit
   comfortably without a chasm below them. renderLiveQ removes the
   class on the first question event, restoring the full layout. */
.pf-gen-area.is-thinking { padding-bottom: 14px; }
.pf-gen-area.is-thinking .pf-progress,
.pf-gen-area.is-thinking .pf-stream,
.pf-gen-area.is-thinking .pf-pips {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.pf-gen-area .pf-progress,
.pf-gen-area .pf-stream,
.pf-gen-area .pf-pips {
  transition: max-height 300ms ease, opacity 220ms ease, margin 300ms ease;
}

/* ── Liquid Aurora — the AI "thinking" visual ─────────────────────
   Apple Intelligence / Gemini-style aurora: a razor-sharp rotating
   conic gradient ring, backed by a blurred counter-rotating twin for
   organic bleed, and a breathing pearl core. Animated with the
   @property API so the conic sweep interpolates smoothly instead of
   stepping. No SVG, no JS, works 320 px to 1400 px, degrades to a
   static gradient under prefers-reduced-motion.

   Layers, back to front:
     .pf-aurora-bg    — soft radial halo behind everything (breathes)
     .pf-aurora-halo  — blurred conic twin, counter-rotates, provides bleed
     .pf-aurora-ring  — sharp conic hairline, the primary aurora band
     .pf-aurora-core  — pearl core, gentle breathe
     .pf-aurora-star  — tiny 4-point spark nucleus inside the core */

/* Animated custom property — lets conic-gradient(from var(--a)) interpolate
   smoothly between keyframes instead of stepping. Supported everywhere we
   care about (Chrome 85+, Edge 85+, Safari 16.4+, Firefox 128+).
   Falls back to a non-animated gradient on older browsers. */
@property --pf-aurora-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --pf-aurora-b {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.pf-aurora {
  position: relative;
  width: 116px; height: 116px;
  margin: 4px auto 18px;
  border-radius: 50%;
  isolation: isolate;  /* contain blend-modes + filters to this subtree */
}
.pf-aurora > div {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

/* Outermost halo — vibrant coloured cushion that breathes. Tighter
   stops + higher opacity than before so the colours read as saturated
   brand glow rather than soft pink wash. */
.pf-aurora-bg {
  inset: -14%;
  background: radial-gradient(closest-side,
    rgba(255, 81, 47, .55) 0%,
    rgba(255, 30, 92, .40) 38%,
    rgba(221, 36,118, .22) 62%,
    rgba(221, 36,118,   0) 82%);
  filter: blur(2px);
  animation: pfAuroraBreathe 3.4s ease-in-out infinite;
  z-index: 0;
}

/* Blurred conic twin — counter-rotates for depth and bleed. Uses the
   same vibrant stops as the sharp ring at ~90% opacity. Blur reduced
   from 18 px to 14 px so colours stay saturated instead of
   fogging into pink. */
.pf-aurora-halo {
  inset: -6%;
  background: conic-gradient(
    from var(--pf-aurora-b),
    rgba(255, 81, 47, 1),    /* brand orange-red */
    rgba(255, 31, 61, .95),  /* vivid red */
    rgba(255, 15, 92, .95),  /* vivid rose */
    rgba(221, 36,118, 1),    /* brand magenta */
    rgba(184,  0, 91, .90),  /* deep magenta */
    rgba(255, 81, 47, 1)
  );
  filter: blur(14px) saturate(1.45);
  opacity: .95;
  animation: pfAuroraSpinBack 9s linear infinite;
  z-index: 1;
}

/* Sharp ring — the primary aurora band. Stops removed amber and
   coral (they were lightening everything); now hard-hits between
   the two brand colours with a vivid red and deep magenta for
   variation, so the rotation is clearly warm-vibrant rather than
   washed-pink. Heavier drop-shadow stack pushes real glow. */
.pf-aurora-ring {
  background: conic-gradient(
    from var(--pf-aurora-a),
    #FF512F   0%,     /* brand orange-red */
    #FF1E2D  18%,     /* vivid red */
    #FF0F5C  38%,     /* vivid rose */
    #DD2476  58%,     /* brand magenta */
    #B8005B  78%,     /* deep magenta for depth */
    #FF512F 100%
  );
  mask: radial-gradient(circle at center,
    transparent 38%,
    #000 42%,
    #000 50%,
    transparent 54%);
  -webkit-mask: radial-gradient(circle at center,
    transparent 38%,
    #000 42%,
    #000 50%,
    transparent 54%);
  animation: pfAuroraSpin 5.4s linear infinite,
             pfAuroraShimmer 3.6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 14px rgba(255, 81, 47, .75))
    drop-shadow(0 0 28px rgba(221, 36,118, .55));
  z-index: 2;
}

/* Pearl core — clean white nucleus with a tiny warm glow. Dropped
   the peach wash (was reading as "pink centre"); kept highlight in
   the top-left to sell the 3-D ball, and a thin magenta halo ring
   at the edge so the core still feels lit by the ring around it. */
.pf-aurora-core {
  inset: 32%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,1) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,0) 62%),
    radial-gradient(circle at center, #ffffff 0%, #fff 55%, rgba(255, 81, 47, .30) 88%, rgba(221, 36,118, 0) 100%);
  box-shadow:
    inset 0 0 16px rgba(255,255,255,1),
    inset 0 0 32px rgba(255, 81, 47, .28),
    0 0 18px rgba(221, 36,118, .55);
  animation: pfAuroraBreathe 3.2s ease-in-out infinite reverse;
  z-index: 3;
}

@keyframes pfAuroraSpin      { to { --pf-aurora-a: 360deg; } }
@keyframes pfAuroraSpinBack  { to { --pf-aurora-b: -360deg; } }
@keyframes pfAuroraBreathe {
  0%, 100% { transform: scale(.95); opacity: .78; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes pfAuroraShimmer {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 81, 47, .70)) saturate(1.15); }
  50%      { filter: drop-shadow(0 0 28px rgba(221, 36,118, .80)) saturate(1.45); }
}
/* Prefers-reduced-motion: freeze rotation + breathing, keep the glow.
   The ring stops at 135° which leaves an attractive tri-colour arc
   rather than a featureless circle. */
@media (prefers-reduced-motion: reduce) {
  .pf-aurora-bg,
  .pf-aurora-halo,
  .pf-aurora-ring,
  .pf-aurora-core { animation: none !important; }
  .pf-aurora-ring { --pf-aurora-a: 135deg; }
  .pf-aurora-halo { --pf-aurora-b: -45deg; opacity: .55; }
}

.pf-gen-text { text-align: center; font-size: 14px; color: var(--pf-muted); margin: 0 0 12px; min-height: 20px; transition: color 200ms ease; }

/* ── Thinking chip ──────────────────────────────────────────────
   While pfThink is typing, #pf-gen-text renders as a soft pill with:
     - an animated 3-dot "activity" indicator on the left
     - the typed text + blinking caret on the right
     - a subtle breathing glow under the whole chip so the waiting
       state feels alive rather than dead
   The outer <p> becomes a flex container so the pill self-centres.
   When pfThink.stop() restores the regular "Drafting question N..."
   text via textContent, the chip markup is wiped and the normal
   muted style returns. */
.pf-gen-text.pf-thinking {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0 auto 14px;
  padding: 0;
  color: var(--pf-ink, #1a2444);
  font-size: 14.5px;
  letter-spacing: 0.1px;
}
.pf-think-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(86%, 520px);
  padding: 8px 16px 8px 12px;
  /* Warm-brand pill: soft blush-tinted background + a faint coral border
     so the chip reads as part of the same family as the aurora and the
     CTA buttons rather than a cold blue accent. */
  background: linear-gradient(180deg, #ffffff, #fff6f4);
  border: 1px solid rgba(255, 81, 47, .18);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .75),
    0 6px 22px -10px rgba(255, 81, 47, .30),
    0 2px 6px -2px rgba(221, 36,118, .12);
  animation: pfChipGlow 2.6s ease-in-out infinite;
  text-align: left;
}
.pf-think-dots {
  display: inline-flex;
  gap: 3px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 2px;
}
.pf-think-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  /* Matches the CTA gradient — orange-red to magenta, 135deg. */
  background: linear-gradient(135deg, #FF512F, #DD2476);
  animation: pfThinkDot 1.1s ease-in-out infinite;
}
.pf-think-dots i:nth-child(2) { animation-delay: .13s; }
.pf-think-dots i:nth-child(3) { animation-delay: .26s; }
.pf-think-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.pf-gen-text .pf-caret {
  display: inline-block;
  width: 0.55em;
  margin-left: 2px;
  /* Brand magenta so the caret reads as part of the CTA family. */
  color: #DD2476;
  animation: pfCaretBlink 900ms steps(2, end) infinite;
  vertical-align: -2px;
}

@keyframes pfCaretBlink { 50% { opacity: 0; } }
@keyframes pfThinkDot {
  0%, 80%, 100% { transform: translateY(0);    opacity: .35; }
  40%           { transform: translateY(-3px); opacity: 1; }
}
@keyframes pfChipGlow {
  0%, 100% { box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .75),
    0 6px 22px -10px rgba(255, 81, 47, .30),
    0 2px 6px  -2px rgba(221, 36,118, .12); }
  50%      { box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    0 10px 30px -10px rgba(221, 36,118, .42),
    0 4px 10px  -2px rgba(255,181, 71, .24); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-gen-text .pf-caret,
  .pf-think-dots i,
  .pf-think-chip { animation: none; }
}
@media (max-width: 600px) {
  .pf-think-chip { padding: 7px 12px 7px 10px; font-size: 13.5px; max-width: 92%; }
  .pf-think-text { white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; }
}
.pf-progress { height: 6px; background: #e7edf6; overflow: hidden; margin-bottom: 20px; border-radius: 999px; }
.pf-progress-fill {
  height: 100%;
  /* Matches the CTA gradient so the progress bar reads as "the same
     energy as the Generate button" rather than a stray blue bar. */
  background: linear-gradient(90deg, #FF512F 0%, #DD2476 51%, #FF512F 100%);
  background-size: 200% 100%;
  transition: width .35s ease;
  width: 0;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.pf-progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: pfShimmer 1.4s linear infinite;
}
@keyframes pfShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Streaming question text ─────────────────────────────────────────
   A subtle, fixed-height window. Each generated question's text lands
   as a new line and the list translates upward so the newest line is
   kept in view. Top and bottom edges fade out so lines slip softly
   in/out of view without visual clutter. */
.pf-stream {
  position: relative;
  height: 148px;
  margin: 6px auto 0;
  max-width: 640px;
  overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.pf-stream-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 44px 4px 44px;
  transition: transform .75s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.pf-stream-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  animation: pfStreamIn .5s cubic-bezier(.22,1,.36,1) forwards;
  font-size: 15px;
  line-height: 1.45;
  color: var(--pf-text);
  text-align: left;
}
.pf-stream-num {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--pf-accent);
  background: rgba(5,85,230,.09);
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 1px;
  min-width: 32px;
  text-align: center;
}
.pf-stream-q {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@keyframes pfStreamIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-stream-inner { transition: none; }
  .pf-stream-line  { animation: none; opacity: 1; transform: none; }
}

/* Pip row — one dot per target question */
.pf-pips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; margin: 14px 0 4px;
}
.pf-pip {
  width: 8px; height: 8px; border-radius: 50%;
  /* Faint warm-brand tint so inactive pips still live in the same
     palette as the aurora + CTA. */
  background: rgba(221, 36, 118, .18);
  transition: background .2s ease, transform .2s ease;
}
.pf-pip-done   { background: #DD2476; }
.pf-pip-active {
  background: #FF512F;
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(255, 81, 47, .18);
  animation: pfPipPulse 1.4s ease-in-out infinite;
}
@keyframes pfPipPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 81, 47, .18); }
  50%      { box-shadow: 0 0 0 8px rgba(221, 36,118, .08); }
}

/* ── Handoff state (draft ready) ── */
.pf-handoff { text-align: center; padding: 40px 20px 30px; animation: pfIn .4s cubic-bezier(.22,1,.36,1); }
.pf-handoff-check { margin: 0 auto 12px; }
.pf-handoff-title { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--pf-text); }
.pf-handoff-sub { margin: 0; font-size: 14px; color: var(--pf-muted); }

/* ── Error banner ── */
.pf-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  padding: 12px 18px; margin-top: 14px;
  font-size: 14px; text-align: center; border-radius: 14px;
}

/* ── Fade-out when handing off to native editor ── */
#pf-widget.pf-fading { opacity: 0; transform: translateY(-10px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
#pf-widget { transition: opacity .35s ease, transform .35s ease; }

/* ── Mobile ──────────────────────────────────────────────────────
   iOS-friendly touch targets: 44px+ minimum on all interactive
   elements, 16px+ input font-size to prevent Safari zoom-on-focus,
   2-column cards for single-thumb reach, and a compact but legible
   stage. */
@media (max-width: 700px) {
  .pf { padding: 0 12px 28px; font-size: 15px; }
  .pf-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pf-card { padding: 16px 14px; border-radius: 16px; min-height: 110px; }
  .pf-card-sub { display: none; }
  .pf-card-label { font-size: 15px; line-height: 1.25; }

  .pf-builder { margin-top: 16px; border-radius: 18px; }
  .pf-builder-inner { padding: 18px 16px 22px; }
  .pf-back { font-size: 13px; min-height: 32px; }

  .pf-src-tabs { flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .pf-src-tab { flex: 1 1 auto; min-height: 44px; font-size: 13px; padding: 8px 6px; border-radius: 12px; }

  .pf textarea { font-size: 16px; min-height: 110px; padding: 12px 14px; border-radius: 12px; }
  .pf input[type=url], .pf input[type=text] { font-size: 16px; min-height: 48px; padding: 12px 14px; border-radius: 12px; }
  .pf-dropzone { padding: 22px 16px; }

  .pf-pills { gap: 6px; }
  .pf-pill { font-size: 13px; padding: 8px 12px; min-height: 36px; }

  .pf-gen-row { margin-top: 18px; }
  .pf-gen-btn { min-height: 54px; font-size: 16px; border-radius: 14px; padding: 14px 18px; }

  .pf-stage { padding: 20px 14px; border-radius: 18px; }
  .pf-stage-title { font-size: 20px; }
  .pf-stage-sub { font-size: 13px; }
  .pf-gen-area { padding: 20px 12px 14px; border-radius: 14px; }

  /* Mobile aurora — shrink the whole ring, halve the expensive blur
     on the halo (mobile GPUs churn on wide gaussian blurs), tighten
     the ring thickness so the hairline reads crisply at 88 px. */
  .pf-aurora { width: 88px; height: 88px; margin: 0 auto 14px; }
  .pf-aurora-halo { filter: blur(12px) saturate(1.15); opacity: .7; }
  .pf-aurora-ring {
    mask: radial-gradient(circle at center,
      transparent 40%, #000 43.5%, #000 48%, transparent 50.5%);
    -webkit-mask: radial-gradient(circle at center,
      transparent 40%, #000 43.5%, #000 48%, transparent 50.5%);
  }
  .pf-stream { height: 124px; }
  .pf-stream-inner { padding: 36px 2px 36px; gap: 10px; }
  .pf-stream-line  { font-size: 14px; line-height: 1.4; }
  .pf-stream-num   { font-size: 10px; padding: 2px 7px; min-width: 28px; }
  .pf-stream-q     { -webkit-line-clamp: 2; }

  .pf-handoff { padding: 32px 14px 20px; }
  .pf-handoff-title { font-size: 20px; }
}

@media (max-width: 420px) {
  .pf-cards { gap: 8px; }
  .pf-card { padding: 14px 12px; min-height: 96px; }
  .pf-card-icon { margin-bottom: 10px; }
  .pf-card-icon svg { width: 20px; height: 20px; }
  .pf-card-label { font-size: 13.5px; }

  .pf-stage-title { font-size: 18px; }
  .pf-stream-line { font-size: 13.5px; }
  .pf-pip { width: 7px; height: 7px; }
}

/* ── Variant toggles (experiment system hook) ─────────────────────
   The host experiment system adds ONE of these classes to #pf-widget
   to pick a variant. When neither class is set, both variants render
   (useful for side-by-side previews). */
#pf-widget.pf-v-simple  [data-aqg-variant="classic"],
#pf-widget.pf-v-simple  .pf-palsw            { display: none !important; }
#pf-widget.pf-v-classic [data-aqg-variant="simple"]  { display: none !important; }

/* ── Simple-box variant ──────────────────────────────────────────
   One-line "describe your quiz" input with a right-anchored CTA.
   Accepts URL paste (auto-detected) and file drag-drop (dashed glow
   on hover, accepted types routed to /api/content/upload). */
.pf-simple {
  margin: 0 0 32px;
  text-align: center;
}
.pf-simple-box {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(12,24,60,.22);
  position: relative;
  transition: box-shadow .18s ease-out;
}
.pf-simple-box.pf-simple-dragover {
  box-shadow: 0 14px 36px rgba(105,92,255,.45), 0 0 0 2px #695CFF;
}
.pf-simple-box.pf-simple-dragover::before {
  content: "Drop your file to extract content";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.96);
  font-size: 15px; font-weight: 600; color: #695CFF;
  z-index: 3;
  pointer-events: none;
  border-radius: 14px;
}
/* Specificity note: the host widget has a generic `.pf textarea`
   rule with min-height: 140px. We need a selector at least as
   specific to beat it — `.pf-simple .pf-simple-input` gives us
   two classes (0,2,0) which wins. */
.pf-simple .pf-simple-input {
  flex: 1;
  display: block;
  height: auto;
  min-height: 54px;
  max-height: 200px;
  padding: 15px 18px;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--pf-text, #14213d);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
  box-shadow: none;
  border-radius: 0;
  /* Hide internal scrollbar by default — autoGrow adds `overflow-y: auto`
     only once typed content exceeds max-height. Prevents the stray
     scroll arrows you'd otherwise see when a long placeholder wraps. */
  overflow: hidden;
}
.pf-simple .pf-simple-input::placeholder { color: #9ca3af; opacity: 1; }
.pf-simple-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  min-height: 54px;
  background: linear-gradient(135deg, #FF512F 0%, #DD2476 100%);
  color: #fff;
  border: 0;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  transition: filter .15s ease-out;
  white-space: nowrap;
  font-family: inherit;
  flex-shrink: 0;
}
.pf-simple-cta:hover:not(:disabled)  { filter: brightness(1.08); }
.pf-simple-cta:active:not(:disabled) { filter: brightness(.93); }
.pf-simple-cta:disabled              { opacity: .45; cursor: default; filter: saturate(.5); }
.pf-simple-cta:focus-visible         { outline: 3px solid rgba(255,255,255,.75); outline-offset: -3px; }
.pf-simple-arrow { font-size: 16px; line-height: 1; }

/* Meta chip — shows "🔗 URL detected" or "📄 document.pdf (12k chars)".
   `[hidden]` override is CRITICAL — our `display: inline-flex` would
   otherwise win over the UA stylesheet's `[hidden] { display: none }`
   and render an empty pill when there's no chip content. */
.pf-simple-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px auto 0;
  padding: 7px 14px;
  font-size: 13px;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  animation: pfIn .22s cubic-bezier(.22,1,.36,1);
}
.pf-simple-meta[hidden] { display: none !important; }
.pf-simple-meta-err {
  background: rgba(239,68,68,.28);
  border-color: rgba(239,68,68,.45);
}
.pf-simple-meta-rm {
  margin-left: 4px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.pf-simple-meta-rm:hover { opacity: 1; }

.pf-simple-sub {
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  text-align: center;
}

/* Mobile: inline layout (keep the right-anchored CTA, just tighten
   everything). iOS-safe: 16px input font-size prevents zoom-on-focus. */
@media (max-width: 600px) {
  .pf-simple { margin-bottom: 22px; }
  .pf-simple-box { border-radius: 12px; }
  .pf-simple-box.pf-simple-dragover::before { border-radius: 12px; font-size: 13px; }
  .pf-simple .pf-simple-input {
    min-height: 52px;
    max-height: 160px;
    padding: 13px 14px;
    font-size: 16px; /* keep 16px to block iOS zoom */
    line-height: 1.4;
  }
  .pf-simple-cta { padding: 0 14px; min-height: 52px; font-size: 14px; gap: 6px; }
  .pf-simple-arrow { font-size: 15px; }
  .pf-simple-sub { font-size: 12px; margin-top: 10px; padding: 0 8px; }
}
/* Very narrow (iPhone SE, tiny Androids): collapse CTA to icon-only
   so the textarea retains enough width for comfortable typing. */
@media (max-width: 420px) {
  .pf-simple-cta-label { display: none; }
  .pf-simple-cta { padding: 0 14px; min-width: 54px; }
}

/* ── Palette switcher (preview tool) ──────────────────────────────
   A tiny floating control above the card grid that lets us flip
   through 50 curated palettes and see each one applied live.
   Hidden by default — unhide by removing `display: none` below, or
   by loading the page with `?chooser=1` in the URL. */
.pf-palsw { display: none; }
.pf-chooser-on .pf-palsw {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 auto 14px;
  padding: 8px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  font-size: 13px; font-weight: 500;
  width: fit-content;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pf-palsw-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: 0; border-radius: 50%;
  color: #fff; cursor: pointer;
  font-size: 15px; line-height: 1;
  transition: background .12s ease-out;
}
.pf-palsw-btn:hover { background: rgba(255,255,255,.22); }
.pf-palsw-name { min-width: 150px; text-align: center; font-variant-numeric: tabular-nums; }
.pf-palsw-num  { opacity: .65; font-size: 12px; margin-left: 2px; }
.pf-palsw-swatches { display: inline-flex; gap: 3px; margin-left: 6px; }
.pf-palsw-swatch {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.25);
}

/* Prefer reduced motion: drop non-essential animations. */
@media (prefers-reduced-motion: reduce) {
  .pf-s, .pf-builder, .pf-handoff { animation: none !important; }
  .pf-pip-active { animation: none !important; }
}

/* ── MORE AI QUESTIONS button (lives inside the editor, NOT the widget) ──
   While a "more questions" stream is in flight we:
     1. swap the :after label from "MORE AI QUESTIONS" to "GENERATING MORE..."
        (attribute selector gives us higher specificity than the base rule)
     2. lock interaction and dim the button so repeat clicks are impossible
     3. show a small spinning AI spark on the left edge as a progress hint */
#quiz-add-q.quiz-addm[data-pf-gen="1"] {
  pointer-events: none;
  opacity: .72;
  position: relative;
}
#quiz-add-q.quiz-addm[data-pf-gen="1"]:last-of-type:after {
  /* Falls back to "GENERATING MORE QUESTIONS..." when data-pf-status is unset.
     runMoreAI updates data-pf-status as each streamed question arrives so the
     user sees live progress (e.g. "GENERATED 3 OF 5...") instead of a 60s
     featureless spinner. */
  content: attr(data-pf-status);
}
#quiz-add-q.quiz-addm[data-pf-gen="1"]:last-of-type:not([data-pf-status]):after,
#quiz-add-q.quiz-addm[data-pf-gen="1"]:last-of-type[data-pf-status=""]:after {
  content: "GENERATING MORE QUESTIONS...";
}
#quiz-add-q.quiz-addm[data-pf-gen="1"]:before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: pfMoreSpin .8s linear infinite;
}
@keyframes pfMoreSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #quiz-add-q.quiz-addm[data-pf-gen="1"]:before { animation: none; }
}