@active-reach/web-sdk 1.25.0 → 1.27.0

package/dist/index.js

@@ -265,6 +265,76 @@ function lucideSvg(name, opts = {}) {
   }).join("");
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${escapeAttr(color)}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round"${cls} ${a11y}>${children}</svg>`;
 }
+function npsBandFromScore(score) {
+  if (score <= 6) return "detractor";
+  if (score <= 8) return "passive";
+  return "promoter";
+}
+function computeProgress(input) {
+  const threshold = input.threshold > 0 ? input.threshold : 0;
+  const current = Number.isFinite(input.current) && input.current > 0 ? input.current : 0;
+  const pct = threshold > 0 ? Math.max(0, Math.min(100, current / threshold * 100)) : 0;
+  const complete = threshold > 0 && pct >= 100;
+  const remaining = threshold > 0 ? Math.max(0, threshold - current) : 0;
+  const milestonesReached = [];
+  if (threshold > 0) {
+    if (pct >= 25) milestonesReached.push("q25");
+    if (pct >= 50) milestonesReached.push("q50");
+    if (pct >= 75) milestonesReached.push("q75");
+    if (pct >= 100) milestonesReached.push("unlocked");
+  }
+  return { pct, complete, remaining, milestonesReached };
+}
+function cardProgressSubLabel(i) {
+  const { complete, remaining, pct } = computeProgress(i);
+  const threshold = i.threshold > 0 ? i.threshold : 0;
+  if (complete) return { text: i.rewardText || "Unlocked!", complete: true };
+  if (threshold <= 0) return { text: i.rewardText || "", complete: false };
+  const sym = i.goalType === "cart_total" ? i.currencySymbol || "" : "";
+  const pctStr = i.showPct ? ` · ${Math.round(pct)}%` : "";
+  return {
+    text: `Shop for ${sym}${remaining.toFixed(0)} more${pctStr}`,
+    complete: false
+  };
+}
+function readGoalFromCart(goalType, cart) {
+  if (!cart) return void 0;
+  if (goalType === "items_in_cart") return Number(cart.itemCount) || 0;
+  if (goalType === "cart_total") return Number(cart.total) || 0;
+  return void 0;
+}
+function computeCountdown(targetMs, nowMs) {
+  const totalMs = Number.isFinite(targetMs) ? Math.max(0, targetMs - nowMs) : 0;
+  const expired = !(targetMs > nowMs);
+  const totalSec = Math.floor(totalMs / 1e3);
+  const days = Math.floor(totalSec / 86400);
+  const hours = Math.floor(totalSec % 86400 / 3600);
+  const minutes = Math.floor(totalSec % 3600 / 60);
+  const seconds = totalSec % 60;
+  const pad = (n) => n < 10 ? "0" + n : "" + n;
+  const display = days > 0 ? days + "d " + pad(hours) + ":" + pad(minutes) + ":" + pad(seconds) : pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
+  return { totalMs, expired, days, hours, minutes, seconds, display };
+}
+function createFlowAccumulator() {
+  const buffer = [];
+  let completed = false;
+  return {
+    recordStep(r) {
+      const idx = buffer.findIndex((b) => b.step_id === r.step_id);
+      if (idx >= 0) buffer[idx] = r;
+      else buffer.push(r);
+    },
+    steps() {
+      return buffer.slice();
+    },
+    consolidated() {
+      return { steps: buffer.slice(), step_count: buffer.length, completed };
+    },
+    markCompleted() {
+      completed = true;
+    }
+  };
+}
 const WEIGHT = {
   regular: "400",
   medium: "500",
@@ -436,7 +506,6 @@ function buildCountdownElement(el, fg, muted) {
   time.style.cssText = `font-size:15px;font-weight:700;color:${fg};letter-spacing:0.2px;`;
   wrap.appendChild(label);
   wrap.appendChild(time);
-  const pad = (n) => String(n).padStart(2, "0");
   let started = false;
   let timer = 0;
   const tick = () => {
@@ -444,25 +513,71 @@ function buildCountdownElement(el, fg, muted) {
       if (timer) clearInterval(timer);
       return;
     }
-    const ms = target - Date.now();
-    if (ms <= 0) {
-      time.textContent = "00:00:00";
-      if (timer) clearInterval(timer);
-      return;
-    }
-    const s = Math.floor(ms / 1e3);
-    const d = Math.floor(s / 86400);
-    const h = Math.floor(s % 86400 / 3600);
-    const m2 = Math.floor(s % 3600 / 60);
-    const ss = s % 60;
-    time.textContent = d > 0 ? `${d}d ${pad(h)}:${pad(m2)}:${pad(ss)}` : `${pad(h)}:${pad(m2)}:${pad(ss)}`;
+    const cd = computeCountdown(target, Date.now());
+    time.textContent = cd.display;
+    if (cd.expired && timer) clearInterval(timer);
     started = true;
   };
   tick();
   timer = setInterval(tick, 1e3);
   return wrap;
 }
+function appendRatingThanks(wrap, el, ctx, fg, accent, isHigh) {
+  appendThanks(wrap, el, fg, "Thanks for rating us!");
+  const url = isHigh && typeof el.rating_high_url === "string" ? ctx.sanitizeUrl(el.rating_high_url) : "";
+  if (url) {
+    const cta = document.createElement("button");
+    cta.type = "button";
+    cta.textContent = el.rating_high_cta || "Leave a review";
+    cta.style.cssText = `margin:4px auto 0;display:block;padding:9px 18px;border:none;border-radius:999px;background:${accent};color:#fff;font-size:13px;font-weight:800;cursor:pointer;`;
+    cta.addEventListener("click", () => {
+      ctx.trackEvent(ctx.campaign.id, "clicked", { meta: { element: "rating_input", cta: "high_review" } });
+      if (ctx.navigate) ctx.navigate(url, "cta");
+      else window.location.href = url;
+    });
+    wrap.appendChild(cta);
+  }
+}
+function renderRatingFollowupStep(wrap, el, ctx, stars, fg, accent) {
+  while (wrap.firstChild) wrap.removeChild(wrap.firstChild);
+  const heading = document.createElement("div");
+  heading.textContent = el.rating_followup_prompt || "Sorry to hear that — what went wrong?";
+  heading.style.cssText = `font-size:13px;font-weight:700;color:${fg};text-align:center;margin-bottom:8px;`;
+  wrap.appendChild(heading);
+  const ta = document.createElement("textarea");
+  ta.rows = 3;
+  ta.placeholder = "Tell us more…";
+  ta.style.cssText = `width:100%;box-sizing:border-box;padding:10px;border-radius:10px;border:1px solid color-mix(in srgb, ${accent} 30%, transparent);background:transparent;color:${fg};font-size:13px;resize:vertical;margin-bottom:10px;font-family:inherit;`;
+  wrap.appendChild(ta);
+  let done = false;
+  const finish = (withComment) => {
+    var _a, _b;
+    if (done) return;
+    done = true;
+    const comment = withComment ? ta.value.trim() : "";
+    void ((_a = ctx.submitResponse) == null ? void 0 : _a.call(ctx, "rating", comment ? { stars, comment } : { stars }));
+    (_b = ctx.playReaction) == null ? void 0 : _b.call(ctx, wrap, "acknowledge");
+    appendThanks(wrap, el, fg, "Thanks — we’ll do better.");
+  };
+  const btnRow = document.createElement("div");
+  btnRow.style.cssText = "display:flex;gap:8px;justify-content:center;";
+  const send = document.createElement("button");
+  send.type = "button";
+  send.textContent = "Send";
+  send.style.cssText = `padding:9px 20px;border-radius:999px;border:none;background:${accent};color:#fff;font-weight:800;font-size:13px;cursor:pointer;`;
+  send.addEventListener("click", () => finish(true));
+  const skip = document.createElement("button");
+  skip.type = "button";
+  skip.textContent = "Skip";
+  skip.style.cssText = `padding:9px 16px;border-radius:999px;border:1px solid color-mix(in srgb, ${accent} 30%, transparent);background:transparent;color:${fg};font-weight:600;font-size:13px;cursor:pointer;`;
+  skip.addEventListener("click", () => finish(false));
+  btnRow.appendChild(send);
+  btnRow.appendChild(skip);
+  wrap.appendChild(btnRow);
+  ta.focus();
+}
 function buildRatingInputElement(el, ctx, fg) {
+  const accent = ctx.sanitizeColor(ctx.campaign.background_color || "#4169e1");
   const wrap = document.createElement("div");
   wrap.style.cssText = "display:flex;flex-direction:column;gap:6px;margin:2px 0;";
   if (el.content) {
@@ -505,9 +620,14 @@ function buildRatingInputElement(el, ctx, fg) {
       submitted = true;
       paint(i);
       ctx.trackEvent(ctx.campaign.id, "clicked", { meta: { element: "rating_input", stars: i } });
-      void ((_a = ctx.submitResponse) == null ? void 0 : _a.call(ctx, "rating", { stars: i }));
-      (_b = ctx.playReaction) == null ? void 0 : _b.call(ctx, wrap, i >= Math.ceil(scale * 0.6) ? "affirm" : "acknowledge");
-      appendThanks(wrap, el, fg, "Thanks for rating us!");
+      const lowThreshold = typeof el.rating_followup_threshold === "number" ? el.rating_followup_threshold : Math.ceil(scale * 0.8);
+      if (el.rating_followup_enabled === true && i <= lowThreshold) {
+        renderRatingFollowupStep(wrap, el, ctx, i, fg, accent);
+      } else {
+        void ((_a = ctx.submitResponse) == null ? void 0 : _a.call(ctx, "rating", { stars: i }));
+        (_b = ctx.playReaction) == null ? void 0 : _b.call(ctx, wrap, i >= Math.ceil(scale * 0.6) ? "affirm" : "acknowledge");
+        appendRatingThanks(wrap, el, ctx, fg, accent, i >= Math.ceil(scale * 0.6));
+      }
     });
     row.appendChild(btn);
   }
@@ -566,6 +686,85 @@ function buildPollElement(el, ctx, fg, accent) {
   });
   return wrap;
 }
