@active-reach/web-sdk 1.22.0 → 1.26.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",
@@ -423,6 +493,337 @@ function contrastFg(bg) {
   const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
   return lum < 0.5 ? "#ffffff" : "#1f2937";
 }
+function buildCountdownElement(el, fg, muted) {
+  const targetStr = typeof el.countdown_target === "string" ? el.countdown_target : "";
+  const target = targetStr ? Date.parse(targetStr) : NaN;
+  if (!targetStr || isNaN(target)) return null;
+  const wrap = document.createElement("div");
+  wrap.style.cssText = "display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;margin:2px 0;";
+  const label = document.createElement("span");
+  label.textContent = typeof el.countdown_label === "string" && el.countdown_label || "Ends in";
+  label.style.cssText = `font-size:12px;color:${muted};`;
+  const time = document.createElement("span");
+  time.style.cssText = `font-size:15px;font-weight:700;color:${fg};letter-spacing:0.2px;`;
+  wrap.appendChild(label);
+  wrap.appendChild(time);
+  let started = false;
+  let timer = 0;
+  const tick = () => {
+    if (started && !wrap.isConnected) {
+      if (timer) clearInterval(timer);
+      return;
+    }
+    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) {
+    const q = document.createElement("div");
+    q.textContent = el.content;
+    q.style.cssText = `font-size:13px;font-weight:600;color:${fg};`;
+    wrap.appendChild(q);
+  }
+  const scale = typeof el.rating_scale === "number" && el.rating_scale >= 2 && el.rating_scale <= 10 ? Math.floor(el.rating_scale) : 5;
+  const row = document.createElement("div");
+  row.style.cssText = "display:flex;gap:6px;";
+  const stars = [];
+  let submitted = false;
+  const paint = (upto) => {
+    stars.forEach((s, idx) => {
+      const on = idx < upto;
+      s.setAttribute("stroke", on ? "#f59e0b" : "#d1d5db");
+      s.setAttribute("fill", on ? "#f59e0b" : "none");
+    });
+  };
+  for (let i = 1; i <= scale; i++) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.setAttribute("aria-label", `${i} star${i > 1 ? "s" : ""}`);
+    btn.style.cssText = "cursor:pointer;border:none;background:none;padding:0;line-height:0;";
+    const svg = lucideSvgEl("star", { size: 26, color: "#d1d5db" });
+    if (svg) {
+      btn.appendChild(svg);
+      stars.push(svg);
+    }
+    btn.addEventListener("mouseenter", () => {
+      if (!submitted) paint(i);
+    });
+    btn.addEventListener("mouseleave", () => {
+      if (!submitted) paint(0);
+    });
+    btn.addEventListener("click", () => {
+      var _a, _b;
+      if (submitted) return;
+      submitted = true;
+      paint(i);
+      ctx.trackEvent(ctx.campaign.id, "clicked", { meta: { element: "rating_input", stars: i } });
+      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);
+  }
+  wrap.appendChild(row);
+  return wrap;
+}
+function appendThanks(wrap, el, fg, fallback) {
+  const msg = typeof el.thanks_text === "string" && el.thanks_text.trim() ? el.thanks_text : fallback;
+  if (!msg) return;
+  const note = document.createElement("div");
+  note.textContent = msg;
+  note.setAttribute("role", "status");
+  note.style.cssText = `font-size:12px;font-weight:600;color:${fg};opacity:0.85;margin-top:4px;`;
+  wrap.appendChild(note);
+}
+function buildPollElement(el, ctx, fg, accent) {
+  const opts = Array.isArray(el.poll_options) ? el.poll_options.filter((o) => typeof o === "string" && o.trim().length > 0) : [];
+  if (opts.length < 2) return null;
+  const wrap = document.createElement("div");
+  wrap.style.cssText = "display:flex;flex-direction:column;gap:6px;margin:2px 0;";
+  if (el.content) {
+    const q = document.createElement("div");
+    q.textContent = el.content;
+    q.style.cssText = `font-size:13px;font-weight:600;color:${fg};`;
+    wrap.appendChild(q);
+  }
+  let submitted = false;
+  opts.forEach((label, idx) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.textContent = label;
+    btn.style.cssText = `text-align:left;cursor:pointer;border:1px solid color-mix(in srgb, ${accent} 35%, transparent);background:transparent;color:${fg};border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600;transition:background .12s,border-color .12s;`;
+    btn.addEventListener("mouseenter", () => {
+      if (!submitted) btn.style.background = `color-mix(in srgb, ${accent} 8%, transparent)`;
+    });
+    btn.addEventListener("mouseleave", () => {
+      if (!submitted) btn.style.background = "transparent";
+    });
+    btn.addEventListener("click", () => {
+      var _a, _b;
+      if (submitted) return;
+      submitted = true;
+      Array.from(wrap.querySelectorAll("button")).forEach((b) => {
+        b.disabled = true;
+        b.style.opacity = "0.6";
+      });
+      btn.style.background = accent;
+      btn.style.color = "#fff";
+      btn.style.opacity = "1";
+      ctx.trackEvent(ctx.campaign.id, "clicked", { meta: { element: "poll", option_index: idx, option_label: label } });
+      void ((_a = ctx.submitResponse) == null ? void 0 : _a.call(ctx, "poll", { option_index: idx, option_label: label }));
+      (_b = ctx.playReaction) == null ? void 0 : _b.call(ctx, wrap, "affirm");
+      appendThanks(wrap, el, fg, "Thanks for your answer!");
+    });
+    wrap.appendChild(btn);
+  });
+  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;";
+  if (el.content) {
+    const q = document.createElement("div");
+    q.textContent = el.content;
+    q.style.cssText = `font-size:13px;font-weight:600;color:${fg};`;
+    wrap.appendChild(q);
+  }
+  const row = document.createElement("div");
+  row.style.cssText = "display:flex;flex-wrap:wrap;gap:4px;";
+  let submitted = false;
+  for (let n = 0; n <= 10; n++) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.textContent = String(n);
+    btn.setAttribute("aria-label", `Score ${n}`);
+    btn.style.cssText = `cursor:pointer;min-width:26px;height:30px;border:1px solid color-mix(in srgb, ${accent} 30%, transparent);background:transparent;color:${fg};border-radius:7px;font-size:12px;font-weight:700;transition:background .12s;`;
+    btn.addEventListener("mouseenter", () => {
+      if (!submitted) btn.style.background = `color-mix(in srgb, ${accent} 10%, transparent)`;
+    });
+    btn.addEventListener("mouseleave", () => {
+      if (!submitted) btn.style.background = "transparent";
+    });
+    btn.addEventListener("click", () => {
+      var _a, _b;
+      if (submitted) return;
+      submitted = true;
+      Array.from(row.children).forEach((b) => {
+        b.disabled = true;
+        b.style.opacity = "0.55";
+      });
+      btn.style.background = accent;
+      btn.style.color = "#fff";
+      btn.style.opacity = "1";
+      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);
+  }
+  wrap.appendChild(row);
+  const scale = document.createElement("div");
+  scale.style.cssText = `display:flex;justify-content:space-between;font-size:10px;color:${muted};`;
+  const lo = document.createElement("span");
+  lo.textContent = "Not likely";
+  const hi = document.createElement("span");
+  hi.textContent = "Very likely";
+  scale.appendChild(lo);
+  scale.appendChild(hi);
+  wrap.appendChild(scale);
+  return wrap;
+}
 function buildProgressElement(el, ctx, accent, muted) {
   const { trackEvent, campaign, sanitizeColor } = ctx;
   const goal = el.goal_type || "cart_total";
@@ -445,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;
@@ -466,23 +866,32 @@ function buildProgressElement(el, ctx, accent, muted) {
   wrap.appendChild(shell);
   let firedUnlock = false;
   const update = () => {
+    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!";
-      sub.style.color = "#34d399";
+    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) {
         firedUnlock = true;
         trackEvent(campaign.id, "clicked", { stepId: el.id || "unlocked" });
+        if (el.celebrate_on_complete !== false) (_a = ctx.playReaction) == null ? void 0 : _a.call(ctx, wrap, "celebrate");
       }
     } else {
       sub.style.color = muted;
-      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 || "";
+      sub.style.fontWeight = "";
+      firedUnlock = false;
     }
   };
   update();
