@active-reach/web-sdk 1.30.0 → 1.31.0

package/dist/index.js

@@ -585,13 +585,13 @@ function paintRating(card) {
   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 star2 = document.createElement("span");
+  star2.textContent = "★";
+  star2.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(star2);
   rr.appendChild(val);
   if (count > 0) {
     const c = document.createElement("span");
@@ -841,15 +841,15 @@ function renderNpsReasonStep(wrap, el2, ctx, score, fg, accent) {
     const chipRow = document.createElement("div");
     chipRow.style.cssText = "display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:8px;";
     chips.slice(0, 8).forEach((c) => {
-      const chip2 = document.createElement("button");
-      chip2.type = "button";
-      chip2.textContent = c;
-      chip2.style.cssText = `padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb, ${accent} 35%, transparent);background:transparent;color:${fg};font-size:12px;cursor:pointer;`;
-      chip2.addEventListener("click", () => {
+      const chip = document.createElement("button");
+      chip.type = "button";
+      chip.textContent = c;
+      chip.style.cssText = `padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb, ${accent} 35%, transparent);background:transparent;color:${fg};font-size:12px;cursor:pointer;`;
+      chip.addEventListener("click", () => {
         ta.value = ta.value ? `${ta.value}, ${c}` : c;
         ta.focus();
       });
-      chipRow.appendChild(chip2);
+      chipRow.appendChild(chip);
     });
     wrap.appendChild(chipRow);
   }
@@ -1171,10 +1171,10 @@ function renderCardFromTemplate(card, opts) {
         case "category": {
           const cat = meta.category;
           if (typeof cat !== "string" || !cat) break;
-          const chip2 = document.createElement("span");
-          chip2.textContent = cat;
-          chip2.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(chip2);
+          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) ──────────────────────────────────
@@ -2748,10 +2748,10 @@ function renderStreak(ctx) {
   s.content.appendChild(gEl("div", "font-size:22px;font-weight:800;margin:4px 0 2px", `${count}-day streak!`));
   const chips = gEl("div", "display:flex;justify-content:center;gap:8px;margin:12px 0");
   for (let i = 0; i < 7; i++) {
-    const chip2 = gEl("div", "display:inline-flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;opacity:0.8");
-    chip2.appendChild(gEl("span", "", days[i]));
-    chip2.appendChild(gEl("span", "font-size:16px", i < count % 7 || count >= 7 && i < 7 ? "✅" : i === count % 7 ? "🔥" : "⚪"));
-    chips.appendChild(chip2);
+    const chip = gEl("div", "display:inline-flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;opacity:0.8");
+    chip.appendChild(gEl("span", "", days[i]));
+    chip.appendChild(gEl("span", "font-size:16px", i < count % 7 || count >= 7 && i < 7 ? "✅" : i === count % 7 ? "🔥" : "⚪"));
+    chips.appendChild(chip);
   }
   s.content.appendChild(chips);
   const note = gEl("div", "font-size:13px;opacity:0.8");
@@ -4116,15 +4116,15 @@ class AegisChat {
     row.className = "aegis-chat-quickreplies";
     for (const label of this.quickReplies) {
       if (typeof label !== "string" || !label.trim()) continue;
-      const chip2 = document.createElement("button");
-      chip2.type = "button";
-      chip2.className = "aegis-chat-chip";
-      chip2.textContent = label;
-      chip2.addEventListener("click", () => {
+      const chip = document.createElement("button");
+      chip.type = "button";
+      chip.className = "aegis-chat-chip";
+      chip.textContent = label;
+      chip.addEventListener("click", () => {
         row.remove();
         void this.send(label);
       });
-      row.appendChild(chip2);
+      row.appendChild(chip);
     }
     if (row.childElementCount > 0) this.thread.appendChild(row);
   }
@@ -5033,74 +5033,107 @@ function el(tag, css, text) {
   if (text != null) e.textContent = text;
   return e;
 }
-function stars(rating, size = 14) {
-  const wrap = el("span", "display:inline-flex;gap:1px;vertical-align:middle;");
+function star(filled, size) {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  const p = document.createElementNS(SVG_NS, "path");
+  p.setAttribute(
+    "d",
+    "M12 2l2.9 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.1-1.01L12 2z"
+  );
+  p.setAttribute("fill", filled ? "#f59e0b" : "#e5e7eb");
+  svg.appendChild(p);
+  return svg;
+}
+function stars(rating, size = 15) {
+  const wrap = el("span", "display:inline-flex;gap:2px;vertical-align:middle;");
   wrap.setAttribute("aria-label", `${rating} out of 5`);
-  for (let i = 1; i <= 5; i++) {
-    const svg = document.createElementNS(SVG_NS, "svg");
-    svg.setAttribute("viewBox", "0 0 24 24");
-    svg.setAttribute("width", String(size));
-    svg.setAttribute("height", String(size));
-    const path = document.createElementNS(SVG_NS, "path");
-    path.setAttribute(
-      "d",
-      "M12 2l2.9 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.1-1.01L12 2z"
-    );
-    path.setAttribute("fill", i <= rating ? "#f59e0b" : "#e2e8f0");
-    svg.appendChild(path);
-    wrap.appendChild(svg);
-  }
+  for (let i = 1; i <= 5; i++) wrap.appendChild(star(i <= rating, size));
   return wrap;
 }
-function chip(text, kind) {
-  const palette = kind === "verified" ? "background:#ecfdf5;color:#047857;" : "background:#fffbeb;color:#b45309;";
-  return el(
+function verifiedBadge() {
+  const b = el(
     "span",
-    `display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;${palette}`,
-    text
+    "display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:#059669;"
   );
-}
-function sparkles() {
   const svg = document.createElementNS(SVG_NS, "svg");
   svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("width", "15");
-  svg.setAttribute("height", "15");
+  svg.setAttribute("width", "13");
+  svg.setAttribute("height", "13");
   const p = document.createElementNS(SVG_NS, "path");
-  p.setAttribute("d", "M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z");
-  p.setAttribute("fill", "#7c3aed");
+  p.setAttribute("d", "M9 12l2 2 4-4M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z");
+  p.setAttribute("fill", "none");
+  p.setAttribute("stroke", "#059669");
+  p.setAttribute("stroke-width", "2");
+  p.setAttribute("stroke-linecap", "round");
+  p.setAttribute("stroke-linejoin", "round");
   svg.appendChild(p);
-  return svg;
+  b.appendChild(svg);
+  b.appendChild(el("span", "", "Verified purchase"));
+  return b;
 }
-function miniStar() {
+function avatar(name, accent) {
+  const initial = (name.trim()[0] || "?").toUpperCase();
+  const a = el(
+    "span",
+    `flex:0 0 auto;width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:${accent};background:${accent}1a;`,
+    initial
+  );
+  return a;
+}
+function thumbBtn(up, count, reviewId, creds) {
+  const btn = el(
+    "button",
+    "display:inline-flex;align-items:center;gap:5px;font-size:13px;color:#6b7280;background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:8px;font-family:inherit;"
+  );
   const svg = document.createElementNS(SVG_NS, "svg");
   svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("width", "11");
-  svg.setAttribute("height", "11");
+  svg.setAttribute("width", "15");
+  svg.setAttribute("height", "15");
+  if (!up) svg.style.cssText = "transform:rotate(180deg);";
   const p = document.createElementNS(SVG_NS, "path");
   p.setAttribute(
     "d",
-    "M12 2l2.9 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.1-1.01L12 2z"
+    "M2 21h4V9H2v12zM23 10a2 2 0 0 0-2-2h-6.31l.95-4.57.03-.32a1.5 1.5 0 0 0-.44-1.06L14.17 1 7.59 7.59A2 2 0 0 0 7 9v10a2 2 0 0 0 2 2h9a2 2 0 0 0 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1z"
   );
-  p.setAttribute("fill", "#f59e0b");
+  p.setAttribute("fill", "currentColor");
   svg.appendChild(p);
-  return svg;
-}
-function distributionRows(dist, total) {
-  const box = el("div", "display:flex;flex-direction:column;gap:3px;margin:10px 0 4px;");
-  for (let r = 5; r >= 1; r--) {
-    const n = dist[String(r)] ?? 0;
-    const pct = total > 0 ? Math.round(n / total * 100) : 0;
-    const row = el("div", "display:flex;align-items:center;gap:8px;font-size:12px;color:#64748b;");
-    const label = el("span", "width:26px;display:inline-flex;align-items:center;gap:2px;color:#334155;", String(r));
-    label.appendChild(miniStar());
-    row.appendChild(label);
-    const track = el("div", "flex:1;height:6px;background:#f1f5f9;border-radius:999px;overflow:hidden;");
-    track.appendChild(el("div", `width:${pct}%;height:100%;background:#f59e0b;`));
-    row.appendChild(track);
-    row.appendChild(el("span", "width:28px;text-align:right;", String(n)));
-    box.appendChild(row);
+  btn.appendChild(svg);
+  const c = el("span", "", String(count));
+  btn.appendChild(c);
+  const key = `aegis_rv_voted_${reviewId}`;
+  let voted = false;
+  try {
+    voted = typeof localStorage !== "undefined" && localStorage.getItem(key) != null;
+  } catch {
   }
-  return box;
+  if (voted) btn.style.opacity = "0.5";
+  btn.addEventListener("mouseenter", () => {
+    if (!voted) btn.style.color = "#111827";
+  });
+  btn.addEventListener("mouseleave", () => {
+    btn.style.color = "#6b7280";
+  });
+  btn.addEventListener("click", () => {
+    try {
+      if (localStorage.getItem(key) != null) return;
+      localStorage.setItem(key, up ? "up" : "down");
+    } catch {
+    }
+    voted = true;
+    c.textContent = String(count + 1);
+    btn.style.opacity = "0.5";
+    const url = new URL(`/v1/reviews/${reviewId}/helpful`, creds.apiHost);
+    void fetch(url.toString(), {
+      method: "POST",
+      headers: { "X-Aegis-Write-Key": creds.writeKey, "Content-Type": "application/json" },
+      body: JSON.stringify({ direction: up ? "up" : "down" })
+    }).catch(() => {
+    });
+  });
+  return btn;
 }
 function injectJsonLd(target, data, productId) {
   if (!data.aggregate.count || data.aggregate.avg_rating == null) return;
@@ -5128,116 +5161,21 @@ function injectJsonLd(target, data, productId) {
   script.textContent = JSON.stringify(ld);
   target.appendChild(script);
 }
-function thumbSvg(up) {
-  const svg = document.createElementNS(SVG_NS, "svg");
-  svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("width", "14");
-  svg.setAttribute("height", "14");
-  if (!up) svg.style.cssText = "transform:rotate(180deg);";
-  const p = document.createElementNS(SVG_NS, "path");
-  p.setAttribute(
-    "d",
-    "M2 21h4V9H2v12zM23 10a2 2 0 0 0-2-2h-6.31l.95-4.57.03-.32a1.5 1.5 0 0 0-.44-1.06L14.17 1 7.59 7.59A2 2 0 0 0 7 9v10a2 2 0 0 0 2 2h9a2 2 0 0 0 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1z"
-  );
-  p.setAttribute("fill", "currentColor");
-  svg.appendChild(p);
-  return svg;
-}
-function helpfulButton(reviewId, up, count, creds) {
-  const btn = el(
-    "button",
-    "display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#64748b;background:none;border:none;cursor:pointer;padding:2px 4px;"
-  );
-  btn.appendChild(thumbSvg(up));
-  const countEl = el("span", "", String(count));
-  btn.appendChild(countEl);
-  const voteKey = `aegis_rv_voted_${reviewId}`;
-  const already = (() => {
-    try {
-      return typeof localStorage !== "undefined" && localStorage.getItem(voteKey) != null;
-    } catch {
-      return false;
-    }
-  })();
-  if (already) btn.style.opacity = "0.5";
-  btn.addEventListener("click", () => {
-    try {
-      if (localStorage.getItem(voteKey) != null) return;
-      localStorage.setItem(voteKey, up ? "up" : "down");
-    } catch {
-    }
-    countEl.textContent = String(count + 1);
-    btn.style.opacity = "0.5";
-    const url = new URL(`/v1/reviews/${reviewId}/helpful`, creds.apiHost);
-    void fetch(url.toString(), {
-      method: "POST",
-      headers: { "X-Aegis-Write-Key": creds.writeKey, "Content-Type": "application/json" },
-      body: JSON.stringify({ direction: up ? "up" : "down" })
-    }).catch(() => {
-    });
-  });
-  return btn;
-}
-function reviewCard(ctx, r, creds) {
-  var _a, _b;
-  const li = el("li", "padding:14px 0;border-top:1px solid #e2e8f0;");
-  const meta = el("div", "display:flex;flex-wrap:wrap;align-items:center;gap:8px;");
-  meta.appendChild(stars(r.rating ?? 0));
-  meta.appendChild(el("span", "font-size:14px;font-weight:600;", ((_a = r.reviewer_snapshot) == null ? void 0 : _a.name) ?? "Customer"));
-  if (r.verified_purchase) meta.appendChild(chip("Verified purchase", "verified"));
-  if (r.is_incentivized) meta.appendChild(chip("Reward included", "reward"));
-  if (r.created_at) {
-    const d = new Date(r.created_at);
-    if (!Number.isNaN(d.getTime())) {
-      meta.appendChild(el("span", "margin-left:auto;font-size:12px;color:#94a3b8;", d.toLocaleDateString()));
-    }
-  }
-  li.appendChild(meta);
-  if (r.review_text) {
-    li.appendChild(el("p", "margin:6px 0 0;font-size:14px;line-height:1.5;color:#334155;", r.review_text));
-  }
-  if (r.media && r.media.length > 0) {
-    const gallery = el("div", "display:flex;gap:6px;margin-top:8px;");
-    for (const m2 of r.media.slice(0, 6)) {
-      const safe = ctx.sanitizeUrl(m2.url);
-      if (!safe) continue;
-      const img = document.createElement("img");
-      img.src = safe;
-      img.loading = "lazy";
-      img.alt = "";
-      img.style.cssText = "width:56px;height:56px;object-fit:cover;border-radius:8px;";
-      gallery.appendChild(img);
-    }
-    if (gallery.childElementCount) li.appendChild(gallery);
-  }
-  if ((_b = r.operator_reply) == null ? void 0 : _b.text) {
-    const reply = el(
-      "div",
-      "margin-top:8px;padding:8px 10px;background:#f8fafc;border-radius:8px;font-size:13px;color:#475569;"
-    );
-    reply.appendChild(el("span", "font-weight:600;margin-right:6px;", "Reply"));
-    reply.appendChild(el("span", "", r.operator_reply.text));
-    li.appendChild(reply);
-  }
-  const votes = el("div", "display:flex;align-items:center;gap:10px;margin-top:8px;");
-  votes.appendChild(el("span", "font-size:12px;color:#94a3b8;", "Helpful?"));
-  votes.appendChild(helpfulButton(r.id, true, r.helpful_count ?? 0, creds));
-  votes.appendChild(helpfulButton(r.id, false, r.not_helpful_count ?? 0, creds));
-  li.appendChild(votes);
-  return li;
-}
 const SORTS = [
   { key: "recent", label: "Most recent" },
   { key: "helpful", label: "Most helpful" },
   { key: "rating", label: "Highest rated" }
 ];
 function renderReviewsInline(ctx, target, creds) {
-  var _a;
   if (typeof document === "undefined" || !(creds == null ? void 0 : creds.apiHost) || !(creds == null ? void 0 : creds.writeKey)) return false;
+  ensureInAppFont();
+  const ic = ctx.campaign.interactive_config || {};
+  const accent = ctx.sanitizeColor(ctx.campaign.background_color || "#4169e1");
+  const brand = String(ic.brand_name || "").trim() || "The store";
   const productId = target.getAttribute("data-product-id") || ctx.campaign.product_id || null;
   const state = { sort: "recent", withPhotos: false };
   target.innerHTML = "";
-  target.appendChild(el("div", "font-size:13px;color:#94a3b8;padding:8px 0;", "Loading reviews…"));
+  target.appendChild(el("div", `font-family:${IN_APP_FONT_STACK};font-size:13px;color:#9ca3af;padding:10px 0;`, "Loading reviews…"));
   function buildUrl() {
     const url = new URL("/v1/reviews/public", creds.apiHost);
     if (productId) url.searchParams.set("product_id", productId);
@@ -5250,125 +5188,211 @@ function renderReviewsInline(ctx, target, creds) {
     return fetch(buildUrl(), { method: "GET", headers: { "X-Aegis-Write-Key": creds.writeKey } }).then((r) => r.ok ? r.json() : null).catch(() => null);
   }
   let listContainer = null;
+  function reviewCard(r) {
+    var _a, _b, _c;
+    const li = el("li", "padding:22px 0;border-top:1px solid #f0f1f3;");
+    const head = el("div", "display:flex;align-items:center;gap:10px;");
+    head.appendChild(avatar(((_a = r.reviewer_snapshot) == null ? void 0 : _a.name) ?? "Customer", accent));
+    const idn = el("div", "display:flex;flex-direction:column;gap:2px;min-width:0;");
+    const nameRow = el("div", "display:flex;flex-wrap:wrap;align-items:center;gap:8px;");
+    nameRow.appendChild(el("span", "font-size:15px;font-weight:700;color:#111827;", ((_b = r.reviewer_snapshot) == null ? void 0 : _b.name) ?? "Customer"));
+    if (r.verified_purchase) nameRow.appendChild(verifiedBadge());
+    idn.appendChild(nameRow);
+    idn.appendChild(stars(r.rating ?? 0, 14));
+    head.appendChild(idn);
+    if (r.created_at) {
+      const d = new Date(r.created_at);
+      if (!Number.isNaN(d.getTime())) {
+        head.appendChild(el(
+          "span",
+          "margin-left:auto;font-size:12px;color:#9ca3af;white-space:nowrap;",
+          d.toLocaleDateString(void 0, { day: "numeric", month: "short", year: "numeric" })
+        ));
+      }
+    }
+    li.appendChild(head);
+    if (r.review_text) {
+      li.appendChild(el("p", "margin:12px 0 0;font-size:15px;line-height:1.6;color:#374151;", r.review_text));
+    }
+    if (r.media && r.media.length > 0) {
+      const gallery = el("div", "display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;");
+      for (const m2 of r.media.slice(0, 6)) {
+        const safe = ctx.sanitizeUrl(m2.url);
+        if (!safe) continue;
+        const img = document.createElement("img");
+        img.src = safe;
+        img.loading = "lazy";
+        img.alt = "";
+        img.style.cssText = "width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid #f0f1f3;";
+        gallery.appendChild(img);
+      }
+      if (gallery.childElementCount) li.appendChild(gallery);
+    }
+    const foot = el("div", "display:flex;align-items:center;gap:6px;margin-top:12px;");
+    foot.appendChild(el("span", "font-size:13px;color:#9ca3af;margin-right:2px;", "Was this helpful?"));
+    foot.appendChild(thumbBtn(true, r.helpful_count ?? 0, r.id, creds));
+    foot.appendChild(thumbBtn(false, r.not_helpful_count ?? 0, r.id, creds));
+    li.appendChild(foot);
+    if ((_c = r.operator_reply) == null ? void 0 : _c.text) {
+      const reply = el(
+        "div",
+        `margin-top:14px;margin-left:44px;border-left:3px solid ${accent};background:${accent}0d;border-radius:0 12px 12px 0;padding:12px 14px;`
+      );
+      const rlabel = el("div", "display:flex;align-items:center;gap:6px;margin-bottom:5px;");
+      rlabel.appendChild(el("span", `width:7px;height:7px;border-radius:999px;background:${accent};display:inline-block;`));
+      rlabel.appendChild(el("span", `font-size:12px;font-weight:700;color:${accent};`, brand));
+      rlabel.appendChild(el("span", "font-size:12px;color:#9ca3af;", "· replied"));
+      reply.appendChild(rlabel);
+      reply.appendChild(el("p", "margin:0;font-size:14px;line-height:1.55;color:#4b5563;", r.operator_reply.text));
+      li.appendChild(reply);
+    }
+    return li;
+  }
   function renderList(items) {
     if (!listContainer) return;
     listContainer.innerHTML = "";
     if (items.length === 0) {
-      listContainer.appendChild(el("p", "padding:14px 0;font-size:13px;color:#94a3b8;", "No reviews match this filter."));
+      listContainer.appendChild(el("p", "padding:20px 0;font-size:14px;color:#9ca3af;text-align:center;", "No reviews match this filter."));
       return;
     }
     const ul = el("ul", "list-style:none;margin:0;padding:0;");
-    for (const r of items) ul.appendChild(reviewCard(ctx, r, creds));
+    for (const r of items) ul.appendChild(reviewCard(r));
     listContainer.appendChild(ul);
   }
-  function controls(onChange) {
-    const bar = el("div", "display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0;");
+  function pill(label, active, onClick) {
+    const b = el(
+      "button",
+      `font-size:13px;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer;font-family:inherit;` + (active ? `background:${accent};color:#fff;border:1px solid ${accent};` : "background:#fff;color:#374151;border:1px solid #e5e7eb;"),
+      label
+    );
+    b.addEventListener("click", onClick);
+    return b;
+  }
+  function controls(rerender) {
+    const bar = el("div", "display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 4px;");
     const sel = document.createElement("select");
-    sel.style.cssText = "font-size:13px;padding:4px 8px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;color:#334155;";
+    sel.style.cssText = `font-size:13px;font-weight:600;padding:7px 30px 7px 14px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;color:#374151;cursor:pointer;font-family:inherit;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;`;
     for (const s of SORTS) {
-      const opt = document.createElement("option");
-      opt.value = s.key;
-      opt.textContent = s.label;
-      sel.appendChild(opt);
+      const o = document.createElement("option");
+      o.value = s.key;
+      o.textContent = s.label;
+      sel.appendChild(o);
     }
     sel.value = state.sort;
     sel.addEventListener("change", () => {
       state.sort = sel.value;
-      onChange();
+      rerender();
     });
     bar.appendChild(sel);
-    const photos = el(
-      "button",
-      "font-size:13px;padding:4px 12px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;color:#334155;cursor:pointer;",
-      "With photos"
-    );
-    photos.addEventListener("click", () => {
+    let photosBtn = null;
+    photosBtn = pill("With photos", state.withPhotos, () => {
       state.withPhotos = !state.withPhotos;
-      photos.style.cssText = "font-size:13px;padding:4px 12px;border-radius:999px;cursor:pointer;" + (state.withPhotos ? "background:#4169e1;color:#fff;border:1px solid #4169e1;" : "background:#fff;color:#334155;border:1px solid #e2e8f0;");
-      onChange();
+      if (photosBtn) {
+        photosBtn.style.cssText = `font-size:13px;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer;font-family:inherit;` + (state.withPhotos ? `background:${accent};color:#fff;border:1px solid ${accent};` : "background:#fff;color:#374151;border:1px solid #e5e7eb;");
+      }
+      rerender();
     });
-    bar.appendChild(photos);
+    bar.appendChild(photosBtn);
     return bar;
   }
+  function distributionPanel(dist, total) {
+    const box = el("div", "flex:1 1 260px;max-width:340px;display:flex;flex-direction:column;gap:7px;");
+    for (let r = 5; r >= 1; r--) {
+      const n = dist[String(r)] ?? 0;
+      const pct = total > 0 ? Math.round(n / total * 100) : 0;
+      const row = el("div", "display:flex;align-items:center;gap:10px;font-size:13px;color:#6b7280;");
+      const lbl = el("span", "width:30px;display:inline-flex;align-items:center;gap:3px;color:#374151;font-weight:600;", String(r));
+      lbl.appendChild(star(true, 11));
+      row.appendChild(lbl);
+      const track = el("div", "flex:1;height:8px;background:#f0f1f3;border-radius:999px;overflow:hidden;");
+      track.appendChild(el("div", `width:${pct}%;height:100%;background:${accent};border-radius:999px;`));
+      row.appendChild(track);
+      row.appendChild(el("span", "width:24px;text-align:right;font-variant-numeric:tabular-nums;", String(n)));
+      box.appendChild(row);
+    }
+    return box;
+  }
+  function aiSummaryCard(summary) {
+    const card = el(
+      "div",
+      "position:relative;border-radius:18px;padding:18px 20px;margin-bottom:24px;background:linear-gradient(135deg,#faf5ff 0%,#f5f3ff 100%);border:1px solid #ede9fe;"
+    );
+    const head = el("div", "display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;");
+    const left = el("div", "display:flex;align-items:center;gap:7px;");
+    const sp = document.createElementNS(SVG_NS, "svg");
+    sp.setAttribute("viewBox", "0 0 24 24");
+    sp.setAttribute("width", "16");
+    sp.setAttribute("height", "16");
+    const spp = document.createElementNS(SVG_NS, "path");
+    spp.setAttribute("d", "M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z");
+    spp.setAttribute("fill", "#7c3aed");
+    sp.appendChild(spp);
+    left.appendChild(sp);
+    left.appendChild(el("span", "font-size:12px;font-weight:800;letter-spacing:.07em;color:#6d28d9;text-transform:uppercase;", "What customers say"));
+    head.appendChild(left);
+    head.appendChild(el("span", "font-size:11px;font-weight:600;color:#a78bda;", "AI-generated"));
+    card.appendChild(head);
+    card.appendChild(el("p", "margin:0;font-size:15px;line-height:1.6;color:#3b2a63;", summary.text));
+    card.appendChild(el("p", "margin:8px 0 0;font-size:12px;color:#a78bda;text-align:right;", `from ${summary.review_count} reviews`));
+    return card;
+  }
   function renderWall(data) {
     target.innerHTML = "";
     const root = el(
       "section",
-      "font-family:Inter,system-ui,-apple-system,sans-serif;color:#0f172a;max-width:760px;"
+      `font-family:${IN_APP_FONT_STACK};color:#111827;max-width:860px;margin:0 auto;-webkit-font-smoothing:antialiased;`
     );
     root.setAttribute("data-aegis-reviews", "true");
     const summary = data.aggregate.ai_summary;
-    if (summary && summary.text) {
-      const card = el(
-        "div",
-        "border:1px solid #ede9fe;background:#faf5ff;border-radius:12px;padding:12px 14px;margin-bottom:14px;"
-      );
-      const h = el("div", "display:flex;align-items:center;gap:6px;margin-bottom:6px;");
-      h.appendChild(sparkles());
-      h.appendChild(el("span", "font-size:12px;font-weight:700;color:#7c3aed;text-transform:uppercase;letter-spacing:.04em;", "AI summary"));
-      card.appendChild(h);
-      card.appendChild(el("p", "margin:0;font-size:14px;line-height:1.5;color:#334155;", summary.text));
-      card.appendChild(
-        el("p", "margin:6px 0 0;font-size:11px;color:#a78bda;text-align:right;", `summarized from ${summary.review_count} reviews`)
-      );
-      root.appendChild(card);
-    }
-    const head = el("div", "display:flex;align-items:center;gap:8px;");
-    const avg = data.aggregate.avg_rating ?? 0;
-    head.appendChild(stars(Math.round(avg), 18));
-    head.appendChild(el("span", "font-size:20px;font-weight:700;", avg ? avg.toFixed(1) : "—"));
-    head.appendChild(
-      el("span", "font-size:13px;color:#64748b;", `${data.aggregate.count} review${data.aggregate.count === 1 ? "" : "s"}`)
-    );
-    root.appendChild(head);
+    if (summary && summary.text) root.appendChild(aiSummaryCard(summary));
     if (data.aggregate.count === 0) {
-      root.appendChild(el("p", "margin-top:8px;font-size:14px;color:#94a3b8;", "No reviews yet."));
+      root.appendChild(el("p", "font-size:15px;color:#9ca3af;padding:6px 0;", "No reviews yet — be the first to share your experience."));
       target.appendChild(root);
       return;
     }
-    root.appendChild(distributionRows(data.aggregate.distribution, data.aggregate.count));
-    root.appendChild(
-      controls(() => {
-        void fetchReviews().then((d) => renderList((d == null ? void 0 : d.items) ?? []));
-      })
-    );
-    listContainer = el("div");
+    const header = el("div", "display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px;padding-bottom:4px;");
+    const ratingBlock = el("div", "display:flex;flex-direction:column;gap:4px;");
+    const topRow = el("div", "display:flex;align-items:center;gap:12px;");
+    const avg = data.aggregate.avg_rating ?? 0;
+    topRow.appendChild(stars(Math.round(avg), 20));
+    topRow.appendChild(el("span", "font-size:32px;font-weight:800;line-height:1;letter-spacing:-0.02em;", avg ? avg.toFixed(1) : "—"));
+    ratingBlock.appendChild(topRow);
+    ratingBlock.appendChild(el("span", "font-size:13px;color:#6b7280;", `${data.aggregate.count} review${data.aggregate.count === 1 ? "" : "s"} · 100% verified`));
+    header.appendChild(ratingBlock);
+    header.appendChild(distributionPanel(data.aggregate.distribution, data.aggregate.count));
+    root.appendChild(header);
+    root.appendChild(controls(() => {
+      void fetchReviews().then((d) => renderList((d == null ? void 0 : d.items) ?? []));
+    }));
+    listContainer = el("div", "margin-top:2px;");
     root.appendChild(listContainer);
     renderList(data.items);
     target.appendChild(root);
     injectJsonLd(target, data, productId);
     ctx.trackEvent(ctx.campaign.id, "impression");
   }
-  const displayStyle = (_a = ctx.campaign.interactive_config) == null ? void 0 : _a["display_style"];
-  const compact = displayStyle === "compact";
+  const compact = ic.display_style === "compact";
   function renderCompact(data) {
-    var _a2;
+    var _a;
     target.innerHTML = "";
     if (data.aggregate.count === 0) return;
     const root = el(
       "section",
-      "font-family:Inter,system-ui,-apple-system,sans-serif;color:#0f172a;max-width:760px;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;"
+      `font-family:${IN_APP_FONT_STACK};color:#111827;max-width:860px;margin:0 auto;border:1px solid #f0f1f3;border-radius:16px;padding:16px 18px;`
     );
     const line = el("div", "display:flex;align-items:center;gap:8px;");
     const avg = data.aggregate.avg_rating ?? 0;
     line.appendChild(stars(Math.round(avg), 16));
-    line.appendChild(el("span", "font-size:15px;font-weight:700;", avg ? avg.toFixed(1) : "—"));
-    line.appendChild(el("span", "font-size:13px;color:#64748b;", `(${data.aggregate.count})`));
-    line.appendChild(chip("Verified reviews", "verified"));
+    line.appendChild(el("span", "font-size:16px;font-weight:700;", avg ? avg.toFixed(1) : "—"));
+    line.appendChild(el("span", "font-size:13px;color:#6b7280;", `(${data.aggregate.count})`));
+    line.appendChild(verifiedBadge());
     root.appendChild(line);
     const top = data.items.find((i) => i.review_text);
     if (top && top.review_text) {
-      const q = el("p", "margin:8px 0 0;font-size:14px;color:#334155;", `“${top.review_text}”`);
-      root.appendChild(q);
-      root.appendChild(
-        el("span", "font-size:12px;color:#94a3b8;", `— ${((_a2 = top.reviewer_snapshot) == null ? void 0 : _a2.name) ?? "Customer"}`)
-      );
+      root.appendChild(el("p", "margin:10px 0 0;font-size:15px;color:#374151;line-height:1.5;", `“${top.review_text}”`));
+      root.appendChild(el("span", "font-size:13px;color:#9ca3af;", `— ${((_a = top.reviewer_snapshot) == null ? void 0 : _a.name) ?? "Customer"}`));
     }
-    const seeAll = el(
-      "button",
-      "margin-top:10px;font-size:13px;font-weight:600;color:#4169e1;background:none;border:none;cursor:pointer;padding:0;",
-      "See all reviews"
-    );
+    const seeAll = el("button", `margin-top:12px;font-size:14px;font-weight:700;color:${accent};background:none;border:none;cursor:pointer;padding:0;font-family:inherit;`, "See all reviews →");
     seeAll.addEventListener("click", () => renderWall(data));
     root.appendChild(seeAll);
     target.appendChild(root);
@@ -5386,27 +5410,27 @@ function renderReviewsInline(ctx, target, creds) {
 }
 function renderReviewsOverlay(ctx, creds) {
   if (typeof document === "undefined" || !(creds == null ? void 0 : creds.apiHost) || !(creds == null ? void 0 : creds.writeKey)) return;
+  ensureInAppFont();
   const overlay = document.createElement("div");
   overlay.setAttribute("data-campaign-id", ctx.campaign.id);
-  overlay.style.cssText = "position:fixed;inset:0;background:rgba(15,23,42,0.55);display:flex;align-items:flex-end;justify-content:center;z-index:99999;";
+  overlay.style.cssText = "position:fixed;inset:0;background:rgba(17,24,39,0.5);display:flex;align-items:flex-end;justify-content:center;z-index:99999;";
   const sheet = document.createElement("div");
-  sheet.style.cssText = "background:#fff;color:#0f172a;max-width:620px;width:100%;max-height:82vh;overflow-y:auto;border-radius:20px 20px 0 0;padding:16px 16px 24px;font-family:Inter,system-ui,-apple-system,sans-serif;box-shadow:0 -12px 30px rgba(0,0,0,0.12);";
-  const handle = el("div", "width:36px;height:4px;border-radius:999px;background:#e2e8f0;margin:0 auto 12px;");
-  sheet.appendChild(handle);
-  const bar = el("div", "display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;");
-  bar.appendChild(el("div", "font-weight:700;font-size:16px;", ctx.campaign.title || "Customer reviews"));
-  const close = el("button", "background:none;border:none;cursor:pointer;padding:4px 8px;color:#64748b;");
-  const xsvg = document.createElementNS(SVG_NS, "svg");
-  xsvg.setAttribute("viewBox", "0 0 24 24");
-  xsvg.setAttribute("width", "18");
-  xsvg.setAttribute("height", "18");
+  sheet.style.cssText = `background:#fff;color:#111827;max-width:680px;width:100%;max-height:84vh;overflow-y:auto;border-radius:24px 24px 0 0;padding:18px 18px 28px;font-family:${IN_APP_FONT_STACK};box-shadow:0 -16px 40px rgba(0,0,0,0.14);`;
+  sheet.appendChild(el("div", "width:38px;height:4px;border-radius:999px;background:#e5e7eb;margin:0 auto 14px;"));
+  const bar = el("div", "display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;");
+  bar.appendChild(el("div", "font-weight:800;font-size:17px;", ctx.campaign.title || "Customer reviews"));
+  const close = el("button", "background:none;border:none;cursor:pointer;padding:4px 8px;color:#6b7280;");
+  const x = document.createElementNS(SVG_NS, "svg");
+  x.setAttribute("viewBox", "0 0 24 24");
+  x.setAttribute("width", "20");
+  x.setAttribute("height", "20");
   const xp = document.createElementNS(SVG_NS, "path");
   xp.setAttribute("d", "M18 6L6 18M6 6l12 12");
   xp.setAttribute("stroke", "currentColor");
   xp.setAttribute("stroke-width", "2");
   xp.setAttribute("stroke-linecap", "round");
-  xsvg.appendChild(xp);
-  close.appendChild(xsvg);
+  x.appendChild(xp);
+  close.appendChild(x);
   close.setAttribute("aria-label", "Close");
   close.addEventListener("click", () => {
     ctx.trackEvent(ctx.campaign.id, "dismissed");
@@ -6677,10 +6701,10 @@ const _AegisInAppManager = class _AegisInAppManager {
       cbody.appendChild(b);
     }
     if (couponCode) {
-      const chip2 = document.createElement("span");
-      chip2.style.cssText = `align-self: flex-start; border: 1px dashed ${text}66; border-radius: 6px; padding: 2px 8px; font-family: monospace; font-size: 11px; letter-spacing: 0.04em;`;
-      chip2.textContent = couponCode;
-      cbody.appendChild(chip2);
+      const chip = document.createElement("span");
+      chip.style.cssText = `align-self: flex-start; border: 1px dashed ${text}66; border-radius: 6px; padding: 2px 8px; font-family: monospace; font-size: 11px; letter-spacing: 0.04em;`;
+      chip.textContent = couponCode;
+      cbody.appendChild(chip);
     }
     if (buttonText) {
       const btn = document.createElement("button");
@@ -7263,19 +7287,19 @@ const _AegisInAppManager = class _AegisInAppManager {
       ov.appendChild(eyebrow);
       ov.appendChild(big);
       if (r.code) {
-        const chip2 = document.createElement("button");
-        chip2.type = "button";
-        chip2.textContent = `${r.code}  ⧉`;
-        chip2.style.cssText = `margin-top: 4px; padding: 9px 16px; border-radius: 999px; border: 1.5px dashed ${text}66; background: transparent; color: ${text}; font-weight: 800; font-size: 14px; letter-spacing: 1px; cursor: pointer;`;
-        chip2.addEventListener("click", () => {
+        const chip = document.createElement("button");
+        chip.type = "button";
+        chip.textContent = `${r.code}  ⧉`;
+        chip.style.cssText = `margin-top: 4px; padding: 9px 16px; border-radius: 999px; border: 1.5px dashed ${text}66; background: transparent; color: ${text}; font-weight: 800; font-size: 14px; letter-spacing: 1px; cursor: pointer;`;
+        chip.addEventListener("click", () => {
           var _a;
           try {
             void ((_a = navigator.clipboard) == null ? void 0 : _a.writeText(r.code));
-            chip2.textContent = "Copied";
+            chip.textContent = "Copied";
           } catch {
           }
         });
-        ov.appendChild(chip2);
+        ov.appendChild(chip);
       } else if (r.kind === "freebie") {
         const hint = document.createElement("div");
         hint.textContent = "🎟️ Show this screen to claim";
@@ -7309,20 +7333,20 @@ const _AegisInAppManager = class _AegisInAppManager {
         result.textContent = "";
         const tag = document.createElement("span");
         tag.textContent = `${r.label} — `;
-        const chip2 = document.createElement("button");
-        chip2.type = "button";
-        chip2.textContent = `${r.code} ⧉`;
-        chip2.style.cssText = `padding: 2px 8px; border-radius: 999px; border: 1.5px dashed ${text}66; background: transparent; color: ${text}; font-weight: 800; font-size: 12px; letter-spacing: 0.5px; cursor: pointer;`;
-        chip2.addEventListener("click", () => {
+        const chip = document.createElement("button");
+        chip.type = "button";
+        chip.textContent = `${r.code} ⧉`;
+        chip.style.cssText = `padding: 2px 8px; border-radius: 999px; border: 1.5px dashed ${text}66; background: transparent; color: ${text}; font-weight: 800; font-size: 12px; letter-spacing: 0.5px; cursor: pointer;`;
+        chip.addEventListener("click", () => {
           var _a;
           try {
             void ((_a = navigator.clipboard) == null ? void 0 : _a.writeText(r.code));
-            chip2.textContent = "Copied";
+            chip.textContent = "Copied";
           } catch {
           }
         });
         result.appendChild(tag);
-        result.appendChild(chip2);
+        result.appendChild(chip);
       } else result.textContent = r.label || "Thanks for playing!";
       retireCta();
     };
@@ -7974,19 +7998,19 @@ const _AegisInAppManager = class _AegisInAppManager {
         ov.appendChild(eb);
         ov.appendChild(big);
         if (code) {
-          const chip2 = document.createElement("button");
-          chip2.type = "button";
-          chip2.textContent = `${code}  ⧉`;
-          chip2.style.cssText = `margin-top: 4px; padding: 8px 14px; border-radius: 999px; border: 1.5px dashed ${text}66; background: transparent; color: ${text}; font-weight: 800; font-size: 13px; letter-spacing: 1px; cursor: pointer;`;
-          chip2.addEventListener("click", () => {
+          const chip = document.createElement("button");
+          chip.type = "button";
+          chip.textContent = `${code}  ⧉`;
+          chip.style.cssText = `margin-top: 4px; padding: 8px 14px; border-radius: 999px; border: 1.5px dashed ${text}66; background: transparent; color: ${text}; font-weight: 800; font-size: 13px; letter-spacing: 1px; cursor: pointer;`;
+          chip.addEventListener("click", () => {
             var _a;
             try {
               void ((_a = navigator.clipboard) == null ? void 0 : _a.writeText(code));
-              chip2.textContent = "Copied";
+              chip.textContent = "Copied";
             } catch {
             }
           });
-          ov.appendChild(chip2);
+          ov.appendChild(chip);
         }
         card.appendChild(ov);
         try {
@@ -7996,10 +8020,10 @@ const _AegisInAppManager = class _AegisInAppManager {
       } else {
         prizeText.textContent = icoVal && !isUrl(icoVal) ? `${icoVal} ${label}` : label;
         if (code) {
-          const chip2 = document.createElement("div");
-          chip2.style.cssText = `margin-top: 6px; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: ${text}14; color: ${text};`;
-          chip2.textContent = code;
-          body.appendChild(chip2);
+          const chip = document.createElement("div");
+          chip.style.cssText = `margin-top: 6px; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: ${text}14; color: ${text};`;
+          chip.textContent = code;
+          body.appendChild(chip);
         }
         this._playReaction(body, "celebrate", "gift.json", ic);
       }