+function appendNpsThanks(wrap, el, ctx, fg, accent, isPromoter) {
+  while (wrap.firstChild) wrap.removeChild(wrap.firstChild);
+  const note = document.createElement("div");
+  note.setAttribute("role", "status");
+  note.textContent = (typeof el.thanks_text === "string" && el.thanks_text.trim() ? el.thanks_text : "") || (isPromoter ? "Thank you! We’d love a public review." : "Thanks — your feedback helps us improve.");
+  note.style.cssText = `font-size:13px;font-weight:700;color:${fg};text-align:center;margin:6px 0;`;
+  wrap.appendChild(note);
+  const url = isPromoter && typeof el.nps_promoter_url === "string" ? ctx.sanitizeUrl(el.nps_promoter_url) : "";
+  if (url) {
+    const cta = document.createElement("button");
+    cta.type = "button";
+    cta.textContent = el.nps_promoter_cta || "Leave a review";
+    cta.style.cssText = `margin:4px auto 0;display:block;padding:9px 18px;border:none;border-radius:999px;background:${accent};color:#fff;font-size:13px;font-weight:800;cursor:pointer;`;
+    cta.addEventListener("click", () => {
+      ctx.trackEvent(ctx.campaign.id, "clicked", { meta: { element: "nps", cta: "promoter_review" } });
+      if (ctx.navigate) ctx.navigate(url, "cta");
+      else window.location.href = url;
+    });
+    wrap.appendChild(cta);
+  }
+}
+function renderNpsReasonStep(wrap, el, ctx, score, fg, accent) {
+  const promoterThreshold = typeof el.nps_promoter_threshold === "number" ? el.nps_promoter_threshold : 9;
+  const band = npsBandFromScore(score);
+  const prompt = score >= promoterThreshold ? el.nps_follow_up_promoter || "What do you love most about us?" : score <= 6 ? el.nps_follow_up_detractor || "How can we improve?" : el.nps_follow_up_passive || "What would make us a 10?";
+  while (wrap.firstChild) wrap.removeChild(wrap.firstChild);
+  const heading = document.createElement("div");
+  heading.textContent = prompt;
+  heading.style.cssText = `font-size:13px;font-weight:700;color:${fg};text-align:center;margin-bottom:8px;`;
+  wrap.appendChild(heading);
+  const ta = document.createElement("textarea");
+  const chips = Array.isArray(el.nps_reason_chips) ? el.nps_reason_chips : [];
+  if (chips.length) {
+    const chipRow = document.createElement("div");
+    chipRow.style.cssText = "display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:8px;";
+    chips.slice(0, 8).forEach((c) => {
+      const chip = document.createElement("button");
+      chip.type = "button";
+      chip.textContent = c;
+      chip.style.cssText = `padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb, ${accent} 35%, transparent);background:transparent;color:${fg};font-size:12px;cursor:pointer;`;
+      chip.addEventListener("click", () => {
+        ta.value = ta.value ? `${ta.value}, ${c}` : c;
+        ta.focus();
+      });
+      chipRow.appendChild(chip);
+    });
+    wrap.appendChild(chipRow);
+  }
+  ta.rows = 3;
+  ta.placeholder = "Share a little more…";
+  ta.style.cssText = `width:100%;box-sizing:border-box;padding:10px;border-radius:10px;border:1px solid color-mix(in srgb, ${accent} 30%, transparent);background:transparent;color:${fg};font-size:13px;resize:vertical;margin-bottom:10px;font-family:inherit;`;
+  wrap.appendChild(ta);
+  let done = false;
+  const finish = (withComment) => {
+    var _a, _b;
+    if (done) return;
+    done = true;
+    const comment = withComment ? ta.value.trim() : "";
+    void ((_a = ctx.submitResponse) == null ? void 0 : _a.call(ctx, "nps", comment ? { score, band, comment } : { score, band }));
+    (_b = ctx.playReaction) == null ? void 0 : _b.call(ctx, wrap, score >= promoterThreshold ? "affirm" : score <= 6 ? "empathize" : "acknowledge");
+    appendNpsThanks(wrap, el, ctx, fg, accent, score >= promoterThreshold);
+  };
+  const btnRow = document.createElement("div");
+  btnRow.style.cssText = "display:flex;gap:8px;justify-content:center;";
+  const send = document.createElement("button");
+  send.type = "button";
+  send.textContent = "Send";
+  send.style.cssText = `padding:9px 20px;border-radius:999px;border:none;background:${accent};color:#fff;font-weight:800;font-size:13px;cursor:pointer;`;
+  send.addEventListener("click", () => finish(true));
+  const skip = document.createElement("button");
+  skip.type = "button";
+  skip.textContent = "Skip";
+  skip.style.cssText = `padding:9px 16px;border-radius:999px;border:1px solid color-mix(in srgb, ${accent} 30%, transparent);background:transparent;color:${fg};font-weight:600;font-size:13px;cursor:pointer;`;
+  skip.addEventListener("click", () => finish(false));
+  btnRow.appendChild(send);
+  btnRow.appendChild(skip);
+  wrap.appendChild(btnRow);
+  ta.focus();
+}
 function buildNpsElement(el, ctx, fg, accent, muted) {
   const wrap = document.createElement("div");
   wrap.style.cssText = "display:flex;flex-direction:column;gap:6px;margin:2px 0;";
@@ -601,10 +800,15 @@ function buildNpsElement(el, ctx, fg, accent, muted) {
       btn.style.background = accent;
       btn.style.color = "#fff";
       btn.style.opacity = "1";
-      ctx.trackEvent(ctx.campaign.id, "clicked", { meta: { element: "nps", score: n } });
-      void ((_a = ctx.submitResponse) == null ? void 0 : _a.call(ctx, "nps", { score: n }));
-      (_b = ctx.playReaction) == null ? void 0 : _b.call(ctx, wrap, n >= 9 ? "affirm" : n >= 7 ? "acknowledge" : "empathize");
-      appendThanks(wrap, el, fg, "Thanks for your feedback!");
+      const npsPayload = { score: n, band: npsBandFromScore(n) };
+      ctx.trackEvent(ctx.campaign.id, "clicked", { meta: { element: "nps", score: n, band: npsPayload.band } });
+      if (el.nps_followup_enabled === true) {
+        renderNpsReasonStep(wrap, el, ctx, n, fg, accent);
+      } else {
+        void ((_a = ctx.submitResponse) == null ? void 0 : _a.call(ctx, "nps", { ...npsPayload }));
+        (_b = ctx.playReaction) == null ? void 0 : _b.call(ctx, wrap, n >= 9 ? "affirm" : n >= 7 ? "acknowledge" : "empathize");
+        appendThanks(wrap, el, fg, "Thanks for your feedback!");
+      }
     });
     row.appendChild(btn);
   }
@@ -642,9 +846,8 @@ function buildProgressElement(el, ctx, accent, muted) {
     return 0;
   };
   const readCur = () => {
-    const cart = ctx.getCartState && ctx.getCartState();
-    if (goal === "items_in_cart") return Number(cart == null ? void 0 : cart.itemCount) || 0;
-    if (goal === "cart_total") return Number(cart == null ? void 0 : cart.total) || 0;
+    const fromCart = readGoalFromCart(goal, ctx.getCartState && ctx.getCartState());
+    if (fromCart !== void 0) return fromCart;
     const p = props();
     if (goal === "loyalty_points") return Number(p["loyalty.points"]) || 0;
     if (goal === "referrals") return Number(p["referrals.count"]) || 0;
@@ -666,10 +869,18 @@ function buildProgressElement(el, ctx, accent, muted) {
     var _a;
     const th = threshold();
     const cur = readCur();
-    const pct = th > 0 ? Math.max(0, Math.min(100, cur / th * 100)) : 0;
+    const { pct, complete } = computeProgress({ threshold: th, current: cur });
     bar.style.width = `${pct}%`;
-    if (th > 0 && pct >= 100) {
-      sub.textContent = el.reward_text || "Unlocked!";
+    const labeled = cardProgressSubLabel({
+      goalType: goal,
+      threshold: th,
+      current: cur,
+      rewardText: el.reward_text,
+      currencySymbol: moneyGoal ? sym() : "",
+      showPct: el.show_pct
+    });
+    sub.textContent = labeled.text;
+    if (complete) {
       sub.style.color = "#10b981";
       sub.style.fontWeight = "700";
       if (!firedUnlock) {
@@ -681,10 +892,6 @@ function buildProgressElement(el, ctx, accent, muted) {
       sub.style.color = muted;
       sub.style.fontWeight = "";
       firedUnlock = false;
-      const remaining = Math.max(0, th - cur);
-      const pre = moneyGoal ? sym() : "";
-      const pctStr = el.show_pct && th > 0 ? ` · ${Math.round(pct)}%` : "";
-      sub.textContent = th > 0 ? `Shop for ${pre}${remaining.toFixed(0)} more${pctStr}` : el.reward_text || "";
     }
   };
   update();
@@ -935,6 +1142,22 @@ function renderCardFromTemplate(card, opts) {
     }
   };
   if (inline || card.cta_url) tile.addEventListener("click", open);
+  if (frame.celebrate_on_show === true && ctx.playReaction) {
+    const reaction = frame.celebrate_reaction || "celebrate";
+    const cscope = frame.celebrate_scope === "viewport" ? "viewport" : "card";
+    setTimeout(() => {
+      var _a;
+      (_a = ctx.playReaction) == null ? void 0 : _a.call(ctx, tile, reaction, frame.celebrate_lottie, cscope);
+      if (cscope === "viewport") {
+        try {
+          if (typeof sessionStorage !== "undefined") {
+            sessionStorage.setItem("aegis:celebrated", String(Date.now()));
+          }
+        } catch {
+        }
+      }
+    }, 0);
+  }
   return tile;
 }
 const MAX_CARDS_RENDERED = 10;
@@ -1011,6 +1234,9 @@ function renderCarouselCards(ctx) {
       layoutAccent: accent
     });
     tile.setAttribute("data-card-index", String(i));
+    tile.addEventListener("click", () => {
+      trackEvent(campaign.id, "clicked", { stepId: `card_${i}` });
+    });
     track.appendChild(tile);
   });
   card.appendChild(track);