@@ -516,6 +925,7 @@ function renderCardFromTemplate(card, opts) {
     border:1px solid ${frame.border ? sanitizeColor(frame.border) : "transparent"};
     border-radius:${radius}; padding:8px;
     ${frame.max_width ? `max-width:${frame.max_width}px;` : ""}${frame.min_width ? `min-width:${frame.min_width}px;` : ""}
+    ${frame.height ? `height:${frame.height}px;` : ""}${frame.min_height ? `min-height:${frame.min_height}px;` : ""}
     ${sizing}
     cursor:${card.cta_url || inline ? "pointer" : "default"}; transition:transform 0.15s ease;
   `;
@@ -638,6 +1048,24 @@ function renderCardFromTemplate(card, opts) {
           container.appendChild(buildProgressElement(el, ctx, brand, muted));
           break;
         }
+        case "countdown": {
+          const cd = buildCountdownElement(el, fg, muted);
+          if (cd) container.appendChild(cd);
+          break;
+        }
+        case "rating_input": {
+          container.appendChild(buildRatingInputElement(el, ctx, fg));
+          break;
+        }
+        case "poll": {
+          const p = buildPollElement(el, ctx, fg, brand);
+          if (p) container.appendChild(p);
+          break;
+        }
+        case "nps": {
+          container.appendChild(buildNpsElement(el, ctx, fg, brand, muted));
+          break;
+        }
         case "group": {
           const g = document.createElement("div");
           const gdir = el.layout === "row" ? "row" : "column";
@@ -790,6 +1218,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);
@@ -1090,21 +1521,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}`;
     }
   };
