@active-reach/web-sdk 1.20.0 → 1.22.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { S as Storage, l as logger, A as Aegis } from "./analytics-DblhjFhs.mjs";
-import { B, E, N, R, U, m } from "./analytics-DblhjFhs.mjs";
+import { S as Storage, l as logger, A as Aegis } from "./analytics-0p0p56H0.mjs";
+import { B, E, N, R, U, m } from "./analytics-0p0p56H0.mjs";
 import { AegisWebPush } from "./push/AegisWebPush.js";
 function debounce(func, wait) {
   let timeoutId = null;
@@ -25,9 +25,700 @@ function throttle(func, limit) {
     }
   };
 }
+const ICONS = {
+  x: [
+    ["path", { d: "M18 6 6 18" }],
+    ["path", { d: "m6 6 12 12" }]
+  ],
+  check: [["path", { d: "M20 6 9 17l-5-5" }]],
+  info: [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["path", { d: "M12 16v-4" }],
+    ["path", { d: "M12 8h.01" }]
+  ],
+  "triangle-alert": [
+    ["path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }],
+    ["path", { d: "M12 9v4" }],
+    ["path", { d: "M12 17h.01" }]
+  ],
+  "volume-2": [
+    [
+      "path",
+      {
+        d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+      }
+    ],
+    ["path", { d: "M16 9a5 5 0 0 1 0 6" }],
+    ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728" }]
+  ],
+  "volume-x": [
+    [
+      "path",
+      {
+        d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"
+      }
+    ],
+    ["line", { x1: "22", x2: "16", y1: "9", y2: "15" }],
+    ["line", { x1: "16", x2: "22", y1: "9", y2: "15" }]
+  ],
+  clock: [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["polyline", { points: "12 6 12 12 16 14" }]
+  ],
+  play: [["polygon", { points: "6 3 20 12 6 21 6 3" }]],
+  pause: [
+    ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" }],
+    ["rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }]
+  ],
+  square: [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }]],
+  "square-check": [
+    ["path", { d: "M21 10.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.5" }],
+    ["path", { d: "m9 11 3 3L22 4" }]
+  ],
+  truck: [
+    ["path", { d: "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2" }],
+    ["path", { d: "M15 18H9" }],
+    [
+      "path",
+      {
+        d: "M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"
+      }
+    ],
+    ["circle", { cx: "17", cy: "18", r: "2" }],
+    ["circle", { cx: "7", cy: "18", r: "2" }]
+  ],
+  "circle-check": [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["path", { d: "m9 12 2 2 4-4" }]
+  ],
+  // ── Commerce / value-bar set (rich card editor picker) ───────────────────
+  "shopping-cart": [
+    ["circle", { cx: "8", cy: "21", r: "1" }],
+    ["circle", { cx: "19", cy: "21", r: "1" }],
+    ["path", { d: "M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" }]
+  ],
+  "shopping-bag": [
+    ["path", { d: "M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" }],
+    ["path", { d: "M3 6h18" }],
+    ["path", { d: "M16 10a4 4 0 0 1-8 0" }]
+  ],
+  gift: [
+    ["rect", { x: "3", y: "8", width: "18", height: "4", rx: "1" }],
+    ["path", { d: "M12 8v13" }],
+    ["path", { d: "M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" }],
+    ["path", { d: "M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" }]
+  ],
+  tag: [
+    ["path", { d: "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" }],
+    ["circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor" }]
+  ],
+  percent: [
+    ["line", { x1: "19", x2: "5", y1: "5", y2: "19" }],
+    ["circle", { cx: "6.5", cy: "6.5", r: "2.5" }],
+    ["circle", { cx: "17.5", cy: "17.5", r: "2.5" }]
+  ],
+  star: [
+    ["path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" }]
+  ],
+  sparkles: [
+    ["path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }],
+    ["path", { d: "M20 3v4" }],
+    ["path", { d: "M22 5h-4" }]
+  ],
+  zap: [
+    ["path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" }]
+  ],
+  heart: [
+    ["path", { d: "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" }]
+  ],
+  bell: [
+    ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0" }],
+    ["path", { d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" }]
+  ],
+  lock: [
+    ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }],
+    ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4" }]
+  ],
+  "badge-check": [
+    ["path", { d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" }],
+    ["path", { d: "m9 12 2 2 4-4" }]
+  ],
+  package: [
+    ["path", { d: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" }],
+    ["path", { d: "M12 22V12" }],
+    ["path", { d: "m3.3 7 8.7 5 8.7-5" }],
+    ["path", { d: "m7.5 4.27 9 5.15" }]
+  ],
+  flame: [
+    ["path", { d: "M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" }]
+  ],
+  crown: [
+    ["path", { d: "M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" }],
+    ["path", { d: "M5 21h14" }]
+  ],
+  ticket: [
+    ["path", { d: "M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" }],
+    ["path", { d: "M13 5v2" }],
+    ["path", { d: "M13 17v2" }],
+    ["path", { d: "M13 11v2" }]
+  ],
+  wallet: [
+    ["path", { d: "M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" }],
+    ["path", { d: "M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" }]
+  ],
+  coins: [
+    ["circle", { cx: "8", cy: "8", r: "6" }],
+    ["path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }],
+    ["path", { d: "M7 6h1v4" }],
+    ["path", { d: "m16.71 13.88.7.71-2.82 2.82" }]
+  ],
+  trophy: [
+    ["path", { d: "M6 9H4.5a2.5 2.5 0 0 1 0-5H6" }],
+    ["path", { d: "M18 9h1.5a2.5 2.5 0 0 0 0-5H18" }],
+    ["path", { d: "M4 22h16" }],
+    ["path", { d: "M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" }],
+    ["path", { d: "M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" }],
+    ["path", { d: "M18 2H6v7a6 6 0 0 0 12 0V2Z" }]
+  ],
+  timer: [
+    ["line", { x1: "10", x2: "14", y1: "2", y2: "2" }],
+    ["line", { x1: "12", x2: "15", y1: "14", y2: "11" }],
+    ["circle", { cx: "12", cy: "14", r: "8" }]
+  ],
+  "map-pin": [
+    ["path", { d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" }],
+    ["circle", { cx: "12", cy: "10", r: "3" }]
+  ],
+  user: [
+    ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }],
+    ["circle", { cx: "12", cy: "7", r: "4" }]
+  ],
+  "thumbs-up": [
+    ["path", { d: "M7 10v12" }],
+    ["path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" }]
+  ],
+  "arrow-right": [
+    ["path", { d: "M5 12h14" }],
+    ["path", { d: "m12 5 7 7-7 7" }]
+  ],
+  "chevron-right": [["path", { d: "m9 18 6-6-6-6" }]],
+  plus: [
+    ["path", { d: "M5 12h14" }],
+    ["path", { d: "M12 5v14" }]
+  ],
+  store: [
+    ["path", { d: "m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7" }],
+    ["path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }],
+    ["path", { d: "M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4" }],
+    ["path", { d: "M2 7h20" }],
+    ["path", { d: "M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7" }]
+  ],
+  rocket: [
+    ["path", { d: "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" }],
+    ["path", { d: "m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" }],
+    ["path", { d: "M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" }],
+    ["path", { d: "M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" }]
+  ]
+};
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+const SVG_NS = "http://www.w3.org/2000/svg";
+function lucideSvgEl(name, opts = {}) {
+  const node = ICONS[name];
+  if (!node || typeof document === "undefined") return null;
+  const size = opts.size ?? 24;
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", opts.color ?? "currentColor");
+  svg.setAttribute("stroke-width", String(opts.strokeWidth ?? 2));
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  if (opts.className) svg.setAttribute("class", opts.className);
+  if (opts.ariaLabel) {
+    svg.setAttribute("role", "img");
+    svg.setAttribute("aria-label", opts.ariaLabel);
+  } else {
+    svg.setAttribute("aria-hidden", "true");
+  }
+  for (const [tag, attrs] of node) {
+    const child = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attrs)) child.setAttribute(k, String(v));
+    svg.appendChild(child);
+  }
+  return svg;
+}
+function lucideSvg(name, opts = {}) {
+  const node = ICONS[name];
+  if (!node) return "";
+  const size = opts.size ?? 24;
+  const color = opts.color ?? "currentColor";
+  const strokeWidth = opts.strokeWidth ?? 2;
+  const a11y = opts.ariaLabel ? `role="img" aria-label="${escapeAttr(opts.ariaLabel)}"` : 'aria-hidden="true"';
+  const cls = opts.className ? ` class="${escapeAttr(opts.className)}"` : "";
+  const children = node.map(([tag, attrs]) => {
+    const attrStr = Object.entries(attrs).map(([k, v]) => `${k}="${escapeAttr(String(v))}"`).join(" ");
+    return `<${tag} ${attrStr}/>`;
+  }).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>`;
+}
+const WEIGHT = {
+  regular: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+const ICON_PX = { sm: 22, md: 30, lg: 40 };
+const TEXT_PX = { sm: 11.5, md: 13, lg: 15 };
+function interpolateTokens(s, ctx) {
+  if (!s || s.indexOf("{") === -1) return s;
+  const props = ctx.properties && ctx.properties() || {};
+  const cart = ctx.getCartState && ctx.getCartState();
+  return s.replace(/\{([a-z0-9_.]+)\}/gi, (_m, key) => {
+    let v = props[key];
+    if (v == null) {
+      if (key === "cart.total") v = cart == null ? void 0 : cart.total;
+      else if (key === "cart.count") v = cart == null ? void 0 : cart.itemCount;
+    }
+    return v == null || v === "" ? "" : String(v);
+  });
+}
+const ASPECT$2 = { "1/1": "1 / 1", "4/3": "4 / 3", "16/9": "16 / 9" };
+const DEFAULT_CARD_TEMPLATE = {
+  id: "clean",
+  frame: { bg: "#ffffff", border: "#f1f1f3", radius: 14 },
+  elements: [
+    { type: "image", aspect: "1/1", radius: 10 },
+    { type: "price", variant: "pill", color: "#059669" },
+    { type: "title", lines: 2 },
+    { type: "rating" },
+    // Zepto/Blinkit-style ADD: a single OUTLINED pill (white fill, brand
+    // border + brand text) overlaid on the bottom-right of the product image —
+    // NOT a solid filled bar. `overlay:true` anchors it onto the image; the
+    // outline variant paints the white/border look. The rail's tile-body click
+    // still opens the product, so this one CTA owns add-to-cart.
+    { type: "cta", variant: "outline", overlay: true }
+  ]
+};
+function asLook(v) {
+  return v && typeof v === "object" ? v : {};
+}
+function templateFromCardStyle(look) {
+  const elements = [{ type: "image", aspect: "1/1", radius: 10 }];
+  if (look.badge) elements.push({ type: "badge", text: look.badge, color: look.badge_color });
+  if (!look.hide_price) elements.push({ type: "price", variant: "pill", color: "#059669" });
+  elements.push({ type: "title", lines: 2 });
+  if (!look.hide_rating) elements.push({ type: "rating" });
+  if (!look.hide_cta) elements.push({ type: "cta", variant: "fill", text: look.cta_text });
+  return {
+    id: "legacy",
+    frame: {
+      bg: look.background,
+      border: look.border_color,
+      radius: look.radius,
+      accent: look.accent ?? null
+    },
+    elements
+  };
+}
+function resolveGlobalTemplate(ic) {
+  const t = ic.card_template;
+  if (t && typeof t === "object" && Array.isArray(t.elements)) {
+    return t;
+  }
+  const legacy = ic.card_style;
+  if (legacy && typeof legacy === "object") {
+    return templateFromCardStyle(asLook(legacy));
+  }
+  return DEFAULT_CARD_TEMPLATE;
+}
+function applyPerCardOverride(tpl, look) {
+  if (!look || Object.keys(look).length === 0) return tpl;
+  const frame = { ...tpl.frame || {} };
+  if (look.accent) frame.accent = look.accent;
+  if (look.radius !== void 0) frame.radius = look.radius;
+  let elements = (tpl.elements || []).slice();
+  const drop = (type) => elements = elements.filter((e) => e.type !== type);
+  if (look.hide_price) drop("price");
+  if (look.hide_cta) drop("cta");
+  if (look.hide_rating) drop("rating");
+  if (look.cta_text) elements = elements.map((e) => e.type === "cta" ? { ...e, text: look.cta_text } : e);
+  if (look.badge) {
+    const badgeEl = { type: "badge", text: look.badge, color: look.badge_color };
+    elements = elements.some((e) => e.type === "badge") ? elements.map((e) => e.type === "badge" ? badgeEl : e) : [elements[0], badgeEl, ...elements.slice(1)].filter(Boolean);
+  }
+  return { ...tpl, frame, elements };
+}
+function priceText(card) {
+  const meta = card.metadata || {};
+  const p = meta.price;
+  if (p !== void 0 && p !== null) return String(p);
+  if (card.body && /\d/.test(card.body)) return card.body;
+  return void 0;
+}
+function paintPrice(card, el, accent, ctx) {
+  const price = priceText(card);
+  if (price === void 0) return null;
+  const meta = card.metadata || {};
+  const compareAt = meta.compare_at_price ?? meta.compare_at ?? meta.original_price;
+  const row = document.createElement("div");
+  row.style.cssText = "display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;";
+  const p = document.createElement("span");
+  p.textContent = price;
+  if (el.variant === "plain") {
+    p.style.cssText = `color:${accent};font-weight:700;font-size:13px;`;
+  } else {
+    const pillBg = el.color ? ctx.sanitizeColor(el.color) : "#059669";
+    p.style.cssText = `background:${pillBg};color:#fff;font-weight:800;font-size:12px;padding:2px 7px;border-radius:6px;`;
+  }
+  row.appendChild(p);
+  const pNum = parseFloat(price.replace(/[^0-9.]/g, ""));
+  const cNum = compareAt !== void 0 ? parseFloat(String(compareAt).replace(/[^0-9.]/g, "")) : NaN;
+  if (isFinite(cNum) && isFinite(pNum) && cNum > pNum) {
+    const orig = document.createElement("span");
+    orig.textContent = String(compareAt);
+    orig.style.cssText = "text-decoration:line-through;opacity:0.5;font-size:11px;";
+    row.appendChild(orig);
+    const off = document.createElement("span");
+    off.textContent = `-${Math.round((1 - pNum / cNum) * 100)}%`;
+    off.style.cssText = "background:#ef444422;color:#ef4444;font-weight:700;font-size:10px;padding:1px 5px;border-radius:999px;";
+    row.appendChild(off);
+  }
+  return row;
+}
+function paintRating(card) {
+  const meta = card.metadata || {};
+  const avg = Number(meta.avg_rating ?? 0);
+  if (!(avg > 0)) return null;
+  const count = Number(meta.review_count ?? 0);
+  const rr = document.createElement("div");
+  rr.style.cssText = "display:flex;align-items:center;gap:3px;font-size:11px;line-height:1;";
+  const star = document.createElement("span");
+  star.textContent = "★";
+  star.style.cssText = "color:#059669;";
+  const val = document.createElement("span");
+  val.textContent = avg.toFixed(1);
+  val.style.cssText = "color:#059669;font-weight:700;";
+  rr.appendChild(star);
+  rr.appendChild(val);
+  if (count > 0) {
+    const c = document.createElement("span");
+    c.textContent = `(${count})`;
+    c.style.cssText = "color:#94a3b8;";
+    rr.appendChild(c);
+  }
+  return rr;
+}
+function contrastFg(bg) {
+  const raw = bg.replace("#", "");
+  if (raw.length < 3) return "#1f2937";
+  const h = raw.length === 3 ? raw.split("").map((c) => c + c).join("") : raw.slice(0, 6);
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  if ([r, g, b].some((n) => Number.isNaN(n))) return "#1f2937";
+  const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return lum < 0.5 ? "#ffffff" : "#1f2937";
+}
+function buildProgressElement(el, ctx, accent, muted) {
+  const { trackEvent, campaign, sanitizeColor } = ctx;
+  const goal = el.goal_type || "cart_total";
+  const moneyGoal = goal === "cart_total";
+  const fill = el.fill ? sanitizeColor(el.fill) : accent;
+  const props = () => ctx.properties && ctx.properties() || {};
+  const sym = () => {
+    var _a;
+    if (el.currency_symbol) return el.currency_symbol;
+    const code = ctx.getCartState && ((_a = ctx.getCartState()) == null ? void 0 : _a.currency);
+    const M = { INR: "₹", USD: "$", EUR: "€", GBP: "£" };
+    return code && M[code] || "";
+  };
+  const threshold = () => {
+    if (typeof el.threshold === "number" && el.threshold > 0) return el.threshold;
+    if (el.threshold_source === "free_delivery_setting") {
+      const v = Number(props()["cart.free_delivery_above"]);
+      if (v > 0) return v;
+    }
+    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 p = props();
+    if (goal === "loyalty_points") return Number(p["loyalty.points"]) || 0;
+    if (goal === "referrals") return Number(p["referrals.count"]) || 0;
+    return 0;
+  };
+  const wrap = document.createElement("div");
+  wrap.style.cssText = "display:flex;flex-direction:column;gap:3px;min-width:0;width:100%;";
+  const sub = document.createElement("div");
+  sub.style.cssText = `font-size:11.5px;line-height:1.2;color:${muted};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;`;
+  const shell = document.createElement("div");
+  shell.style.cssText = `height:3px;border-radius:999px;background:color-mix(in srgb, ${fill} 16%, transparent);overflow:hidden;`;
+  const bar = document.createElement("div");
+  bar.style.cssText = `height:100%;border-radius:999px;background:${fill};width:0%;transition:width .4s cubic-bezier(.4,0,.2,1);`;
+  shell.appendChild(bar);
+  wrap.appendChild(sub);
+  wrap.appendChild(shell);
+  let firedUnlock = false;
+  const update = () => {
+    const th = threshold();
+    const cur = readCur();
+    const pct = th > 0 ? Math.max(0, Math.min(100, cur / th * 100)) : 0;
+    bar.style.width = `${pct}%`;
+    if (th > 0 && pct >= 100) {
+      sub.textContent = el.reward_text || "Unlocked!";
+      sub.style.color = "#34d399";
+      if (!firedUnlock) {
+        firedUnlock = true;
+        trackEvent(campaign.id, "clicked", { stepId: el.id || "unlocked" });
+      }
+    } 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 || "";
+    }
+  };
+  update();
+  const timer = setInterval(update, 1e3);
+  if (typeof window !== "undefined") {
+    window.addEventListener("beforeunload", () => clearInterval(timer), { once: true });
+  }
+  return wrap;
+}
+function renderCardFromTemplate(card, opts) {
+  const { ctx, action, layout, layoutAccent } = opts;
+  const inline = action === "cart";
+  const { campaign, trackEvent, sanitizeUrl, sanitizeColor } = ctx;
+  const tpl = applyPerCardOverride(opts.template, asLook(card.style));
+  const frame = tpl.frame || {};
+  const meta = card.metadata || {};
+  const accent = typeof frame.accent === "string" && frame.accent ? sanitizeColor(frame.accent) : layoutAccent;
+  const brand = `var(--aegis-brand-accent, ${accent})`;
+  const fg = contrastFg(frame.bg ? sanitizeColor(frame.bg) : "#ffffff");
+  const muted = fg === "#ffffff" ? "rgba(255,255,255,0.72)" : "#6b7280";
+  const tile = document.createElement("div");
+  const radius = frame.radius !== void 0 ? `${parseInt(String(frame.radius), 10) || 12}px` : "12px";
+  const fLayout = frame.layout;
+  const dir = fLayout === "row" ? "row" : "column";
+  const tileGap = frame.gap != null ? frame.gap : 6;
+  const sizing = fLayout ? frame.width != null ? `width:${typeof frame.width === "number" ? `${frame.width}px` : frame.width};` : "flex:1 1 auto; width:100%;" : layout === "grid" ? "" : "flex:0 0 150px; scroll-snap-align:start;";
+  tile.style.cssText = `
+    box-sizing:border-box; display:flex; flex-direction:${dir}; ${fLayout === "row" ? "align-items:center;" : ""} gap:${tileGap}px; position:relative;
+    color:${fg};
+    background:${frame.bg ? sanitizeColor(frame.bg) : "#ffffff"};
+    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;` : ""}
+    ${sizing}
+    cursor:${card.cta_url || inline ? "pointer" : "default"}; transition:transform 0.15s ease;
+  `;
+  const elements = tpl.elements && tpl.elements.length ? tpl.elements : DEFAULT_CARD_TEMPLATE.elements;
+  let imageWrap = null;
+  const paintInto = (container, els) => {
+    for (const el of els) {
+      switch (el.type) {
+        case "image": {
+          const wrap = document.createElement("div");
+          wrap.style.cssText = `position:relative;width:100%;aspect-ratio:${ASPECT$2[el.aspect || "1/1"] || "1 / 1"};border-radius:${el.radius ?? 10}px;overflow:hidden;background:#f7f8fa;`;
+          const safeVideo = card.video_url ? sanitizeUrl(card.video_url) : "";
+          if (safeVideo) {
+            const v = document.createElement("video");
+            v.src = safeVideo;
+            v.muted = true;
+            v.loop = true;
+            v.autoplay = true;
+            v.playsInline = true;
+            v.setAttribute("playsinline", "");
+            v.style.cssText = "width:100%;height:100%;object-fit:cover;display:block;";
+            wrap.appendChild(v);
+          } else if (card.image_url) {
+            const safe = sanitizeUrl(card.image_url);
+            if (safe) {
+              const img = document.createElement("img");
+              img.src = safe;
+              img.alt = "";
+              img.loading = "lazy";
+              img.style.cssText = "width:100%;height:100%;object-fit:cover;display:block;";
+              wrap.appendChild(img);
+            }
+          }
+          imageWrap = wrap;
+          container.appendChild(wrap);
+          break;
+        }
+        case "badge": {
+          const text = el.text;
+          if (!text) break;
+          const badge = document.createElement("span");
+          badge.textContent = text;
+          const bg = el.color ? sanitizeColor(el.color) : brand;
+          badge.style.cssText = `position:absolute;top:6px;left:6px;z-index:1;background:${bg};color:#fff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;padding:3px 6px;border-radius:5px;`;
+          (imageWrap || container).appendChild(badge);
+          break;
+        }
+        case "price": {
+          const node = paintPrice(card, el, accent, ctx);
+          if (node) container.appendChild(node);
+          break;
+        }
+        case "title": {
+          if (!card.title) break;
+          const t = document.createElement("div");
+          t.textContent = card.title;
+          const lines = el.lines && el.lines > 0 ? el.lines : 2;
+          t.style.cssText = `font-size:12.5px;font-weight:600;line-height:1.3;text-align:${el.align ?? "left"};color:${el.color ? sanitizeColor(el.color) : fg};display:-webkit-box;-webkit-line-clamp:${lines};-webkit-box-orient:vertical;overflow:hidden;`;
+          container.appendChild(t);
+          break;
+        }
+        case "subtitle": {
+          if (!card.body) break;
+          const s = document.createElement("div");
+          s.textContent = card.body;
+          const lines = el.lines && el.lines > 0 ? el.lines : 2;
+          s.style.cssText = `font-size:11px;color:${el.color ? sanitizeColor(el.color) : muted};line-height:1.3;text-align:${el.align ?? "left"};display:-webkit-box;-webkit-line-clamp:${lines};-webkit-box-orient:vertical;overflow:hidden;`;
+          container.appendChild(s);
+          break;
+        }
+        case "rating": {
+          const node = paintRating(card);
+          if (node) container.appendChild(node);
+          break;
+        }
+        case "category": {
+          const cat = meta.category;
+          if (typeof cat !== "string" || !cat) break;
+          const chip = document.createElement("span");
+          chip.textContent = cat;
+          chip.style.cssText = "align-self:flex-start;background:#f3f4f6;color:#6b7280;font-size:10px;font-weight:500;padding:2px 7px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;";
+          container.appendChild(chip);
+          break;
+        }
+        // ── rich-card-editor elements (P0) ──────────────────────────────────
+        case "icon": {
+          const px = ICON_PX[el.size || "md"] || 30;
+          const node = document.createElement("div");
+          const iconColor = el.color ? sanitizeColor(el.color) : fg;
+          if (el.bubble) {
+            const bubbleTint = el.color ? sanitizeColor(el.color) : brand;
+            node.style.cssText = `flex:0 0 auto;width:${px}px;height:${px}px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, ${bubbleTint} 16%, transparent);`;
+          } else {
+            node.style.cssText = "flex:0 0 auto;display:flex;align-items:center;";
+          }
+          const svg = lucideSvgEl(el.icon_name || "circle-check", {
+            size: el.bubble ? Math.round(px * 0.55) : Math.round(px * 0.7),
+            color: iconColor,
+            strokeWidth: 2
+          });
+          if (svg) node.appendChild(svg);
+          container.appendChild(node);
+          break;
+        }
+        case "text": {
+          const t = document.createElement("div");
+          const fs = TEXT_PX[el.size || "md"] || 13;
+          t.style.cssText = `font-size:${fs}px;font-weight:${WEIGHT[el.weight ?? "medium"]};text-align:${el.align ?? "left"};color:${el.color ? sanitizeColor(el.color) : fg};line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;`;
+          t.textContent = interpolateTokens(el.content ?? "", ctx);
+          container.appendChild(t);
+          break;
+        }
+        case "spacer": {
+          const sp = document.createElement("div");
+          sp.style.height = `${el.height ?? 8}px`;
+          container.appendChild(sp);
+          break;
+        }
+        case "progress": {
+          container.appendChild(buildProgressElement(el, ctx, brand, muted));
+          break;
+        }
+        case "group": {
+          const g = document.createElement("div");
+          const gdir = el.layout === "row" ? "row" : "column";
+          g.style.cssText = `display:flex;flex-direction:${gdir};${el.layout === "row" ? "align-items:center;" : ""}gap:${el.gap ?? 4}px;min-width:0;${el.layout === "row" ? "" : "flex:1 1 auto;"}`;
+          paintInto(g, el.elements || []);
+          container.appendChild(g);
+          break;
+        }
+        case "cta": {
+          const label = el.text || card.cta_text || (inline ? "Add" : "Shop");
+          const cta = document.createElement("button");
+          cta.className = "aegis-cta";
+          cta.textContent = label;
+          const overlayOnImage = !!el.overlay && !!imageWrap;
+          if (overlayOnImage) {
+            cta.style.cssText = el.variant === "outline" ? `position:absolute;right:6px;bottom:6px;background:#fff;color:${brand};border:1px solid ${brand};border-radius:9px;padding:5px 18px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.14);` : `position:absolute;right:6px;bottom:6px;background:${brand};color:#fff;border:none;border-radius:9px;padding:5px 18px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.14);`;
+          } else {
+            cta.style.cssText = el.variant === "outline" ? `margin-top:${fLayout === "row" ? "0" : "auto"};background:transparent;color:${brand};border:1px solid ${brand};border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;` : `margin-top:${fLayout === "row" ? "0" : "auto"};background:${brand};color:#fff;border:none;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;`;
+          }
+          cta.addEventListener("click", (e) => {
+            e.stopPropagation();
+            trackEvent(campaign.id, "clicked", { stepId: el.id || "add" });
+            if (inline) {
+              if (typeof window !== "undefined") {
+                window.dispatchEvent(
+                  new CustomEvent("aegis:add-to-cart", {
+                    detail: {
+                      campaign_id: campaign.id,
+                      product_id: meta.product_id,
+                      sku: meta.sku,
+                      title: card.title,
+                      price: meta.price ?? card.body,
+                      image_url: card.image_url,
+                      cta_url: card.cta_url
+                    }
+                  })
+                );
+              }
+              return;
+            }
+            if (card.cta_url) {
+              const safe = sanitizeUrl(card.cta_url);
+              if (safe) ctx.navigate ? ctx.navigate(safe) : window.location.href = safe;
+            }
+          });
+          (overlayOnImage ? imageWrap : container).appendChild(cta);
+          break;
+        }
+      }
+    }
+  };
+  paintInto(tile, elements);
+  const open = (e) => {
+    e.stopPropagation();
+    trackEvent(campaign.id, "clicked");
+    if (inline) {
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent("aegis:open-product", {
+            detail: {
+              campaign_id: campaign.id,
+              product_id: meta.product_id,
+              sku: meta.sku,
+              cta_url: card.cta_url
+            }
+          })
+        );
+      }
+      return;
+    }
+    if (card.cta_url) {
+      const safe = sanitizeUrl(card.cta_url);
+      if (safe) ctx.navigate ? ctx.navigate(safe) : window.location.href = safe;
+    }
+  };
+  if (inline || card.cta_url) tile.addEventListener("click", open);
+  return tile;
+}
 const MAX_CARDS_RENDERED = 10;
 function renderCarouselCards(ctx) {
-  const { campaign, trackEvent, sanitizeUrl, sanitizeColor, log, addAnimationStyles } = ctx;
+  const { campaign, trackEvent, sanitizeColor, log, addAnimationStyles } = ctx;
   const ic = campaign.interactive_config || {};
   const rawCards = Array.isArray(ic.cards) ? ic.cards : [];
   const cards = rawCards.slice(0, MAX_CARDS_RENDERED);
@@ -70,7 +761,7 @@ function renderCarouselCards(ctx) {
   headerText.appendChild(body);
   header.appendChild(headerText);
   const closeBtn = document.createElement("button");
-  closeBtn.textContent = "✕";
+  closeBtn.innerHTML = lucideSvg("x", { size: 16 });
   closeBtn.setAttribute("aria-label", "Close");
   closeBtn.style.cssText = `
     background: transparent; border: none; color: inherit;
@@ -89,68 +780,16 @@ function renderCarouselCards(ctx) {
     padding-bottom: 4px; -webkit-overflow-scrolling: touch;
   `;
   track.style.msOverflowStyle = "none";
+  const template = resolveGlobalTemplate(ic);
   cards.forEach((c, i) => {
-    const tile = document.createElement("div");
+    const tile = renderCardFromTemplate(c, {
+      template,
+      ctx,
+      action: "navigate",
+      layout: "row",
+      layoutAccent: accent
+    });
     tile.setAttribute("data-card-index", String(i));
-    tile.style.cssText = `
-      flex: 0 0 auto; width: 140px; scroll-snap-align: start;
-      background: ${fg}0a; border-radius: 12px; padding: 10px;
-      display: flex; flex-direction: column; gap: 6px;
-      cursor: ${c.cta_url ? "pointer" : "default"};
-    `;
-    const safeVideo = c.video_url ? sanitizeUrl(c.video_url) : "";
-    if (safeVideo) {
-      const vid = document.createElement("video");
-      vid.src = safeVideo;
-      vid.muted = true;
-      vid.loop = true;
-      vid.autoplay = true;
-      vid.playsInline = true;
-      vid.setAttribute("playsinline", "");
-      vid.style.cssText = "width: 100%; height: 96px; border-radius: 8px; object-fit: cover;";
-      tile.appendChild(vid);
-    } else if (c.image_url) {
-      const img = document.createElement("img");
-      const safe = sanitizeUrl(c.image_url);
-      if (safe) {
-        img.src = safe;
-        img.alt = "";
-        img.loading = "lazy";
-        img.style.cssText = "width: 100%; height: 96px; border-radius: 8px; object-fit: cover;";
-        tile.appendChild(img);
-      }
-    }
-    if (c.title) {
-      const t = document.createElement("div");
-      t.textContent = c.title;
-      t.style.cssText = "font-weight: 600; font-size: 13px; line-height: 1.3;";
-      tile.appendChild(t);
-    }
-    if (c.body) {
-      const b = document.createElement("div");
-      b.textContent = c.body;
-      b.style.cssText = "font-size: 11.5px; opacity: 0.72; line-height: 1.3;";
-      tile.appendChild(b);
-    }
-    if (c.cta_text && c.cta_url) {
-      const cta = document.createElement("button");
-      cta.className = "aegis-cta";
-      cta.textContent = c.cta_text;
-      cta.style.cssText = `
-        margin-top: auto; background: ${accent}; color: #fff;
-        border: none; padding: 6px 10px; border-radius: 999px;
-        font-size: 12px; font-weight: 600; cursor: pointer;
-      `;
-      const goto2 = (e) => {
-        e.stopPropagation();
-        trackEvent(campaign.id, "clicked", { stepId: `card_${i}` });
-        const safe = sanitizeUrl(c.cta_url);
-        if (safe) window.location.href = safe;
-      };
-      cta.addEventListener("click", goto2);
-      tile.appendChild(cta);
-      tile.addEventListener("click", goto2);
-    }
     track.appendChild(tile);
   });
   card.appendChild(track);
@@ -314,7 +953,7 @@ function renderStickyBar(ctx) {
   };
   if (dismissible) {
     const close = document.createElement("button");
-    close.textContent = "✕";
+    close.innerHTML = lucideSvg("x", { size: 16 });
     close.setAttribute("aria-label", "Dismiss");
     close.style.cssText = `
       background: transparent; border: none; color: inherit;
@@ -344,13 +983,12 @@ function buildProgressBar(ctx, inline) {
   const source = ic.progress_source === "sse" ? "sse" : "client";
   addAnimationStyles();
   const brand = sanitizeColor(campaign.background_color || "#4169e1");
+  const accentVar = `var(--aegis-brand-accent, ${brand})`;
   const branded = ic.surface_style === "branded";
-  const bg = branded ? brand : "#ffffff";
+  const bg = branded ? accentVar : "#ffffff";
   const fg = sanitizeColor(campaign.text_color || (branded ? "#ffffff" : "#0f172a"));
-  const fill = sanitizeColor(
-    ic.progress_fill_color || (branded ? "#ffffff" : brand)
-  );
-  const track = branded ? "rgba(255,255,255,0.25)" : `${fill}22`;
+  const fill = ic.progress_fill_color ? sanitizeColor(ic.progress_fill_color) : branded ? "#ffffff" : accentVar;
+  const track = branded ? "rgba(255,255,255,0.25)" : `color-mix(in srgb, ${fill} 14%, transparent)`;
   const bar = document.createElement("div");
   bar.className = "aegis-in-app-progress-bar";
   bar.setAttribute("data-campaign-id", campaign.id);
@@ -730,7 +1368,7 @@ function renderCoachmarkTour(ctx) {
 }
 const MAX_PRODUCTS = 24;
 function renderProductRecommendation(ctx) {
-  const { campaign, trackEvent, sanitizeUrl, sanitizeColor, log, addAnimationStyles } = ctx;
+  const { campaign, trackEvent, sanitizeColor, log, addAnimationStyles } = ctx;
   const ic = campaign.interactive_config || {};
   const rawCards = Array.isArray(ic.cards) ? ic.cards : [];
   const cards = rawCards.slice(0, MAX_PRODUCTS);
@@ -739,7 +1377,7 @@ function renderProductRecommendation(ctx) {
     return;
   }
   const layout = ic.rec_layout || "grid";
-  const ctaDefault = ic.rec_cta_text || "Shop now";
+  const template = resolveGlobalTemplate(ic);
   addAnimationStyles();
   const bg = "#ffffff";
   const fg = "#0f172a";
@@ -782,7 +1420,7 @@ function renderProductRecommendation(ctx) {
   headerText.appendChild(body);
   header.appendChild(headerText);
   const close = document.createElement("button");
-  close.textContent = "✕";
+  close.innerHTML = lucideSvg("x", { size: 18 });
   close.setAttribute("aria-label", "Close");
   close.style.cssText = `
     background: transparent; border: none; color: inherit;
@@ -807,82 +1445,9 @@ function renderProductRecommendation(ctx) {
     `;
   }
   cards.forEach((c) => {
-    const tile = document.createElement("div");
-    const isRow = layout === "row";
-    tile.style.cssText = `
-      background: ${fg}08; border-radius: 12px;
-      padding: 10px; display: flex; flex-direction: column; gap: 6px;
-      cursor: ${c.cta_url ? "pointer" : "default"};
-      ${isRow ? "flex: 0 0 150px; scroll-snap-align: start;" : ""}
-      transition: transform 0.15s ease;
-    `;
-    if (c.image_url) {
-      const img = document.createElement("img");
-      const safe = sanitizeUrl(c.image_url);
-      if (safe) {
-        img.src = safe;
-        img.alt = "";
-        img.loading = "lazy";
-        img.style.cssText = "width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; object-fit: cover;";
-        tile.appendChild(img);
-      }
-    }
-    if (c.title) {
-      const t = document.createElement("div");
-      t.textContent = c.title;
-      t.style.cssText = "font-weight: 600; font-size: 13px; line-height: 1.3;";
-      tile.appendChild(t);
-    }
-    const meta = c.metadata && typeof c.metadata === "object" ? c.metadata : {};
-    const price = meta.price;
-    const compareAt = meta.compare_at_price ?? meta.compare_at ?? meta.original_price;
-    if (price !== void 0) {
-      const priceRow = document.createElement("div");
-      priceRow.style.cssText = "display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;";
-      const p = document.createElement("span");
-      p.textContent = String(price);
-      p.style.cssText = `color: ${accent}; font-weight: 700; font-size: 13px;`;
-      priceRow.appendChild(p);
-      const pNum = parseFloat(String(price).replace(/[^0-9.]/g, ""));
-      const cNum = compareAt !== void 0 ? parseFloat(String(compareAt).replace(/[^0-9.]/g, "")) : NaN;
-      if (isFinite(cNum) && isFinite(pNum) && cNum > pNum) {
-        const orig = document.createElement("span");
-        orig.textContent = String(compareAt);
-        orig.style.cssText = "text-decoration: line-through; opacity: 0.5; font-size: 11px;";
-        priceRow.appendChild(orig);
-        const off = document.createElement("span");
-        off.textContent = `-${Math.round((1 - pNum / cNum) * 100)}%`;
-        off.style.cssText = "background: #ef444422; color: #ef4444; font-weight: 700; font-size: 10px; padding: 1px 5px; border-radius: 999px;";
-        priceRow.appendChild(off);
-      }
-      tile.appendChild(priceRow);
-    } else if (c.body) {
-      const b = document.createElement("div");
-      b.textContent = c.body;
-      b.style.cssText = "font-size: 11.5px; opacity: 0.72; line-height: 1.3;";
-      tile.appendChild(b);
-    }
-    const cta = document.createElement("button");
-    cta.className = "aegis-cta";
-    cta.textContent = c.cta_text || ctaDefault;
-    cta.style.cssText = `
-      margin-top: auto;
-      background: ${accent}; color: #fff;
-      border: none; padding: 7px 10px; border-radius: 999px;
-      font-size: 12px; font-weight: 600; cursor: pointer;
-    `;
-    const go = (e) => {
-      e.stopPropagation();
-      trackEvent(campaign.id, "clicked");
-      if (c.cta_url) {
-        const safe = sanitizeUrl(c.cta_url);
-        if (safe) window.location.href = safe;
-      }
-    };
-    cta.addEventListener("click", go);
-    tile.appendChild(cta);
-    if (c.cta_url) tile.addEventListener("click", go);
-    grid.appendChild(tile);
+    grid.appendChild(
+      renderCardFromTemplate(c, { template, ctx, action: "navigate", layout, layoutAccent: accent })
+    );
   });
   sheet.appendChild(grid);
   overlay.appendChild(sheet);
@@ -894,6 +1459,88 @@ function renderProductRecommendation(ctx) {
   });
   document.body.appendChild(overlay);
 }
+function renderProductRecommendationInline(ctx, target) {
+  const { campaign, sanitizeColor, addAnimationStyles, log } = ctx;
+  const ic = campaign.interactive_config || {};
+  const rawCards = Array.isArray(ic.cards) ? ic.cards : [];
+  const cards = rawCards.slice(0, MAX_PRODUCTS);
+  if (cards.length === 0) {
+    log("product_recommendation (inline) rendered with zero products — skipping", "warn");
+    return false;
+  }
+  const layout = ic.rec_layout || "row";
+  const template = resolveGlobalTemplate(ic);
+  const fg = "#0f172a";
+  const accent = sanitizeColor(campaign.background_color || "#4169e1");
+  addAnimationStyles();
+  const section = document.createElement("section");
+  section.className = "aegis-in-app-product-rec-inline";
+  section.setAttribute("data-campaign-id", campaign.id);
+  section.style.cssText = `
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    color: ${fg};
+  `;
+  if (campaign.title) {
+    const title = document.createElement("h2");
+    title.textContent = campaign.title;
+    title.style.cssText = "font-weight: 700; font-size: 16px; margin: 0 0 2px;";
+    section.appendChild(title);
+  }
+  if (campaign.body) {
+    const body = document.createElement("div");
+    body.textContent = campaign.body;
+    body.style.cssText = "font-size: 13px; opacity: 0.65; line-height: 1.4; margin-bottom: 10px;";
+    section.appendChild(body);
+  }
+  const grid = document.createElement("div");
+  const isRow = layout !== "grid";
+  if (layout === "grid") {
+    grid.style.cssText = "display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;";
+  } else {
+    grid.style.cssText = `
+      display: flex; gap: 10px; overflow-x: auto;
+      scroll-snap-type: x proximity; padding: 0 0 6px;
+      -webkit-overflow-scrolling: touch; scrollbar-width: none;
+    `;
+    grid.style.msOverflowStyle = "none";
+  }
+  cards.forEach((c) => {
+    grid.appendChild(
+      renderCardFromTemplate(c, { template, ctx, action: "cart", layout, layoutAccent: accent })
+    );
+  });
+  if (isRow && cards.length > 2) {
+    const wrap = document.createElement("div");
+    wrap.style.cssText = "position: relative;";
+    wrap.appendChild(grid);
+    const arrow = document.createElement("button");
+    arrow.setAttribute("aria-label", "Scroll for more");
+    arrow.innerHTML = "›";
+    arrow.style.cssText = `
+      position: absolute; top: 50%; right: 0; transform: translateY(-50%);
+      width: 30px; height: 30px; border-radius: 999px; border: 1px solid ${fg}1a;
+      background: #fff; color: ${fg}; font-size: 18px; line-height: 1; cursor: pointer;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.12); display: flex; align-items: center;
+      justify-content: center; z-index: 2;
+    `;
+    arrow.addEventListener("click", (e) => {
+      e.stopPropagation();
+      grid.scrollBy({ left: Math.round(grid.clientWidth * 0.8), behavior: "smooth" });
+    });
+    const syncArrow = () => {
+      const atEnd = grid.scrollLeft + grid.clientWidth >= grid.scrollWidth - 8;
+      arrow.style.display = atEnd ? "none" : "flex";
+    };
+    grid.addEventListener("scroll", syncArrow, { passive: true });
+    setTimeout(syncArrow, 0);
+    wrap.appendChild(arrow);
+    section.appendChild(wrap);
+  } else {
+    section.appendChild(grid);
+  }
+  target.appendChild(section);
+  return true;
+}
 const MAX_GROUPS = 12;
 const MAX_FRAMES = 20;
 const DEFAULT_DURATION_MS = 5e3;
@@ -997,7 +1644,7 @@ function renderLauncherBar(ctx, cfg, target) {
   if (floating) {
     const dismiss = document.createElement("button");
     dismiss.type = "button";
-    dismiss.textContent = "✕";
+    dismiss.innerHTML = lucideSvg("x", { size: 14 });
     dismiss.setAttribute("aria-label", "Dismiss stories");
     dismiss.style.cssText = `
       flex: 0 0 auto; align-self: center; margin-left: auto;
@@ -1141,7 +1788,7 @@ function openViewer(ctx, cfg, startGroupIndex, startFrameIndex = 0) {
   };
   const close = document.createElement("button");
   close.type = "button";
-  close.textContent = "✕";
+  close.innerHTML = lucideSvg("x", { size: 18 });
   close.setAttribute("aria-label", "Close");
   close.style.cssText = "position: absolute; top: 12px; right: 10px; z-index: 5; width: 34px; height: 34px; border: none; border-radius: 999px; background: rgba(0,0,0,0.32); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;";
   stage.appendChild(close);
@@ -1418,7 +2065,7 @@ function openGameModal(ctx, className, maxWidth = 360) {
   };
   const close = document.createElement("button");
   close.type = "button";
-  close.textContent = "✕";
+  close.innerHTML = lucideSvg("x", { size: 15 });
   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));
@@ -2095,7 +2742,7 @@ function renderGame(ctx, subType) {
   fn(ctx);
   return true;
 }
-const ASPECT = { "16:9": "16 / 9", "9:16": "9 / 16", "1:1": "1 / 1", "4:5": "4 / 5" };
+const ASPECT$1 = { "16:9": "16 / 9", "9:16": "9 / 16", "1:1": "1 / 1", "4:5": "4 / 5" };
 function buildVideo(ctx, aspect, autoplay, loop) {
   var _a;
   const { campaign, sanitizeUrl } = ctx;
@@ -2103,7 +2750,7 @@ function buildVideo(ctx, aspect, autoplay, loop) {
   const videoUrl = sanitizeUrl(ic.video_url || campaign.video_url || "");
   const poster = campaign.image_url ? sanitizeUrl(campaign.image_url) : null;
   const wrap = document.createElement("div");
-  wrap.style.cssText = `position:relative;width:100%;aspect-ratio:${ASPECT[aspect] || ASPECT["16:9"]};background:#0b1220;border-radius:14px;overflow:hidden;`;
+  wrap.style.cssText = `position:relative;width:100%;aspect-ratio:${ASPECT$1[aspect] || ASPECT$1["16:9"]};background:#0b1220;border-radius:14px;overflow:hidden;`;
   if (videoUrl) {
     const vid = document.createElement("video");
     vid.src = videoUrl;
@@ -2136,14 +2783,15 @@ function buildVideo(ctx, aspect, autoplay, loop) {
     });
     const pill = document.createElement("button");
     pill.type = "button";
-    pill.textContent = "🔇";
+    pill.innerHTML = lucideSvg("volume-x", { size: 14 });
     pill.setAttribute("aria-label", "Unmute");
     pill.style.cssText = "position:absolute;bottom:10px;right:10px;z-index:2;width:34px;height:34px;border:none;border-radius:999px;background:rgba(0,0,0,0.45);color:#fff;font-size:14px;cursor:pointer;";
     pill.addEventListener("click", (e) => {
       var _a2;
       e.stopPropagation();
       vid.muted = !vid.muted;
-      pill.textContent = vid.muted ? "🔇" : "🔊";
+      pill.innerHTML = lucideSvg(vid.muted ? "volume-x" : "volume-2", { size: 14 });
+      pill.setAttribute("aria-label", vid.muted ? "Unmute" : "Mute");
       if (!vid.muted) void ((_a2 = vid.play) == null ? void 0 : _a2.call(vid).catch(() => {
       }));
     });
@@ -2231,7 +2879,7 @@ function renderVideo(ctx) {
   }
   const close = document.createElement("button");
   close.type = "button";
-  close.textContent = "✕";
+  close.innerHTML = lucideSvg("x", { size: 15 });
   close.setAttribute("aria-label", "Close");
   close.style.cssText = "position:absolute;top:10px;left:10px;z-index:3;width:32px;height:32px;border:none;border-radius:999px;background:rgba(0,0,0,0.4);color:#fff;font-size:15px;cursor:pointer;";
   close.addEventListener("click", () => {
@@ -2272,11 +2920,187 @@ function renderVideoInline(ctx, target) {
   target.appendChild(banner);
   return true;
 }
+const HEX = /^#[0-9a-fA-F]{3,8}$/;
+function safeColor(c, fallback) {
+  return c && HEX.test(c) ? c : fallback;
+}
+const ASPECT = { "16:9": "16 / 9", "4:3": "4 / 3", "21:9": "21 / 9" };
+function _injectHeroResponsiveCss() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("aegis-hero-style")) return;
+  const style = document.createElement("style");
+  style.id = "aegis-hero-style";
+  style.textContent = ".aegis-hero-root{border-radius:16px;}@media (min-width:768px){.aegis-hero-root{border-radius:0;min-height:45vh;max-height:70vh;}}";
+  document.head.appendChild(style);
+}
+function cardHeadline(c) {
+  return c.headline ?? c.title ?? "";
+}
+function cardSub(c) {
+  return c.subhead ?? c.body ?? "";
+}
+function cardCta(c) {
+  return c.cta_label ?? c.cta_text ?? "";
+}
+function cardUrl(c) {
+  if (c.cta_url) return c.cta_url;
+  const t = c.cta_target;
+  if (t && t.value) return t.type === "category" ? `?category=${encodeURIComponent(t.value)}` : t.value;
+  return "";
+}
+function renderHeroInline(ctx, target) {
+  const { campaign, sanitizeUrl, trackEvent } = ctx;
+  const ic = campaign.interactive_config || {};
+  const cards = Array.isArray(ic.cards) ? ic.cards : [];
+  if (cards.length === 0) return false;
+  const chrome = ic.chrome || {};
+  const accent = safeColor(
+    chrome.accent && chrome.accent !== "brand" ? chrome.accent : campaign.background_color,
+    "#4169e1"
+  );
+  const variant = chrome.variant ?? "hero_fullbleed";
+  if (variant === "announcement_bar") {
+    const c = cards[0];
+    const bar = document.createElement("div");
+    bar.style.cssText = `display:flex;align-items:center;justify-content:center;gap:10px;background:${accent};color:#fff;padding:8px 14px;font:600 13px/1.3 Inter,system-ui,sans-serif;text-align:center;`;
+    bar.textContent = [cardHeadline(c), cardSub(c)].filter(Boolean).join(" · ");
+    const url = sanitizeUrl(cardUrl(c));
+    if (url && cardCta(c)) {
+      const a = document.createElement("span");
+      a.style.cssText = "text-decoration:underline;cursor:pointer;white-space:nowrap;";
+      a.textContent = cardCta(c);
+      a.addEventListener("click", () => {
+        var _a;
+        trackEvent(campaign.id, "clicked");
+        (_a = ctx.navigate) == null ? void 0 : _a.call(ctx, url);
+      });
+      bar.appendChild(a);
+    }
+    target.appendChild(bar);
+    trackEvent(campaign.id, "impression");
+    return true;
+  }
+  _injectHeroResponsiveCss();
+  const root = document.createElement("div");
+  root.className = "aegis-hero-root";
+  root.style.cssText = `position:relative;width:100%;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,0.06);${chrome.aspect_ratio && ASPECT[chrome.aspect_ratio] ? `aspect-ratio:${ASPECT[chrome.aspect_ratio]};` : "min-height:300px;"}`;
+  root.setAttribute("data-campaign-id", campaign.id);
+  const track = document.createElement("div");
+  track.style.cssText = "display:flex;height:100%;width:100%;transition:transform 0.5s ease;";
+  root.appendChild(track);
+  const overlayCss = chrome.overlay === "none" ? "" : chrome.overlay === "full-scrim" ? "background:linear-gradient(0deg,rgba(0,0,0,0.55),rgba(0,0,0,0.25));" : "background:linear-gradient(to top right,rgba(0,0,0,0.7),rgba(0,0,0,0.25) 45%,transparent);";
+  const justify = chrome.text_position === "center" ? "center" : "flex-end";
+  const align = chrome.text_position === "bottom-left" || !chrome.text_position ? "flex-start" : "center";
+  cards.forEach((c, i) => {
+    const slide = document.createElement("div");
+    slide.style.cssText = "position:relative;flex:0 0 100%;width:100%;height:100%;min-height:inherit;background:#f1f5f9;";
+    const videoUrl = sanitizeUrl(c.video_url ?? "");
+    const isVideo = !!videoUrl || c.media_type === "video";
+    const mediaUrl = isVideo ? videoUrl || sanitizeUrl(c.media_url ?? "") : sanitizeUrl(c.image_url ?? c.media_url ?? "");
+    if (mediaUrl) {
+      if (isVideo) {
+        const v = document.createElement("video");
+        v.src = mediaUrl;
+        v.autoplay = true;
+        v.muted = true;
+        v.loop = true;
+        v.playsInline = true;
+        v.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;";
+        slide.appendChild(v);
+      } else {
+        const img = document.createElement("div");
+        img.style.cssText = `position:absolute;inset:0;background:url("${mediaUrl}") center/cover no-repeat;`;
+        slide.appendChild(img);
+      }
+    }
+    if (overlayCss) {
+      const scrim = document.createElement("div");
+      scrim.style.cssText = `position:absolute;inset:0;${overlayCss}`;
+      slide.appendChild(scrim);
+    }
+    const content = document.createElement("div");
+    content.style.cssText = `position:absolute;inset:0;display:flex;flex-direction:column;justify-content:${justify};align-items:${align};gap:6px;padding:24px;text-align:${align === "center" ? "center" : "left"};`;
+    const h = cardHeadline(c);
+    if (h) {
+      const head = document.createElement("h2");
+      head.textContent = h;
+      head.style.cssText = "margin:0;color:#fff;font:800 24px/1.2 Inter Tight,Inter,system-ui,sans-serif;letter-spacing:-0.02em;text-shadow:0 1px 8px rgba(0,0,0,0.35);max-width:90%;";
+      content.appendChild(head);
+    }
+    const s = cardSub(c);
+    if (s) {
+      const sub = document.createElement("p");
+      sub.textContent = s;
+      sub.style.cssText = "margin:0;color:rgba(255,255,255,0.92);font:500 14px/1.4 Inter,system-ui,sans-serif;text-shadow:0 1px 6px rgba(0,0,0,0.3);max-width:90%;";
+      content.appendChild(sub);
+    }
+    const cta = cardCta(c);
+    const url = sanitizeUrl(cardUrl(c));
+    if (cta && chrome.cta_style !== "none") {
+      const btn = document.createElement("button");
+      btn.textContent = cta;
+      btn.style.cssText = chrome.cta_style === "underline" ? `margin-top:6px;background:none;border:none;color:#fff;font:700 14px Inter,system-ui,sans-serif;text-decoration:underline;cursor:pointer;padding:0;` : `margin-top:8px;background:${accent};color:#fff;border:none;border-radius:999px;padding:9px 18px;font:700 13px Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.2);`;
+      btn.addEventListener("click", () => {
+        var _a;
+        trackEvent(campaign.id, "clicked", { stepId: `card_${i}` });
+        if (url) (_a = ctx.navigate) == null ? void 0 : _a.call(ctx, url);
+      });
+      content.appendChild(btn);
+    }
+    slide.appendChild(content);
+    track.appendChild(slide);
+  });
+  const dotEls = [];
+  let activeIdx = 0;
+  const goto = (idx) => {
+    activeIdx = (idx % cards.length + cards.length) % cards.length;
+    track.style.transform = `translateX(-${activeIdx * 100}%)`;
+    dotEls.forEach((d, i) => {
+      d.style.width = i === activeIdx ? "18px" : "6px";
+      d.style.background = i === activeIdx ? accent : "rgba(255,255,255,0.7)";
+    });
+  };
+  const dots = document.createElement("div");
+  dots.style.cssText = "position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2;";
+  if (cards.length > 1) {
+    cards.forEach((_, i) => {
+      const dot = document.createElement("span");
+      dot.style.cssText = "width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,0.7);transition:all 0.25s;cursor:pointer;";
+      dot.addEventListener("click", () => goto(i));
+      dotEls.push(dot);
+      dots.appendChild(dot);
+    });
+    root.appendChild(dots);
+  }
+  target.appendChild(root);
+  goto(0);
+  if (cards.length > 1 && chrome.loop !== false) {
+    const ms = typeof chrome.autoplay_ms === "number" && chrome.autoplay_ms >= 1500 ? chrome.autoplay_ms : 4e3;
+    let timer = window.setInterval(() => goto(activeIdx + 1), ms);
+    root.addEventListener("mouseenter", () => window.clearInterval(timer));
+    root.addEventListener("mouseleave", () => {
+      timer = window.setInterval(() => goto(activeIdx + 1), ms);
+    });
+  }
+  trackEvent(campaign.id, "impression");
+  return true;
+}
 const STYLE_ID = "aegis-chat-styles";
 const POLL_INTERVAL_MS = 5e3;
+let currentLauncher = null;
+function getCurrentLauncher() {
+  return currentLauncher;
+}
+function openChat(prefill) {
+  currentLauncher == null ? void 0 : currentLauncher.openPanel(prefill);
+}
+function closeChat() {
+  currentLauncher == null ? void 0 : currentLauncher.closePanel();
+}
 const ATTENTION_DELAY_MS = 4500;
 class AegisChat {
   constructor(config) {
+    this.sessionResumed = false;
     this.open = false;
     this.initialized = false;
     this.unread = 0;
@@ -2294,12 +3118,14 @@ class AegisChat {
     this.icon = config.icon ?? "sparkle";
     this.logoUrl = config.logoUrl;
     this.position = config.position ?? "bottom-right";
+    this.displayMode = config.displayMode ?? "bubble";
     this.agentPersona = config.agentPersona;
     this.quickReplies = config.quickReplies;
     this.onSessionStart = config.onSessionStart;
     this.onSessionEnd = config.onSessionEnd;
     this.onMessageSent = config.onMessageSent;
     this.anonymousId = this.readAnonId();
+    this.contactId = this.contactId ?? this.readStoredContactId();
   }
   // ── Lifecycle ────────────────────────────────────────────────────────────
   initialize() {
@@ -2307,7 +3133,8 @@ class AegisChat {
     this.initialized = true;
     this.injectStyles();
     this.mount();
-    this.scheduleAttention();
+    currentLauncher = this;
+    if (this.displayMode !== "nav") this.scheduleAttention();
   }
   /** Called by the runtime when the visitor identifies. */
   updateContactId(contactId) {
@@ -2330,7 +3157,7 @@ class AegisChat {
     (_c = this.bubble) == null ? void 0 : _c.classList.add("aegis-chat-bubble--hidden");
     this.clearUnread();
     if (prefill && this.input) this.input.value = prefill;
-    void this.refreshHistory();
+    void this.resumeSession();
     this.startPolling();
     (_d = this.input) == null ? void 0 : _d.focus();
   }
@@ -2355,13 +3182,22 @@ class AegisChat {
     this.stopPolling();
     (_a = this.root) == null ? void 0 : _a.remove();
     this.initialized = false;
+    if (currentLauncher === this) currentLauncher = null;
   }
   // ── Send ─────────────────────────────────────────────────────────────────
-  async send(text) {
+  async send(text, media) {
     var _a;
-    const message = text.trim();
-    if (!message) return;
-    this.appendBubble({ id: `local_${Date.now()}`, sender: "customer", role: "user", content: message });
+    const caption2 = text.trim();
+    if (!caption2 && !media) return;
+    const message = caption2 || (media ? media.type === "image" ? "Sent a photo 📷" : "Sent a file 📎" : "");
+    this.appendBubble({
+      id: `local_${Date.now()}`,
+      sender: "customer",
+      role: "user",
+      content: message,
+      media_url: (media == null ? void 0 : media.url) ?? null,
+      media_type: (media == null ? void 0 : media.type) ?? null
+    });
     this.pendingEcho.push(message);
     if (this.input) {
       this.input.value = "";
@@ -2377,6 +3213,8 @@ class AegisChat {
           channel: this.channel,
           anonymous_id: this.anonymousId,
           contact_id: this.contactId,
+          media_url: media == null ? void 0 : media.url,
+          media_type: media == null ? void 0 : media.type,
           // Active Web Chat — binds the campaign-configured persona. Optional;
           // the backend falls back to the tenant default if unknown/absent
           // (honored server-side in Phase E). JSON.stringify drops it if absent.
@@ -2395,6 +3233,7 @@ class AegisChat {
       } catch {
       }
       this.contactId = data.contact_id;
+      this.persistContactId(data.contact_id);
       this.sseTicket = data.sse_ticket;
       this.connectSSE(data.sse_ticket);
       void this.refreshHistory();
@@ -2403,6 +3242,51 @@ class AegisChat {
       this.appendSystem("Sorry — your message could not be delivered. Please try again.");
     }
   }
+  // ── Media attachments ─────────────────────────────────────────────────────
+  /** Validate + upload a picked file, then send it as a media message. */
+  async handleFile(file) {
+    var _a;
+    const allowed = /* @__PURE__ */ new Set(["image/jpeg", "image/png", "image/gif", "image/webp", "application/pdf"]);
+    if (!allowed.has(file.type)) {
+      this.appendSystem("That file type isn’t supported (images or PDF only).");
+      return;
+    }
+    if (file.size > 8 * 1024 * 1024) {
+      this.appendSystem("That file is too large (max 8 MB).");
+      return;
+    }
+    try {
+      const data = await this.fileToBase64(file);
+      const res = await fetch(`${this.apiHost}/v1/chat/upload`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-Aegis-Write-Key": this.writeKey },
+        body: JSON.stringify({ data, content_type: file.type, filename: file.name })
+      });
+      if (!res.ok) {
+        this.log("upload failed", res.status);
+        this.appendSystem("Sorry — that attachment couldn’t be uploaded.");
+        return;
+      }
+      const out = await res.json();
+      await this.send(((_a = this.input) == null ? void 0 : _a.value) ?? "", { url: out.media_url, type: out.media_type });
+    } catch (err) {
+      this.log("upload error", err);
+      this.appendSystem("Sorry — that attachment couldn’t be uploaded.");
+    }
+  }
+  /** Read a File as bare base64 (strip the `data:…;base64,` prefix). */
+  fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = String(reader.result || "");
+        const comma = result.indexOf(",");
+        resolve(comma >= 0 ? result.slice(comma + 1) : result);
+      };
+      reader.onerror = () => reject(reader.error);
+      reader.readAsDataURL(file);
+    });
+  }
   // ── Reply transport: SSE nudge + history refetch (poll fallback) ──────────
   connectSSE(ticket) {
     if (!this.open) return;
@@ -2522,7 +3406,7 @@ class AegisChat {
     const closeBtn = document.createElement("button");
     closeBtn.className = "aegis-chat-close";
     closeBtn.setAttribute("aria-label", "Close chat");
-    closeBtn.textContent = "✕";
+    closeBtn.innerHTML = lucideSvg("x", { size: 16 });
     closeBtn.addEventListener("click", () => this.closePanel());
     header.appendChild(titleEl);
     header.appendChild(closeBtn);
@@ -2540,6 +3424,21 @@ class AegisChat {
         void this.send(input.value);
       }
     });
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = "image/*,application/pdf";
+    fileInput.className = "aegis-chat-fileinput";
+    fileInput.addEventListener("change", () => {
+      const f = fileInput.files && fileInput.files[0];
+      if (f) void this.handleFile(f);
+      fileInput.value = "";
+    });
+    const attachBtn = document.createElement("button");
+    attachBtn.type = "button";
+    attachBtn.className = "aegis-chat-attach";
+    attachBtn.setAttribute("aria-label", "Attach a file");
+    attachBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>';
+    attachBtn.addEventListener("click", () => fileInput.click());
     const sendBtn = document.createElement("button");
     sendBtn.type = "submit";
     sendBtn.className = "aegis-chat-send";
@@ -2549,8 +3448,10 @@ class AegisChat {
       e.preventDefault();
       void this.send(input.value);
     });
+    composer.appendChild(attachBtn);
     composer.appendChild(input);
     composer.appendChild(sendBtn);
+    composer.appendChild(fileInput);
     panel.appendChild(header);
     panel.appendChild(thread);
     panel.appendChild(composer);
@@ -2561,7 +3462,7 @@ class AegisChat {
     const tipClose = document.createElement("button");
     tipClose.className = "aegis-chat-tip-close";
     tipClose.setAttribute("aria-label", "Dismiss");
-    tipClose.textContent = "✕";
+    tipClose.innerHTML = lucideSvg("x", { size: 14 });
     tipClose.addEventListener("click", (e) => {
       e.stopPropagation();
       this.dismissAttention();
@@ -2570,8 +3471,10 @@ class AegisChat {
     tip.appendChild(tipClose);
     tip.addEventListener("click", () => this.openPanel());
     root.appendChild(panel);
-    root.appendChild(tip);
-    root.appendChild(bubble);
+    if (this.displayMode !== "nav") {
+      root.appendChild(tip);
+      root.appendChild(bubble);
+    }
     document.body.appendChild(root);
     this.greetingTip = tip;
     this.root = root;
@@ -2609,6 +3512,26 @@ class AegisChat {
     if (msg.id) this.renderedIds.add(msg.id);
     const row = document.createElement("div");
     row.className = `aegis-chat-msg aegis-chat-msg--${msg.sender}`;
+    if (msg.media_url) {
+      if (msg.media_type === "image") {
+        const img = document.createElement("img");
+        img.className = "aegis-chat-media-img";
+        img.src = msg.media_url;
+        img.alt = "attachment";
+        img.loading = "lazy";
+        const url = msg.media_url;
+        img.addEventListener("click", () => window.open(url, "_blank", "noopener"));
+        row.appendChild(img);
+      } else {
+        const a = document.createElement("a");
+        a.className = "aegis-chat-media-file";
+        a.href = msg.media_url;
+        a.target = "_blank";
+        a.rel = "noopener noreferrer";
+        a.textContent = "📎 Attachment";
+        row.appendChild(a);
+      }
+    }
     if (msg.content) {
       const bubble = document.createElement("div");
       bubble.className = "aegis-chat-bubbletext";
@@ -2700,6 +3623,54 @@ class AegisChat {
       return void 0;
     }
   }
+  readStoredContactId() {
+    if (typeof document === "undefined") return void 0;
+    try {
+      return new Storage().get("aegis_chat_cid") ?? void 0;
+    } catch {
+      return void 0;
+    }
+  }
+  persistContactId(id) {
+    if (!id || typeof document === "undefined") return;
+    try {
+      new Storage().set("aegis_chat_cid", id, 365);
+    } catch {
+    }
+  }
+  /** Restore a returning visitor's thread on open. Resolves an existing contact
+   *  + mints a per-session ticket WITHOUT sending a message (history is ticket-
+   *  gated). No-ops for brand-new visitors and once a ticket is already held. */
+  async resumeSession() {
+    if (this.sseTicket) {
+      void this.refreshHistory();
+      return;
+    }
+    if (this.sessionResumed) return;
+    this.sessionResumed = true;
+    if (!this.contactId && !this.anonymousId) return;
+    try {
+      const res = await fetch(`${this.apiHost}/v1/chat/session`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-Aegis-Write-Key": this.writeKey },
+        body: JSON.stringify({
+          anonymous_id: this.anonymousId,
+          contact_id: this.contactId,
+          channel: this.channel
+        })
+      });
+      if (!res.ok) return;
+      const data = await res.json();
+      if (!data.contact_id || !data.sse_ticket) return;
+      this.contactId = data.contact_id;
+      this.sseTicket = data.sse_ticket;
+      this.persistContactId(data.contact_id);
+      await this.refreshHistory();
+      if (this.open) this.connectSSE(data.sse_ticket);
+    } catch (err) {
+      this.log("resume session failed", err);
+    }
+  }
   // ── Typing indicator ───────────────────────────────────────────────────────
   showTyping() {
     if (!this.thread || this.typingEl) return;
@@ -2800,11 +3771,19 @@ const CHAT_CSS = `
 .aegis-chat-input{flex:1;resize:none;border:1px solid #e2e8f0;border-radius:12px;padding:9px 12px;font-size:14px;font-family:inherit;max-height:96px;outline:none}
 .aegis-chat-input:focus{border-color:var(--aegis-chat-accent,#4169e1)}
 .aegis-chat-send{width:40px;height:40px;border-radius:9999px;border:none;background:var(--aegis-chat-accent,#4169e1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
+.aegis-chat-attach{width:38px;height:38px;border-radius:9999px;border:none;background:transparent;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .15s ease,color .15s ease}
+.aegis-chat-attach:hover{background:#f1f5f9;color:var(--aegis-chat-accent,#4169e1)}
+.aegis-chat-fileinput{display:none}
+.aegis-chat-media-img{max-width:200px;max-height:200px;border-radius:12px;object-fit:cover;cursor:pointer;display:block}
+.aegis-chat-media-file{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;font-size:13px;color:#0f172a;text-decoration:none;max-width:220px}
+.aegis-chat-msg--customer .aegis-chat-media-file{background:rgba(255,255,255,.18);border-color:transparent;color:#fff}
 /* Mobile: raise the bubble above the storefront's full-width cart bar so they
    never overlap; widen the panel and reduce the tooltip width. */
-@media (max-width:480px){
+@media (max-width:767px){
   .aegis-chat-root{bottom:84px;right:16px}
-  .aegis-chat-panel{width:calc(100vw - 24px);height:calc(100vh - 140px)}
+  /* Full-page chat on mobile — the open panel covers the whole viewport (incl.
+     the bottom nav) like a native chat screen, instead of a floating card. */
+  .aegis-chat-panel{position:fixed;inset:0;left:0;right:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;border-radius:0}
   .aegis-chat-tip{max-width:200px}
 }
 `;
@@ -3376,6 +4355,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,
     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
@@ -3436,6 +4419,7 @@ const _AegisInAppManager = class _AegisInAppManager {
   constructor(config) {
     this.campaigns = [];
     this.displayedCampaigns = /* @__PURE__ */ new Set();
+    this._displaySizeMul = 1;
     this.suppressedUntil = /* @__PURE__ */ new Map();
     this.isInitialized = false;
     this.reconnectAttempts = 0;
@@ -3444,10 +4428,15 @@ const _AegisInAppManager = class _AegisInAppManager {
     this.ready = new Promise((resolve) => {
       this.readyResolve = resolve;
     });
+    this.pendingPreInitRefresh = false;
     this.currentSurface = null;
     this.currentScreen = null;
     this.currentLocationId = null;
     this.filledSlots = /* @__PURE__ */ new WeakSet();
+    this.slotSignatures = /* @__PURE__ */ new WeakMap();
+    this.slotTimers = /* @__PURE__ */ new WeakMap();
+    this.slotObserver = null;
+    this.slotRenderScheduled = false;
     this.writeKey = config.writeKey;
     this.apiHost = config.apiHost || "https://api.aegis.ai";
     this.userId = config.userId ?? readAnonIdFromStorage$1();
@@ -3559,6 +4548,11 @@ const _AegisInAppManager = class _AegisInAppManager {
       this.connectSSE();
     }
     this.isInitialized = true;
+    if (this.pendingPreInitRefresh) {
+      this.pendingPreInitRefresh = false;
+      this.log("Re-fetching campaigns for surface/screen declared during init");
+      void this.refreshCampaigns();
+    }
     this.log("AegisInApp initialized successfully");
   }
   updateUserId(userId) {
@@ -3607,16 +4601,17 @@ const _AegisInAppManager = class _AegisInAppManager {
    * change `currentSurface`, so arbitrary events never poison the surface gate.
    */
   refreshOnEvent(eventName, isScreenDeclaration = false) {
-    if (!this.isInitialized) {
-      this.log(`refreshOnEvent(${eventName}) before initialize — ignored`);
-      return;
-    }
     if (eventName && _AegisInAppManager.KNOWN_SURFACES.has(eventName)) {
       this.currentSurface = eventName;
     }
     if (isScreenDeclaration && eventName && eventName !== "page_view") {
       this.currentScreen = eventName;
     }
+    if (!this.isInitialized) {
+      this.pendingPreInitRefresh = true;
+      this.log(`refreshOnEvent(${eventName}) before initialize — surface captured, refetch deferred to initialize()`);
+      return;
+    }
     if (this.refreshDebounceTimer) {
       clearTimeout(this.refreshDebounceTimer);
     }
@@ -3834,7 +4829,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     try {
       const context = new URLSearchParams({
         device_type: this.detectDeviceType(),
-        page_url: typeof window !== "undefined" ? window.location.pathname : "/"
+        page_url: typeof window !== "undefined" ? window.location.pathname + window.location.search : "/"
       });
       context.set("is_new_user", this.isNewUser() ? "true" : "false");
       if (this.currentSurface) {
@@ -3992,34 +4987,92 @@ const _AegisInAppManager = class _AegisInAppManager {
     if (!c.surface || c.surface.length === 0) return screenOk;
     return screenOk || this.matchesCurrentSurface(c);
   }
+  // Re-fill slots that mount after a poll (SPA route changes). Observes the DOM
+  // once; when a new [data-aegis-slot] appears it re-runs renderIntoSlots from
+  // the cached campaigns (idempotent — already-filled slots are skipped). Does
+  // NOT loop on the SDK's own injections (those add content INTO a slot, not a
+  // new slot element).
+  ensureSlotObserver() {
+    if (this.slotObserver || typeof MutationObserver === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    this.slotObserver = new MutationObserver((mutations) => {
+      let sawSlot = false;
+      for (const m2 of mutations) {
+        m2.addedNodes.forEach((n) => {
+          var _a, _b;
+          if (sawSlot || n.nodeType !== 1) return;
+          const el = n;
+          if (((_a = el.matches) == null ? void 0 : _a.call(el, "[data-aegis-slot]")) || ((_b = el.querySelector) == null ? void 0 : _b.call(el, "[data-aegis-slot]"))) {
+            sawSlot = true;
+          }
+        });
+        if (sawSlot) break;
+      }
+      if (!sawSlot || this.slotRenderScheduled) return;
+      this.slotRenderScheduled = true;
+      const run = () => {
+        this.slotRenderScheduled = false;
+        this.renderIntoSlots();
+      };
+      if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
+      else setTimeout(run, 0);
+    });
+    this.slotObserver.observe(document.body, { childList: true, subtree: true });
+  }
   renderIntoSlots() {
     if (typeof document === "undefined") return;
+    this.ensureSlotObserver();
     const slots = document.querySelectorAll("[data-aegis-slot]");
     if (slots.length === 0) return;
     const eligibleByCategory = /* @__PURE__ */ new Map();
+    const seenIds = /* @__PURE__ */ new Set();
     for (const c of this.campaigns) {
       if (!this.matchesCurrentScreenOrSurface(c)) continue;
       const modes = c.delivery_modes;
       const category = c.widget_category;
       if (!modes || !modes.includes("embedded_card")) continue;
       if (!category) continue;
+      if (seenIds.has(c.id)) continue;
+      seenIds.add(c.id);
       const arr2 = eligibleByCategory.get(category);
       if (arr2) arr2.push(c);
       else eligibleByCategory.set(category, [c]);
     }
     if (eligibleByCategory.size === 0) return;
     slots.forEach((slot) => {
-      if (this.filledSlots.has(slot)) return;
       const key = slot.getAttribute("data-aegis-slot");
       if (!key) return;
       const list = eligibleByCategory.get(key);
       if (!list || list.length === 0) return;
+      const sig = list.map((c) => `${c.id}:${c.assigned_variant_id ?? ""}`).join(",");
+      if (this.filledSlots.has(slot) && this.slotSignatures.get(slot) === sig) return;
+      const oldTimer = this.slotTimers.get(slot);
+      if (oldTimer) {
+        clearInterval(oldTimer);
+        this.slotTimers.delete(slot);
+      }
+      slot.querySelectorAll(
+        ":scope > [data-aegis-rotate-pane], :scope > [data-aegis-slot-rendered], :scope > [data-aegis-rotate-dots]"
+      ).forEach((n) => n.remove());
+      this.slotSignatures.set(slot, sig);
       slot.querySelectorAll(":scope > [data-aegis-slot-default]").forEach((d) => d.remove());
-      const rotateMs = parseInt(slot.getAttribute("data-aegis-slot-rotate") || "0", 10);
+      const attrMs = parseInt(slot.getAttribute("data-aegis-slot-rotate") || "0", 10);
+      const declaredMs = list.reduce((m2, c) => {
+        var _a;
+        const v = Number((_a = c.interactive_config) == null ? void 0 : _a.slot_rotate_ms);
+        return Number.isFinite(v) && v > m2 ? v : m2;
+      }, 0);
+      const rotateMs = attrMs > 0 ? attrMs : declaredMs;
+      const flush = slot.hasAttribute("data-aegis-slot-flush");
       if (rotateMs > 0 && list.length > 1) {
-        this.renderRotatingSlot(slot, list, rotateMs);
+        this.renderRotatingSlot(slot, list, rotateMs, flush);
       } else {
-        this.renderCampaignIntoSlot(list[0], slot);
+        const host = document.createElement("div");
+        host.setAttribute("data-aegis-slot-rendered", list[0].id);
+        slot.appendChild(host);
+        this.renderCampaignIntoSlot(list[0], host);
+        if (flush) this._flattenSlotCard(host);
       }
       this.filledSlots.add(slot);
     });
@@ -4032,7 +5085,7 @@ const _AegisInAppManager = class _AegisInAppManager {
    * is deferred at render and fired per campaign on FIRST visibility, so hidden
    * panes never over-count. One rendered pane → no rotation (just shows it).
    */
-  renderRotatingSlot(slot, campaigns, rotateMs) {
+  renderRotatingSlot(slot, campaigns, rotateMs, flush = false) {
     const panes = [];
     for (const c of campaigns) {
       const pane = document.createElement("div");
@@ -4040,8 +5093,10 @@ const _AegisInAppManager = class _AegisInAppManager {
       pane.style.display = "none";
       slot.appendChild(pane);
       this.renderCampaignIntoSlot(c, pane, { deferImpression: true });
-      if (pane.childElementCount > 0) panes.push({ el: pane, campaign: c });
-      else pane.remove();
+      if (pane.childElementCount > 0) {
+        if (flush) this._flattenSlotCard(pane);
+        panes.push({ el: pane, campaign: c });
+      } else pane.remove();
     }
     if (panes.length === 0) return;
     const impressed = /* @__PURE__ */ new Set();
@@ -4052,17 +5107,59 @@ const _AegisInAppManager = class _AegisInAppManager {
       this.emit("campaign-shown", c);
     };
     let idx = 0;
-    panes[0].el.style.display = "";
-    markVisible(panes[0].campaign);
-    if (panes.length === 1) return;
-    const timer = setInterval(() => {
+    const dots = [];
+    if (panes.length > 1) {
+      const bar = document.createElement("div");
+      bar.setAttribute("data-aegis-rotate-dots", "");
+      bar.setAttribute("role", "tablist");
+      bar.setAttribute("aria-label", "Offers");
+      bar.style.cssText = "display:flex;align-items:center;justify-content:center;gap:5px;padding:2px 0 8px;";
+      panes.forEach((_, i) => {
+        const dot = document.createElement("button");
+        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.addEventListener("click", (e) => {
+          e.stopPropagation();
+          show(i, true);
+        });
+        dots.push(dot);
+        bar.appendChild(dot);
+      });
+      slot.appendChild(bar);
+    }
+    const paintDots = () => {
+      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.setAttribute("aria-selected", active ? "true" : "false");
+      });
+    };
+    let timer = null;
+    const start = () => setInterval(() => {
+      show(idx + 1);
+    }, rotateMs);
+    function show(i, fromClick = false) {
       panes[idx].el.style.display = "none";
-      idx = (idx + 1) % panes.length;
+      idx = (i % panes.length + panes.length) % panes.length;
       panes[idx].el.style.display = "";
       markVisible(panes[idx].campaign);
-    }, rotateMs);
+      paintDots();
+      if (fromClick && timer) {
+        clearInterval(timer);
+        timer = start();
+      }
+    }
+    panes[0].el.style.display = "";
+    markVisible(panes[0].campaign);
+    paintDots();
+    if (panes.length === 1) return;
+    timer = start();
+    this.slotTimers.set(slot, timer);
     if (typeof window !== "undefined") {
-      window.addEventListener("beforeunload", () => clearInterval(timer), { once: true });
+      window.addEventListener("beforeunload", () => timer && clearInterval(timer), { once: true });
     }
   }
   /**
@@ -4116,6 +5213,14 @@ const _AegisInAppManager = class _AegisInAppManager {
           target.querySelectorAll(":scope > [data-aegis-slot-default]").forEach((d) => d.remove());
         }
       }
+      const spacing = Number(anchor == null ? void 0 : anchor.element_spacing);
+      if (spacing > 0) {
+        if (position === "before" || position === "after") {
+          target.style.margin = `${spacing}px`;
+        } else {
+          target.style.padding = `${spacing}px`;
+        }
+      }
       if (this.filledSlots.has(target)) continue;
       this.renderCampaignIntoSlot(c, target);
       this.filledSlots.add(target);
@@ -4198,6 +5303,13 @@ const _AegisInAppManager = class _AegisInAppManager {
     this.displayedCampaigns.add(campaign.id);
     this.addAnimationStyles();
     const ic = campaign.interactive_config || {};
+    const inlineMul = this._sizeMul(ic);
+    if (inlineMul !== 1) {
+      const sizer = document.createElement("div");
+      sizer.style.cssText = `transform: scale(${inlineMul}); transform-origin: top center;`;
+      target.appendChild(sizer);
+      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;
@@ -4214,70 +5326,81 @@ const _AegisInAppManager = class _AegisInAppManager {
       }
       return;
     }
-    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;
-      // 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;
-      case "countdown_offer":
-        rendered = this.renderCountdownSlot(campaign, ic, bg, text, target);
-        break;
-      case "scratch_card":
-        rendered = this.renderScratchCardSlot(campaign, ic, bg, text, target);
-        break;
-      case "custom_html":
-        rendered = this.renderCustomHtmlSlot(campaign, ic, bg, text, target);
-        break;
-      case "stories":
-        rendered = renderStoriesRings(this.buildRenderContext(campaign), target);
-        break;
-      case "video":
-        rendered = renderVideoInline(this.buildRenderContext(campaign), target);
-        break;
-      case "progress_bar":
-        rendered = renderProgressBarInline(this.buildRenderContext(campaign), target);
-        break;
-      case "quiz":
-        rendered = this.renderQuizSlot(campaign, ic, bg, text, target);
-        if (!rendered) {
+    const _tpl = ic.card_template;
+    const _hasComposedTemplate = !!_tpl && typeof _tpl === "object" && Array.isArray(_tpl.elements);
+    const _isMultiCard = campaign.sub_type === "product_recommendation" || campaign.sub_type === "carousel_cards";
+    if (_hasComposedTemplate && !_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;
+        // 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;
+        case "countdown_offer":
+          rendered = this.renderCountdownSlot(campaign, ic, bg, text, target);
+          break;
+        case "scratch_card":
+          rendered = this.renderScratchCardSlot(campaign, ic, bg, text, target);
+          break;
+        case "custom_html":
+          rendered = this.renderCustomHtmlSlot(campaign, ic, bg, text, target);
+          break;
+        case "stories":
+          rendered = renderStoriesRings(this.buildRenderContext(campaign), target);
+          break;
+        case "video":
+          rendered = renderVideoInline(this.buildRenderContext(campaign), target);
+          break;
+        case "progress_bar":
+          rendered = renderProgressBarInline(this.buildRenderContext(campaign), target);
+          break;
+        case "product_recommendation":
+          rendered = renderProductRecommendationInline(this.buildRenderContext(campaign), target);
+          break;
+        case "quiz":
+          rendered = this.renderQuizSlot(campaign, ic, bg, text, target);
+          if (!rendered) {
+            rendered = this.renderGenericCardSlot(campaign, ic, bg, text, target);
+          }
+          break;
+        // Remaining sub_types (sticky_bar, progress_bar,
+        // product_recommendation) render as a generic card on the bill slot
+        // (overlay path handles their full UX); dedicated slot variants get added
+        // here as merchants need them.
+        default:
           rendered = this.renderGenericCardSlot(campaign, ic, bg, text, target);
-        }
-        break;
-      // Remaining sub_types (sticky_bar, progress_bar,
-      // product_recommendation) render as a generic card on the bill slot
-      // (overlay path handles their full UX); dedicated slot variants get added
-      // here as merchants need them.
-      default:
-        rendered = this.renderGenericCardSlot(campaign, ic, bg, text, target);
-        break;
-    }
+          break;
+      }
     if (!rendered) return;
     if (!(options == null ? void 0 : options.deferImpression)) {
       this.trackEvent(campaign.id, "impression");
@@ -4326,6 +5449,34 @@ const _AegisInAppManager = class _AegisInAppManager {
    *  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). */
+  /**
+   * Composed single card — renders a campaign's top-level `card_template`
+   * (frame + elements: icon/text/progress/image/cta/group/…) through the generic
+   * `renderCardFromTemplate` engine. The canonical path for the rich card editor:
+   * the storefront value bar, loyalty nudges, and any operator-composed card all
+   * render here from declarative JSON, on ACS / custom / third-party sites.
+   */
+  renderComposedCardSlot(campaign, ic, target) {
+    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 { accent } = this._surfacePalette(campaign);
+    const tile = renderCardFromTemplate(card, {
+      template,
+      ctx: this.buildRenderContext(campaign),
+      action: "navigate",
+      layoutAccent: this.sanitizeColor(campaign.background_color || accent)
+    });
+    target.appendChild(tile);
+    return true;
+  }
   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);
@@ -4341,6 +5492,45 @@ const _AegisInAppManager = class _AegisInAppManager {
       im.style.cssText = "width: 100%; height: 96px; object-fit: cover; display: block;";
       card.appendChild(im);
     }
+    const widgetCat = typeof c.widget_category === "string" ? c.widget_category : "";
+    if (widgetCat === "promo" && !img) {
+      const row = document.createElement("div");
+      row.style.cssText = `display:flex; align-items:center; gap:12px; min-height:46px; padding:${st.padY ?? 10}px ${st.padX ?? 14}px;`;
+      const colL = document.createElement("div");
+      colL.style.cssText = "flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px;";
+      if (campaign.title) {
+        const t = document.createElement("div");
+        t.style.cssText = `font-size:13px; font-weight:${st.weight ?? "700"}; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;`;
+        t.textContent = campaign.title;
+        colL.appendChild(t);
+      }
+      if (campaign.body) {
+        const b = document.createElement("div");
+        b.style.cssText = "font-size:11.5px; opacity:0.7; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;";
+        b.textContent = campaign.body;
+        colL.appendChild(b);
+      }
+      row.appendChild(colL);
+      if (buttonText) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.textContent = buttonText;
+        const accentTok = `var(--aegis-brand-accent, ${text})`;
+        btn.style.cssText = `flex:0 0 auto; align-self:center; cursor:pointer; white-space:nowrap;background:color-mix(in srgb, ${accentTok} 12%, #fff); color:${accentTok}; border:none;border-radius:999px; padding:7px 16px; font-size:12.5px; font-weight:700;`;
+        btn.addEventListener("click", () => {
+          void this.trackEvent(campaign.id, "clicked");
+          if (actionUrl) {
+            window.open(actionUrl, "_blank", "noopener");
+          } else if (typeof window !== "undefined") {
+            window.dispatchEvent(new CustomEvent("aegis:open-login", { detail: { campaign_id: campaign.id } }));
+          }
+        });
+        row.appendChild(btn);
+      }
+      card.appendChild(row);
+      target.appendChild(card);
+      return true;
+    }
     const cbody = document.createElement("div");
     cbody.style.cssText = `padding: ${st.padY ?? 12}px ${st.padX ?? 12}px; display: flex; flex-direction: column; gap: 6px;`;
     if (campaign.title) {
@@ -4484,8 +5674,14 @@ const _AegisInAppManager = class _AegisInAppManager {
       body.style.alignItems = "center";
       body.style.justifyContent = "center";
       const done = document.createElement("div");
-      done.style.cssText = "padding: 8px 0; font-size: 13px; font-weight: 600; text-align: center;";
-      done.textContent = typeof ((_a = campaign.interactive_config) == null ? void 0 : _a.thank_you_message) === "string" ? campaign.interactive_config.thank_you_message : "✓ Thanks — your details are saved.";
+      done.style.cssText = "padding: 8px 0; font-size: 13px; font-weight: 600; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px;";
+      const customThanks = typeof ((_a = campaign.interactive_config) == null ? void 0 : _a.thank_you_message) === "string" ? campaign.interactive_config.thank_you_message : null;
+      if (customThanks) {
+        done.textContent = customThanks;
+      } else {
+        done.innerHTML = lucideSvg("check", { size: 14 });
+        done.appendChild(document.createTextNode("Thanks — your details are saved."));
+      }
       body.appendChild(done);
       this._playReaction(body, "affirm", "check.json", campaign.interactive_config);
     });
@@ -4618,6 +5814,8 @@ const _AegisInAppManager = class _AegisInAppManager {
     const hubImg = cfgStr("spin_hub_image_url");
     const wheelBgImg = cfgStr("wheel_background_url");
     const pointerImg = cfgStr("pointer_image_url");
+    const pointerCenter = (cfgStr("spin_pointer_position") || "top") === "center";
+    const pointerBase = pointerCenter ? "translate(-50%, -100%)" : "translateX(-50%)";
     const isUrl = (s) => /^https?:\/\//i.test(s);
     const now = () => typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
     let rotation = 0;
@@ -4677,7 +5875,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       vibrate(18);
     };
     const body = document.createElement("div");
-    body.style.cssText = `padding: ${st.padY ?? 22}px ${st.padX ?? 20}px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px;`;
+    body.style.cssText = `padding: ${st.padY ?? 22}px ${st.padX ?? 20}px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px;`;
     if (campaign.title) {
       const t = document.createElement("div");
       t.style.cssText = `font-size: 18px; font-weight: 800; letter-spacing: -0.01em; text-align: center; font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;`;
@@ -4695,11 +5893,55 @@ const _AegisInAppManager = class _AegisInAppManager {
     const wheelWrap = document.createElement("div");
     wheelWrap.style.cssText = `position: relative; width: ${SIZE}px; height: ${SIZE}px; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.30));`;
     const pointer = document.createElement("div");
-    pointer.style.cssText = pointerImg ? `position: absolute; left: 50%; top: -10px; transform: translateX(-50%); transform-origin: 50% 0; width: 26px; height: 30px; background: center / contain no-repeat url("${pointerImg}"); z-index: 5; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));` : `position: absolute; left: 50%; top: -7px; transform: translateX(-50%); transform-origin: 50% 0; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid ${pointerColor}; z-index: 5; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));`;
+    if (pointerCenter) {
+      const needleH = Math.round(radius * 0.42);
+      pointer.style.cssText = `position: absolute; left: 50%; top: 50%; width: 20px; height: ${needleH}px; transform: ${pointerBase}; transform-origin: 50% 100%; z-index: 6; pointer-events: none;`;
+      if (pointerImg) {
+        const pim = document.createElement("img");
+        pim.src = pointerImg;
+        pim.alt = "";
+        pim.style.cssText = "width: 100%; height: 100%; object-fit: contain; object-position: top; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));";
+        pointer.appendChild(pim);
+      } else {
+        const stem = document.createElement("div");
+        stem.style.cssText = `position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 4px; height: 100%; background: ${pointerColor}; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.35);`;
+        const head = document.createElement("div");
+        head.style.cssText = `position: absolute; left: 50%; top: -1px; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid ${pointerColor}; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));`;
+        pointer.appendChild(stem);
+        pointer.appendChild(head);
+      }
+    } else if (pointerImg) {
+      pointer.style.cssText = `position: absolute; left: 50%; top: -12px; transform: ${pointerBase}; transform-origin: 50% 0; width: 30px; height: 34px; z-index: 5;`;
+      const pim = document.createElement("img");
+      pim.src = pointerImg;
+      pim.alt = "";
+      pim.style.cssText = "width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));";
+      pointer.appendChild(pim);
+    } else {
+      pointer.style.cssText = `position: absolute; left: 50%; top: -7px; transform: ${pointerBase}; transform-origin: 50% 0; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid ${pointerColor}; z-index: 5; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));`;
+    }
     const wheel = document.createElement("div");
     const wheelFace = wheelBgImg ? `center / cover no-repeat url("${wheelBgImg}")` : `conic-gradient(${stops})`;
-    wheel.style.cssText = `position: relative; width: ${SIZE}px; height: ${SIZE}px; border-radius: 50%; border: 5px solid #ffffff; box-shadow: 0 0 0 2px ${text}2e, inset 0 0 22px rgba(0,0,0,0.20); background: ${wheelFace}; overflow: hidden; will-change: transform; touch-action: none; cursor: ${spinMode === "button" ? "default" : "grab"};`;
+    const wheelRim = wheelBgImg ? "0" : "5px solid #ffffff";
+    const wheelShadow = wheelBgImg ? `0 0 0 2px ${text}2e` : `0 0 0 2px ${text}2e, inset 0 0 22px rgba(0,0,0,0.20)`;
+    wheel.style.cssText = `position: relative; width: ${SIZE}px; height: ${SIZE}px; border-radius: 50%; border: ${wheelRim}; box-shadow: ${wheelShadow}; background: ${wheelFace}; overflow: hidden; will-change: transform; touch-action: none; cursor: ${spinMode === "button" ? "default" : "grab"};`;
     if (idleAnim === "wobble") wheel.style.animation = "aegisSpinWobble 3s ease-in-out infinite";
+    const sliceImgFrac = Math.max(40, Math.min(100, Number(ic.spin_slice_image_size) || 100)) / 100;
+    if (!wheelBgImg) shown.forEach((s, i) => {
+      const simg = typeof s.image_url === "string" ? s.image_url : "";
+      if (!simg || !isUrl(simg)) return;
+      const pts = ["50% 50%"];
+      const steps = Math.max(2, Math.ceil(spans[i] / 6));
+      for (let st2 = 0; st2 <= steps; st2++) {
+        const a = (starts[i] + spans[i] * st2 / steps) * Math.PI / 180;
+        const x = 50 + 50 * sliceImgFrac * Math.sin(a);
+        const y = 50 - 50 * sliceImgFrac * Math.cos(a);
+        pts.push(`${x.toFixed(2)}% ${y.toFixed(2)}%`);
+      }
+      const segEl = document.createElement("div");
+      segEl.style.cssText = `position: absolute; inset: 0; background: center / cover no-repeat url("${simg}"); clip-path: polygon(${pts.join(",")}); pointer-events: none;`;
+      wheel.appendChild(segEl);
+    });
     if (!wheelBgImg) starts.forEach((b) => {
       const ln = document.createElement("div");
       ln.style.cssText = `position: absolute; left: 50%; top: 0; width: 1.5px; height: 50%; background: rgba(255,255,255,0.55); transform-origin: bottom center; transform: translateX(-50%) rotate(${b}deg); pointer-events: none;`;
@@ -4711,17 +5953,6 @@ const _AegisInAppManager = class _AegisInAppManager {
     const rText = (rHub + rRim) / 2;
     if (!wheelBgImg) labels.forEach((label, i) => {
       const mid = midOf(i);
-      const wedgeImg = shown[i] && typeof shown[i].image_url === "string" ? shown[i].image_url : "";
-      if (wedgeImg && isUrl(wedgeImg)) {
-        const flipImg = mid > 180 && mid < 360;
-        const isz = Math.max(18, Math.min(40, bandLen * 0.62));
-        const wim = document.createElement("img");
-        wim.src = wedgeImg;
-        wim.alt = label || "";
-        wim.style.cssText = `position: absolute; left: 50%; top: 50%; width: ${isz}px; height: ${isz}px; object-fit: contain; transform: translate(-50%, -50%) rotate(${mid}deg) translateY(-${rText}px) rotate(${flipImg ? 90 : -90}deg); filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)); pointer-events: none;`;
-        wheel.appendChild(wim);
-        return;
-      }
       const icoVal = shown[i] && typeof shown[i].icon === "string" ? shown[i].icon : "";
       const chord = 2 * rText * Math.sin(spans[i] * Math.PI / 180 / 2);
       const byThickness = chord * 0.6;
@@ -4765,28 +5996,13 @@ const _AegisInAppManager = class _AegisInAppManager {
     const hub = document.createElement("div");
     hub.style.cssText = `position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #e9edf5); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.30); z-index: 4; overflow: hidden; display: flex; align-items: center; justify-content: center;`;
     if (hubImg) {
-      const hc = document.createElement("canvas");
-      hc.width = 40;
-      hc.height = 40;
-      hc.style.cssText = "width: 100%; height: 100%;";
-      const hcx = hc.getContext("2d");
-      const him = new Image();
-      him.crossOrigin = "anonymous";
-      him.onload = () => {
-        if (!hcx) return;
-        const ar = him.width / him.height || 1;
-        let w = 32, h = 32;
-        if (ar > 1) h = 32 / ar;
-        else w = 32 * ar;
-        hcx.drawImage(him, (40 - w) / 2, (40 - h) / 2, w, h);
-        hcx.globalCompositeOperation = "source-in";
-        hcx.fillStyle = "#5b626e";
-        hcx.fillRect(0, 0, 40, 40);
-      };
-      him.onerror = () => {
-      };
+      hub.style.border = "none";
+      hub.style.background = "transparent";
+      const him = document.createElement("img");
       him.src = hubImg;
-      hub.appendChild(hc);
+      him.alt = "";
+      him.style.cssText = "width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;";
+      hub.appendChild(him);
     } else {
       const hubDot = document.createElement("div");
       hubDot.style.cssText = `width: 11px; height: 11px; border-radius: 50%; background: ${bg};`;
@@ -4800,22 +6016,22 @@ const _AegisInAppManager = class _AegisInAppManager {
     body.appendChild(wheelWrap);
     if (!card.style.position) card.style.position = "relative";
     const result = document.createElement("div");
-    result.style.cssText = "font-size: 14px; font-weight: 800; min-height: 20px; text-align: center; letter-spacing: 0.2px;";
+    result.style.cssText = "font-size: 14px; font-weight: 800; min-height: 0; text-align: center; letter-spacing: 0.2px;";
     if (ic.spin_sound_enabled !== false) {
       const soundBtn = document.createElement("button");
       soundBtn.type = "button";
       soundBtn.setAttribute("aria-label", "Toggle sound");
-      soundBtn.textContent = soundOn ? "🔊" : "🔇";
+      soundBtn.innerHTML = lucideSvg(soundOn ? "volume-2" : "volume-x", { size: 15 });
       soundBtn.style.cssText = "position: absolute; top: 10px; left: 12px; background: transparent; border: none; font-size: 15px; cursor: pointer; opacity: 0.65; z-index: 6; line-height: 1;";
       soundBtn.addEventListener("click", () => {
         soundOn = !soundOn;
-        soundBtn.textContent = soundOn ? "🔊" : "🔇";
+        soundBtn.innerHTML = lucideSvg(soundOn ? "volume-2" : "volume-x", { size: 15 });
       });
       card.appendChild(soundBtn);
     }
     const btn = document.createElement("button");
     btn.textContent = campaign.button_text || "Spin the wheel";
-    btn.style.cssText = `padding: 12px 32px; border-radius: 999px; border: none; background: #ffffff; color: ${bg}; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.22); transition: transform 0.15s, box-shadow 0.15s; font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;`;
+    btn.style.cssText = `padding: 9px 22px; border-radius: 999px; border: none; background: ${text}; color: ${bg}; font-size: 13px; font-weight: 700; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.20); transition: transform 0.15s, box-shadow 0.15s; font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;`;
     btn.addEventListener("mouseenter", () => {
       if (btn.disabled) return;
       btn.style.transform = "translateY(-1px)";
@@ -4844,12 +6060,12 @@ const _AegisInAppManager = class _AegisInAppManager {
       pVel *= 0.7;
       pDefl += pVel;
       if (Math.abs(pDefl) > 0.06 || Math.abs(pVel) > 0.06) {
-        pointer.style.transform = `translateX(-50%) rotate(${pDefl.toFixed(2)}deg)`;
+        pointer.style.transform = `${pointerBase} rotate(${pDefl.toFixed(2)}deg)`;
         pointerRaf = requestAnimationFrame(stepPointer);
       } else {
         pDefl = 0;
         pVel = 0;
-        pointer.style.transform = "translateX(-50%) rotate(0deg)";
+        pointer.style.transform = `${pointerBase} rotate(0deg)`;
         pointerRaf = 0;
       }
     };
@@ -4924,7 +6140,7 @@ const _AegisInAppManager = class _AegisInAppManager {
           var _a;
           try {
             void ((_a = navigator.clipboard) == null ? void 0 : _a.writeText(r.code));
-            chip.textContent = "Copied ✓";
+            chip.textContent = "Copied";
           } catch {
           }
         });
@@ -4970,7 +6186,7 @@ const _AegisInAppManager = class _AegisInAppManager {
           var _a;
           try {
             void ((_a = navigator.clipboard) == null ? void 0 : _a.writeText(r.code));
-            chip.textContent = "Copied ✓";
+            chip.textContent = "Copied";
           } catch {
           }
         });
@@ -5211,7 +6427,7 @@ const _AegisInAppManager = class _AegisInAppManager {
         pctLabel.textContent = `${pct}%`;
         pctLabel.style.opacity = "0.8";
       } else if (pctLabel && i === selected) {
-        pctLabel.textContent = "✓";
+        pctLabel.innerHTML = lucideSvg("check", { size: 14 });
         pctLabel.style.opacity = "0.8";
       }
     });
@@ -5234,59 +6450,18 @@ const _AegisInAppManager = class _AegisInAppManager {
     }
     const strip = document.createElement("div");
     strip.style.cssText = `display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: ${st.padY ?? 12}px ${st.padX ?? 12}px;`;
+    const template = resolveGlobalTemplate(ic);
+    const ctx = this.buildRenderContext(campaign);
+    const accent = this.sanitizeColor(campaign.background_color || text);
     cards.forEach((c, i) => {
-      const tile = document.createElement("div");
-      const ctaUrl = typeof c.cta_url === "string" ? c.cta_url : "";
-      tile.style.cssText = `flex: 0 0 auto; width: 150px; scroll-snap-align: start; background: ${text}0a; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; cursor: ${ctaUrl ? "pointer" : "default"};`;
-      const videoUrl = typeof c.video_url === "string" ? c.video_url : "";
-      const imageUrl = typeof c.image_url === "string" ? c.image_url : "";
-      if (videoUrl) {
-        const v = document.createElement("video");
-        v.src = videoUrl;
-        v.muted = true;
-        v.loop = true;
-        v.autoplay = true;
-        v.playsInline = true;
-        v.setAttribute("playsinline", "");
-        v.style.cssText = "width: 100%; height: 90px; object-fit: cover; display: block;";
-        tile.appendChild(v);
-      } else if (imageUrl) {
-        const im = document.createElement("img");
-        im.src = imageUrl;
-        im.alt = "";
-        im.loading = "lazy";
-        im.style.cssText = "width: 100%; height: 90px; object-fit: cover; display: block;";
-        tile.appendChild(im);
-      }
-      const tb = document.createElement("div");
-      tb.style.cssText = "padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px;";
-      if (typeof c.title === "string" && c.title) {
-        const tt = document.createElement("div");
-        tt.style.cssText = "font-size: 12px; font-weight: 600; line-height: 1.3;";
-        tt.textContent = c.title;
-        tb.appendChild(tt);
-      }
-      if (typeof c.body === "string" && c.body) {
-        const tbd = document.createElement("div");
-        tbd.style.cssText = "font-size: 10.5px; opacity: 0.72; line-height: 1.3;";
-        tbd.textContent = c.body;
-        tb.appendChild(tbd);
-      }
-      const ctaText = typeof c.cta_text === "string" ? c.cta_text : "";
-      if (ctaText && ctaUrl) {
-        const cta = document.createElement("button");
-        cta.textContent = ctaText;
-        cta.style.cssText = `margin-top: auto; align-self: flex-start; background: ${text}; color: ${bg}; border: none; padding: 5px 10px; border-radius: ${st.btnRadius ?? 999}px; font-size: 11px; font-weight: 600; cursor: pointer;`;
-        const goto = (e) => {
-          e.stopPropagation();
-          void this.trackEvent(campaign.id, "clicked", { stepId: `card_${i}` });
-          window.open(ctaUrl, "_blank", "noopener");
-        };
-        cta.addEventListener("click", goto);
-        tile.addEventListener("click", goto);
-        tb.appendChild(cta);
-      }
-      tile.appendChild(tb);
+      const tile = renderCardFromTemplate(c, {
+        template,
+        ctx,
+        action: "navigate",
+        layout: "row",
+        layoutAccent: accent
+      });
+      tile.setAttribute("data-card-index", String(i));
       strip.appendChild(tile);
     });
     card.appendChild(strip);
@@ -5383,6 +6558,34 @@ const _AegisInAppManager = class _AegisInAppManager {
     target.appendChild(card);
     return true;
   }
+  /** Foil palette — a brushed-metal gradient + a contrast "ink" (for the
+   *  SCRATCH-HERE text, sparkle motif, and logo tint) derived from the operator's
+   *  chosen foil colour (brand primary / custom hex). Unset / invalid → the
+   *  default silver. Light foils get dark ink, dark foils get white ink, so the
+   *  prompt stays legible on any colour. */
+  _scratchFoilPalette(hex) {
+    const clean = (hex || "").trim().replace(/^#/, "");
+    if (!/^[0-9a-fA-F]{6}$/.test(clean)) {
+      return { g0: "#d7dbe2", g1: "#b4bac4", g2: "#c9cdd6", ink: "#6b7280" };
+    }
+    const r = parseInt(clean.slice(0, 2), 16);
+    const g = parseInt(clean.slice(2, 4), 16);
+    const b = parseInt(clean.slice(4, 6), 16);
+    const toward = (amt) => {
+      const m2 = (c) => Math.round(c + (255 - c) * amt);
+      return `rgb(${m2(r)}, ${m2(g)}, ${m2(b)})`;
+    };
+    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return {
+      g0: toward(0.34),
+      // bright sheen
+      g1: `#${clean}`,
+      // base colour
+      g2: toward(0.18),
+      // soft sheen
+      ink: lum > 0.62 ? "#5b6270" : "rgba(255,255,255,0.92)"
+    };
+  }
   /** Built-in embedded SCRATCH CARD — a canvas foil the customer scratches to
    *  reveal the server-picked prize, then submits (records + grants). Confetti
    *  on reveal. No AegisMessageRuntime callback dependency (works on the bill). */
@@ -5400,6 +6603,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     let soundOn = ic.scratch_sound_enabled !== false;
     const revealImg = cfgStr("reveal_image_url");
     const foilImg = cfgStr("scratch_foil_image_url");
+    const foilPal = this._scratchFoilPalette(cfgStr("scratch_foil_color"));
     const pool = Array.isArray(ic.prize_pool) ? ic.prize_pool : [];
     const isUrl = (s) => /^https?:\/\//i.test(s);
     const sampleWin = pool.find(
@@ -5509,11 +6713,11 @@ const _AegisInAppManager = class _AegisInAppManager {
       const sb = document.createElement("button");
       sb.type = "button";
       sb.setAttribute("aria-label", "Toggle sound");
-      sb.textContent = soundOn ? "🔊" : "🔇";
+      sb.innerHTML = lucideSvg(soundOn ? "volume-2" : "volume-x", { size: 15 });
       sb.style.cssText = "position: absolute; top: 10px; left: 12px; background: transparent; border: none; font-size: 15px; cursor: pointer; opacity: 0.65; z-index: 6; line-height: 1;";
       sb.addEventListener("click", () => {
         soundOn = !soundOn;
-        sb.textContent = soundOn ? "🔊" : "🔇";
+        sb.innerHTML = lucideSvg(soundOn ? "volume-2" : "volume-x", { size: 15 });
       });
       card.appendChild(sb);
     }
@@ -5542,9 +6746,9 @@ const _AegisInAppManager = class _AegisInAppManager {
       if (!ctx) return;
       ctx.globalCompositeOperation = "source-over";
       const foil = ctx.createLinearGradient(0, 0, CW, CH);
-      foil.addColorStop(0, "#d7dbe2");
-      foil.addColorStop(0.5, "#b4bac4");
-      foil.addColorStop(1, "#c9cdd6");
+      foil.addColorStop(0, foilPal.g0);
+      foil.addColorStop(0.5, foilPal.g1);
+      foil.addColorStop(1, foilPal.g2);
       ctx.fillStyle = foil;
       ctx.fillRect(0, 0, CW, CH);
       ctx.textAlign = "center";
@@ -5553,17 +6757,19 @@ const _AegisInAppManager = class _AegisInAppManager {
         ctx.globalAlpha = 0.6;
         ctx.drawImage(logo, (CW - logo.width) / 2, CH * 0.42 - logo.height / 2, logo.width, logo.height);
         ctx.globalAlpha = 1;
-        ctx.fillStyle = "#6b7280";
+        ctx.fillStyle = foilPal.ink;
         ctx.font = "700 12px system-ui, sans-serif";
         ctx.fillText("SCRATCH HERE", CW / 2, CH * 0.84);
       } else {
-        ctx.fillStyle = "rgba(108,116,128,0.18)";
+        ctx.globalAlpha = 0.22;
+        ctx.fillStyle = foilPal.ink;
         ctx.font = "12px system-ui, sans-serif";
         for (let gy = 18; gy < CH; gy += 30) {
           const off = (gy / 30 | 0) % 2 ? 16 : 0;
           for (let gx = 16 + off; gx < CW; gx += 32) ctx.fillText("✦", gx, gy);
         }
-        ctx.fillStyle = "#7c828e";
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = foilPal.ink;
         ctx.font = "700 13px system-ui, sans-serif";
         ctx.fillText("SCRATCH HERE", CW / 2, CH / 2);
       }
@@ -5590,7 +6796,7 @@ const _AegisInAppManager = class _AegisInAppManager {
           if (!lctx) return;
           lctx.drawImage(im, 0, 0, lc.width, lc.height);
           lctx.globalCompositeOperation = "source-in";
-          lctx.fillStyle = "#5b626e";
+          lctx.fillStyle = foilPal.ink;
           lctx.fillRect(0, 0, lc.width, lc.height);
           paintFoil(lc);
         };
@@ -5680,7 +6886,7 @@ const _AegisInAppManager = class _AegisInAppManager {
             var _a;
             try {
               void ((_a = navigator.clipboard) == null ? void 0 : _a.writeText(code));
-              chip.textContent = "Copied ✓";
+              chip.textContent = "Copied";
             } catch {
             }
           });
@@ -5868,6 +7074,19 @@ const _AegisInAppManager = class _AegisInAppManager {
     `;
     return card;
   }
+  /**
+   * Flush a rendered slot card into its host card — drop the per-campaign radius
+   * + shadow so it reads as one unit with the host wrapper (used for the
+   * storefront value bar via `data-aegis-slot-flush`). Targets every
+   * `[data-campaign-id]` card inside `container` (or the container itself).
+   */
+  _flattenSlotCard(container) {
+    const cards = container.matches("[data-campaign-id]") ? [container] : Array.from(container.querySelectorAll("[data-campaign-id]"));
+    for (const el of cards) {
+      el.style.borderRadius = "0";
+      el.style.boxShadow = "none";
+    }
+  }
   // Optional header/brand image atop a survey-style widget (star / nps).
   _appendHeaderImage(body, ic) {
     const url = ic.header_image_url;
@@ -6309,12 +7528,18 @@ const _AegisInAppManager = class _AegisInAppManager {
     }
   }
   displayCampaign(campaign) {
+    if (Array.isArray(campaign.delivery_modes) && campaign.delivery_modes.length > 0 && !campaign.delivery_modes.includes("in_app_overlay")) {
+      return;
+    }
     const proceed = this.emit("campaign-will-show", campaign);
     if (!proceed) {
       this.log(`campaign ${campaign.id} suppressed by campaign-will-show handler`);
       return;
     }
     this.displayedCampaigns.add(campaign.id);
+    this._displaySizeMul = this._sizeMul(
+      campaign.interactive_config
+    );
     const interactiveSubTypes = /* @__PURE__ */ new Set([
       "spin_wheel",
       "scratch_card",
@@ -6435,6 +7660,16 @@ const _AegisInAppManager = class _AegisInAppManager {
     return {
       campaign,
       getCartState: this.getCartState,
+      properties: () => {
+        var _a, _b;
+        const cart = (_a = this.getCartState) == null ? void 0 : _a.call(this);
+        const ctxObj = ((_b = campaign.interactive_config) == null ? void 0 : _b.card_context) || {};
+        return {
+          "cart.total": cart == null ? void 0 : cart.total,
+          "cart.count": cart == null ? void 0 : cart.itemCount,
+          ...ctxObj
+        };
+      },
       trackEvent: (id, evt, extra) => {
         void this.trackEvent(id, evt, extra);
       },
@@ -6507,6 +7742,14 @@ const _AegisInAppManager = class _AegisInAppManager {
    * slot renderers (`renderSpinWheelSlot` / `renderScratchCardSlot`) in a modal
    * so the gamified widget is fully playable — not a dead frame.
    */
+  /** Display-size multiplier — operator control over how big a bounded overlay
+   *  renders (small 0.82 / medium 1 / large 1.18). Default medium = prior size.
+   *  Read from interactive_config.display_size; mirrors the schema enum + the
+   *  dashboard preview harness so the operator's choice is honored identically. */
+  _sizeMul(ic) {
+    const s = ic && typeof ic.display_size === "string" ? ic.display_size : "medium";
+    return s === "small" ? 0.82 : s === "large" ? 1.18 : 1;
+  }
   renderGamificationOverlay(campaign, ic, bg, text) {
     const overlay = this.createOverlay(`aegis-in-app-${campaign.sub_type}-overlay`);
     const modal = document.createElement("div");
@@ -6521,7 +7764,11 @@ const _AegisInAppManager = class _AegisInAppManager {
       this.renderSpinWheelSlot(campaign, ic, bg, text, modal);
     }
     this._addCornerClose(modal, overlay, campaign.id, text);
-    overlay.appendChild(modal);
+    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);
   }
@@ -6533,7 +7780,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>'
     );
     if (closeIcon) x.appendChild(closeIcon);
-    else x.textContent = "✕";
+    else x.innerHTML = lucideSvg("x", { size: 14 });
     x.style.cssText = `
       position: absolute; top: 12px; right: 12px; z-index: 4; width: 28px; height: 28px;
       display: flex; align-items: center; justify-content: center; border: none;
@@ -7184,8 +8431,30 @@ const _AegisInAppManager = class _AegisInAppManager {
       background: rgba(0,0,0,0.5); display: flex; align-items: center;
       justify-content: center; z-index: 99999; animation: aegisFadeIn 0.3s ease;
     `;
+    if (this._displaySizeMul !== 1) {
+      const mul = this._displaySizeMul;
+      queueMicrotask(() => {
+        const card = overlay.firstElementChild;
+        if (!card || card.dataset.aegisSized) return;
+        card.dataset.aegisSized = "1";
+        const wrap = document.createElement("div");
+        wrap.style.cssText = `display: flex; align-items: center; justify-content: center; transform: scale(${mul}); transform-origin: center;`;
+        overlay.insertBefore(wrap, card);
+        wrap.appendChild(card);
+      });
+    }
     return overlay;
   }
+  /** Wrap a card in a display-size scaling container (no-op at medium/×1). Used
+   *  by formats that build their overlay inline (renderModal) rather than via
+   *  createOverlay, so size is honored identically. */
+  _wrapScaled(card) {
+    if (this._displaySizeMul === 1) return card;
+    const wrap = document.createElement("div");
+    wrap.style.cssText = `display: flex; align-items: center; justify-content: center; transform: scale(${this._displaySizeMul}); transform-origin: center;`;
+    wrap.appendChild(card);
+    return wrap;
+  }
   createCTAButton(campaign, bg, text) {
     const btn = document.createElement("button");
     btn.className = "aegis-cta";
@@ -7349,12 +8618,17 @@ const _AegisInAppManager = class _AegisInAppManager {
   _surfacePalette(campaign) {
     const ic = campaign.interactive_config || {};
     const brand = this.sanitizeColor(campaign.background_color || "#4169e1");
-    const branded = ic.surface_style === "branded";
-    if (branded) {
+    const surface = ic.surface_style;
+    if (surface === "branded") {
       const bg = brand;
       const text = campaign.text_color ? this.sanitizeColor(campaign.text_color) : "#ffffff";
       return { bg, text, btnBg: text, btnText: bg, accent: text, branded: true };
     }
+    if (surface === "dark") {
+      const bg = this.sanitizeColor(campaign.background_color || "#0f172a");
+      const text = campaign.text_color ? this.sanitizeColor(campaign.text_color) : "#ffffff";
+      return { bg, text, btnBg: "#ffffff", btnText: bg, accent: text, branded: false };
+    }
     return { bg: "#ffffff", text: "#0f172a", btnBg: brand, btnText: this._contrastText(brand), accent: brand, branded: false };
   }
   inAppStyle(campaign) {
@@ -7458,7 +8732,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       actionsContainer.appendChild(ctaButton);
     }
     const closeButton = document.createElement("button");
-    closeButton.textContent = "✕";
+    closeButton.innerHTML = lucideSvg("x", { size: 18 });
     closeButton.setAttribute("aria-label", "Close");
     closeButton.style.cssText = `
       background: transparent;
@@ -7618,7 +8892,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     actions.appendChild(closeButton);
     content.appendChild(actions);
     modal.appendChild(content);
-    overlay.appendChild(modal);
+    overlay.appendChild(this._wrapScaled(modal));
     if (ic.modal_dismiss_on_overlay !== false) {
       overlay.addEventListener("click", (e) => {
         if (e.target === overlay) {
@@ -7656,7 +8930,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       pill.replaceChildren();
       const ic = document.createElement("span");
       ic.style.fontSize = "13px";
-      ic.textContent = v.muted ? "🔇" : "🔊";
+      ic.innerHTML = lucideSvg(v.muted ? "volume-x" : "volume-2", { size: 13 });
       pill.appendChild(ic);
       if (v.muted) {
         const t = document.createElement("span");
@@ -7786,7 +9060,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     }
     overlay.appendChild(contentContainer);
     const closeButton = document.createElement("button");
-    closeButton.textContent = "✕";
+    closeButton.innerHTML = lucideSvg("x", { size: isBg ? 18 : 28 });
     closeButton.setAttribute("aria-label", "Close");
     closeButton.style.cssText = `
       position: absolute; top: 20px; right: 20px; z-index: 3; background: ${isBg ? "rgba(0,0,0,0.45)" : "transparent"};
@@ -7914,7 +9188,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     }
     modal.appendChild(content);
     const closeButton = document.createElement("button");
-    closeButton.textContent = "✕";
+    closeButton.innerHTML = lucideSvg("x", { size: 22 });
     closeButton.setAttribute("aria-label", "Close");
     closeButton.style.cssText = `
       position: absolute;
@@ -7987,16 +9261,16 @@ const _AegisInAppManager = class _AegisInAppManager {
     const ic = campaign.interactive_config || {};
     const variant = ic.alert_variant || "";
     const VARIANTS = {
-      info: { glyph: "ℹ", color: "#3b82f6" },
-      success: { glyph: "✓", color: "#10b981" },
-      warning: { glyph: "!", color: "#f59e0b" },
-      error: { glyph: "✕", color: "#ef4444" }
+      info: { icon: "info", color: "#3b82f6" },
+      success: { icon: "check", color: "#10b981" },
+      warning: { icon: "triangle-alert", color: "#f59e0b" },
+      error: { icon: "x", color: "#ef4444" }
     };
     const vspec = VARIANTS[variant];
     if (vspec) {
       const badge = document.createElement("div");
       badge.style.cssText = `width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; background: ${vspec.color}22; color: ${vspec.color};`;
-      badge.textContent = vspec.glyph;
+      badge.innerHTML = lucideSvg(vspec.icon, { size: 24 });
       content.appendChild(badge);
     }
     const title = document.createElement("h3");
@@ -8138,7 +9412,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     if (!hasMedia) {
       const placeholder = document.createElement("div");
       placeholder.style.cssText = "width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1f2937, #0f172a); color: rgba(255,255,255,0.35); font-size: 34px;";
-      placeholder.textContent = "▶";
+      placeholder.innerHTML = lucideSvg("play", { size: 34 });
       mediaWrap.appendChild(placeholder);
     }
     pip.appendChild(mediaWrap);
@@ -8149,7 +9423,7 @@ const _AegisInAppManager = class _AegisInAppManager {
       playGlyph.setAttribute("aria-label", "Play or pause");
       playGlyph.style.cssText = "position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(0,0,0,0.45); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; backdrop-filter: blur(2px);";
       const syncGlyph = () => {
-        playGlyph.textContent = v.paused ? "▶" : "❚❚";
+        playGlyph.innerHTML = lucideSvg(v.paused ? "play" : "pause", { size: 22 });
         playGlyph.style.opacity = v.paused ? "1" : "0";
       };
       const togglePlay = () => {
@@ -8176,7 +9450,7 @@ const _AegisInAppManager = class _AegisInAppManager {
         mutePill.replaceChildren();
         const ic2 = document.createElement("span");
         ic2.style.fontSize = "13px";
-        ic2.textContent = v.muted ? "🔇" : "🔊";
+        ic2.innerHTML = lucideSvg(v.muted ? "volume-x" : "volume-2", { size: 13 });
         mutePill.appendChild(ic2);
         if (v.muted) {
           const t = document.createElement("span");
@@ -8271,7 +9545,7 @@ const _AegisInAppManager = class _AegisInAppManager {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       `;
       if (expandBtn) {
-        expandBtn.textContent = "✕";
+        expandBtn.innerHTML = lucideSvg("x", { size: 16 });
         expandBtn.setAttribute("aria-label", "Minimize");
       }
       if (video && video.muted) {
@@ -8294,7 +9568,7 @@ const _AegisInAppManager = class _AegisInAppManager {
     }
     const closeButton = document.createElement("button");
     closeButton.type = "button";
-    closeButton.textContent = "✕";
+    closeButton.innerHTML = lucideSvg("x", { size: 16 });
     closeButton.setAttribute("aria-label", "Close");
     closeButton.style.cssText = ctrlBtnCss;
     closeButton.addEventListener("click", (e) => {
@@ -9054,7 +10328,7 @@ _AegisInAppManager.KNOWN_SURFACES = /* @__PURE__ */ new Set([
 ]);
 _AegisInAppManager.SERVED_DEDUP_PREFIX = "aegis_served_fired:";
 let AegisInAppManager = _AegisInAppManager;
-function renderPreview(config) {
+function renderPreview(config, opts) {
   document.querySelectorAll(
     '[class^="aegis-in-app-"]'
   ).forEach((el) => {
@@ -9078,12 +10352,33 @@ function renderPreview(config) {
     writeKey: "preview-mode",
     apiHost: "",
     debugMode: false,
-    enableSSE: false
+    enableSSE: false,
+    ...(opts == null ? void 0 : opts.cart) ? { getCartState: () => opts.cart } : {}
   });
   const m2 = manager;
   m2.trackEvent = async () => {
   };
   m2.addAnimationStyles();
+  const cfgRec = config;
+  const deliveryModes = Array.isArray(cfgRec.delivery_modes) ? cfgRec.delivery_modes : [];
+  const widgetCategory = typeof cfgRec.widget_category === "string" ? cfgRec.widget_category : "";
+  const inline = deliveryModes.includes("embedded_card") && !!widgetCategory;
+  const coGroup = (opts == null ? void 0 : opts.coGroup) ?? [];
+  if (typeof document !== "undefined" && (coGroup.length > 0 || inline)) {
+    const anchors = document.querySelectorAll("[data-aegis-slot]");
+    if (anchors.length > 0) {
+      try {
+        anchors.forEach((slot) => {
+          slot.querySelectorAll(":scope > :not([data-aegis-slot-default])").forEach((el) => el.remove());
+        });
+        const mm = manager;
+        mm.campaigns = (inline ? [config, ...coGroup] : coGroup).map((c) => ({ ...c, surface: void 0, target_screens: void 0 })).sort((a, b) => (b.priority || 0) - (a.priority || 0));
+        mm.renderIntoSlots();
+        if (inline) return;
+      } catch {
+      }
+    }
+  }
   if (config.type === "stories" || config.sub_type === "stories") {
     const host = document.createElement("div");
     host.className = "aegis-in-app-stories-host";
@@ -9293,13 +10588,29 @@ function evaluateRule(rule, snapshot, namespaces) {
   const result = evaluateExpr(rule.when, snapshot, namespaces);
   return result === true;
 }
-class IntentRuleEvaluator {
+const _IntentRuleEvaluator = class _IntentRuleEvaluator {
   constructor() {
     this.armed = [];
     this.snapshot = {};
     this.namespaces = {};
     this.firedThisSession = /* @__PURE__ */ new Set();
     this.silencedThisSession = /* @__PURE__ */ new Set();
+    this.oneInterruptionPerSession = false;
+    this.interruptiveBudgetSpent = false;
+    this.ttfiMs = 0;
+    this.sessionStartMs = Date.now();
+    this.nowFn = () => Date.now();
+  }
+  /** Tune governance. `now` also (re)bases the TTFI session clock. */
+  setGovernance(opts) {
+    if (opts.oneInterruptionPerSession !== void 0) {
+      this.oneInterruptionPerSession = opts.oneInterruptionPerSession;
+    }
+    if (opts.ttfiMs !== void 0) this.ttfiMs = opts.ttfiMs;
+    if (opts.now) {
+      this.nowFn = opts.now;
+      this.sessionStartMs = opts.now();
+    }
   }
   // ─── snapshot management ───
   updateSignal(signal, value) {
@@ -9335,12 +10646,15 @@ class IntentRuleEvaluator {
   }
   markFired(campaignId) {
     this.firedThisSession.add(campaignId);
+    this.interruptiveBudgetSpent = true;
   }
   /** Clear all per-session state. Caller invokes on logout or explicit
    *  session reset. */
   reset() {
     this.firedThisSession.clear();
     this.silencedThisSession.clear();
+    this.interruptiveBudgetSpent = false;
+    this.sessionStartMs = this.nowFn();
   }
   // ─── the main dispatch ───
   /**
@@ -9363,6 +10677,11 @@ class IntentRuleEvaluator {
    *   5. If nothing matches, return 'none'.
    */
   onSignalChanged(signal) {
+    if (this.oneInterruptionPerSession && this.interruptiveBudgetSpent) {
+      return { kind: "none" };
+    }
+    const sessionElapsedMs = this.nowFn() - this.sessionStartMs;
+    const exemptFromTtfi = _IntentRuleEvaluator.EXIT_SIGNALS.includes(signal);
     const candidates = this.armed.filter((c) => c.rule.fire_on.includes(signal)).filter((c) => !this.firedThisSession.has(c.id)).filter((c) => !this.silencedThisSession.has(c.id)).sort((a, b) => {
       if (b.rule.priority !== a.rule.priority) {
         return b.rule.priority - a.rule.priority;
@@ -9372,6 +10691,9 @@ class IntentRuleEvaluator {
     for (let i = 0; i < candidates.length; i++) {
       const c = candidates[i];
       if (!evaluateRule(c.rule, this.snapshot, this.namespaces)) continue;
+      if (this.ttfiMs > 0 && sessionElapsedMs < this.ttfiMs && !exemptFromTtfi) {
+        continue;
+      }
       if (c.rule.suppress_competing) {
         const suppressIds = this.armed.filter((other) => other.id !== c.id).map((other) => other.id);
         suppressIds.forEach((id) => this.silencedThisSession.add(id));
@@ -9385,7 +10707,12 @@ class IntentRuleEvaluator {
     }
     return { kind: "none" };
   }
-}
+};
+_IntentRuleEvaluator.EXIT_SIGNALS = [
+  "exit_intent",
+  "back_button"
+];
+let IntentRuleEvaluator = _IntentRuleEvaluator;
 class ContactScoresFetcher {
   constructor(cfg) {
     this.lastFetchedAt = 0;
@@ -9739,7 +11066,7 @@ class PrefetchBundleClient {
     }
     let response;
     try {
-      response = await fetch(url, { method: "GET", headers });
+      response = await fetch(url, { method: "GET", headers, cache: "no-cache" });
     } catch (err) {
       logger.warn("prefetch-bundle fetch network error:", err);
       return this.currentBundle;
@@ -10764,8 +12091,8 @@ class AegisWidgetManager {
       { label: "Prize 3", color: "#48dbfb" },
       { label: "Prize 4", color: "#ff6348" }
     ];
-    const SVG_NS = "http://www.w3.org/2000/svg";
-    const wheel = document.createElementNS(SVG_NS, "svg");
+    const SVG_NS2 = "http://www.w3.org/2000/svg";
+    const wheel = document.createElementNS(SVG_NS2, "svg");
     wheel.setAttribute("viewBox", "-160 -160 320 320");
     wheel.setAttribute("width", "300");
     wheel.setAttribute("height", "300");
@@ -10781,7 +12108,7 @@ class AegisWidgetManager {
       const x2 = Math.cos(end) * radius;
       const y2 = Math.sin(end) * radius;
       const largeArc = anglePer > Math.PI ? 1 : 0;
-      const path = document.createElementNS(SVG_NS, "path");
+      const path = document.createElementNS(SVG_NS2, "path");
       path.setAttribute(
         "d",
         `M 0 0 L ${x1.toFixed(2)} ${y1.toFixed(2)} A ${radius} ${radius} 0 ${largeArc} 1 ${x2.toFixed(2)} ${y2.toFixed(2)} Z`
@@ -10793,7 +12120,7 @@ class AegisWidgetManager {
       const labelAngle = start + anglePer / 2;
       const lx = Math.cos(labelAngle) * radius * 0.65;
       const ly = Math.sin(labelAngle) * radius * 0.65;
-      const text = document.createElementNS(SVG_NS, "text");
+      const text = document.createElementNS(SVG_NS2, "text");
       text.setAttribute("x", lx.toFixed(2));
       text.setAttribute("y", ly.toFixed(2));
       text.setAttribute("fill", "#ffffff");
@@ -10905,7 +12232,8 @@ class AegisWidgetManager {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     `;
     const closeBtn = document.createElement("button");
-    closeBtn.innerHTML = "✕";
+    closeBtn.innerHTML = lucideSvg("x", { size: 16 });
+    closeBtn.setAttribute("aria-label", "Close");
     closeBtn.className = "aegis-spin-wheel-close";
     closeBtn.style.cssText = `
       position: absolute;
@@ -11885,8 +13213,9 @@ class AegisWidgetManager {
     }
     if (config.show_timer && config.timer_minutes) {
       const timer = document.createElement("div");
-      timer.style.cssText = "margin: 0 0 24px 0; text-align: center; font-size: 14px; color: #999;";
-      timer.textContent = `⏰ Offer expires in ${config.timer_minutes} minutes`;
+      timer.style.cssText = "margin: 0 0 24px 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: #999;";
+      timer.innerHTML = lucideSvg("clock", { size: 14 });
+      timer.appendChild(document.createTextNode(`Offer expires in ${config.timer_minutes} minutes`));
       modal.appendChild(timer);
     }
     const ctaButton = document.createElement("button");
@@ -12017,7 +13346,7 @@ class AegisWidgetManager {
         });
         modal.innerHTML = `
           <div style="text-align: center; padding: 20px;">
-            <div style="font-size: 48px; margin-bottom: 16px;">✅</div>
+            <div style="margin-bottom: 16px; color: #10b981;">${lucideSvg("check", { size: 48 })}</div>
             <h3 style="margin: 0 0 12px 0; color: #1a73e8;">Thank You!</h3>
             <p style="margin: 0; color: #666;">Check your email for your discount code!</p>
           </div>
@@ -12263,6 +13592,9 @@ class AegisMessageRuntime {
       getCartState: () => this.deriveCartState()
     });
     this.intentRuleEvaluator = new IntentRuleEvaluator();
+    if (config.governance) {
+      this.intentRuleEvaluator.setGovernance(config.governance);
+    }
     this.contactScores = new ContactScoresFetcher({
       // Falls back to same-origin when no apiHost configured (storefront
       // typical case) — matches WidgetManager/InAppManager handling
@@ -12592,10 +13924,13 @@ export {
   TriggerEngine,
   U as UserNamespace,
   bootstrap,
+  closeChat,
   debounce,
   aegis as default,
   deriveDeviceFingerprint,
+  getCurrentLauncher,
   m as murmurhash3_x86_32,
+  openChat,
   readFirstPartyCookie,
   renderPreview,
   throttle,