@@ -1311,21 +1537,23 @@ function buildProgressBar(ctx, inline) {
   };
   const update = () => {
     const cur = readCurrentValue();
-    const pct = Math.max(0, Math.min(100, cur / threshold * 100));
+    const { pct, complete, remaining, milestonesReached } = computeProgress({
+      threshold,
+      current: cur
+    });
     fillEl.style.width = `${pct}%`;
     numeric.textContent = `${cur.toFixed(0)} / ${threshold.toFixed(0)} · ${Math.round(pct)}%`;
-    shimmer.style.display = pct >= 100 ? "none" : "";
-    if (pct >= 25) fireMilestone("q25");
-    if (pct >= 50) fireMilestone("q50");
-    if (pct >= 75) fireMilestone("q75");
-    if (pct >= 100) {
+    shimmer.style.display = complete ? "none" : "";
+    for (const m2 of milestonesReached) {
+      if (m2 !== "unlocked") fireMilestone(m2);
+    }
+    if (complete) {
       footnote.textContent = rewardText;
       if (!lastFiredUnlock) {
         lastFiredUnlock = true;
         trackEvent(campaign.id, "clicked", { stepId: "unlocked" });
       }
     } else {
-      const remaining = Math.max(0, threshold - cur);
       footnote.textContent = `Add ${remaining.toFixed(0)} more to unlock: ${rewardText}`;
     }
   };
@@ -2244,6 +2472,9 @@ function injectStoryStyles() {
   `;
   document.head.appendChild(style);
 }
+function earnPct(current, threshold) {
+  return computeProgress({ threshold, current }).pct;
+}
 const num = (v, d) => {
   const n = Number(v);
   return Number.isFinite(n) ? n : d;
@@ -2286,7 +2517,8 @@ function openGameModal(ctx, className, maxWidth = 360) {
   };
   const close = document.createElement("button");
   close.type = "button";
-  close.innerHTML = lucideSvg("x", { size: 15 });
+  const closeIcon = lucideSvgEl("x", { size: 15 });
+  if (closeIcon) close.appendChild(closeIcon);
   close.setAttribute("aria-label", "Close");
   close.style.cssText = `position:absolute;top:10px;right:10px;width:30px;height:30px;border:none;border-radius:999px;background:${branded ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.05)"};color:${branded ? "#fff" : "#475569"};font-size:15px;cursor:pointer;z-index:1;`;
   close.addEventListener("click", () => dismiss(true));
@@ -2378,7 +2610,7 @@ function renderMilestone(ctx) {
   const cur = num(ic.milestone_current, 1200);
   const target = num(ic.milestone_target, 2e3);
   const steps = arr(ic.milestone_steps);
-  const pct = target > 0 ? cur / target * 100 : 0;
+  const pct = earnPct(cur, target);
   s.content.appendChild(gEl("div", "font-size:13px;opacity:0.8;margin-bottom:2px", `${unit}${cur} of ${unit}${target}`));
   s.content.appendChild(fillBar(s.accent, pct));
   s.content.appendChild(gEl("div", "font-size:13px;font-weight:600", `${unit}${Math.max(0, target - cur)} to go`));
@@ -2399,7 +2631,7 @@ function renderChallenge(ctx) {
   const s = openGameModal(ctx, "aegis-in-app-challenge");
   const tasks = arr(ic.challenge_tasks);
   const done = tasks.filter((t) => t.done).length;
-  const pct = tasks.length ? done / tasks.length * 100 : 0;
+  const pct = tasks.length ? earnPct(done, tasks.length) : 0;
   if (str$1(ic.challenge_deadline_text)) s.content.appendChild(gEl("div", "font-size:12px;opacity:0.65;margin-bottom:8px", str$1(ic.challenge_deadline_text)));
   tasks.forEach((t) => {
     const row = gEl("div", "display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(148,163,184,0.18);font-size:13px;text-align:left");
@@ -2610,7 +2842,7 @@ function renderStampCard(ctx) {
   const nextReward = [...rewardAt.keys()].filter((p) => p > filled).sort((a, b) => a - b)[0];
   const progressTxt = nextReward ? `${nextReward - filled} more → ${rewardAt.get(nextReward)}` : "Card complete!";
   const sub = gEl("div", "font-size:13px;font-weight:600;margin-top:2px");
-  sub.appendChild(fillBar(ink, filled / total * 100));
+  sub.appendChild(fillBar(ink, earnPct(filled, total)));
   sub.appendChild(gEl("div", "", `${filled} of ${total}`));
   sub.appendChild(gEl("div", "font-weight:400;opacity:0.82;margin-top:1px", str$1(ic.stamp_reward_text) || progressTxt));
   s.content.appendChild(sub);
@@ -2713,7 +2945,7 @@ function renderTierLadder(ctx) {
   const curIdx = Math.min(list.length - 1, num(ic.tier_current_index, 1));
   const curPts = num(ic.tier_current_points, 640);
   const nextPts = num(ic.tier_next_points, 1e3);
-  const pct = nextPts > 0 ? curPts / nextPts * 100 : 0;
+  const pct = earnPct(curPts, nextPts);
   const perks = arr(ic.tier_perks);
   const next = list[Math.min(list.length - 1, curIdx + 1)];
   const ladder = gEl("div", "display:flex;align-items:flex-start;justify-content:center;margin:6px 0 12px");
@@ -4565,6 +4797,13 @@ let activeTriggers = null;
 function str(v) {
   return typeof v === "string" && v.length > 0 ? v : void 0;
 }
+function resolveChatDisplayMode(raw) {
+  var _a, _b;
+  if (raw === "nav") return "nav";
+  if (raw === "bubble") return "bubble";
+  const isMobile = typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(max-width: 767px)")) == null ? void 0 : _b.matches) === true;
+  return isMobile ? "nav" : "bubble";
+}
 function renderActiveWebChat(ctx, creds) {
   if (typeof document === "undefined") return null;
   if (activeInstance) return activeInstance;
@@ -4584,10 +4823,9 @@ function renderActiveWebChat(ctx, creds) {
     logoUrl: logo ? ctx.sanitizeUrl(logo) ?? void 0 : void 0,
     position: ic.chat_position === "bottom-left" ? "bottom-left" : void 0,
     surfaceStyle: ic.chat_theme === "tinted" ? "tinted" : void 0,
-    // 'nav' = headless (no bubble); the host opens it via aegis.chat.open() or a
-    // client_trigger. Defaults to 'bubble'. Per-device override via device_type
-    // targeting on the campaign (e.g. a mobile campaign with chat_display_mode='nav').
-    displayMode: ic.chat_display_mode === "nav" ? "nav" : void 0,
+    // Explicit chat_display_mode wins; unset → responsive (phones = headless
+    // 'nav' so the host's bottom-nav "Ask" tab is the entry; desktop = 'bubble').
+    displayMode: resolveChatDisplayMode(ic.chat_display_mode),
     agentPersona: str(ic.chat_agent_persona),
     quickReplies: Array.isArray(ic.chat_quick_replies) ? ic.chat_quick_replies.filter((q) => typeof q === "string") : void 0,
     // Bridge the engine's session lifecycle to campaign analytics. Per the
@@ -5107,6 +5345,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       this.emitServedEvents(this.campaigns);
       this.emit("campaigns-loaded", this.campaigns);
       this.readyResolve();
+      this.mountPersistentLaunchers();
       this.tryDisplayNextCampaign();
       this.renderIntoSlots();
       this.renderIntoAnchors();
@@ -5170,12 +5409,28 @@ const _AegisInAppManager = class _AegisInAppManager {
   }
   tryDisplayNextCampaign() {
     const campaign = this.campaigns.find(
-      (c) => !this.displayedCampaigns.has(c.id) && !c.client_trigger && !this.isSuppressed(c.id)
+      (c) => !this.displayedCampaigns.has(c.id) && !c.client_trigger && !this.isSuppressed(c.id) && c.type !== "active_web_chat"
     );
     if (campaign) {
       this.displayCampaign(campaign);
     }
   }
+  /** Persistent launchers (active_web_chat) mount AMBIENTLY on every arm — a
+   *  single always-on entry point, NOT an interruption, so they must not
+   *  compete in the one-at-a-time overlay queue (tryDisplayNextCampaign).
+   *  Idempotent: renderActiveWebChatLauncher no-ops once a launcher is live and
+   *  displayedCampaigns guards re-display. Before this, the launcher only
+   *  mounted when it happened to be the single campaign tryDisplayNextCampaign
+   *  picked — so aegis.chat.open() / the mobile "Ask" tab silently did nothing
+   *  whenever another non-triggered campaign was armed first. */
+  mountPersistentLaunchers() {
+    for (const c of this.campaigns) {
+      if (c.type !== "active_web_chat") continue;
+      if (this.displayedCampaigns.has(c.id)) continue;
+      if (this.isSuppressed(c.id)) continue;
+      this.displayCampaign(c);
+    }
+  }
   /**
    * Scan the page for `[data-aegis-slot]` anchors and render any
    * campaign whose `widget_category` matches the slot key AND whose
@@ -5556,7 +5811,6 @@ const _AegisInAppManager = class _AegisInAppManager {
       target = sizer;
     }
     const { bg, text } = this._surfacePalette(campaign);
-    const submitUrl = options == null ? void 0 : options.submitUrl;
     const _formFields = Array.isArray(ic.form_fields) ? ic.form_fields : null;
     let rendered = false;
     if (_formFields && _formFields.length > 0) {
@@ -5571,43 +5825,22 @@ const _AegisInAppManager = class _AegisInAppManager {
       }
       return;
     }
-    const _tpl = ic.card_template;
-    const _hasComposedTemplate = !!_tpl && typeof _tpl === "object" && Array.isArray(_tpl.elements);
+    this._ensureSurveyTemplate(campaign);
     const _isMultiCard = campaign.sub_type === "product_recommendation" || campaign.sub_type === "carousel_cards";
-    if (_hasComposedTemplate && !_isMultiCard) {
+    if (this._hasComposedTemplate(ic) && !_isMultiCard) {
       rendered = this.renderComposedCardSlot(campaign, ic, target);
     } else if (campaign.widget_category === "hero") {
       rendered = renderHeroInline(this.buildRenderContext(campaign), target);
     } else
       switch (campaign.sub_type) {
-        case "star_rating":
-          rendered = this.renderStarRatingSlot(
-            campaign,
-            ic,
-            bg,
-            text,
-            target,
-            submitUrl
-          );
-          break;
-        case "nps_survey":
-          rendered = this.renderNPSSurveySlot(
-            campaign,
-            ic,
-            bg,
-            text,
-            target,
-            submitUrl
-          );
-          break;
+        // P6.full — star_rating / nps_survey / quick_poll slots route through the
+        // unified composed-card slot engine via `_ensureSurveyTemplate` (the gate
+        // above), so the bespoke *Slot survey renderers are RETIRED.
         // Parity tracker — built-in embedded gamification renderers (no
         // AegisMessageRuntime callback needed, so they work on the bill).
         case "spin_wheel":
           rendered = this.renderSpinWheelSlot(campaign, ic, bg, text, target);
           break;
-        case "quick_poll":
-          rendered = this.renderQuickPollSlot(campaign, ic, bg, text, target);
-          break;
         case "carousel_cards":
           rendered = this.renderCarouselCardsSlot(campaign, ic, bg, text, target);
           break;
@@ -5652,48 +5885,70 @@ const _AegisInAppManager = class _AegisInAppManager {
       this.emit("campaign-shown", campaign);
     }
   }
-  /**
-   * Slot-mode wrappers. They build a small card container (no overlay
-   * positioning, no close button) and append the SHARED body element
-   * the overlay path also uses. Body construction lives in the
-   * `_buildXxxBody` helpers below so visual output stays identical
-   * between overlay and slot modes — adding a renderer feature in
-   * one place updates both.
-   */
-  renderStarRatingSlot(campaign, ic, bg, text, target, submitUrl) {
-    const st = this._slotStyle(campaign);
-    const card = this._wrapInSlotCard(
-      "aegis-in-app-rating-card",
-      campaign.id,
-      bg,
-      text,
-      st.radius
-    );
-    card.appendChild(
-      this._buildStarRatingBody(campaign, ic, text, "slot", submitUrl, st)
-    );
-    target.appendChild(card);
-    return true;
-  }
-  renderNPSSurveySlot(campaign, ic, bg, text, target, submitUrl) {
-    const st = this._slotStyle(campaign);
-    const card = this._wrapInSlotCard(
-      "aegis-in-app-nps-card",
-      campaign.id,
-      bg,
-      text,
-      st.radius
-    );
-    card.appendChild(
-      this._buildNPSSurveyBody(campaign, ic, text, "slot", submitUrl, st)
-    );
-    target.appendChild(card);
-    return true;
-  }
   /** §7.13.H — generic embedded card: image / title / body / coupon chip / CTA.
    *  The catch-all for banner + nudge sub_types (birthday, referral, app-install,
    *  win-back, etc.) so EVERY gallery nudge renders on the bill (previously only
    *  star_rating / nps_survey / form were handled → nudges never appeared). */
+  /**
+   * Whether `interactive_config` carries a composed `card_template` (non-empty
+   * `elements[]`). The ONE detector shared by all three composed-card cutover
+   * gates — inline slot, chrome overlay, and the P6 survey-overlay cutover — so
+   * they can't drift (the inline gate previously omitted the non-empty check).
+   */
+  _hasComposedTemplate(ic) {
+    const tpl = ic.card_template;
+    return !!tpl && typeof tpl === "object" && Array.isArray(tpl.elements) && tpl.elements.length > 0;
+  }
+  /**
+   * P6.full — flat survey → card_template adapter. A `nps_survey` / `star_rating`
+   * / `quick_poll` authored WITHOUT a card_template gets one synthesised in place
+   * (carrying its follow-up config), so the EXISTING composed-template gates route
+   * it through the ONE card-template engine + the shared element builders (with
+   * the ported reason-capture/thank-you flows) — overlay AND slot. Back-compat:
+   * the field names + follow-up defaults match the retired bespoke renderers.
+   * No-op when a template already exists or the type isn't a single-card survey.
+   */
+  _ensureSurveyTemplate(campaign) {
+    const ic = campaign.interactive_config || {};
+    if (this._hasComposedTemplate(ic)) return;
+    let element = null;
+    if (campaign.sub_type === "nps_survey") {
+      element = {
+        type: "nps",
+        content: ic.question,
+        thanks_text: ic.thank_you_message,
+        nps_followup_enabled: ic.nps_followup_enabled !== false,
+        nps_follow_up_promoter: ic.nps_follow_up_promoter,
+        nps_follow_up_passive: ic.nps_follow_up_passive,
+        nps_follow_up_detractor: ic.nps_follow_up_detractor,
+        nps_reason_chips: ic.nps_reason_chips,
+        nps_promoter_threshold: ic.nps_promoter_threshold,
+        nps_promoter_url: ic.nps_promoter_url,
+        nps_promoter_cta: ic.nps_promoter_cta
+      };
+    } else if (campaign.sub_type === "star_rating") {
+      element = {
+        type: "rating_input",
+        content: ic.question,
+        rating_scale: ic.rating_scale,
+        thanks_text: ic.thank_you_message,
+        rating_followup_enabled: ic.rating_followup_enabled !== false,
+        rating_followup_threshold: ic.rating_followup_threshold,
+        rating_followup_prompt: ic.rating_followup_prompt,
+        rating_high_url: ic.rating_high_url ?? ic.nps_promoter_url,
+        rating_high_cta: ic.rating_high_cta
+      };
+    } else if (campaign.sub_type === "quick_poll") {
+      const opts = Array.isArray(ic.poll_options) ? ic.poll_options : Array.isArray(ic.options) ? ic.options : [];
+      if (opts.length >= 2) {
+        element = { type: "poll", content: ic.question, poll_options: opts, thanks_text: ic.thank_you_message };
+      }
+    }
+    if (!element) return;
+    const cleaned = Object.fromEntries(Object.entries(element).filter(([, v]) => v !== void 0));
+    ic.card_template = { frame: {}, elements: [cleaned] };
+    campaign.interactive_config = ic;
+  }
   /**
    * Composed single card — renders a campaign's top-level `card_template`
    * (frame + elements: icon/text/progress/image/cta/group/…) through the generic
@@ -6646,88 +6901,6 @@ const _AegisInAppManager = class _AegisInAppManager {
     }
     return true;
   }
-  /** Built-in embedded QUICK POLL — option buttons submit the chosen index. */
-  renderQuickPollSlot(campaign, ic, bg, text, target) {
-    const st = this._slotStyle(campaign);
-    const card = this._wrapInSlotCard("aegis-in-app-poll-card", campaign.id, bg, text, st.radius);
-    const opts = Array.isArray(ic.poll_options) ? ic.poll_options.filter((o) => typeof o === "string") : [];
-    const body = document.createElement("div");
-    body.style.cssText = `padding: ${st.padY ?? 12}px ${st.padX ?? 12}px; display: flex; flex-direction: column; gap: 6px;`;
-    if (campaign.title) {
-      const t = document.createElement("div");
-      t.style.cssText = `font-size: 13px; font-weight: ${st.weight ?? "700"};`;
-      t.textContent = campaign.title;
-      body.appendChild(t);
-    }
-    const buttons = [];
-    opts.forEach((opt, i) => {
-      const ob = document.createElement("button");
-      ob.style.cssText = `position: relative; overflow: hidden; text-align: left; padding: 8px 10px; border-radius: ${st.btnRadius ?? 8}px; border: 1px solid ${text}40; background: transparent; color: ${text}; font-size: 12px; cursor: pointer; transition: border-color 0.2s ease;`;
-      const lbl = document.createElement("span");
-      lbl.style.cssText = "position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px;";
-      const lblText = document.createElement("span");
-      lblText.textContent = opt;
-      const lblPct = document.createElement("span");
-      lblPct.style.cssText = "font-weight: 700; opacity: 0; transition: opacity 0.3s ease;";
-      lbl.appendChild(lblText);
-      lbl.appendChild(lblPct);
-      ob.appendChild(lbl);
-      ob.addEventListener("click", () => {
-        void this.trackEvent(campaign.id, "clicked");
-        buttons.forEach((b) => b.disabled = true);
-        this._paintPollResult(buttons, opts, i, null, text);
-        this.addAnimationStyles();
-        void this.submitWidgetResponse(campaign, "poll", { option_index: i, option_label: opt }).then((resp) => {
-          const dist = this._readPollDistribution(resp, opts.length);
-          if (dist) this._paintPollResult(buttons, opts, i, dist, text);
-        });
-        this._playReaction(card, "affirm", "check.json", ic);
-      });
-      buttons.push(ob);
-      body.appendChild(ob);
-    });
-    card.appendChild(body);
-    target.appendChild(card);
-    return true;
-  }
-  /** Pull a poll vote distribution out of the server response, if present.
-   *  Accepts `results`/`distribution`/`tallies` as a number[] aligned to the
-   *  option order. Returns null when the server didn't surface tallies (then
-   *  we only confirm the chosen option — never fabricate percentages). */
-  _readPollDistribution(resp, count) {
-    if (!resp) return null;
-    const raw = resp.results ?? resp.distribution ?? resp.tallies;
-    if (!Array.isArray(raw) || raw.length !== count) return null;
-    const nums = raw.map((v) => typeof v === "number" && isFinite(v) && v >= 0 ? v : 0);
-    return nums.some((n) => n > 0) ? nums : null;
-  }
-  /** Animate result bars on the poll options. With a real `dist` it renders
-   *  each option's share; without one it just fills the selected option 100%
-   *  as a "vote locked in" confirmation. */
-  _paintPollResult(buttons, _opts, selected, dist, text) {
-    const total = dist ? dist.reduce((a, b) => a + b, 0) || 1 : 1;
-    buttons.forEach((ob, i) => {
-      const pct = dist ? Math.round(dist[i] / total * 100) : i === selected ? 100 : 0;
-      let fill = ob.querySelector(".aegis-poll-fill");
-      if (!fill) {
-        fill = document.createElement("span");
-        fill.className = "aegis-poll-fill";
-        fill.style.cssText = `position: absolute; inset: 0 auto 0 0; z-index: 0; background: ${i === selected ? text : text + "22"}; opacity: ${i === selected ? "0.16" : "0.1"};`;
-        ob.insertBefore(fill, ob.firstChild);
-      }
-      fill.style.setProperty("--pct", `${pct}%`);
-      fill.style.animation = "aegisPollFill 0.5s ease forwards";
-      if (i === selected) ob.style.borderColor = text;
-      const pctLabel = ob.querySelector("span > span:last-child");
-      if (pctLabel && dist) {
-        pctLabel.textContent = `${pct}%`;
-        pctLabel.style.opacity = "0.8";
-      } else if (pctLabel && i === selected) {
-        pctLabel.innerHTML = lucideSvg("check", { size: 14 });
-        pctLabel.style.opacity = "0.8";
-      }
-    });
-  }
   /**
    * Built-in embedded IMAGE/VIDEO CAROUSEL — a swipeable horizontal strip of
    * `interactive_config.cards` (image OR video + title + body + CTA), contained
@@ -7306,23 +7479,6 @@ const _AegisInAppManager = class _AegisInAppManager {
     for (const c of cands) if (typeof c === "string" && c) return c;
     return null;
   }
-  /**
-   * Token-bound submission helper. POSTs the structured response to
-   * the per-token submit URL the page handler embedded. Best-effort
-   * — failure is logged but doesn't throw (the customer already
-   * clicked; we can't undo their interaction).
-   */
-  _submitTokenResponse(submitUrl, payload) {
-    if (!submitUrl) return;
-    fetch(submitUrl, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ response: payload }),
-      keepalive: true
-    }).catch((err) => {
-      this.log(`token submit failed: ${err}`, "warn");
-    });
-  }
   // --- Shared body builders (used by both overlay + slot paths) ----------
   //
   // Sizing: `'overlay'` matches the legacy fullscreen-modal scale (24px
@@ -7383,398 +7539,6 @@ const _AegisInAppManager = class _AegisInAppManager {
       el.style.boxShadow = "none";
     }
   }
-  // Optional header/brand image atop a survey-style widget (star / nps).
-  _appendHeaderImage(body, ic) {
-    const url = ic.header_image_url;
-    if (!url) return;
-    const safe = this.sanitizeUrl(url);
-    if (!safe) return;
-    const img = document.createElement("img");
-    img.src = safe;
-    img.alt = "";
-    img.style.cssText = "display: block; max-height: 72px; max-width: 60%; margin: 0 auto 14px; object-fit: contain;";
-    body.appendChild(img);
-  }
-  _buildStarRatingBody(campaign, ic, text, variant, submitUrl, slotStyle) {
-    const isOverlay = variant === "overlay";
-    const padding = isOverlay ? "24px" : `${(slotStyle == null ? void 0 : slotStyle.padY) ?? 20}px ${(slotStyle == null ? void 0 : slotStyle.padX) ?? 20}px`;
-    const titleSize = isOverlay ? "18px" : "16px";
-    const titleWeight = isOverlay ? "700" : (slotStyle == null ? void 0 : slotStyle.weight) ?? "600";
-    const titleMargin = isOverlay ? "16px" : "12px";
-    const starSize = isOverlay ? "32px" : "28px";
-    const starsMarginBottom = isOverlay ? "16px" : "0";
-    const hoverScale = isOverlay ? "1.2" : "1.15";
-    const body = document.createElement("div");
-    body.style.cssText = `padding: ${padding}; text-align: center;`;
-    this._appendHeaderImage(body, ic);
-    const title = document.createElement("div");
-    title.style.cssText = `font-size: ${titleSize}; font-weight: ${titleWeight}; margin-bottom: ${titleMargin};`;
-    title.textContent = campaign.title || "Rate your experience";
-    body.appendChild(title);
-    const stars = document.createElement("div");
-    stars.style.cssText = `display: flex; gap: 8px; justify-content: center;` + (starsMarginBottom !== "0" ? ` margin-bottom: ${starsMarginBottom};` : "");
-    const maxStars = ic.rating_scale || 5;
-    const GOLD = "#fbbf24";
-    const iconSet = ic.rating_icon || "star";
-    const EMOJI = ["😞", "🙁", "😐", "🙂", "😀", "🤩"];
-    const emojiFor = (idx) => {
-      const k = maxStars <= 1 ? EMOJI.length - 1 : Math.round(idx / (maxStars - 1) * (EMOJI.length - 1));
-      return EMOJI[Math.max(0, Math.min(EMOJI.length - 1, k))];
-    };
-    const glyph = (on, idx) => iconSet === "emoji" ? emojiFor(idx) : iconSet === "heart" ? on ? "♥" : "♡" : on ? "★" : "☆";
-    const labels = Array.isArray(ic.rating_labels) ? ic.rating_labels : null;
-    let caption2 = null;
-    if (labels && labels.length > 0) {
-      caption2 = document.createElement("div");
-      caption2.style.cssText = `font-size: 12px; opacity: 0.7; margin-top: 8px; min-height: 16px; color: ${text || "inherit"};`;
-    }
-    const starEls = [];
-    let selected = 0;
-    const paint = (n) => {
-      starEls.forEach((el, idx) => {
-        const on = idx < n;
-        el.textContent = glyph(on, idx);
-        if (iconSet === "emoji") {
-          el.style.opacity = on || n === 0 ? "1" : "0.3";
-          el.style.color = "inherit";
-        } else {
-          el.style.color = on ? GOLD : text || "inherit";
-        }
-        el.style.transform = on && idx === n - 1 ? `scale(${hoverScale})` : "scale(1)";
-      });
-      if (caption2 && labels) {
-        const lbl = n > 0 ? labels[Math.min(n - 1, labels.length - 1)] : "";
-        caption2.textContent = lbl || "";
-      }
-    };
-    for (let i = 1; i <= maxStars; i++) {
-      const star = document.createElement("span");
-      star.style.cssText = `font-size: ${starSize}; cursor: pointer; transition: transform 0.12s, color 0.12s, opacity 0.12s; user-select: none;` + (iconSet !== "emoji" && text ? ` color: ${text};` : "") + (iconSet === "emoji" ? " opacity: 0.3;" : "");
-      star.setAttribute("role", "button");
-      star.setAttribute("aria-label", `${i} ${iconSet === "heart" ? "heart" : "star"}${i > 1 ? "s" : ""}`);
-      star.textContent = glyph(false, i - 1);
-      const value = i;
-      star.addEventListener("mouseenter", () => paint(value));
-      star.addEventListener("mouseleave", () => paint(selected));
-      star.addEventListener("click", () => {
-        selected = value;
-        paint(selected);
-        star.style.transform = "scale(1.28)";
-        setTimeout(() => paint(selected), 160);
-        this.trackEvent(campaign.id, "clicked");
-        this._onStarRatingPicked(campaign, ic, body, value, maxStars, text, isOverlay, submitUrl);
-      });
-      starEls.push(star);
-      stars.appendChild(star);
-    }
-    body.appendChild(stars);
-    if (caption2) body.appendChild(caption2);
-    return body;
-  }
-  /**
-   * Post-rating flow — the Reelo/Plotline "smart rating" gate. A happy rater
-   * (>= threshold) is invited to leave a PUBLIC review; an unhappy one is given
-   * a PRIVATE "what went wrong?" comment box so the complaint is captured for
-   * the operator instead of landing on a public platform. Exactly ONE response
-   * row is written per rating (deferred on the low path until Send/Skip) so the
-   * star distribution isn't double-counted.
-   */
-  _onStarRatingPicked(campaign, ic, body, value, maxStars, text, isOverlay, submitUrl) {
-    if (submitUrl) {
-      this._submitTokenResponse(submitUrl, { sub_type: "star_rating", value });
-    }
-    const followupEnabled = isOverlay && ic.rating_followup_enabled !== false;
-    const threshold = ic.rating_followup_threshold || Math.ceil(maxStars * 0.8);
-    const isHigh = value >= threshold;
-    if (!isOverlay) {
-      if (isHigh) this._playReaction(body, "affirm", void 0, ic);
-      else if (value <= Math.max(1, Math.floor(maxStars * 0.4))) this._playReaction(body, "empathize", void 0, ic);
-      else this._playReaction(body, "acknowledge", void 0, ic);
-      return;
-    }
-    if (!followupEnabled) {
-      void this.submitWidgetResponse(campaign, "rating", { stars: value });
-      this._renderRatingThankYou(campaign, ic, body, isHigh);
-      return;
-    }
-    if (isHigh) {
-      void this.submitWidgetResponse(campaign, "rating", { stars: value });
-      this._renderRatingThankYou(campaign, ic, body, true);
-    } else {
-      this._renderRatingLowFollowup(campaign, ic, body, value, text);
-    }
-  }
-  /** Thank-you takeover; happy raters also get a public-review CTA when authored. */
-  _renderRatingThankYou(campaign, ic, body, isHigh) {
-    while (body.firstChild) body.removeChild(body.firstChild);
-    const modalEl = body.parentElement;
-    if (modalEl) modalEl.style.overflow = "visible";
-    body.style.position = "relative";
-    body.style.minHeight = "176px";
-    body.style.display = "flex";
-    body.style.flexDirection = "column";
-    body.style.alignItems = "center";
-    body.style.justifyContent = "center";
-    const heading = document.createElement("div");
-    heading.style.cssText = "font-size: 16px; font-weight: 700; margin-bottom: 8px;";
-    heading.textContent = isHigh ? ic.rating_high_prompt || "Thanks — glad you loved it!" : ic.thank_you_message || "Thanks for your feedback!";
-    body.appendChild(heading);
-    const reviewUrl = ic.rating_review_url;
-    if (isHigh && reviewUrl) {
-      const sub = document.createElement("div");
-      sub.style.cssText = "font-size: 13px; opacity: 0.8; margin-bottom: 14px;";
-      sub.textContent = "Would you share that with others?";
-      body.appendChild(sub);
-      const st = this.inAppStyle(campaign);
-      const cta = document.createElement("button");
-      cta.type = "button";
-      cta.textContent = campaign.button_text || "Leave a review";
-      cta.style.cssText = `padding: 10px 24px; border-radius: 999px; border: none; background: ${st.btnBg}; color: ${st.btnText}; font-weight: 800; font-size: 13.5px; cursor: pointer;`;
-      cta.addEventListener("click", () => {
-        this.trackEvent(campaign.id, "clicked", { meta: { action: "review_redirect" } });
-        const safe = this.sanitizeUrl(reviewUrl);
-        if (safe) this.navigateToCampaignAction(campaign, safe);
-      });
-      body.appendChild(cta);
-    } else {
-      this._playReaction(body, isHigh ? "affirm" : "acknowledge", void 0, ic);
-    }
-  }
-  /** Unhappy-path private comment capture; submits {stars, comment} once. */
-  _renderRatingLowFollowup(campaign, ic, body, value, text) {
-    this.addAnimationStyles();
-    while (body.firstChild) body.removeChild(body.firstChild);
-    const heading = document.createElement("div");
-    heading.style.cssText = "font-size: 15px; font-weight: 700; margin-bottom: 10px;";
-    heading.textContent = ic.rating_low_prompt || "Sorry to hear that. What went wrong?";
-    body.appendChild(heading);
-    const ta = document.createElement("textarea");
-    ta.className = "aegis-rating-comment";
-    ta.rows = 3;
-    ta.placeholder = "Tell us how we can do better…";
-    ta.style.cssText = `width: 100%; box-sizing: border-box; padding: 10px; border-radius: 10px; border: 1px solid ${text}33; background: transparent; color: ${text || "inherit"}; font-size: 13px; resize: vertical; margin-bottom: 12px; font-family: inherit;`;
-    body.appendChild(ta);
-    const st = this.inAppStyle(campaign);
-    const row = document.createElement("div");
-    row.style.cssText = "display: flex; gap: 8px; justify-content: center;";
-    let done = false;
-    const finish = (withComment) => {
-      if (done) return;
-      done = true;
-      const comment = withComment ? ta.value.trim() : "";
-      void this.submitWidgetResponse(campaign, "rating", comment ? { stars: value, comment } : { stars: value });
-      this._renderRatingThankYou(campaign, ic, body, false);
-    };
-    const send = document.createElement("button");
-    send.type = "button";
-    send.textContent = "Send feedback";
-    send.style.cssText = `padding: 9px 20px; border-radius: 999px; border: none; background: ${st.btnBg}; color: ${st.btnText}; font-weight: 800; font-size: 13px; cursor: pointer;`;
-    send.addEventListener("click", () => finish(true));
-    const skip = document.createElement("button");
-    skip.type = "button";
-    skip.textContent = "Skip";
-    skip.style.cssText = `padding: 9px 16px; border-radius: 999px; border: 1px solid ${text}33; background: transparent; color: ${text || "inherit"}; font-weight: 600; font-size: 13px; cursor: pointer;`;
-    skip.addEventListener("click", () => finish(false));
-    row.appendChild(send);
-    row.appendChild(skip);
-    body.appendChild(row);
-    ta.focus();
-  }
-  _buildNPSSurveyBody(campaign, ic, text, variant, submitUrl, slotStyle) {
-    const isOverlay = variant === "overlay";
-    const padding = isOverlay ? "24px" : `${(slotStyle == null ? void 0 : slotStyle.padY) ?? 20}px ${(slotStyle == null ? void 0 : slotStyle.padX) ?? 20}px`;
-    const titleAlign = isOverlay ? "center" : "center";
-    const body = document.createElement("div");
-    body.style.cssText = `padding: ${padding};` + (isOverlay ? " text-align: center;" : "");
-    this._appendHeaderImage(body, ic);
-    const title = document.createElement("div");
-    title.style.cssText = `font-size: 16px; font-weight: ${isOverlay ? "700" : (slotStyle == null ? void 0 : slotStyle.weight) ?? "600"}; margin-bottom: ${isOverlay ? "16px" : "12px"}; text-align: ${titleAlign};`;
-    title.textContent = ic.nps_question || campaign.title || "How likely are you to recommend us?";
-    body.appendChild(title);
-    const npsColor = (n) => n <= 6 ? "#ef4444" : n <= 8 ? "#f59e0b" : "#10b981";
-    const scale = document.createElement("div");
-    scale.style.cssText = isOverlay ? "display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px;" : "display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px;";
-    const onPick = (value) => {
-      this.trackEvent(campaign.id, "clicked");
-      if (submitUrl) {
-        this._submitTokenResponse(submitUrl, { sub_type: "nps_survey", value });
-      }
-      const followupEnabled = isOverlay && ic.nps_followup_enabled !== false;
-      if (followupEnabled) {
-        this._renderNpsReasonFollowup(campaign, ic, body, value, text);
-        return;
-      }
-      void this.submitWidgetResponse(campaign, "nps", { score: value });
-      this.addAnimationStyles();
-      const thanks = document.createElement("div");
-      thanks.style.cssText = `font-size: 14px; font-weight: 600; padding: 8px 0; text-align: center; color: ${text};`;
-      thanks.textContent = value >= 9 ? "Thanks! We are glad you love it." : value <= 6 ? "Thanks for the honest feedback — we will do better." : "Thank you for your feedback!";
-      scale.replaceWith(thanks);
-      labels == null ? void 0 : labels.remove();
-      if (value >= 9) this._playReaction(body, "affirm", void 0, ic);
-      else if (value <= 6) this._playReaction(body, "empathize", void 0, ic);
-      else this._playReaction(body, "acknowledge", void 0, ic);
-    };
-    for (let n = 0; n <= 10; n++) {
-      const col = npsColor(n);
-      const value = n;
-      if (isOverlay) {
-        const btn = document.createElement("span");
-        btn.style.cssText = `
-          width: 28px; height: 28px; border-radius: 6px; display: flex;
-          align-items: center; justify-content: center; font-size: 12px;
-          font-weight: 700; cursor: pointer; background: ${col}; color: #fff;
-          opacity: 0.85; transition: transform 0.1s, opacity 0.15s;
-        `;
-        btn.textContent = String(n);
-        btn.addEventListener("mouseenter", () => {
-          btn.style.opacity = "1";
-          btn.style.transform = "translateY(-1px)";
-        });
-        btn.addEventListener("mouseleave", () => {
-          btn.style.opacity = "0.85";
-          btn.style.transform = "translateY(0)";
-        });
-        btn.addEventListener("click", () => onPick(value));
-        scale.appendChild(btn);
-      } else {
-        const btn = document.createElement("button");
-        btn.style.cssText = `
-          padding: 8px 0; border-radius: 6px; border: 1px solid ${col}88;
-          background: ${col}14; color: ${col}; font-size: 13px; font-weight: 700;
-          cursor: pointer; transition: transform 0.12s, background 0.15s;
-        `;
-        btn.textContent = String(n);
-        btn.addEventListener("mouseenter", () => {
-          btn.style.background = col;
-          btn.style.color = "#fff";
-          btn.style.transform = "translateY(-1px)";
-        });
-        btn.addEventListener("mouseleave", () => {
-          btn.style.background = `${col}14`;
-          btn.style.color = col;
-          btn.style.transform = "translateY(0)";
-        });
-        btn.addEventListener("click", () => onPick(value));
-        scale.appendChild(btn);
-      }
-    }
-    body.appendChild(scale);
-    let labels = null;
-    if (isOverlay) {
-      labels = document.createElement("div");
-      labels.style.cssText = "display: flex; justify-content: space-between; font-size: 11px; opacity: 0.6; margin-bottom: 16px;";
-      const notLikely = document.createElement("span");
-      notLikely.textContent = "Not likely";
-      const veryLikely = document.createElement("span");
-      veryLikely.textContent = "Very likely";
-      labels.appendChild(notLikely);
-      labels.appendChild(veryLikely);
-      body.appendChild(labels);
-    }
-    return body;
-  }
-  /**
-   * NPS reason-capture step (overlay). Wires the per-band `nps_follow_up_*`
-   * prompt (promoter / passive / detractor) as the heading and captures an
-   * open-text reason (+ optional quick-pick chips). Submits {score, comment}
-   * exactly ONCE (deferred from the pick), then shows the thank-you (promoters
-   * get an optional review/referral CTA).
-   */
-  _renderNpsReasonFollowup(campaign, ic, body, value, text) {
-    this.addAnimationStyles();
-    const promoterThreshold = ic.nps_promoter_threshold || 9;
-    const prompt = value >= promoterThreshold ? ic.nps_follow_up_promoter || "What do you love most about us?" : value <= 6 ? ic.nps_follow_up_detractor || "How can we improve?" : ic.nps_follow_up_passive || "What would make us a 10?";
-    while (body.firstChild) body.removeChild(body.firstChild);
-    const heading = document.createElement("div");
-    heading.style.cssText = "font-size: 15px; font-weight: 700; margin-bottom: 10px; text-align: center;";
-    heading.textContent = prompt;
-    body.appendChild(heading);
-    const ta = document.createElement("textarea");
-    const chips = Array.isArray(ic.nps_reason_chips) ? ic.nps_reason_chips : [];
-    if (chips.length) {
-      const chipRow = document.createElement("div");
-      chipRow.style.cssText = "display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px;";
-      chips.slice(0, 8).forEach((c) => {
-        const chip = document.createElement("button");
-        chip.type = "button";
-        chip.textContent = c;
-        chip.style.cssText = `padding: 5px 11px; border-radius: 999px; border: 1px solid ${text}33; background: transparent; color: ${text || "inherit"}; font-size: 12px; cursor: pointer;`;
-        chip.addEventListener("click", () => {
-          ta.value = ta.value ? `${ta.value}, ${c}` : c;
-          ta.focus();
-        });
-        chipRow.appendChild(chip);
-      });
-      body.appendChild(chipRow);
-    }
-    ta.className = "aegis-rating-comment";
-    ta.rows = 3;
-    ta.placeholder = "Share a little more…";
-    ta.style.cssText = `width: 100%; box-sizing: border-box; padding: 10px; border-radius: 10px; border: 1px solid ${text}33; background: transparent; color: ${text || "inherit"}; font-size: 13px; resize: vertical; margin-bottom: 12px; font-family: inherit;`;
-    body.appendChild(ta);
-    const st = this.inAppStyle(campaign);
-    const row = document.createElement("div");
-    row.style.cssText = "display: flex; gap: 8px; justify-content: center;";
-    let done = false;
-    const finish = (withComment) => {
-      if (done) return;
-      done = true;
-      const comment = withComment ? ta.value.trim() : "";
-      void this.submitWidgetResponse(campaign, "nps", comment ? { score: value, comment } : { score: value });
-      this._renderNpsThankYou(campaign, ic, body, value >= promoterThreshold);
-    };
-    const send = document.createElement("button");
-    send.type = "button";
-    send.textContent = "Send";
-    send.style.cssText = `padding: 9px 20px; border-radius: 999px; border: none; background: ${st.btnBg}; color: ${st.btnText}; font-weight: 800; font-size: 13px; cursor: pointer;`;
-    send.addEventListener("click", () => finish(true));
-    const skip = document.createElement("button");
-    skip.type = "button";
-    skip.textContent = "Skip";
-    skip.style.cssText = `padding: 9px 16px; border-radius: 999px; border: 1px solid ${text}33; background: transparent; color: ${text || "inherit"}; font-weight: 600; font-size: 13px; cursor: pointer;`;
-    skip.addEventListener("click", () => finish(false));
-    row.appendChild(send);
-    row.appendChild(skip);
-    body.appendChild(row);
-    ta.focus();
-  }
-  /** NPS thank-you takeover; promoters get an optional review/referral CTA. */
-  _renderNpsThankYou(campaign, ic, body, isPromoter) {
-    while (body.firstChild) body.removeChild(body.firstChild);
-    const modalEl = body.parentElement;
-    if (modalEl) modalEl.style.overflow = "visible";
-    body.style.position = "relative";
-    body.style.minHeight = "176px";
-    body.style.display = "flex";
-    body.style.flexDirection = "column";
-    body.style.alignItems = "center";
-    body.style.justifyContent = "center";
-    const heading = document.createElement("div");
-    heading.style.cssText = "font-size: 16px; font-weight: 700; margin-bottom: 8px; text-align: center;";
-    heading.textContent = ic.thank_you_message || (isPromoter ? "Thanks — glad you love it!" : "Thanks for your feedback!");
-    body.appendChild(heading);
-    const reviewUrl = ic.nps_promoter_url;
-    if (isPromoter && reviewUrl) {
-      const sub = document.createElement("div");
-      sub.style.cssText = "font-size: 13px; opacity: 0.8; margin-bottom: 14px; text-align: center;";
-      sub.textContent = "Would you share that with others?";
-      body.appendChild(sub);
-      const st = this.inAppStyle(campaign);
-      const cta = document.createElement("button");
-      cta.type = "button";
-      cta.textContent = campaign.button_text || "Leave a review";
-      cta.style.cssText = `padding: 10px 24px; border-radius: 999px; border: none; background: ${st.btnBg}; color: ${st.btnText}; font-weight: 800; font-size: 13.5px; cursor: pointer;`;
-      cta.addEventListener("click", () => {
-        this.trackEvent(campaign.id, "clicked", { meta: { action: "nps_review_redirect" } });
-        const safe = this.sanitizeUrl(reviewUrl);
-        if (safe) this.navigateToCampaignAction(campaign, safe);
-      });
-      body.appendChild(cta);
-    } else {
-      this._playReaction(body, isPromoter ? "affirm" : "acknowledge", void 0, ic);
-    }
-  }
   /**
    * Evaluate the currently armed campaigns against a client-side event
    * and render any that match their `client_trigger`.
@@ -7836,6 +7600,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     this._displaySizeMul = this._sizeMul(
       campaign.interactive_config
     );
+    this._ensureSurveyTemplate(campaign);
     const interactiveSubTypes = /* @__PURE__ */ new Set([
       "spin_wheel",
       "scratch_card",
@@ -7859,11 +7624,9 @@ const _AegisInAppManager = class _AegisInAppManager {
     }
     {
       const ic2 = campaign.interactive_config || {};
-      const tpl2 = ic2.card_template;
-      const hasTpl2 = !!tpl2 && typeof tpl2 === "object" && Array.isArray(tpl2.elements) && tpl2.elements.length > 0;
       const multiCard2 = campaign.sub_type === "product_recommendation" || campaign.sub_type === "carousel_cards";
       const overlayCardType = campaign.type === "modal" || campaign.type === "banner" || campaign.type === "full_screen" || campaign.type === "half_interstitial";
-      if (hasTpl2 && !multiCard2 && overlayCardType) {
+      if (this._hasComposedTemplate(ic2) && !multiCard2 && overlayCardType) {
         this.renderComposedCardOverlay(campaign, ic2);
         this.trackEvent(campaign.id, "impression");
         this.emit("campaign-shown", campaign);
@@ -7985,7 +7748,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       sanitizeUrl: (url) => this.sanitizeUrl(url),
       navigate: (url, buttonId) => this.navigateToCampaignAction(campaign, url, buttonId),
       submitResponse: (responseType, payload) => this.submitWidgetResponse(campaign, responseType, payload),
-      playReaction: (el, intent, lottieFile) => this._playReaction(el, intent, lottieFile, campaign.interactive_config),
+      playReaction: (el, intent, lottieFile, scope) => this._playReaction(el, intent, lottieFile, campaign.interactive_config, scope),
       haptic: (pattern) => {
         try {
           if (typeof navigator !== "undefined" && typeof navigator.vibrate === "function") {
@@ -8010,19 +7773,17 @@ const _AegisInAppManager = class _AegisInAppManager {
     if (campaign.sub_type && renderGame(this.buildRenderContext(campaign), campaign.sub_type)) {
       return;
     }
+    {
+      const isMultiStepFlow = campaign.sub_type === "quiz" || campaign.sub_type === "multi_step_form";
+      if (this._hasComposedTemplate(ic) && !isMultiStepFlow) {
+        this.renderComposedCardOverlay(campaign, ic);
+        return;
+      }
+    }
     switch (campaign.sub_type) {
-      case "nps_survey":
-        this.renderNPSSurvey(campaign, ic, bg, text);
-        break;
       case "countdown_offer":
         this.renderCountdownOffer(campaign, ic, bg, text);
         break;
-      case "star_rating":
-        this.renderStarRating(campaign, ic, bg, text);
-        break;
-      case "quick_poll":
-        this.renderQuickPoll(campaign, ic, bg, text);
-        break;
       case "quiz":
         this.renderQuiz(campaign, ic, bg, text);
         break;
@@ -8189,21 +7950,6 @@ const _AegisInAppManager = class _AegisInAppManager {
     return true;
   }
   // --- Interactive Renderers ---
-  renderNPSSurvey(campaign, ic, bg, text) {
-    const overlay = this.createOverlay("aegis-in-app-nps-overlay");
-    const modal = document.createElement("div");
-    modal.style.cssText = `
-      max-width: 360px; width: 90%; border-radius: 16px; overflow: hidden;
-      background: ${bg}; color: ${text}; animation: aegisScaleIn 0.3s ease;
-      box-shadow: 0 16px 48px rgba(0,0,0,0.22);
-    `;
-    const body = this._buildNPSSurveyBody(campaign, ic, text, "overlay");
-    this.addCloseButton(body, overlay, campaign.id);
-    modal.appendChild(body);
-    overlay.appendChild(modal);
-    this.addAnimationStyles();
-    document.body.appendChild(overlay);
-  }
   renderCountdownOffer(campaign, ic, bg, text) {
     const overlay = this.createOverlay("aegis-in-app-countdown-overlay");
     const modal = document.createElement("div");
@@ -8291,84 +8037,6 @@ const _AegisInAppManager = class _AegisInAppManager {
     this.addAnimationStyles();
     document.body.appendChild(overlay);
   }
-  renderStarRating(campaign, ic, bg, text) {
-    const overlay = this.createOverlay("aegis-in-app-rating-overlay");
-    const modal = document.createElement("div");
-    modal.style.cssText = `
-      max-width: 320px; width: 90%; border-radius: 16px; overflow: hidden;
-      background: ${bg}; color: ${text}; animation: aegisScaleIn 0.3s ease;
-      box-shadow: 0 16px 48px rgba(0,0,0,0.22);
-    `;
-    const body = this._buildStarRatingBody(campaign, ic, text, "overlay");
-    this.addCloseButton(body, overlay, campaign.id);
-    modal.appendChild(body);
-    overlay.appendChild(modal);
-    this.addAnimationStyles();
-    document.body.appendChild(overlay);
-  }
-  renderQuickPoll(campaign, ic, bg, text) {
-    const overlay = this.createOverlay("aegis-in-app-poll-overlay");
-    const modal = document.createElement("div");
-    modal.style.cssText = `
-      max-width: 320px; width: 90%; border-radius: 16px; overflow: hidden;
-      background: ${bg}; color: ${text}; animation: aegisScaleIn 0.3s ease;
-      box-shadow: 0 16px 48px rgba(0,0,0,0.22);
-    `;
-    const body = document.createElement("div");
-    body.style.cssText = "padding: 24px; text-align: center;";
-    const title = document.createElement("div");
-    title.style.cssText = `font-size: 16px; font-weight: 700; margin-bottom: ${campaign.body ? "6px" : "16px"};`;
-    title.textContent = campaign.title || "Quick question";
-    body.appendChild(title);
-    if (campaign.body) {
-      const sub = document.createElement("div");
-      sub.style.cssText = `font-size: 13px; opacity: 0.8; margin-bottom: 16px; color: ${text};`;
-      sub.textContent = campaign.body;
-      body.appendChild(sub);
-    }
-    const options = ic.poll_options || [];
-    const optionsList = document.createElement("div");
-    optionsList.style.cssText = "display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;";
-    const buttons = [];
-    options.forEach((opt, i) => {
-      const optBtn = document.createElement("button");
-      optBtn.style.cssText = `
-        position: relative; overflow: hidden;
-        padding: 10px 16px; border-radius: 10px; border: 1px solid ${text}33;
-        background: transparent; color: ${text}; font-size: 14px; cursor: pointer;
-        text-align: left; transition: border-color 0.2s ease;
-      `;
-      const lbl = document.createElement("span");
-      lbl.style.cssText = "position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px;";
-      const lblText = document.createElement("span");
-      lblText.textContent = opt;
-      const lblPct = document.createElement("span");
-      lblPct.style.cssText = "font-weight: 700; opacity: 0; transition: opacity 0.3s ease;";
-      lbl.appendChild(lblText);
-      lbl.appendChild(lblPct);
-      optBtn.appendChild(lbl);
-      optBtn.addEventListener("click", () => {
-        this.trackEvent(campaign.id, "clicked");
-        buttons.forEach((b) => b.disabled = true);
-        this._paintPollResult(buttons, options, i, null, text);
-        void this.submitWidgetResponse(campaign, "poll", { option_index: i, option_label: opt }).then((resp) => {
-          const dist = this._readPollDistribution(resp, options.length);
-          if (dist) this._paintPollResult(buttons, options, i, dist, text);
-        });
-        const modalEl = body.parentElement;
-        if (modalEl) modalEl.style.overflow = "visible";
-        this._playReaction(body, "affirm", "check.json", ic);
-      });
-      buttons.push(optBtn);
-      optionsList.appendChild(optBtn);
-    });
-    body.appendChild(optionsList);
-    this.addCloseButton(body, overlay, campaign.id);
-    modal.appendChild(body);
-    overlay.appendChild(modal);
-    this.addAnimationStyles();
-    document.body.appendChild(overlay);
-  }
   /**
    * Multi-step form (SDK Demo v4 W1b) — in-app render type matching the
    * Plotline multi-step flow pattern: a progress bar + per-step question with
@@ -8400,6 +8068,13 @@ const _AegisInAppManager = class _AegisInAppManager {
     const total = steps.length;
     let current = 0;
     const answers = new Array(total).fill(null);
+    const flow = createFlowAccumulator();
+    const viewedSteps = /* @__PURE__ */ new Set();
+    const fireStepViewed = (idx) => {
+      if (viewedSteps.has(idx)) return;
+      viewedSteps.add(idx);
+      void this.trackEvent(campaign.id, "impression", { stepId: `step_${idx + 1}` });
+    };
     const progressTrack = document.createElement("div");
     progressTrack.style.cssText = `height: 4px; border-radius: 2px; background: ${text}22; margin-bottom: 16px; overflow: hidden;`;
     const progressFill = document.createElement("div");
@@ -8429,6 +8104,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       const step = steps[current] || {};
       const q = step.question || step.label || `Step ${current + 1}`;
       const opts = Array.isArray(step.options) ? step.options : [];
+      fireStepViewed(current);
       progressFill.style.width = `${Math.round(current / total * 100)}%`;
       stepLabel.textContent = `Step ${current + 1} of ${total}`;
       question.textContent = q;
@@ -8440,6 +8116,7 @@ const _AegisInAppManager = class _AegisInAppManager {
         ob.style.cssText = `padding: 10px 16px; border-radius: 10px; border: 1px solid ${text}33; background: ${selected ? text + "22" : "transparent"}; color: ${text}; font-size: 14px; cursor: pointer; text-align: left;`;
         ob.addEventListener("click", () => {
           answers[current] = opt;
+          flow.recordStep({ step_id: `step_${current + 1}`, response_type: "form_step", payload: { question: q, answer: opt } });
           renderStep();
         });
         optionsList.appendChild(ob);
@@ -8463,8 +8140,10 @@ const _AegisInAppManager = class _AegisInAppManager {
         renderStep();
       } else {
         progressFill.style.width = "100%";
+        flow.markCompleted();
+        void this.trackEvent(campaign.id, "impression", { stepId: "flow_completed" });
         void this.trackEvent(campaign.id, "clicked", { meta: { answers } });
-        void this.submitWidgetResponse(campaign, "form", { answers });
+        void this.submitWidgetResponse(campaign, "form", { answers, flow: flow.consolidated() });
         this._playReaction(body, "affirm", "check.json", ic);
         window.setTimeout(() => {
           if (overlay.parentNode) document.body.removeChild(overlay);
@@ -10237,17 +9916,18 @@ const _AegisInAppManager = class _AegisInAppManager {
    *
    * Honors prefers-reduced-motion (static badge, no motion).
    */
-  _playReaction(host, intent, lottieFile, ic) {
+  _playReaction(host, intent, lottieFile, ic, scope) {
     try {
       if (typeof document === "undefined") return;
       this.addAnimationStyles();
       const reduce = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      const anchor = host || document.body;
+      const viewport = scope === "viewport";
+      const anchor = viewport ? document.body : host || document.body;
       const prevPos = anchor.style.position;
-      if (!prevPos || prevPos === "static") anchor.style.position = "relative";
+      if (!viewport && (!prevPos || prevPos === "static")) anchor.style.position = "relative";
       const layer = document.createElement("div");
       layer.className = "aegis-in-app-reaction";
-      layer.style.cssText = "position: absolute; inset: 0; z-index: 2147483646; pointer-events: none; overflow: visible;";
+      layer.style.cssText = viewport ? "position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; overflow: visible;" : "position: absolute; inset: 0; z-index: 2147483646; pointer-events: none; overflow: visible;";
       const SPEC = {
         celebrate: { file: "trophy.json", svg: "gift", ring: "#fbbf24", festive: true },
         affirm: { file: "affirm.json", svg: "star", ring: "#fbbf24", festive: true },