@@ -2023,6 +2456,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;
@@ -2065,7 +2501,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));
@@ -2157,7 +2594,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`));
@@ -2178,7 +2615,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");
@@ -2389,7 +2826,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);
@@ -2492,7 +2929,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");
@@ -3115,6 +3552,7 @@ class AegisChat {
     this.title = config.title ?? "Shopping Assistant";
     this.greeting = config.greeting ?? "Hi! 👋 How can I help you today?";
     this.accent = config.accentColor ?? "#4169e1";
+    this.surfaceStyle = config.surfaceStyle === "tinted" ? "tinted" : "solid";
     this.icon = config.icon ?? "sparkle";
     this.logoUrl = config.logoUrl;
     this.position = config.position ?? "bottom-right";
@@ -3385,6 +3823,10 @@ class AegisChat {
     const root = document.createElement("div");
     root.className = `aegis-chat-root aegis-chat-root--${this.position}`;
     root.style.setProperty("--aegis-chat-accent", this.accent);
+    if (this.surfaceStyle === "tinted") {
+      root.style.setProperty("--aegis-chat-fill", "color-mix(in srgb, var(--aegis-chat-accent,#4169e1) 16%, #ffffff)");
+      root.style.setProperty("--aegis-chat-fill-fg", "#0f172a");
+    }
     const bubble = document.createElement("button");
     bubble.className = "aegis-chat-bubble";
     bubble.setAttribute("aria-label", `Open ${this.title}`);
@@ -3740,16 +4182,18 @@ const CHAT_CSS = `
 .aegis-chat-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:9999px;background:#ef4444;color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
 .aegis-chat-panel{position:absolute;bottom:0;right:0;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 48px);background:#fff;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.24);display:none;flex-direction:column;overflow:hidden}
 .aegis-chat-panel--open{display:flex}
-.aegis-chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--aegis-chat-accent,#4169e1);color:#fff}
+/* Header + customer bubbles use the "fill" surface — accent solid by default, or
+   a soft tint when surfaceStyle:'tinted' sets --aegis-chat-fill/-fg on the root. */
+.aegis-chat-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--aegis-chat-fill,var(--aegis-chat-accent,#4169e1));color:var(--aegis-chat-fill-fg,#fff)}
 .aegis-chat-title{font-weight:600;font-size:15px}
-.aegis-chat-close{background:transparent;border:none;color:#fff;font-size:16px;cursor:pointer;opacity:.85}
+.aegis-chat-close{background:transparent;border:none;color:var(--aegis-chat-fill-fg,#fff);font-size:16px;cursor:pointer;opacity:.85}
 .aegis-chat-close:hover{opacity:1}
 .aegis-chat-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f8fafc}
 .aegis-chat-msg{display:flex;flex-direction:column;max-width:85%}
 .aegis-chat-msg--customer{align-self:flex-end;align-items:flex-end}
 .aegis-chat-msg--assistant,.aegis-chat-msg--system{align-self:flex-start;align-items:flex-start}
 .aegis-chat-bubbletext{padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
-.aegis-chat-msg--customer .aegis-chat-bubbletext{background:var(--aegis-chat-accent,#4169e1);color:#fff;border-bottom-right-radius:4px}
+.aegis-chat-msg--customer .aegis-chat-bubbletext{background:var(--aegis-chat-fill,var(--aegis-chat-accent,#4169e1));color:var(--aegis-chat-fill-fg,#fff);border-bottom-right-radius:4px}
 .aegis-chat-msg--assistant .aegis-chat-bubbletext{background:#fff;color:#0f172a;border:1px solid #e2e8f0;border-bottom-left-radius:4px}
 .aegis-chat-quickreplies{display:flex;flex-wrap:wrap;gap:6px;padding:2px 4px 6px;justify-content:flex-start}
 .aegis-chat-chip{appearance:none;cursor:pointer;border:1px solid var(--aegis-chat-accent,#4169e1);background:#fff;color:var(--aegis-chat-accent,#4169e1);border-radius:9999px;padding:6px 12px;font-size:13px;line-height:1;font-family:inherit;transition:background .15s,color .15s}
@@ -4337,6 +4781,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;
@@ -4355,10 +4806,10 @@ function renderActiveWebChat(ctx, creds) {
     icon: icon === "sparkle" || icon === "chat" || icon === "logo" ? icon : void 0,
     logoUrl: logo ? ctx.sanitizeUrl(logo) ?? void 0 : void 0,
     position: ic.chat_position === "bottom-left" ? "bottom-left" : 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,
+    surfaceStyle: ic.chat_theme === "tinted" ? "tinted" : 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
@@ -4878,6 +5329,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();
@@ -4941,12 +5393,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
@@ -5107,6 +5575,22 @@ const _AegisInAppManager = class _AegisInAppManager {
       this.emit("campaign-shown", c);
     };
     let idx = 0;
+    const isDarkSurface = (c) => {
+      var _a, _b;
+      const ic = c.interactive_config || {};
+      if (ic.surface_style === "dark") return true;
+      const tplBg = (_b = (_a = ic.card_template) == null ? void 0 : _a.frame) == null ? void 0 : _b.bg;
+      const bg = (typeof tplBg === "string" ? tplBg : "") || c.background_color || "";
+      if (bg.startsWith("#")) {
+        const h = bg.length === 4 ? bg.slice(1).split("").map((x) => x + x).join("") : bg.slice(1, 7);
+        const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
+        if (![r, g, b].some(Number.isNaN)) return (0.299 * r + 0.587 * g + 0.114 * b) / 255 < 0.5;
+      }
+      return false;
+    };
+    const darkDots = panes.length > 0 && panes.every((p) => isDarkSurface(p.campaign));
+    const dotInactive = darkDots ? "rgba(255,255,255,0.4)" : "rgba(15,23,42,0.2)";
+    const dotActive = darkDots ? "#ffffff" : "var(--aegis-brand-accent, #4169e1)";
     const dots = [];
     if (panes.length > 1) {
       const bar = document.createElement("div");
@@ -5119,7 +5603,7 @@ const _AegisInAppManager = class _AegisInAppManager {
         dot.type = "button";
         dot.setAttribute("role", "tab");
         dot.setAttribute("aria-label", `Offer ${i + 1} of ${panes.length}`);
-        dot.style.cssText = "border:none;padding:0;cursor:pointer;height:6px;width:6px;border-radius:999px;background:rgba(15,23,42,0.2);transition:width .25s ease,background .25s ease;";
+        dot.style.cssText = `border:none;padding:0;cursor:pointer;height:6px;width:6px;border-radius:999px;background:${dotInactive};transition:width .25s ease,background .25s ease;`;
         dot.addEventListener("click", (e) => {
           e.stopPropagation();
           show(i, true);
@@ -5133,7 +5617,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       dots.forEach((d, i) => {
         const active = i === idx;
         d.style.width = active ? "16px" : "6px";
-        d.style.background = active ? "var(--aegis-brand-accent, #4169e1)" : "rgba(15,23,42,0.2)";
+        d.style.background = active ? dotActive : dotInactive;
         d.setAttribute("aria-selected", active ? "true" : "false");
       });
     };
@@ -5311,7 +5795,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) {
@@ -5326,43 +5809,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;
@@ -5407,48 +5869,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
@@ -5477,6 +5961,57 @@ const _AegisInAppManager = class _AegisInAppManager {
     target.appendChild(tile);
     return true;
   }
+  /**
+   * C2 — composed card body in an OVERLAY (modal / banner / full_screen /
+   * half_interstitial). The overlay counterpart to `renderComposedCardSlot`: it
+   * builds the same `TemplateCard` from the campaign's canonical fields and paints
+   * it with the generic `renderCardFromTemplate` engine, then wraps it in the
+   * standard overlay chrome (close button + size scaling) so a composed card looks
+   * identical whether overlaid or slotted. Only invoked when a `card_template` is
+   * present (see displayCampaign) — flat campaigns never reach here.
+   * See IN_APP_FORMAT_LOCK_AND_COMPOSABLE_CARDS_TRACKER.md (Part B / C2).
+   */
+  renderComposedCardOverlay(campaign, ic) {
+    const { accent } = this._surfacePalette(campaign);
+    const bg = this.sanitizeColor(campaign.background_color || "#ffffff");
+    const text = this.sanitizeColor(campaign.text_color || "#111827");
+    const fullScreen = campaign.type === "full_screen";
+    const overlay = this.createOverlay("aegis-in-app-composed-card-overlay");
+    const modal = document.createElement("div");
+    modal.style.cssText = fullScreen ? `position: relative; width: 100%; height: 100%; max-width: 100%; overflow: auto;
+         background: ${bg}; color: ${text}; animation: aegisScaleIn 0.3s ease;` : `position: relative; max-width: 380px; width: 92%; border-radius: 18px; overflow: hidden;
+         background: ${bg}; color: ${text}; box-shadow: 0 16px 48px rgba(0,0,0,0.22);
+         animation: aegisScaleIn 0.3s ease;`;
+    const c = campaign;
+    const card = {
+      image_url: typeof c.image_url === "string" ? c.image_url : void 0,
+      title: campaign.title,
+      body: campaign.body,
+      cta_text: typeof c.button_text === "string" ? c.button_text : void 0,
+      cta_url: typeof c.action_url === "string" ? c.action_url : void 0,
+      metadata: ic.card_meta || {}
+    };
+    const template = resolveGlobalTemplate(ic);
+    const tile = renderCardFromTemplate(card, {
+      template,
+      ctx: this.buildRenderContext(campaign),
+      action: "navigate",
+      layoutAccent: this.sanitizeColor(campaign.background_color || accent)
+    });
+    modal.appendChild(tile);
+    this._addCornerClose(modal, overlay, campaign.id, text);
+    if (fullScreen) {
+      overlay.appendChild(modal);
+    } else {
+      const mul = this._sizeMul(ic);
+      const sizer = document.createElement("div");
+      sizer.style.cssText = `display: flex; justify-content: center; align-items: center; width: 100%; transform: scale(${mul}); transform-origin: center;`;
+      sizer.appendChild(modal);
+      overlay.appendChild(sizer);
+    }
+    this.addAnimationStyles();
+    document.body.appendChild(overlay);
+  }
   renderGenericCardSlot(campaign, ic, bg, text, target) {
     const st = this._slotStyle(campaign);
     const card = this._wrapInSlotCard("aegis-in-app-generic-card", campaign.id, bg, text, st.radius);
@@ -6350,88 +6885,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
@@ -7010,23 +7463,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
@@ -7087,398 +7523,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`.
@@ -7540,6 +7584,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     this._displaySizeMul = this._sizeMul(
       campaign.interactive_config
     );
+    this._ensureSurveyTemplate(campaign);
     const interactiveSubTypes = /* @__PURE__ */ new Set([
       "spin_wheel",
       "scratch_card",
@@ -7561,6 +7606,17 @@ const _AegisInAppManager = class _AegisInAppManager {
       this.emit("campaign-shown", campaign);
       return;
     }
+    {
+      const ic2 = campaign.interactive_config || {};
+      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 (this._hasComposedTemplate(ic2) && !multiCard2 && overlayCardType) {
+        this.renderComposedCardOverlay(campaign, ic2);
+        this.trackEvent(campaign.id, "impression");
+        this.emit("campaign-shown", campaign);
+        return;
+      }
+    }
     switch (campaign.type) {
       case "custom_html":
         this.renderCustomHtml(campaign);
@@ -7701,19 +7757,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;
@@ -7880,21 +7934,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");
@@ -7982,84 +8021,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
@@ -8091,6 +8052,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");
@@ -8120,6 +8088,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;
@@ -8131,6 +8100,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);
@@ -8154,8 +8124,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);