rivia 0.0.90 → 0.0.91

package/dist/index.cjs.js

@@ -0,0 +1,4816 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/index.js
+var index_exports = {};
+__export(index_exports, {
+  Banner: () => banner_default,
+  Checklist: () => rivia_default,
+  ProductManagement: () => pm_default,
+  Tours: () => rivia_tour_default,
+  triggerEvent: () => triggerEvent
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils/rivia.js
+function slugify(text) {
+  return "/" + String(text || "").trim().toLowerCase().replace(/[^a-z0-9\-_\s]/g, "").replace(/\s+/g, "-");
+}
+function Onboarding(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, customCSS = "", user_var, checklist_id) {
+  if (sessionStorage.getItem(`dismissedChecklist${checklist_id}`) == "true")
+    return;
+  let usrn = targetingData?.targeting_data?.usernames ?? "Not Set";
+  let inc = targetingData?.targeting_data?.inclusion ?? "Not Set";
+  const mymap = /* @__PURE__ */ new Map();
+  for (let i2 = 0; i2 < usrn.length; i2++) {
+    mymap.set(usrn[i2], true);
+  }
+  let flag = false;
+  let data = {};
+  for (let i2 = 0; i2 < sessionStorage.length; i2++) {
+    const key = sessionStorage.key(i2);
+    data[key] = sessionStorage.getItem(key);
+    let j, t = 0;
+    if (mymap.get(data[key]) == true && inc == 2) {
+      flag = true;
+      t = 1;
+      break;
+    } else if (mymap.get(data[key]) == true && inc == 1) {
+      flag = false;
+      return;
+    }
+  }
+  if (inc == 0) {
+    flag = true;
+  }
+  let completedPages = [];
+  const items = Array.isArray(checklistItems) && checklistItems.length ? checklistItems.map((it, i2) => ({
+    id: it.id || `step${i2 + 1}`,
+    title: it.heading || `Step ${i2 + 1}`,
+    description: it.body || "",
+    event_name: it.event_name || "",
+    button_name: it.button_name || "",
+    url: it.url || slugify(it.title || `step-${i2 + 1}`),
+    color: it.color || null
+  })) : [];
+  const cleanUrlItems = items.map(
+    (item) => item.url.startsWith("/") ? item.url.slice(1) : item.url
+  );
+  const defaultTheme = {
+    backgroundColor: "#ffffff",
+    lowerBackgroundColor: "#ffffff",
+    closeBackgroundColor: "#d9534f",
+    textColor: "#000000",
+    progressBg: "#a0afa2",
+    progressFill: "#01a016",
+    subtitleColor: "#666666",
+    fontFamily: "Arial, sans-serif",
+    fontSize: "14px",
+    title: "AI Caller",
+    subtitle: "Describe the purpose of this checklist...",
+    uncheckedBorderColor: "#d1d5db",
+    headingColor: "#111827",
+    bodyColor: "#6b7280",
+    showCloseButton: true,
+    lowerBodyColor: "#6b7280",
+    lowerHeadingColor: "#111827"
+  };
+  const cssConfig = Object.assign({}, defaultTheme, cssText || {});
+  if (!items.length) return;
+  ["route-label", "show-tooltip-btn", "tooltip-close-btn"].forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) el.remove();
+  });
+  const visitedPages = {};
+  items.forEach((it) => {
+    const cleanUrl = it.url.startsWith("/") ? it.url.slice(1) : it.url;
+    visitedPages[cleanUrl] = it.id;
+    if (it.event_name && it.event_name != "click") {
+      visitedPages[it.event_name] = it.id;
+    }
+  });
+  let storedVisited2 = JSON.parse(
+    sessionStorage.getItem("onboardingVisited") || "[]"
+  );
+  if (!Array.isArray(storedVisited2)) storedVisited2 = [];
+  let user_var1 = user_var;
+  if (!user_var1) {
+    user_var1 = "User_" + Math.random().toString(36).substring(2, 8);
+    sessionStorage.setItem(user_var, user_var1);
+  }
+  const backendUrl = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var1}`;
+  async function getUserProgress22() {
+    const backendUrl2 = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var1}`;
+    try {
+      const res = await fetch(backendUrl2, { credentials: "include" });
+      if (!res.ok) console.warn(`GET failed: ${res.status}`);
+      const data2 = await res.json();
+      let userData = data2[user_var1];
+      if (Array.isArray(userData)) {
+        storedVisited2 = userData;
+      } else if (typeof userData === "object" && userData !== null && Array.isArray(userData.completed_items)) {
+        storedVisited2 = userData.completed_items;
+      } else {
+        storedVisited2 = [];
+      }
+      let path;
+      return {
+        completedPages: storedVisited2,
+        progress: storedVisited2.length,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        start_date: userData?.start_date || "",
+        end_date: userData?.end_date || userData?.end_data || ""
+      };
+    } catch (err) {
+      console.warn(
+        "\u26A0\uFE0F Invalid checklist Id",
+        err
+      );
+      const storedVisited22 = [];
+      return {
+        completedPages: [],
+        progress: 0,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        start_date: "",
+        end_date: ""
+      };
+    }
+  }
+  storedVisited2 = sessionStorage.getItem("onboardingVisited");
+  async function getUserProgress22() {
+    const backendUrl2 = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var1}`;
+    try {
+      const res = await fetch(backendUrl2, { credentials: "include" });
+      if (!res.ok) console.warn(`GET failed: ${res.status}`);
+      const data2 = await res.json();
+      let userData = data2[user_var1];
+      if (Array.isArray(userData)) {
+        storedVisited2 = userData;
+      } else if (typeof userData === "object" && userData !== null && Array.isArray(userData.completed_items)) {
+        storedVisited2 = userData.completed_items;
+      } else {
+        storedVisited2 = [];
+      }
+      let path;
+      return {
+        completedPages: storedVisited2,
+        progress: storedVisited2.length,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        start_date: userData?.start_date || "",
+        end_date: userData?.end_date || userData?.end_data || ""
+      };
+    } catch (err) {
+      let uploadVisitedPagesInBackground2 = function(completed2, touched = false) {
+        let activeStepId2 = sessionStorage.getItem("activeStepId") || null;
+        let user_var22 = user_var;
+        const backendUrl22 = `https://demoapi.rivia.ai/clients/${checklist_id}`;
+        try {
+          const payload = {
+            name: user_var22,
+            completed_items: completed2,
+            touched
+          };
+          fetch(backendUrl22, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            credentials: "include",
+            body: JSON.stringify(payload),
+            keepalive: true
+          }).then((res) => {
+            if (!res.ok) console.warn(`Upload failed: ${res.status}`);
+          }).catch((err2) => {
+            console.warn("\u26A0\uFE0F Background PUT upload failed:", err2);
+          });
+        } catch (err2) {
+          console.warn("\u274C Error preparing background upload:", err2);
+        }
+      };
+      var uploadVisitedPagesInBackground = uploadVisitedPagesInBackground2;
+      console.warn(
+        "\u26A0\uFE0F Invalid checklist Id",
+        err
+      );
+      uploadVisitedPagesInBackground2([], false);
+      return {
+        completedPages: [],
+        progress: 0,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        start_date: "",
+        end_date: ""
+      };
+    }
+  }
+  if (!storedVisited2 || storedVisited2 == "[]") {
+    getUserProgress22().then((progressData) => {
+      if (storedVisited2 && storedVisited2.length >= checklistItems.length) {
+        return;
+      }
+      sessionStorage.setItem(
+        "onboardingVisited",
+        JSON.stringify(progressData.completedPages)
+      );
+      fetchWithTimeout(
+        topTitle,
+        subtitle,
+        completion,
+        checklistItems,
+        cssText,
+        targetingData,
+        user_var,
+        checklist_id,
+        cssConfig,
+        items,
+        storedVisited2,
+        backendUrl,
+        progressData,
+        visitedPages,
+        cleanUrlItems,
+        customCSS
+      );
+    });
+  } else {
+    try {
+      storedVisited2 = storedVisited2 ? JSON.parse(storedVisited2) : [];
+    } catch (e) {
+      console.warn(
+        "Invalid onboardingVisited data, resetting cache:",
+        storedVisited2
+      );
+      storedVisited2 = [];
+    }
+    if (storedVisited2 && storedVisited2.length >= checklistItems.length) {
+      if (sessionStorage.getItem("CompletedAll") != "true") return;
+      const label = document.createElement("div");
+      label.id = "route-label";
+      label.innerText = "\u{1F389} Congrats! You've completed all items!";
+      Object.assign(label.style, {
+        position: "fixed",
+        bottom: "20px",
+        left: "20px",
+        backgroundColor: "#4CAF50",
+        color: "white",
+        padding: "10px 20px",
+        borderRadius: "10px",
+        boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
+        fontSize: "16px",
+        fontWeight: "bold",
+        zIndex: 9999,
+        opacity: 0,
+        transition: "opacity 0.5s ease"
+      });
+      document.body.appendChild(label);
+      requestAnimationFrame(() => {
+        label.style.opacity = 1;
+      });
+      setTimeout(() => {
+        label.style.opacity = 0;
+        setTimeout(() => label.remove(), 500);
+      }, 3e3);
+      sessionStorage.setItem("CompletedAll", "false ");
+      return;
+    }
+    fetchWithTimeout(
+      topTitle,
+      subtitle,
+      completion,
+      checklistItems,
+      cssText,
+      targetingData,
+      user_var,
+      checklist_id,
+      cssConfig,
+      items,
+      storedVisited2,
+      backendUrl,
+      [],
+      visitedPages,
+      cleanUrlItems,
+      customCSS
+    );
+  }
+}
+async function fetchWithTimeout(topTitle = "Get Started", subtitle, completion = 0, checklistItems = [], cssText = [], targetingData = {}, user_var, checklist_id, cssConfig = {}, items = [], storedVisited2 = [], backendUrl = "", progressData = {}, visitedPages = {}, cleanUrlItems = [], custom_css = "") {
+  console.log("inside fetchWithTimeout", user_var);
+  if (!user_var)
+    return;
+  let i = 0;
+  const stepsHTML = items.map((it) => {
+    return `
+  <div id="${it.id}" class="onboard-step">
+  <div class="start-select"></div>
+
+  <div class="onboard-circle"></div>
+  
+  <div class="onboard-text">
+  <strong class="onboard-title">${it.title}</strong><br />
+  <small class="onboard-desc">${it.description || ""}</small>
+      </div>
+      </div>
+    ${i++ < items.length - 1 ? '<hr class="onboard-divider" />' : ""}
+    `;
+  }).join("");
+  const labelHTML = `
+        <div id="checklistRoot" class="checklist-root">
+        <button id="checklistCloseBtn" class="checklist-close">&times;</button>
+        
+        <div class="checklist-header">
+        <h3 class="checklist-title">${topTitle}</h3>
+        <p class="checklist-subtitle">${subtitle}</p>
+        
+        <div class="checklist-progress">
+        <div id="progressContainer" style="display: flex; gap: 4px; width: 300px;  height: 10px;"></div>
+          <span id="progressFraction" style="margin-left: 0px; font-size: 13px; color: ${cssConfig.textColor}; min-width: 20px; text-align: right;">0/0 </span>
+    
+        </div>
+        
+        </div>
+        
+        <div class="checklist-body">
+        ${stepsHTML}
+        <div style="text-align: right; margin-top: 10px; cursor: pointer; color: black; font-size: 12px;" id="dismissChecklist">Dismiss this checklist</div>
+        </div>
+    </div>
+    `;
+  function injectChecklistBaseCSS() {
+    if (document.getElementById("rivia-checklist-css")) return;
+    const style2 = document.createElement("style");
+    style2.id = "rivia-checklist-css";
+    style2.textContent = custom_css || `/* Root */
+.checklist-root {
+  max-width: 500px;
+  margin: auto;
+  position: relative;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  color: var(--text-color);
+}
+
+.checklist-title {
+  max-width: 500px;
+  margin: auto;
+  position: relative;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  color: var(--text-color);
+}
+/* Close button */
+.checklist-close {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  background: transparent;
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  color: var(--text-color);
+}
+
+/* Header */
+.checklist-header {
+  background: var(--header-bg);
+  padding: 16px;
+  border-radius: 8px 8px 0 0;
+}
+
+.checklist-subtitle {
+  margin-top: 8px;
+  color: var(--subtitle-color);
+}
+
+/* Progress */
+.checklist-progress {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.progress-fraction {
+  font-size: 13px;
+}
+
+/* Body */
+.checklist-body {
+height:380px;
+width:400px;
+  padding: 16px;
+  background: var(--lower-bg);
+  max-height: 420px;
+  overflow: auto;
+  border-radius: 0 0 8px 8px;
+}
+
+/* Steps */
+.onboard-step {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  background: var(--step-bg);
+  margin-bottom: 2px;
+}
+
+.start-select {
+  position: absolute;
+  top: 0;
+  left: -18px;
+  width: 10px;
+  height: 120%;
+  background: rgba(247,143,7,0.9);
+  border-radius: 4px 0 0 4px;
+  display: none;
+}
+
+.onboard-circle {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--checkbox-color, #f78f07);
+  background: transparent;
+  margin-right: 10px;
+  box-sizing: border-box;
+  display: block;
+}
+
+.onboard-title {
+  color: var(--heading-color);
+}
+
+.onboard-desc {
+  color: var(--body-color);
+}
+
+.onboard-divider {
+  border: none;
+  border-top: 1px solid #9d9d9d;
+}
+
+.rivia-launcher {
+  position: fixed;
+  display: block;
+  z-index: 9999;
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 8px rgba(19, 20, 19, 0.2);
+  background: var(--launcher-bg);
+  color: var(--launcher-text);
+  font-weight: bold;
+  border-radius: 20px;
+}
+
+.rivia-launcher .launcher-root {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.rivia-launcher .launcher-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.rivia-launcher .launcher-title {
+transform: translateY(-20%);
+  position: relative;
+  margin: 0;
+  line-height: 1;
+  text-align: center;
+  padding-left: 28px;
+}
+
+.rivia-launcher .launcher-icon {
+  position: absolute;
+  left: 10px;
+  
+}
+
+.rivia-launcher .launcher-text { font-size:var(--font-size);
+  display: block;
+  width: 100%;
+  padding-left: 5%;
+  text-align: center;
+  pointer-events: none;
+}
+
+.rivia-launcher .launcher-progress-wrap {
+  margin-top: 4px;
+  padding-left: 32px;
+}
+
+/* Text adjustment when progress bar is hidden */
+.rivia-launcher.no-progress .launcher-text {
+  transform: translateY(50%);
+}
+
+.rivia-launcher .launcher-progress {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+  padding: 5px;
+  height: 6px;
+  box-sizing: border-box;
+}
+
+.rivia-launcher .launcher-right {
+  flex-shrink: 0;
+  padding-right: 8px;
+}
+
+.rivia-launcher .launcher-fraction {
+  font-size: 13px;
+  white-space: nowrap;
+}`;
+    document.head.appendChild(style2);
+    console.log("inside injectChecklistBaseCSS");
+  }
+  let label = document.getElementById("route-label");
+  if (!label) {
+    label = document.createElement("div");
+    label.id = "route-label";
+    label.innerHTML = labelHTML;
+  }
+  const closeElement = label.querySelector(`#checklistCloseBtn`);
+  closeElement.addEventListener("click", (e) => {
+    e.stopPropagation();
+    label.style.opacity = "0";
+    label.style.pointerEvents = "none";
+    sessionStorage.setItem("onboardingVisible", "false");
+    closeBtn.style.display = "none";
+    showBtn.style.display = "block";
+  });
+  const dismissElement = label.querySelector(`#dismissChecklist`);
+  dismissElement.addEventListener("click", (e) => {
+    label.style.display = "none";
+    e.stopPropagation();
+    const confirmDiv = document.createElement("div");
+    confirmDiv.innerHTML = `
+<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; display: flex; align-items: flex-end; justify-content: flex-start;">
+  <div style="background: white;width: 250px;  border-radius: 10px; text-align: center; margin: 20px;">
+    <p style="padding: 15px;">Are you sure you want to dismiss this checklist?</p>
+    <hr class="confirmHR1293" id="confirmHR947" style="
+    all: unset !important;
+  display: block !important;
+  box-sizing: border-box !important;
+  border-top: 2px solid #f33f27 !important;
+  margin: 0 10px !important;
+  height: 0 !important;">
+    <button id="confirmYes" style="margin: 10px; padding: 4px 8px;color: #f33f27ff; border: none;  cursor: pointer;">Yes</button>
+    <span style="border-left: 2px solid #f33f27ff;color:#eda600ff; height: 52px; margin: 0 10px; display: inline-block; vertical-align: top;"></span>
+    <button id="confirmNo" style="margin: 10px; padding: 4px 8px;  color: #f33f27ff; border: none; cursor: pointer;">No</button>
+  </div>
+</div>
+`;
+    document.body.appendChild(confirmDiv);
+    const yesBtn = confirmDiv.querySelector("#confirmYes");
+    const noBtn = confirmDiv.querySelector("#confirmNo");
+    yesBtn.addEventListener("click", () => {
+      label.style.display = "none";
+      label.style.pointerEvents = "none";
+      closeBtn.style.display = "none";
+      showBtn.style.display = "none";
+      sessionStorage.setItem(`dismissedChecklist${checklist_id}`, "true");
+      document.body.removeChild(confirmDiv);
+    });
+    noBtn.addEventListener("click", () => {
+      document.body.removeChild(confirmDiv);
+      showBtn.style.display = "block";
+    });
+  });
+  function createSlabs(n) {
+    const container = label.querySelector("#progressContainer");
+    if (!container) return;
+    container.innerHTML = "";
+    for (let i2 = 0; i2 < n; i2++) {
+      const slab = document.createElement("div");
+      slab.className = "slab";
+      container.appendChild(slab);
+    }
+  }
+  const style = document.createElement("style");
+  style.textContent = `
+  .slab {
+  flex: 1 0 0%;      /* \u{1F512} important */
+  min-width: 5px;
+  height: 8px;
+  background-color: #ccc;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+  }
+  .slab.active {
+    background-color: #4caf50;
+  }
+  #progressContainerBtn .slab {
+    height: 5px;
+  }
+  `;
+  label.appendChild(style);
+  function updateProgress(completed) {
+    const slabs = label.querySelectorAll(".slab");
+    slabs.forEach((slab, index) => {
+      slab.classList.toggle("active", index < completed);
+    });
+    const fraction = label.querySelector("#progressFraction");
+    if (fraction) {
+      fraction.textContent = `${completed}/${slabs.length}`;
+    }
+  }
+  createSlabs(items.length);
+  if (storedVisited2) updateProgress(storedVisited2.length);
+  Object.assign(label.style, {
+    position: "fixed",
+    bottom: "80px",
+    left: "20px",
+    backgroundColor: cssConfig.backgroundColor,
+    color: cssConfig.textColor,
+    padding: "0px",
+    borderRadius: "10px",
+    zIndex: 9999,
+    fontSize: cssConfig.fontSize,
+    fontFamily: cssConfig.fontFamily,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)",
+    width: "400px",
+    maxWidth: "400px",
+    maxHeight: "500px",
+    lineHeight: "1.5",
+    transition: "opacity 0.5s ease-in-out, transform 0.2s",
+    opacity: "0",
+    cursor: "pointer",
+    textAlign: "left",
+    display: "none",
+    pointerEvents: "none"
+  });
+  let showBtn = document.getElementById("show-tooltip-btn");
+  if (!showBtn) {
+    showBtn = document.createElement("button");
+    showBtn.id = "show-tooltip-btn";
+  }
+  function createS(n) {
+    const container2 = showBtn.querySelector("#progressContainerBtn");
+    if (!container2) return;
+    container2.innerHTML = "";
+    for (let i2 = 0; i2 < n; i2++) {
+      const slab2 = document.createElement("div");
+      slab2.classList.add("slab");
+      container2.appendChild(slab2);
+    }
+  }
+  function updateProgress2(completed) {
+    const slab2 = showBtn.querySelectorAll("#progressContainerBtn .slab");
+    slab2.forEach((slab, index) => {
+      if (index < completed) {
+        slab.classList.add("active");
+      } else {
+        slab.classList.remove("active");
+      }
+    });
+  }
+  showBtn.id = "show-tooltip-btn";
+  showBtn.className = "rivia-launcher";
+  const translateStyle = cssConfig.launcherProgressBar ? 'style="transform: translateY(10px);"' : "";
+  const isRight = cssConfig.launcherPosition === "right";
+  const iconHTML = cssConfig.launcherShowIcon ? `<svg class="launcher-icon" width="24" height="24"   ${translateStyle} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10.167L12.123 6.043C13.248 4.919 13.811 4.356 14.431 3.903C15.7049 2.97403 17.1822 2.36274 18.74 2.12C19.499 2 20.293 2 21.885 2C21.968 2 22 2.038 22 2.115C22 3.705 22 4.501 21.881 5.26C21.638 6.81791 21.0263 8.29523 20.097 9.569C19.644 10.189 19.081 10.752 17.957 11.877L13.833 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.341 8.098C8.638 8.098 6.498 7.738 4.904 8.398C3.737 8.88 2.878 10 2 10.878L5.306 12.296C6.182 12.671 5.646 13.776 5.501 14.502C5.34 15.31 5.349 15.34 5.931 15.922L8.078 18.068C8.66 18.651 8.69 18.66 9.498 18.498C10.223 18.353 11.329 17.818 11.704 18.694L13.121 22C13.999 21.122 15.119 20.263 15.602 19.096C16.262 17.502 15.902 15.362 15.902 13.659" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M12 20L11 21M4 12L3 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 4.08008C16.2 4.26008 17.46 4.74008 18.161 5.46008C19.058 6.25208 19.68 7.32008 19.92 9.00008" stroke="white" stroke-width="1.5" stroke-linecap="square"/>
+<path d="M17.94 6.05957L16.5 7.49957" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>` : "";
+  const textTranslateStyle = !cssConfig.launcherProgressBar ? " translateY(50%);" : "";
+  if (!cssConfig.launcherProgressBar) {
+    showBtn.classList.add("no-progress");
+  }
+  showBtn.innerHTML = `
+  <div class="launcher-root">
+    <div class="launcher-left">
+
+      <h3 class="launcher-title">
+        ${iconHTML}
+        <span class="launcher-text">${cssConfig.launcher_text}</span>
+      </h3>
+
+      <div class="launcher-progress-wrap">
+        <div id="progressContainerBtn" class="launcher-progress"></div>
+      </div>
+
+    </div>
+
+    <div class="launcher-right">
+      <span id="progressFraction" class="launcher-fraction">0/0</span>
+    </div>
+  </div>
+`;
+  function injectLauncherCSS() {
+    if (document.getElementById("rivia-launcher-css")) return;
+    const style2 = document.createElement("style");
+    style2.id = "rivia-launcher-css";
+    style2.textContent = `
+    /* Root */ .checklist-root { max-width: 500px; margin: auto; position: relative; font-family: var(--font-family); font-size: var(--font-size); color: var(--text-color); } /* Close button */ .checklist-close { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 28px; cursor: pointer; color: var(--text-color); } /* Header */ .checklist-header { background: var(--header-bg); padding: 16px; border-radius: 8px 8px 0 0; } .checklist-subtitle { margin-top: 8px; color: var(--subtitle-color); } /* Progress */ .checklist-progress { display: flex; align-items: center; justify-content: space-between; } .progress-fraction { font-size: 13px; } /* Body */ .checklist-body { padding: 16px; background: var(--lower-bg); max-height: 340px; overflow: auto; border-radius: 0 0 8px 8px; } /* Steps */ .onboard-step { position: relative; display: flex; align-items: flex-start; cursor: pointer; padding: 8px; border-radius: 6px; background: var(--step-bg); margin-bottom: 16px; } .start-select { position: absolute; top: 0; left: -18px; width: 10px; height: 120%; background: rgba(247,143,7,0.9); border-radius: 4px 0 0 4px; display: none; } .onboard-circle { width: 16px; height: 16px; min-width: 16px; min-height: 16px; border-radius: 50%; border: 2px solid var(--checkbox-color, #f78f07); /* hardcoded for test */ background: transparent; margin-right: 10px; box-sizing: border-box; display: block; } .onboard-title { color: var(--heading-color); } .onboard-desc { color: var(--body-color); } .onboard-divider { border: none; border-top: 1px solid #9d9d9d; } .rivia-launcher { position: fixed; display: block; z-index: 9999; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(19, 20, 19, 0.2); background: var(--launcher-bg); color: var(--launcher-text); font-weight: bold; } .rivia-launcher .launcher-root { display: flex; align-items: center; width: 100%; height: 100%; } .rivia-launcher .launcher-left { flex: 1; display: flex; flex-direction: column; } .rivia-launcher .launcher-title { position: relative; margin: 0; line-height: 1; text-align: center; padding-left: 28px; } .rivia-launcher .launcher-icon { position: absolute; left: 10px; transform: translateY(50%); }
+     .rivia-launcher .launcher-text {font-size:var(--font-size); display: block; width: 100%; padding-left: 5%; text-align: center; pointer-events: none; } 
+     .rivia-launcher .launcher-progress-wrap { margin-top: 4px; padding-left: 32px; } /* Text adjustment when progress bar is hidden */ .rivia-launcher.no-progress .launcher-text { transform: translateY(50%);font-size:var(--font-size); } .rivia-launcher .launcher-progress { display:flex; gap:4px; width:100%; padding:5px; height:3px; box-sizing:border-box; } .rivia-launcher .launcher-right { flex-shrink: 0; padding-right: 8px; } .rivia-launcher .launcher-fraction { font-size: 13px; white-space: nowrap; } /* Customer CSS */ .rivia-launcher { border-radius: 20px; } .rivia-launcher .launcher-progress { height: 6px; }
+    `;
+    document.head.appendChild(style2);
+  }
+  function applyChecklistTheme(root, cssConfig2) {
+    root.style.setProperty("--font-family", cssConfig2.fontFamily);
+    root.style.setProperty("--font-size", cssConfig2.fontSize);
+    root.style.setProperty("--text-color", cssConfig2.textColor);
+    root.style.setProperty("--subtitle-color", cssConfig2.subtitleColor);
+    root.style.setProperty("--header-bg", cssConfig2.backgroundColor);
+    root.style.setProperty("--lower-bg", cssConfig2.lowerBackgroundColor);
+    root.style.setProperty("--step-bg", cssConfig2.lowerBackgroundColor);
+    root.style.setProperty("--checkbox-color", cssConfig2.lowerCheckboxColor);
+    root.style.setProperty("--heading-color", cssConfig2.lowerHeadingColor);
+    root.style.setProperty("--body-color", cssConfig2.lowerBodyColor);
+  }
+  injectChecklistBaseCSS();
+  Object.assign(showBtn.style, {
+    bottom: cssConfig.launcherSpacingBottom || "20px",
+    left: isRight ? "auto" : cssConfig.launcherSpacingLeft || "20px",
+    right: isRight ? cssConfig.launcherSpacingRight || "20px" : "auto",
+    width: cssConfig.launcherWidth ? `${cssConfig.launcherWidth}px` : "150px",
+    height: cssConfig.launcherHeight ? `${cssConfig.launcherHeight}px` : "78px",
+    borderRadius: `${cssConfig.launcherBorderRadius || 6}px`
+    /* CSS variables */
+  });
+  showBtn.style.setProperty("--launcher-bg", cssConfig.launcherBackgroundColor || "#f78f07");
+  showBtn.style.setProperty("--launcher-text", cssConfig.launcherTextColor || "#ffffff");
+  showBtn.style.setProperty("--font-size", cssConfig.fontSize || "14px");
+  applyChecklistTheme(label, cssConfig);
+  injectChecklistBaseCSS();
+  if (!document.contains(showBtn))
+    document.body.appendChild(showBtn);
+  console.log("after applyChecklistTheme");
+  if (!document.contains(label))
+    document.body.appendChild(label);
+  if (!cssConfig.launcherProgressBar) {
+    const progressContainerBtn = document.getElementById("progressContainerBtn");
+    if (progressContainerBtn) {
+      progressContainerBtn.style.display = "none";
+    }
+    const progressFraction = document.getElementById("progressFraction");
+    if (progressFraction) {
+      progressFraction.style.display = "none";
+    }
+  }
+  createS(items.length);
+  window.updateUIFromVisited = updateUIFromVisited;
+  window.updateProgress = updateProgress;
+  window.updateProgress2 = updateProgress2;
+  window.storedVisited = storedVisited2;
+  window.uploadVisitedPagesInBackground = uploadVisitedPagesInBackground;
+  window.items = items;
+  window.label = label;
+  window.showBtn = showBtn;
+  const closeBtn = document.createElement("button");
+  closeBtn.id = "tooltip-close-btn";
+  closeBtn.innerHTML = "\u2715";
+  Object.assign(closeBtn.style, {
+    position: "fixed",
+    width: "40px",
+    height: "40px",
+    border: "none",
+    backgroundColor: cssConfig.closeBackgroundColor,
+    color: cssConfig.textColor,
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "25px",
+    fontWeight: "bold",
+    display: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e4
+  });
+  function positionCloseBtn() {
+    const rect = label.getBoundingClientRect();
+    closeBtn.style.left = `${Math.max(8, rect.left + rect.width / 2 - 170)}px`;
+    closeBtn.style.top = `${rect.bottom + 10}px`;
+  }
+  let check = 0;
+  console.log("before");
+  const STORAGE_KEY = "onboardingVisited";
+  const visitedSet = new Set(
+    JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "[]")
+  );
+  const processedMessages = /* @__PURE__ */ new Set();
+  function persistVisited() {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify([...visitedSet]));
+  }
+  function handleVisit(cleanUrl, opts = { source: "unknown" }) {
+    if (!cleanUrl) return false;
+    if (typeof cleanUrl !== "string") return false;
+    if (!cleanUrlItems || !cleanUrlItems.includes(cleanUrl)) {
+      return false;
+    }
+    if (visitedSet.has(cleanUrl)) {
+      return false;
+    }
+    visitedSet.add(cleanUrl);
+    storedVisited2 = [...visitedSet];
+    persistVisited();
+    try {
+      uploadVisitedPagesInBackground([...visitedSet], true);
+    } catch (e) {
+      console.warn("uploadVisitedPagesInBackground failed", e);
+    }
+    updateProgress(visitedSet.size);
+    updateProgress2(visitedSet.size);
+    updateUIFromVisited();
+    console.log(`handleVisit: added ${cleanUrl} (source=${opts.source})`);
+    if (visitedSet.size >= (checklistItems ? checklistItems.length : Infinity)) {
+      sessionStorage.setItem("CompletedAll", "true");
+    }
+    return true;
+  }
+  function findButtonByText(buttonText) {
+    if (!buttonText) return null;
+    const needle = buttonText.trim().toLowerCase();
+    const buttons = document.querySelectorAll("button");
+    for (const button of buttons) {
+      if (!button.textContent) continue;
+      if (button.textContent.trim().toLowerCase().includes(needle)) {
+        return button;
+      }
+    }
+    return null;
+  }
+  function attachButtonForItem(it) {
+    const btn = findButtonByText(it.button_name);
+    if (!btn) {
+      return;
+    }
+    if (btn._onboardingAttached) return;
+    btn._onboardingAttached = true;
+    btn.addEventListener("click", (e) => {
+      check = 1;
+      const path = it.url || "";
+      const cleanUrl = path.startsWith("/") ? path.slice(1) : path;
+      if (storedVisited2.length >= checklistItems.length) {
+        (() => {
+          if (label2 && label2.parentNode) label2.remove();
+          if (showBtn && showBtn.parentNode) showBtn.remove();
+          const label2 = document.createElement("div");
+          label2.id = "route-label";
+          label2.innerText = "\u{1F389} Congrats! You've completed all items!";
+          Object.assign(label2.style, {
+            position: "fixed",
+            bottom: "20px",
+            left: "20px",
+            backgroundColor: "#4CAF50",
+            color: "white",
+            padding: "10px 20px",
+            borderRadius: "10px",
+            boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
+            fontSize: "16px",
+            fontWeight: "bold",
+            zIndex: 9999,
+            opacity: 0,
+            transition: "opacity 0.5s ease"
+          });
+          document.body.appendChild(label2);
+        })();
+      }
+      handleVisit(cleanUrl, { source: "click" });
+      if (storedVisited2.length >= checklistItems.length) {
+        (() => {
+          if (label && label.parentNode) label.remove();
+          if (showBtn && showBtn.parentNode) showBtn.remove();
+          const label3 = document.createElement("div");
+          label3.id = "route-label";
+          label3.innerText = "\u{1F389} Congrats! You've completed all items!";
+          Object.assign(label3.style, {
+            position: "fixed",
+            bottom: "20px",
+            left: "20px",
+            backgroundColor: "#4CAF50",
+            color: "white",
+            padding: "10px 20px",
+            borderRadius: "10px",
+            boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
+            fontSize: "16px",
+            fontWeight: "bold",
+            zIndex: 9999,
+            opacity: 0,
+            transition: "opacity 0.5s ease"
+          });
+          document.body.appendChild(label3);
+        })();
+      }
+    });
+  }
+  items.forEach(attachButtonForItem);
+  const mo = new MutationObserver((mutations) => {
+    items.forEach(attachButtonForItem);
+  });
+  mo.observe(document.body, { childList: true, subtree: true });
+  window.addEventListener("storage", (e) => {
+    if (e.key === STORAGE_KEY) {
+      const arr = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "[]");
+      visitedSet.clear();
+      arr.forEach((a) => visitedSet.add(a));
+      updateUIFromVisited();
+      updateProgress(visitedSet.size);
+      updateProgress2(visitedSet.size);
+    }
+  });
+  let user_var2 = user_var;
+  function uploadVisitedPagesInBackground(completed2, touched = false) {
+    let activeStepId2 = sessionStorage.getItem("activeStepId") || null;
+    let user_var22 = user_var;
+    const backendUrl22 = `https://demoapi.rivia.ai/clients/${checklist_id}`;
+    try {
+      const payload = {
+        name: user_var22,
+        completed_items: completed2,
+        touched
+      };
+      fetch(backendUrl22, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify(payload),
+        keepalive: true
+      }).then((res) => {
+        if (!res.ok) console.warn(`Upload failed: ${res.status}`);
+      }).catch((err) => {
+        console.warn("\u26A0\uFE0F Background PUT upload failed:", err);
+      });
+    } catch (err) {
+      console.warn("\u274C Error preparing background upload:", err);
+    }
+  }
+  let activeStepId = sessionStorage.getItem("activeStepId") || null;
+  function updateUIFromVisited() {
+    storedVisited2 = JSON.parse(
+      sessionStorage.getItem("onboardingVisited") || "[]"
+    );
+    let path;
+    storedVisited2 = sessionStorage.getItem("onboardingVisited");
+    if (!storedVisited2 || storedVisited2 == "[]") {
+      async function getUserProgress22() {
+        const backendUrl2 = `https://demoapi.rivia.ai/clients/${checklist_id}/${user_var}`;
+        try {
+          const res = await fetch(backendUrl2, { credentials: "include" });
+          if (!res.ok) console.warn(`GET failed: ${res.status}`);
+          const data2 = await res.json();
+          let userData = data2[user_var];
+          if (Array.isArray(userData)) {
+            storedVisited2 = userData;
+          } else if (typeof userData === "object" && userData !== null && Array.isArray(userData.completed_items)) {
+            storedVisited2 = userData.completed_items;
+          } else {
+            storedVisited2 = [];
+          }
+          let path2;
+          return {
+            completedPages: storedVisited2,
+            progress: storedVisited2.length,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            start_date: userData?.start_date || "",
+            end_date: userData?.end_date || userData?.end_data || ""
+          };
+        } catch (err) {
+          console.warn(
+            "\u26A0\uFE0F Invalid checklist Id",
+            err
+          );
+          uploadVisitedPagesInBackground([], false);
+          const storedVisited22 = [];
+          return {
+            completedPages: [],
+            progress: 0,
+            timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+            start_date: "",
+            end_date: ""
+          };
+        }
+      }
+      getUserProgress22().then((progressData2) => {
+        let completed2 = progressData2.completedPages;
+        completed2.forEach((path2) => {
+          const stepId = visitedPages[path2];
+          const stepElement = label.querySelector(`#${stepId}`);
+          if (!stepElement) return;
+          const circle = stepElement.querySelector(".onboard-circle");
+          if (circle) {
+            circle.innerHTML = `
+          <div style="background-color: green; border-radius: 50%; width: 30px; height: 18px; display: flex; align-items: center; justify-content: center;">
+            <svg width="16" height="16" viewBox="0 0 512 512" fill="white" xmlns="http://www.w3.org/2000/svg">
+            <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 
+              0-36.204l36.203-36.204c9.997-9.998 26.207-9.998
+              36.204 0L192 312.69 432.095 72.596c9.997-9.997
+              26.207-9.997 36.204 0l36.203 36.204c9.997 9.997
+              9.997 26.206 0 36.204l-294.4 294.401c-9.998 
+              9.997-26.207 9.997-36.204-.001z"/>
+              </svg>
+              </div>
+              `;
+            circle.style.border = "none";
+            circle.style.backgroundColor = "transparent";
+            circle.style.display = "flex";
+            circle.style.alignItems = "center";
+            circle.style.justifyContent = "center";
+            circle.style.padding = "1px";
+          }
+          const textContainer = stepElement.querySelector(".onboard-text");
+          const startSelect = stepElement.querySelector(".start-select");
+          if (stepId === activeStepId && startSelect) {
+            startSelect.style.display = "block";
+          }
+          if (textContainer) {
+            textContainer.style.textDecoration = "line-through";
+            textContainer.style.opacity = "0.6";
+          }
+        });
+        const progress2 = Math.min(
+          100,
+          Math.round(completed2.length / items.length * 100)
+        );
+        const percentText2 = `${progress2}%`;
+        const labelPercent2 = label.querySelector("#progressFraction");
+        const btnPercent2 = showBtn.querySelector("#progressFraction");
+        if (labelPercent2) labelPercent2.textContent = percentText2;
+        if (btnPercent2) btnPercent2.textContent = percentText2;
+        const progressFraction2 = label.querySelector("#progressFraction");
+        if (progressFraction2) {
+          progressFraction2.textContent = `${completed2.length}/${items.length}`;
+        }
+        const btnFraction2 = showBtn.querySelector("#progressFraction");
+        if (btnFraction2) {
+          btnFraction2.textContent = `${completed2.length}/${items.length}`;
+        }
+        storedVisited2 = completed2;
+        updateProgress(completed2.length);
+        updateProgress2(completed2.length);
+      });
+    } else {
+      let completed2 = storedVisited2;
+      if (completed2) {
+        try {
+          completed2 = JSON.parse(completed2);
+        } catch (e) {
+          console.warn("Failed to parse onboardingVisited:", e);
+          completed2 = [];
+        }
+      } else {
+        completed2 = [];
+      }
+      completed2.forEach((path2) => {
+        let activeStepId2 = sessionStorage.getItem("activeStepId") || null;
+        const stepId = visitedPages[path2];
+        const stepElement = label.querySelector(`#${stepId}`);
+        if (!stepElement) return;
+        const circle = stepElement.querySelector(".onboard-circle");
+        if (circle) {
+          circle.innerHTML = `
+          <div style="background-color: green; border-radius: 50%; width: 30px; height: 18px; display: flex; align-items: center; justify-content: center;">
+          <svg width="16" height="16" viewBox="0 0 512 512" fill="white" xmlns="http://www.w3.org/2000/svg">
+          <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 
+          0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 
+          36.204 0L192 312.69 432.095 72.596c9.997-9.997 
+          26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 
+          9.997 26.206 0 36.204l-294.4 294.401c-9.998 
+          9.997-26.207 9.997-36.204-.001z"/>
+          </svg>
+          </div>
+          `;
+          circle.style.border = "none";
+          circle.style.backgroundColor = "transparent";
+          circle.style.display = "flex";
+          circle.style.alignItems = "center";
+          circle.style.justifyContent = "center";
+          circle.style.padding = "1px";
+        }
+        const textContainer = stepElement.querySelector(".onboard-text");
+        const startSelect = stepElement.querySelector(".start-select");
+        if (stepId === activeStepId2 && startSelect) {
+          startSelect.style.display = "block";
+        }
+        if (textContainer) {
+          textContainer.style.textDecoration = "line-through";
+          textContainer.style.opacity = "0.6";
+        }
+      });
+      const progress2 = Math.min(
+        100,
+        Math.round(completed2.length / items.length * 100)
+      );
+      const percentText2 = `${progress2}%`;
+      const labelPercent2 = label.querySelector("#progressFraction");
+      const btnPercent2 = showBtn.querySelector("#progressFraction");
+      if (labelPercent2) labelPercent2.textContent = percentText2;
+      if (btnPercent2) btnPercent2.textContent = percentText2;
+      const progressFraction2 = label.querySelector("#progressFraction");
+      if (progressFraction2) {
+        progressFraction2.textContent = `${completed2.length}/${items.length}`;
+      }
+      const btnFraction2 = showBtn.querySelector("#progressFraction");
+      if (btnFraction2) {
+        btnFraction2.textContent = `${completed2.length}/${items.length} `;
+      }
+      storedVisited2 = completed2;
+      updateProgress(completed2.length);
+      updateProgress2(completed2.length);
+    }
+    let completed = storedVisited2;
+  }
+  if (completion == 0) {
+    items.forEach((it) => {
+      const stepEl = label.querySelector(`#${it.id}`);
+      if (!stepEl) return;
+      const startSelect = stepEl.querySelector(".start-select");
+      startSelect.style.display = "none";
+      stepEl.addEventListener("click", () => {
+        if (it.event_name == "click" && it.button_name == "") {
+          items.forEach((inner) => {
+            const el = label.querySelector(`#${inner.id}`);
+            if (el) {
+              const sel = el.querySelector(".start-select");
+              if (sel) sel.style.display = "none";
+            }
+          });
+          startSelect.style.display = "block";
+          activeStepId = it.id;
+          sessionStorage.setItem("activeStepId", activeStepId);
+          storedVisited2 = JSON.parse(
+            sessionStorage.getItem("onboardingVisited") || "[]"
+          );
+          if (!storedVisited2 || storedVisited2 == "[]") {
+            getUserProgress2().then((progressData2) => {
+              sessionStorage.setItem(
+                "onboardingVisited",
+                JSON.stringify(progressData2.completedPages)
+              );
+            });
+          }
+          storedVisited2 = JSON.parse(
+            sessionStorage.getItem("onboardingVisited") || "[]"
+          );
+          let path = it.url;
+          let cleanUrl = path.startsWith("/") ? path.slice(1) : path;
+          if (!storedVisited2.includes(cleanUrl) && cleanUrlItems.includes(cleanUrl)) {
+            storedVisited2.push(cleanUrl);
+            sessionStorage.setItem(
+              "onboardingVisited",
+              JSON.stringify(storedVisited2)
+            );
+          }
+          if (storedVisited2.length >= checklistItems.length) {
+            sessionStorage.setItem("CompletedAll", "true");
+          }
+          uploadVisitedPagesInBackground(storedVisited2, true);
+          updateProgress(storedVisited2.length);
+          updateProgress2(storedVisited2.length);
+          updateUIFromVisited();
+          if (storedVisited2.length >= checklistItems.length) {
+            sessionStorage.setItem("CompletedAll", "true");
+          }
+        }
+        window.location.href = it.url;
+      });
+    });
+  } else {
+    if (!sessionStorage.getItem("c")) sessionStorage.setItem("c", 1);
+    let c = parseInt(sessionStorage.getItem("c") || "1");
+    items.forEach((it, index) => {
+      const stepEl = label.querySelector(`#${it.id}`);
+      if (!stepEl) return;
+      const startSelect = stepEl.querySelector(".start-select");
+      startSelect.style.display = "none";
+      stepEl.addEventListener("click", () => {
+        if (index < c) {
+          alert("You have already completed this step!");
+          c--;
+        }
+        if (index != c) {
+          alert("Please complete the previous steps first!");
+          return;
+        }
+        sessionStorage.setItem("c", c + 1);
+        items.forEach((inner) => {
+          const el = label.querySelector(`#${inner.id}`);
+          if (el) {
+            const sel = el.querySelector(".start-select");
+            if (sel) sel.style.display = "none";
+          }
+        });
+        startSelect.style.display = "block";
+        activeStepId = it.id;
+        sessionStorage.setItem("activeStepId", activeStepId);
+        let path = it.url;
+        let cleanUrl = path.startsWith("/") ? path.slice(1) : path;
+        if (!storedVisited2.includes(cleanUrl) && cleanUrlItems.includes(cleanUrl)) {
+          storedVisited2.push(cleanUrl);
+          sessionStorage.setItem(
+            "onboardingVisited",
+            JSON.stringify(storedVisited2)
+          );
+        }
+        uploadVisitedPagesInBackground(storedVisited2, true);
+        updateProgress(storedVisited2.length);
+        updateProgress2(storedVisited2.length);
+        updateUIFromVisited();
+        if (storedVisited2.length >= checklistItems.length) {
+          sessionStorage.setItem("CompletedAll", "true");
+        }
+        window.location.href = it.url;
+      });
+    });
+  }
+  showBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    label.style.display = "block";
+    label.style.pointerEvents = "auto";
+    closeBtn.style.display = "flex";
+    showBtn.style.display = "none";
+    sessionStorage.setItem("onboardingVisible", "true");
+    positionCloseBtn();
+    requestAnimationFrame(() => {
+      label.style.opacity = "1";
+    });
+  });
+  closeBtn.addEventListener("click", (ev) => {
+    ev.stopPropagation();
+    label.style.opacity = "0";
+    label.style.pointerEvents = "none";
+    closeBtn.style.display = "none";
+    showBtn.style.display = "block";
+  });
+  label.addEventListener(
+    "mouseenter",
+    () => label.style.transform = "scale(1.02)"
+  );
+  label.addEventListener(
+    "mouseleave",
+    () => label.style.transform = "scale(1)"
+  );
+  label.addEventListener("click", () => {
+    const getStarted = document.querySelector("button#get-started");
+    if (getStarted) getStarted.click();
+  });
+  if (sessionStorage.getItem("onboardingVisible") === "true") {
+    label.style.display = "block";
+    label.style.pointerEvents = "auto";
+    closeBtn.style.display = "flex";
+    showBtn.style.display = "none";
+    sessionStorage.setItem("onboardingVisible", "true");
+    positionCloseBtn();
+  } else {
+    showBtn.style.display = "block";
+    label.style.display = "none";
+  }
+  label.style.opacity = "1";
+  updateUIFromVisited();
+  window.addEventListener("resize", () => {
+    if (label.style.display !== "none") positionCloseBtn();
+  });
+}
+function evaluateRule(rule, context) {
+  const leftValue = context[rule.name];
+  const operator = rule.operator;
+  const rightValue = rule.values;
+  console.log("leftValue", leftValue);
+  console.log("operator", operator);
+  console.log("rightValue", rightValue);
+  if (leftValue === void 0) return false;
+  switch (operator) {
+    case "in":
+      return Array.isArray(rightValue) && rightValue.includes(leftValue);
+    case "not_in":
+      return Array.isArray(rightValue) && !rightValue.includes(leftValue);
+    case "equals":
+      return leftValue === rightValue;
+    case "not_equals":
+      return leftValue != rightValue;
+    case "greater_than":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() > new Date(rightValue).getTime();
+      else
+        return leftValue > rightValue;
+    case "less_than":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() < new Date(rightValue).getTime();
+      else
+        return leftValue < rightValue;
+    case "greater_or_equals":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() >= new Date(rightValue).getTime();
+      else
+        return leftValue >= rightValue;
+    case "less_or_equals":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() <= new Date(rightValue).getTime();
+      else
+        return leftValue <= rightValue;
+    case "is_empty":
+      if (leftValue == "")
+        return true;
+      else
+        return false;
+    case "is_not_empty":
+      if (leftValue != "")
+        return true;
+      else
+        return false;
+    default:
+      return false;
+  }
+}
+function evaluateRules(rules, context) {
+  if (!Array.isArray(rules) || rules.length === 0) return true;
+  let finalResult = evaluateRule(rules[0], context);
+  for (let i = 1; i < rules.length; i++) {
+    console.log(finalResult);
+    const previousRule = rules[i - 1];
+    const currentResult = evaluateRule(rules[i], context);
+    switch (previousRule.next) {
+      case "and":
+        finalResult = finalResult && currentResult;
+        break;
+      case "or":
+        finalResult = finalResult || currentResult;
+        break;
+      default:
+        finalResult = currentResult;
+    }
+  }
+  return finalResult;
+}
+async function Checklist(workspace_id, obj) {
+  window.addEventListener("locationchange", async () => {
+    window.workspace_id = workspace_id;
+    window.userid = obj.userid;
+    let user_var = obj.userid;
+    window.sign_up_at = obj.sign_up_at;
+    window.role = obj.role;
+    window.email = obj.email;
+    console.log("");
+    try {
+      let doesRouteMatch2 = function(routes) {
+        if (!Array.isArray(routes)) return true;
+        const currentPath2 = window.location.pathname.toLowerCase();
+        console.log("Current Path:", currentPath2);
+        return routes.some((route) => {
+          if (!route) return false;
+          let pattern;
+          const normalizedRoute = route.toLowerCase().replace(/\/$/, "");
+          if (normalizedRoute.includes("[dynamic]")) {
+            const base = normalizedRoute.split("[dynamic]")[0].replace(/\/$/, "");
+            console.log("Base:", base);
+            pattern = new RegExp(`^${escapeRegex2(base)}(/.*)?$`);
+          } else {
+            pattern = new RegExp(`^${escapeRegex2(normalizedRoute)}$`);
+          }
+          return pattern.test(currentPath2);
+        });
+      }, escapeRegex2 = function(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      }, buildContext2 = function(obj2) {
+        return {
+          userid: obj2.userid,
+          role: obj2.role,
+          sign_up_at: obj2.sign_up_at,
+          email: obj2.email,
+          first_name: obj2.first_name,
+          last_name: obj2.last_name
+        };
+      };
+      var doesRouteMatch = doesRouteMatch2, escapeRegex = escapeRegex2, buildContext = buildContext2;
+      const res = await fetch(
+        `https://demoapi.rivia.ai/checklist_by_workspace2/${workspace_id}`,
+        {
+          method: "GET",
+          headers: { "Content-Type": "application/json" }
+        }
+      );
+      if (!res.ok) {
+        console.warn("\u274C Failed to fetch checklist");
+        return;
+      }
+      const data = await res.json();
+      const checklists = data.checklist || [];
+      if (!Array.isArray(checklists) || checklists.length === 0) return;
+      const currentPath = window.location.pathname;
+      const matchedChecklist = checklists.find((chk) => {
+        const routes = chk?.targeting_data?.routes;
+        if (!chk?.publish)
+          return false;
+        if (!chk?.targeting_data?.display)
+          return !doesRouteMatch2(routes, currentPath);
+        else
+          return doesRouteMatch2(routes, currentPath);
+      });
+      if (!matchedChecklist) {
+        if (window.showBtn && window.showBtn.parentNode) {
+          window.showBtn.remove();
+        }
+        if (window.label && window.label.parentNode) {
+          window.label.remove();
+        }
+        console.log("No checklist applicable for this route");
+        return;
+      }
+      console.log("userid", obj.userid);
+      console.log("matched ch", matchedChecklist);
+      const rules = matchedChecklist?.targeting_data?.custom_rules || [];
+      console.log("rules", rules);
+      const context = buildContext2(obj);
+      const shouldShow = evaluateRules(rules, context);
+      if (!shouldShow) {
+        return;
+      }
+      const {
+        checklist_id,
+        title = "Untitled Checklist",
+        subtitle = "Describe the purpose of this checklist...",
+        items = [],
+        completion = 0,
+        branding_data: cssConfig = {},
+        targeting_data: targetingData = {},
+        customCSS = ""
+      } = matchedChecklist;
+      const fullData = {
+        checklist: matchedChecklist,
+        cssConfig,
+        targetingData,
+        customCSS
+      };
+      sessionStorage.removeItem("onboardingVisited");
+      Onboarding(
+        title,
+        subtitle,
+        completion,
+        items,
+        cssConfig,
+        targetingData,
+        customCSS,
+        user_var,
+        checklist_id
+      );
+      return matchedChecklist;
+    } catch (err) {
+      console.warn("Checklist error:", err.message);
+      throw err;
+    }
+  });
+  (function() {
+    const pushState = history.pushState;
+    const replaceState = history.replaceState;
+    history.pushState = function() {
+      pushState.apply(history, arguments);
+      window.dispatchEvent(new Event("locationchange"));
+    };
+    history.replaceState = function() {
+      replaceState.apply(history, arguments);
+      window.dispatchEvent(new Event("locationchange"));
+    };
+    window.addEventListener("popstate", () => {
+      window.dispatchEvent(new Event("locationchange"));
+    });
+    window.dispatchEvent(new Event("locationchange"));
+  })();
+}
+var rivia_default = Checklist;
+
+// src/utils/rivia-tour.js
+var RIVIA_TOUR = function() {
+  const STATE = {
+    picking: false,
+    lastSelector: null,
+    tips: [],
+    // {id, selector, title, content, placement}
+    tourIndex: 0,
+    tour_id: null,
+    tours: [],
+    // all tours fetched from backend
+    scrollAdvanceActive: false,
+    // Track if scroll advance is active
+    publish: false,
+    // Track if tour is published
+    is_completed: false,
+    // Track if tour is completed
+    user_var: "Guest_User",
+    url: ""
+  };
+  if (typeof window === "undefined") return;
+  const tourStateStr = window.sessionStorage.getItem("rivia_tour_state");
+  const hasActiveTour = tourStateStr !== null;
+  let user_var1 = "Guest_User";
+  if (hasActiveTour) {
+    console.log("\u{1F7E2} Active tour detected! Restoring state...");
+    setTimeout(() => {
+      restoreTourState();
+    }, 300);
+    return;
+  }
+  function restoreTourState() {
+    if (typeof window === "undefined") return;
+    const tourStateStr2 = window.sessionStorage.getItem("rivia_tour_state");
+    if (!tourStateStr2 || STATE.tour_id) {
+      return;
+    }
+    ;
+    try {
+      const tourState = JSON.parse(tourStateStr2);
+      console.log("Restoring tour state:", tourState);
+      STATE.tourIndex = tourState.tourIndex;
+      STATE.tour_id = tourState.tourId;
+      STATE.isPreviewMode = tourState.isPreviewMode;
+      STATE.tips = tourState.tips;
+      user_var1 = tourState.user_var1 || "Guest_User";
+      STATE.title = tourState.title || "Untitled Tour";
+      STATE.publish = tourState.publish || false;
+      window.sessionStorage.removeItem("rivia_tour_state");
+      if (STATE.tips?.length > 0) {
+        setTimeout(() => {
+          showStep(STATE.tourIndex, STATE.isPreviewMode);
+        }, 500);
+      }
+    } catch (error) {
+      console.warn("Error restoring tour state:", error);
+      window.sessionStorage.removeItem("rivia_tour_state");
+    }
+  }
+  async function createTooltip({
+    id,
+    selector,
+    title,
+    content,
+    placement = "auto",
+    nextUrl = "",
+    isPreview = false,
+    basic_showArrow = true,
+    card_header = true,
+    card_footer = true,
+    card_back_button = false,
+    card_next_button = true,
+    card_skip_button = false
+  }) {
+    const anchor = await findBySelector(selector);
+    if (!anchor) return null;
+    const tip = document.createElement("div");
+    tip.dataset.riviaTipId = id;
+    const tipStyle = isPreview ? `
+    position: absolute;
+    min-width: 360px;
+    max-width: 420px;
+    min-height: 120px;
+    padding: 18px 20px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    color: #1a202c;
+    border-radius: 14px;
+    border: 1px solid rgba(37, 99, 235, 0.2);
+    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
+    font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    z-index: 2147483647;
+  ` : `
+    position: absolute;
+    min-width: 360px;
+    max-width: 420px;
+    min-height: 120px;
+    padding: 16px 18px;
+    background: #ffffffff;
+    color: #0d0c0cff;
+    border-radius: 12px;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+    font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    z-index: 2147483647;
+  `;
+    tip.style.cssText = tipStyle;
+    const arrow = document.createElement("div");
+    const arrowStyle = isPreview ? `
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    border: 1px solid rgba(37, 99, 235, 0.2);
+    transform: rotate(45deg);
+    display: ${basic_showArrow ? "block" : "none"};
+  ` : `
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background: #ffffffff;
+    transform: rotate(45deg);
+    display: ${basic_showArrow ? "block" : "none"};
+  `;
+    arrow.style.cssText = arrowStyle;
+    const h = document.createElement("input");
+    h.value = title || "Tooltip";
+    const titleStyle = isPreview ? "font-weight:700; margin-bottom:10px; font-size:16px; width: 100%; padding: 0; border: none; background: transparent; color: #1a202c; outline: none;" : "font-weight:600; margin-bottom:8px; font-size:15px; width: 100%; padding: 4px; border: 1px solid #e5e7eb; border-radius: 4px;";
+    h.style.cssText = titleStyle;
+    h.placeholder = "Enter title";
+    h.readOnly = isPreview;
+    h.style.display = card_header ? "block" : "none";
+    const p = document.createElement("textarea");
+    p.value = content || "";
+    const contentStyle = isPreview ? "font-size:13px; line-height:1.6; width: 100%; min-height: 60px; padding: 0; border: none; background: transparent; color: #4a5568; resize: none; outline: none; font-family: inherit;" : "font-size:13px; line-height:1.5; width: 100%; min-height: 60px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 4px; resize: vertical;";
+    p.style.cssText = contentStyle;
+    p.placeholder = "Enter description";
+    p.readOnly = isPreview;
+    p.style.display = card_footer ? "block" : "none";
+    h.contentEditable = !isPreview;
+    p.contentEditable = !isPreview;
+    if (!isPreview) {
+      setTimeout(() => h.focus(), 50);
+    }
+    const controls = document.createElement("div");
+    controls.style.cssText = `
+      display: flex;
+      justify-content: flex-start; 
+      align-items: center;       
+      width: 100%;
+      margin-top: 8px;
+    `;
+    const closeBtn = document.createElement("button");
+    closeBtn.textContent = "Save";
+    closeBtn.style.cssText = `
+      padding: 6px 12px;
+      height: 32px;
+      line-height: 1;
+      border-radius: 6px;
+      border: none;
+      background: #10b981;
+      color: white;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s;
+      display: ${isPreview ? "none" : "block"};
+    `;
+    closeBtn.onclick = () => {
+      const newTitle = h.value || "Tooltip";
+      const newContent = p.value || "";
+      const tipIndex = STATE.tips.findIndex((t) => t.id === id);
+      if (tipIndex !== -1) {
+        STATE.tips[tipIndex].title = newTitle;
+        STATE.tips[tipIndex].content = newContent;
+        if (STATE.tour_id) {
+          putTips();
+        } else {
+          saveTips();
+        }
+        toast("Changes saved!");
+        setTimeout(() => {
+          tip.remove();
+        }, 500);
+      }
+    };
+    controls.appendChild(closeBtn);
+    const contentWrapper = document.createElement("div");
+    contentWrapper.style.cssText = "margin-bottom: 16px;";
+    if (card_header) {
+      contentWrapper.appendChild(h);
+      contentWrapper.appendChild(document.createElement("br"));
+    }
+    if (card_footer) {
+      contentWrapper.appendChild(p);
+    }
+    tip.appendChild(contentWrapper);
+    tip.appendChild(controls);
+    tip.appendChild(arrow);
+    document.body.appendChild(tip);
+    positionTooltip(anchor, tip, arrow, placement);
+    const reposition = () => positionTooltip(anchor, tip, arrow, placement);
+    const repositionObserver = new ResizeObserver(reposition);
+    repositionObserver.observe(tip);
+    window.addEventListener("scroll", reposition, { passive: true });
+    window.addEventListener("resize", reposition);
+    const obs = new MutationObserver(() => {
+      if (!document.body.contains(tip)) {
+        window.removeEventListener("resize", reposition);
+        window.removeEventListener("scroll", reposition);
+        if (repositionObserver) repositionObserver.disconnect();
+        obs.disconnect();
+      }
+    });
+    obs.observe(document.body, { childList: true, subtree: true });
+    return tip;
+  }
+  function positionTooltip(anchor, tip, arrow, placement, step) {
+    const a = anchor.getBoundingClientRect();
+    const t = tip.getBoundingClientRect();
+    let place = placement;
+    if (place === "auto") {
+      const spaces = {
+        top: a.top,
+        bottom: window.innerHeight - a.bottom,
+        left: a.left,
+        right: window.innerWidth - a.right
+      };
+      place = Object.entries(spaces).sort((x, y) => y[1] - x[1])[0][0];
+    }
+    let top = 0, left = 0, gap = 8;
+    if (place === "top") {
+      top = a.top - t.height - gap;
+      left = a.left + (a.width - t.width) / 2;
+      Object.assign(arrow.style, {
+        left: t.width / 2 - 5 + "px",
+        top: t.height - 5 + "px"
+      });
+    } else if (place === "bottom") {
+      top = a.bottom + gap;
+      left = a.left + (a.width - t.width) / 2;
+      Object.assign(arrow.style, { left: t.width / 2 - 5 + "px", top: "-5px" });
+    } else if (place === "left") {
+      top = a.top + (a.height - t.height) / 2;
+      left = a.left - t.width - gap;
+      Object.assign(arrow.style, {
+        top: t.height / 2 - 5 + "px",
+        left: t.width - 5 + "px"
+      });
+    } else {
+      top = a.top + (a.height - t.height) / 2;
+      left = a.right + gap;
+      Object.assign(arrow.style, {
+        top: t.height / 2 - 5 + "px",
+        left: "-5px"
+      });
+    }
+    left = Math.max(8, Math.min(left, window.innerWidth - t.width - 8));
+    top = Math.max(8, Math.min(top, window.innerHeight - t.height - 8));
+    tip.style.left = left + window.scrollX + "px";
+    tip.style.top = top + window.scrollY + "px";
+  }
+  function uploadVisitedPagesInBackground(tourId, user_var, tourIndex) {
+    console.log("Uploading visited pages in background for tour ID:", tourIndex, "and user_var:", user_var1);
+    let user_var2 = user_var1;
+    const backendUrl22 = `https://demoapi.rivia.ai/tours_clients/${tourId}`;
+    try {
+      const payload = {
+        name: user_var2,
+        tourIndex
+      };
+      fetch(backendUrl22, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify(payload),
+        keepalive: true
+      }).then((res) => {
+        if (res.status === 404) {
+          console.warn("Invalid tour id");
+        }
+      }).catch((err) => {
+      });
+    } catch (err) {
+    }
+  }
+  async function loadTips(tourId, user_var) {
+    if (!user_var) {
+      return;
+    }
+    user_var1 = user_var;
+    STATE.tour_id = tourId;
+    if (sessionStorage.getItem("rivia_tour_state"))
+      return;
+    console.log("Loading tips for tour ID:", tourId, "and user_var:", user_var1);
+    try {
+      if (!tourId) console.warn("Tour ID is required");
+      const res = await fetch(`https://demoapi.rivia.ai/tours2/${tourId}`, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" }
+      });
+      if (!res.ok) {
+        if (res.status === 404) {
+          console.warn("Invalid tour id");
+        }
+        return;
+      }
+      const data = await res.json();
+      STATE.tips = data && data.tour && Array.isArray(data.tour.steps) ? data.tour.steps : [];
+      STATE.publish = data.tour.publish;
+      STATE.url = data.tour.url;
+      const stripTrailing = (p) => p.replace(/\/+$/, "");
+      console.log("STATE.url", STATE.url);
+      console.log("window.location.pathname", window.location.href);
+      console.log("user_var", user_var);
+      console.log("data.tour?.user_data?.[user_var],", data.tour?.user_data?.[user_var]);
+      if (!data.tour?.user_data?.[user_var]) {
+        uploadVisitedPagesInBackground(tourId, user_var, 0);
+      } else {
+        STATE.tourIndex = data.tour.user_data[user_var].tourIndex || 0;
+        console.log("STATE.tourIndex ", STATE.tourIndex);
+      }
+      STATE.is_completed = data.tour.user_data && data.tour.user_data[user_var] && data.tour.user_data[user_var].is_completed ? data.tour.user_data[user_var].is_completed : false;
+      if (STATE.is_completed) {
+        return;
+      }
+      console.log(`Loaded tips for tour ${tourId}:`, STATE.tips);
+      return STATE.tips;
+    } catch (err) {
+      console.warn("Invalid tour id ", err);
+      STATE.tips = [];
+      return STATE.tips;
+    }
+  }
+  function getStepUrlInfo(step) {
+    if (!step) return null;
+    const targetUrl = step.targetUrl || "All pages";
+    const isAvailable = isStepAvailableOnCurrentPage(step);
+    return {
+      targetUrl,
+      isAvailable,
+      displayText: isAvailable ? "\u2713 On this page" : `\u{1F4CD} Go to: ${targetUrl}`
+    };
+  }
+  async function showStep(i, isPreview = true) {
+    uploadVisitedPagesInBackground(STATE.tour_id, user_var1, i);
+    console.log("Showing step", i, "of", STATE.tips.length);
+    document.querySelectorAll("[data-rivia-tip-id]").forEach((n) => n.remove());
+    const step = STATE.tips[i];
+    if (!step) return;
+    STATE.tourIndex = i;
+    updateUrlStatus();
+    cleanupAllOverlays();
+    if (step.card_type === "welcome") {
+      if (isPreview) {
+        await showWelcomeCardPreview(step, i);
+      } else {
+        showWelcomeCardEditModal(i);
+      }
+      return;
+    }
+    if (step.card_type === "modal_dialog") {
+      if (isPreview) {
+        await showModalDialogPreview(step, i);
+      } else {
+        showModalDialogEditModal(i);
+      }
+      return;
+    }
+    if (step.card_type === "feedback") {
+      if (isPreview) {
+        await showFeedbackCardPreview(step, i);
+      } else {
+        showFeedbackCardEditModal(i);
+      }
+      return;
+    }
+    if (step.card_type === "video_explainer") {
+      if (isPreview) {
+        console.log("Preview mode: Showing video explainer for step:", step.id);
+        const targetElement = await findBySelector(step.selector);
+        if (targetElement) {
+          try {
+            targetElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+          } catch (e) {
+            targetElement.scrollIntoView(true);
+          }
+          targetElement.setAttribute("data-rivia-highlight", "true");
+          targetElement.style.outline = "3px solid #2563eb";
+          targetElement.style.outlineOffset = "2px";
+          targetElement.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
+        }
+        setTimeout(async () => {
+          const highlightedElement = document.querySelector('[data-rivia-highlight="true"]');
+          if (!highlightedElement && targetElement) {
+            targetElement.setAttribute("data-rivia-highlight", "true");
+          }
+          const videoUI = await createVideoUI({ ...step, isPreview: true });
+          if (videoUI) {
+            console.log("Video UI created successfully with built-in navigation buttons");
+          } else {
+            console.warn("Failed to create video UI for preview");
+          }
+        }, 600);
+      } else {
+        console.log("Edit mode: Showing video explainer for step:", step.id);
+        console.log("Step selector:", step.selector);
+        if (step.selector) {
+          const targetElement = await findBySelector(step.selector);
+          console.log("Found target element:", targetElement, "for selector:", step.selector);
+          if (targetElement) {
+            console.log("Element found, scrolling into view...");
+            try {
+              targetElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+            } catch (e) {
+              console.warn("ScrollIntoView error:", e);
+              targetElement.scrollIntoView(true);
+            }
+            targetElement.setAttribute("data-rivia-highlight", "true");
+            targetElement.style.outline = "3px solid #2563eb";
+            targetElement.style.outlineOffset = "2px";
+            targetElement.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
+            console.log("Element highlighted with blue outline");
+            if (step.target_animation && step.target_animation !== "none") {
+              previewAnimation(step.selector, step.target_animation);
+            }
+            if (step.basic_backdrop && step.basic_backdrop !== "none") {
+              previewBackdrop(step.selector, step.basic_backdrop);
+            }
+          } else {
+            console.warn("Target element not found for selector:", step.selector);
+          }
+        } else {
+          console.warn("No selector found in step:", step);
+        }
+        setTimeout(async () => {
+          console.log("Creating video UI after scroll delay...");
+          const highlightedElement = document.querySelector('[data-rivia-highlight="true"]');
+          console.log("Highlighted element for video positioning:", highlightedElement);
+          const videoUI = await createVideoUI({ ...step, isPreview: false });
+          if (videoUI) {
+            console.log("Video UI created successfully");
+            if (typeof showPointerCardPanel === "function") {
+              console.log("Showing pointer card panel for selector:", step.selector);
+              const stepIndex = STATE.tips.findIndex((t) => t === step);
+              showPointerCardPanel(step.selector, stepIndex);
+            }
+          } else {
+            console.warn("Failed to create video UI");
+          }
+        }, 600);
+      }
+      return;
+    }
+    if (isPreview) {
+      const el = await findBySelector(step.selector);
+      if (el) {
+        try {
+          el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+        } catch (e) {
+          el.scrollIntoView(true);
+        }
+        document.querySelectorAll("[data-rivia-highlight]").forEach((n) => {
+          n.removeAttribute("data-rivia-highlight");
+          n.style.outline = "";
+          n.style.outlineOffset = "";
+          n.style.backgroundColor = "";
+        });
+        el.setAttribute("data-rivia-highlight", "true");
+        el.style.outline = "3px solid #2563eb";
+        el.style.outlineOffset = "2px";
+        el.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
+        if (step.target_animation && step.target_animation !== "none") {
+          previewAnimation(step.selector, step.target_animation);
+        }
+        if (step.basic_backdrop && step.basic_backdrop !== "none") {
+          previewBackdrop(step.selector, step.basic_backdrop);
+        } else {
+          const backdropOverlay = document.getElementById("rivia-backdrop-overlay");
+          if (backdropOverlay) {
+            backdropOverlay.remove();
+          }
+        }
+      }
+      setTimeout(async () => {
+        const tip2 = await createTooltip({ ...step, isPreview });
+        if (tip2) {
+          await attachNavigationButtons(tip2, i, isPreview);
+          try {
+            tip2.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+          } catch (e) {
+            tip2.scrollIntoView(true);
+          }
+        }
+      }, 600);
+      return;
+    }
+    if (!isPreview && step.selector && !step.card_type) {
+      const el = await findBySelector(step.selector);
+      if (el) {
+        try {
+          el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+        } catch (e) {
+          el.scrollIntoView(true);
+        }
+        document.querySelectorAll("[data-rivia-highlight]").forEach((n) => {
+          n.removeAttribute("data-rivia-highlight");
+          n.style.outline = "";
+          n.style.outlineOffset = "";
+          n.style.backgroundColor = "";
+        });
+        el.setAttribute("data-rivia-highlight", "true");
+        el.style.outline = "3px solid #2563eb";
+        el.style.outlineOffset = "2px";
+        el.style.backgroundColor = "rgba(37, 99, 235, 0.1)";
+      }
+    }
+    const tip = await createTooltip({ ...step, isPreview });
+    console.log("nextUrl for step", step.nextUrl);
+    if (!tip) {
+      const stepUrlInfo = getStepUrlInfo(step);
+      if (stepUrlInfo && !stepUrlInfo.isAvailable) {
+        toast("\u{1F4CD} Step element not found on this URL. The tooltip is designed for: " + stepUrlInfo.targetUrl, true);
+        console.warn("\u{1F4CD} Step element not found. Target URL:", stepUrlInfo.targetUrl, "Current URL:", window.location.href);
+      } else {
+        toast("\u{1F4CD} Tooltip element not found on this page", true);
+        console.warn("\u{1F4CD} Tooltip element not found for selector:", step.selector);
+      }
+      if (step.nextUrl && step.nextUrl.trim()) {
+        const navUrl = addTourParamsToUrl(step.nextUrl, STATE.tour_id);
+        sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+          tourIndex: STATE.tourIndex,
+          tourId: STATE.tour_id,
+          user_var1,
+          isPreviewMode: true,
+          // Use edit mode when navigating from tooltip
+          tips: STATE.tips,
+          title: STATE.title || "Untitled Tour",
+          publish: STATE.publish
+        }));
+      } else {
+        nextStep();
+      }
+      return;
+    }
+    await attachNavigationButtons(tip, i, isPreview);
+    setTimeout(() => {
+      try {
+        tip.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      } catch (e) {
+        tip.scrollIntoView(true);
+      }
+    }, 100);
+  }
+  async function createVideoUI(step) {
+    console.log("Creating video UI for step:", step);
+    const anchor = await findBySelector(step.selector);
+    console.log("Found anchor:", anchor);
+    if (!anchor) {
+      console.warn("Anchor not found for selector:", step.selector);
+      return null;
+    }
+    const videoContainer = document.createElement("div");
+    videoContainer.dataset.riviaTipId = step.id;
+    const width = step.video_width || 400;
+    const height = step.video_height || 300;
+    videoContainer.style.cssText = `
+      position: absolute;
+      width: ${width}px;
+      height: ${height}px;
+      background: #ffffff;
+      border-radius: 20px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      z-index: 2147483647;
+      display: flex;
+      flex-direction: column;
+      border: 1px solid rgba(255, 255, 255, 0.8);
+    `;
+    const header = document.createElement("div");
+    header.style.cssText = `
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      font-weight: 700;
+      font-size: 15px;
+      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+    `;
+    const titleSpan = document.createElement("span");
+    titleSpan.textContent = step.title || "Video Explainer";
+    header.appendChild(titleSpan);
+    if (!step.isPreview) {
+      const settingsBtn = document.createElement("button");
+      settingsBtn.innerHTML = "\u2699\uFE0F";
+      settingsBtn.style.cssText = `
+        background: rgba(255, 255, 255, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        border-radius: 6px;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        color: white;
+        font-size: 16px;
+        transition: all 0.2s;
+      `;
+      settingsBtn.onmouseover = () => settingsBtn.style.background = "rgba(255, 255, 255, 0.3)";
+      settingsBtn.onmouseout = () => settingsBtn.style.background = "rgba(255, 255, 255, 0.2)";
+      settingsBtn.onclick = () => {
+        const existingPanel = document.getElementById("rivia-video-settings-panel");
+        if (existingPanel) {
+          existingPanel.remove();
+        } else {
+          showVideoSettings(step, videoContainer, settingsBtn);
+        }
+      };
+      header.appendChild(settingsBtn);
+    }
+    videoContainer.appendChild(header);
+    const playerArea = document.createElement("div");
+    playerArea.style.cssText = `
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      position: relative;
+      overflow: hidden;
+    `;
+    if (step.video_url) {
+      const videoId = step.video_url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/)?.[1];
+      if (videoId) {
+        const thumbnail = document.createElement("img");
+        thumbnail.src = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
+        thumbnail.style.cssText = `
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          opacity: 0.9;
+          filter: brightness(0.95);
+        `;
+        thumbnail.onerror = () => {
+          thumbnail.src = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
+        };
+        playerArea.appendChild(thumbnail);
+        console.log("Video thumbnail loaded for video ID:", videoId);
+      } else {
+        console.warn("Could not extract video ID from URL:", step.video_url);
+      }
+    } else {
+      console.warn("No video URL provided for step:", step.id);
+    }
+    const playButton = document.createElement("button");
+    playButton.innerHTML = "\u25B6";
+    playButton.style.cssText = `
+      width: 90px;
+      height: 90px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+      border: 4px solid rgba(255, 255, 255, 0.3);
+      color: white;
+      font-size: 36px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.2);
+      position: relative;
+      z-index: 10;
+    `;
+    playButton.onmouseover = () => {
+      playButton.style.background = "linear-gradient(135deg, #ff5252 0%, #ff1744 100%)";
+      playButton.style.transform = "scale(1.15)";
+      playButton.style.boxShadow = "0 12px 35px rgba(255, 107, 107, 0.7), inset 0 -2px 5px rgba(0, 0, 0, 0.2)";
+    };
+    playButton.onmouseout = () => {
+      playButton.style.background = "linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)";
+      playButton.style.transform = "scale(1)";
+      playButton.style.boxShadow = "0 8px 25px rgba(255, 107, 107, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.2)";
+    };
+    playButton.onclick = () => {
+      if (step.video_url) {
+        const videoId = step.video_url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/)?.[1];
+        if (videoId) {
+          playerArea.innerHTML = "";
+          const iframe = document.createElement("iframe");
+          iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
+          iframe.style.cssText = `
+            width: 100%;
+            height: 100%;
+            border: none;
+            border-radius: 8px;
+          `;
+          iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
+          iframe.allowFullscreen = true;
+          playerArea.appendChild(iframe);
+        }
+      }
+    };
+    playerArea.appendChild(playButton);
+    videoContainer.appendChild(playerArea);
+    const footer = document.createElement("div");
+    footer.style.cssText = `
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+      gap: 12px;
+      border-top: 1px solid rgba(0, 0, 0, 0.05);
+    `;
+    const skipBtn = document.createElement("button");
+    skipBtn.textContent = "Skip";
+    skipBtn.style.cssText = `
+      padding: 10px 20px;
+      background: rgba(255, 255, 255, 0.6);
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      color: #333;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    `;
+    skipBtn.onmouseover = () => {
+      skipBtn.style.background = "rgba(255, 255, 255, 0.9)";
+      skipBtn.style.transform = "translateY(-2px)";
+      skipBtn.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.1)";
+    };
+    skipBtn.onmouseout = () => {
+      skipBtn.style.background = "rgba(255, 255, 255, 0.6)";
+      skipBtn.style.transform = "translateY(0)";
+      skipBtn.style.boxShadow = "none";
+    };
+    skipBtn.onclick = () => {
+      endTour();
+    };
+    footer.appendChild(skipBtn);
+    const nextBtn = document.createElement("button");
+    nextBtn.textContent = "Next";
+    nextBtn.style.cssText = `
+      padding: 10px 24px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      border-radius: 8px;
+      color: white;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+    `;
+    nextBtn.onmouseover = () => {
+      nextBtn.style.background = "linear-gradient(135deg, #5568d3 0%, #6a3a8f 100%)";
+      nextBtn.style.transform = "translateY(-2px)";
+      nextBtn.style.boxShadow = "0 6px 20px rgba(102, 126, 234, 0.6)";
+    };
+    nextBtn.onmouseout = () => {
+      nextBtn.style.background = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)";
+      nextBtn.style.transform = "translateY(0)";
+      nextBtn.style.boxShadow = "0 4px 15px rgba(102, 126, 234, 0.4)";
+    };
+    nextBtn.onclick = async () => {
+      STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+      if (STATE.tourIndex < STATE.tips.length) {
+        showStep(STATE.tourIndex, true);
+      } else {
+        endTour();
+      }
+    };
+    footer.appendChild(nextBtn);
+    videoContainer.appendChild(footer);
+    document.body.appendChild(videoContainer);
+    setTimeout(async () => {
+      try {
+        anchor.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+      } catch (e) {
+        anchor.scrollIntoView(true);
+      }
+      setTimeout(async () => {
+        const a = anchor.getBoundingClientRect();
+        const t = videoContainer.getBoundingClientRect();
+        let top = a.bottom + 8;
+        let left = a.left + (a.width - t.width) / 2;
+        left = Math.max(8, Math.min(left, window.innerWidth - t.width - 8));
+        top = Math.max(8, Math.min(top, window.innerHeight - t.height - 8));
+        videoContainer.style.left = left + window.scrollX + "px";
+        videoContainer.style.top = top + window.scrollY + "px";
+        console.log("Video UI positioned at:", { top, left, width, height });
+      }, 300);
+    }, 0);
+    return videoContainer;
+  }
+  async function previewAnimation(selector, animationType) {
+    try {
+      const element = document.querySelector(selector);
+      if (!element) {
+        console.warn("Element not found for selector:", selector);
+        return;
+      }
+      element.classList.remove(
+        "rivia-animate-flash",
+        "rivia-animate-rubber-band",
+        "rivia-animate-shake"
+      );
+      const animationMap = {
+        flash: "rivia-animate-flash",
+        "rubber band": "rivia-animate-rubber-band",
+        shake: "rivia-animate-shake",
+        none: null
+      };
+      const animClass = animationMap[animationType];
+      if (animClass) {
+        element.classList.add(animClass);
+        setTimeout(async () => {
+          element.classList.remove(animClass);
+        }, 2e3);
+      }
+    } catch (err) {
+      console.warn("Error previewing animation:", err);
+    }
+  }
+  async function findBySelector(selector) {
+    if (!selector) return null;
+    const retryInterval = 1e3;
+    while (true) {
+      try {
+        const element = document.querySelector(selector);
+        if (element) {
+          console.log("\u2713 Element found with selector:", selector);
+          return element;
+        } else {
+          console.warn("\u26A0\uFE0F Selector did not match any element, retrying:", selector);
+          const idMatch = selector.match(/#([\w-]+)/);
+          if (idMatch) {
+            const idElement = document.getElementById(idMatch[1]);
+            if (idElement) {
+              console.log("\u2713 Found element by ID fallback:", idMatch[1]);
+              return idElement;
+            }
+          }
+          const classMatch = selector.match(/\.([-\w]+)/);
+          if (classMatch) {
+            const classElement = document.querySelector("." + classMatch[1]);
+            if (classElement) {
+              console.log("\u2713 Found element by class fallback:", classMatch[1]);
+              return classElement;
+            }
+          }
+          await new Promise((resolve) => setTimeout(resolve, retryInterval));
+        }
+      } catch (e) {
+        console.warn("\u26A0\uFE0F Invalid selector, retrying:", selector, e);
+        const idMatch = selector.match(/#([\w-]+)/);
+        if (idMatch) {
+          const idElement = document.getElementById(idMatch[1]);
+          if (idElement) {
+            console.log("\u2713 Found element by ID after selector error:", idMatch[1]);
+            return idElement;
+          }
+        }
+        await new Promise((resolve) => setTimeout(resolve, retryInterval));
+      }
+    }
+  }
+  async function highlightElementBySelector(selector) {
+    const el = await findBySelector(selector);
+    if (!el) return;
+    try {
+      el.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest"
+      });
+    } catch (e) {
+      el.scrollIntoView(true);
+    }
+    const r = el.getBoundingClientRect();
+    try {
+      document.body.appendChild(overlay);
+    } catch (e) {
+    }
+    Object.assign(highlight.style, {
+      left: r.left + window.scrollX + "px",
+      top: r.top + window.scrollY + "px",
+      width: r.width + "px",
+      height: r.height + "px"
+    });
+  }
+  async function previewBackdrop(selector, backdropType) {
+    try {
+      let backdropOverlay = document.getElementById("rivia-backdrop-overlay");
+      if (backdropOverlay) {
+        backdropOverlay.remove();
+      }
+      if (backdropType === "none") {
+        return;
+      }
+      const targetElement = await findBySelector(selector);
+      if (!targetElement) return;
+      const targetRect = targetElement.getBoundingClientRect();
+      const padding = 8;
+      if (backdropType === "boxed") {
+        const boxedOverlay = document.createElement("div");
+        boxedOverlay.id = "rivia-backdrop-overlay";
+        boxedOverlay.style.cssText = `
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 2147483644;
+          pointer-events: none;
+          background: rgba(240, 240, 245, 0.3);
+          backdrop-filter: blur(3px);
+        `;
+        const boxHighlight = document.createElement("div");
+        boxHighlight.style.cssText = `
+          position: fixed;
+          left: ${targetRect.left - padding}px;
+          top: ${targetRect.top - padding}px;
+          width: ${targetRect.width + padding * 2}px;
+          height: ${targetRect.height + padding * 2}px;
+          border: 2px solid #3b82f6;
+          border-radius: 8px;
+          background: rgba(59, 130, 246, 0.08);
+          pointer-events: none;
+          z-index: 2147483645;
+          box-shadow: 0 0 0 9999px rgba(240, 240, 245, 0.3);
+        `;
+        document.body.appendChild(boxedOverlay);
+        document.body.appendChild(boxHighlight);
+        const updateBoxed = () => {
+          const newRect = targetElement.getBoundingClientRect();
+          boxHighlight.style.left = `${newRect.left - padding}px`;
+          boxHighlight.style.top = `${newRect.top - padding}px`;
+          boxHighlight.style.width = `${newRect.width + padding * 2}px`;
+          boxHighlight.style.height = `${newRect.height + padding * 2}px`;
+        };
+        window.addEventListener("scroll", updateBoxed, { passive: true });
+        window.addEventListener("resize", updateBoxed);
+        boxedOverlay.updateBackdrop = updateBoxed;
+        return;
+      }
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.id = "rivia-backdrop-overlay";
+      svg.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2147483644;
+        pointer-events: none;
+      `;
+      const defs = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "defs"
+      );
+      const mask = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "mask"
+      );
+      mask.id = "rivia-backdrop-mask";
+      const rect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      );
+      rect.setAttribute("width", "100%");
+      rect.setAttribute("height", "100%");
+      rect.setAttribute("fill", "white");
+      mask.appendChild(rect);
+      const clearRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      );
+      clearRect.setAttribute("x", Math.max(0, targetRect.left - padding));
+      clearRect.setAttribute("y", Math.max(0, targetRect.top - padding));
+      clearRect.setAttribute("width", targetRect.width + padding * 2);
+      clearRect.setAttribute("height", targetRect.height + padding * 2);
+      clearRect.setAttribute("fill", "black");
+      clearRect.setAttribute("rx", "8");
+      mask.appendChild(clearRect);
+      defs.appendChild(mask);
+      svg.appendChild(defs);
+      const overlayColor = backdropType === "light overlay" ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.7)";
+      const maskedRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      );
+      maskedRect.setAttribute("width", "100%");
+      maskedRect.setAttribute("height", "100%");
+      maskedRect.setAttribute("fill", overlayColor);
+      maskedRect.setAttribute("mask", "url(#rivia-backdrop-mask)");
+      svg.appendChild(maskedRect);
+      document.body.appendChild(svg);
+      const updateBackdrop = () => {
+        const newRect = targetElement.getBoundingClientRect();
+        clearRect.setAttribute("x", Math.max(0, newRect.left - padding));
+        clearRect.setAttribute("y", Math.max(0, newRect.top - padding));
+        clearRect.setAttribute("width", newRect.width + padding * 2);
+        clearRect.setAttribute("height", newRect.height + padding * 2);
+      };
+      window.addEventListener("scroll", updateBackdrop, { passive: true });
+      window.addEventListener("resize", updateBackdrop);
+      svg.updateBackdrop = updateBackdrop;
+    } catch (err) {
+      console.warn("Error previewing backdrop:", err);
+    }
+  }
+  async function showWelcomeCardPreview(step, stepIndex) {
+    if (!step) {
+      console.warn("Step not found for preview");
+      return;
+    }
+    console.log("Showing welcome card preview for step:", step);
+    cleanupAllOverlays();
+    document.querySelectorAll('[id*="rivia-welcome-preview"]').forEach((el) => el.remove());
+    document.querySelectorAll('[id*="rivia-backdrop"]').forEach((el) => el.remove());
+    const backdropStyle = step.basic_backdrop || "none";
+    if (backdropStyle !== "none") {
+      const backdropOverlay = document.createElement("div");
+      backdropOverlay.id = "rivia-welcome-preview-backdrop";
+      backdropOverlay.style.cssText = `
+        position: fixed;
+        inset: 0;
+        z-index: 2147483643;
+        pointer-events: none;
+      `;
+      if (backdropStyle === "boxed") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.1)";
+        backdropOverlay.style.border = "2px solid rgba(0, 0, 0, 0.2)";
+      } else if (backdropStyle === "light overlay") {
+        backdropOverlay.style.background = "rgba(255, 255, 255, 0.7)";
+        backdropOverlay.style.border = "none";
+      } else if (backdropStyle === "dark overlay") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.7)";
+        backdropOverlay.style.border = "none";
+      }
+      document.body.insertBefore(backdropOverlay, document.body.firstChild);
+    }
+    const overlay2 = document.createElement("div");
+    overlay2.id = "rivia-welcome-preview-overlay";
+    overlay2.style.cssText = `
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483644;
+    `;
+    const modal = document.createElement("div");
+    modal.id = "rivia-welcome-preview-modal";
+    const bgColor = step.welcome_bg_color || "#ffffff";
+    modal.style.cssText = `
+      background: ${bgColor};
+      border-radius: 12px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      max-width: 700px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      padding: 0;
+    `;
+    const headerSection = document.createElement("div");
+    const headerBgColor = step.welcome_header_bg_color || "#667eea";
+    const headerTextColor = step.welcome_header_text_color || "#ffffff";
+    const headerHeight = step.welcome_header_height || 80;
+    headerSection.style.cssText = `
+      background: ${headerBgColor};
+      padding: ${headerHeight / 2}px 30px;
+      color: ${headerTextColor};
+      border-radius: 12px 12px 0 0;
+      text-align: center;
+      min-height: ${headerHeight}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+    headerSection.id = "rivia-welcome-preview-header";
+    const headerText = document.createElement("h1");
+    headerText.textContent = step.title || "Welcome!";
+    headerText.style.cssText = `
+      margin: 0;
+      font-size: 32px;
+      font-weight: bold;
+      font-family: inherit;
+      color: ${headerTextColor};
+    `;
+    headerSection.appendChild(headerText);
+    modal.appendChild(headerSection);
+    const contentSection = document.createElement("div");
+    const footerPadding = step.welcome_footer_padding || 20;
+    const footerBgColor = step.welcome_footer_bg_color || "#ffffff";
+    const footerTextColor = step.welcome_footer_text_color || "#333333";
+    const footerHeight = step.welcome_footer_height || 60;
+    contentSection.style.cssText = `
+      padding: ${footerPadding}px 30px;
+      text-align: center;
+      background: ${footerBgColor};
+      color: ${footerTextColor};
+      min-height: ${footerHeight}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+    contentSection.id = "rivia-welcome-preview-content";
+    const descriptionText = document.createElement("p");
+    descriptionText.textContent = step.content || "Welcome message";
+    descriptionText.style.cssText = `
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6;
+      color: ${footerTextColor};
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      font-family: inherit;
+    `;
+    contentSection.appendChild(descriptionText);
+    modal.appendChild(contentSection);
+    const buttonSection = document.createElement("div");
+    buttonSection.style.cssText = `
+      display: flex;
+      gap: 12px;
+      padding: 20px 30px;
+      border-top: 1px solid #e5e7eb;
+      justify-content: flex-end;
+    `;
+    const skipBtn = document.createElement("button");
+    skipBtn.textContent = step.welcome_skip_label || "Skip";
+    skipBtn.style.cssText = `
+      padding: 8px 16px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      background: white;
+      color: #6b7280;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      outline: none;
+      transition: all 0.2s ease;
+    `;
+    skipBtn.onmouseover = () => {
+      skipBtn.style.background = "#f3f4f6";
+    };
+    skipBtn.onmouseout = () => {
+      skipBtn.style.background = "white";
+    };
+    skipBtn.onclick = () => {
+      const advanceAction = step.basic_advanceAction || "next button";
+      overlay2.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-welcome-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      if (advanceAction === "skip button") {
+        endTour();
+      } else {
+        endTour();
+      }
+    };
+    buttonSection.appendChild(skipBtn);
+    const nextBtn = document.createElement("button");
+    nextBtn.textContent = step.welcome_next_label || "Next";
+    nextBtn.style.cssText = `
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      background: #2563eb;
+      color: white;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      outline: none;
+      transition: all 0.2s ease;
+    `;
+    nextBtn.onmouseover = () => {
+      nextBtn.style.background = "#1d4ed8";
+    };
+    nextBtn.onmouseout = () => {
+      nextBtn.style.background = "#2563eb";
+    };
+    nextBtn.onclick = async () => {
+      const advanceAction = step.basic_advanceAction || "next button";
+      overlay2.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-welcome-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      if (advanceAction === "next button") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "scroll") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          const nextStep2 = STATE.tips[STATE.tourIndex];
+          const nextElement = await findBySelector(nextStep2.selector);
+          if (nextElement) {
+            nextElement.scrollIntoView({ behavior: "smooth", block: "center" });
+            setTimeout(() => showStep(STATE.tourIndex, true), 600);
+          } else {
+            showStep(STATE.tourIndex, true);
+          }
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "click") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      }
+    };
+    buttonSection.appendChild(nextBtn);
+    modal.appendChild(buttonSection);
+    overlay2.appendChild(modal);
+    document.body.appendChild(overlay2);
+    overlay2.onclick = (e) => {
+      if (e.target === overlay2) {
+        e.stopPropagation();
+        overlay2.remove();
+        const backdropOverlay = document.getElementById(
+          "rivia-welcome-preview-backdrop"
+        );
+        if (backdropOverlay) backdropOverlay.remove();
+      }
+    };
+    modal.onclick = (e) => {
+      e.stopPropagation();
+    };
+    console.log(
+      "Welcome card preview displayed with backdrop:",
+      backdropStyle,
+      "and advance action:",
+      step.basic_advanceAction
+    );
+  }
+  async function showModalDialogPreview(step, stepIndex) {
+    const existingCenteredModal = document.getElementById(
+      "rivia-modal-dialog-preview-modal"
+    );
+    if (existingCenteredModal) existingCenteredModal.remove();
+    const backdropStyle = step.basic_backdrop || "none";
+    if (backdropStyle !== "none") {
+      const backdropOverlay = document.createElement("div");
+      backdropOverlay.id = "rivia-modal-dialog-preview-backdrop";
+      backdropOverlay.style.cssText = `
+        position: fixed;
+        inset: 0;
+        z-index: 2147483643;
+        pointer-events: none;
+      `;
+      if (backdropStyle === "boxed") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.1)";
+        backdropOverlay.style.border = "2px solid rgba(0, 0, 0, 0.2)";
+      } else if (backdropStyle === "light overlay") {
+        backdropOverlay.style.background = "rgba(255, 255, 255, 0.7)";
+        backdropOverlay.style.border = "none";
+      } else if (backdropStyle === "dark overlay") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.7)";
+        backdropOverlay.style.border = "none";
+      }
+      document.body.insertBefore(backdropOverlay, document.body.firstChild);
+    }
+    const centeredContainer = document.createElement("div");
+    centeredContainer.id = "rivia-modal-dialog-preview-modal";
+    centeredContainer.style.cssText = `
+      position: fixed;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483644;
+      pointer-events: none;
+    `;
+    const modal = document.createElement("div");
+    modal.id = "rivia-modal-dialog-preview";
+    const modalWidth = step.modal_width || 500;
+    const modalHeight = step.modal_height || 400;
+    const modalBgColor = step.modal_bg_color || "#ffffff";
+    const modalTextColor = step.modal_text_color || "#333333";
+    const modalFooterBgColor = step.modal_footer_bg_color || "#f3f4f6";
+    const accentColor = step.modal_accent_color || "#10b981";
+    modal.style.cssText = `
+      pointer-events: auto;
+      background: ${modalBgColor};
+      border-radius: 12px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      width: ${modalWidth}px;
+      max-width: 90vw;
+      height: ${modalHeight}px;
+      max-height: 80vh;
+      overflow-y: auto;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+    `;
+    const accentLine = document.createElement("div");
+    accentLine.style.cssText = `
+      height: 4px;
+      background: ${accentColor};
+      border-radius: 12px 12px 0 0;
+    `;
+    modal.appendChild(accentLine);
+    const contentSection = document.createElement("div");
+    contentSection.style.cssText = `
+      flex: 1;
+      padding: 30px;
+      color: ${modalTextColor};
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    `;
+    contentSection.textContent = step.content || "Type your content here.";
+    modal.appendChild(contentSection);
+    const footerSection = document.createElement("div");
+    footerSection.style.cssText = `
+      background: ${modalFooterBgColor};
+      padding: 20px 30px;
+      border-top: 1px solid #e5e7eb;
+      border-radius: 0 0 12px 12px;
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+    `;
+    const skipBtn = document.createElement("button");
+    skipBtn.textContent = step.modal_skip_label || "Skip";
+    skipBtn.style.cssText = `
+      background: transparent;
+      color: #9ca3af;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+    `;
+    skipBtn.onmouseover = () => {
+      skipBtn.style.color = "#6b7280";
+      skipBtn.style.background = "#f3f4f6";
+    };
+    skipBtn.onmouseout = () => {
+      skipBtn.style.color = "#9ca3af";
+      skipBtn.style.background = "transparent";
+    };
+    skipBtn.onclick = () => {
+      centeredContainer.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-modal-dialog-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      endTour();
+    };
+    footerSection.appendChild(skipBtn);
+    const nextBtn = document.createElement("button");
+    nextBtn.textContent = step.modal_next_label || "Next";
+    nextBtn.style.cssText = `
+      background: #2563eb;
+      color: white;
+      border: none;
+      padding: 10px 24px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    `;
+    nextBtn.onmouseover = () => nextBtn.style.background = "#1d4ed8";
+    nextBtn.onmouseout = () => nextBtn.style.background = "#2563eb";
+    nextBtn.onclick = async () => {
+      const advanceAction = step.basic_advanceAction || "next button";
+      centeredContainer.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-modal-dialog-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      if (advanceAction === "next button") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "scroll") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          const nextStepData = STATE.tips[STATE.tourIndex];
+          const nextElement = await findBySelector(nextStepData.selector);
+          if (nextElement) {
+            nextElement.scrollIntoView({ behavior: "smooth", block: "center" });
+            setTimeout(() => showStep(STATE.tourIndex, true), 600);
+          } else {
+            showStep(STATE.tourIndex, true);
+          }
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "click") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      }
+    };
+    footerSection.appendChild(nextBtn);
+    modal.appendChild(footerSection);
+    centeredContainer.appendChild(modal);
+    document.body.appendChild(centeredContainer);
+    console.log(
+      "Modal dialog preview displayed with backdrop:",
+      backdropStyle,
+      "and advance action:",
+      step.basic_advanceAction
+    );
+  }
+  async function attachNavigationButtons(tip, i, isPreview) {
+    const nav = document.createElement("div");
+    const navStyle = isPreview ? `
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+    justify-content: flex-end;
+  ` : `
+    display: flex;
+    gap: 6px;
+    margin-top: 8px;
+    justify-content: flex-end;
+  `;
+    nav.style.cssText = navStyle;
+    const step = STATE.tips[i];
+    const advanceAction = step?.basic_advanceAction || "next button";
+    const card_back_button = step?.card_back_button ?? false;
+    const card_next_button = step?.card_next_button ?? true;
+    const card_skip_button = step?.card_skip_button ?? false;
+    if (i > 0 && card_back_button) {
+      const back = document.createElement("button");
+      back.textContent = "\u2190 Back";
+      const backStyle = isPreview ? `
+      padding: 8px 14px;
+      border-radius: 8px;
+      border: 1px solid rgba(37, 99, 235, 0.3);
+      background: rgba(37, 99, 235, 0.1);
+      color: #2563eb;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      transition: all 0.2s ease;
+    ` : `
+      padding: 6px 10px;
+      border-radius: 8px;
+      border: 1px solid #333;
+      background: #1f1f1f;
+      color: #fff;
+      cursor: pointer;
+    `;
+      back.style.cssText = backStyle;
+      back.onmouseover = () => {
+        if (isPreview) back.style.background = "rgba(37, 99, 235, 0.2)";
+      };
+      back.onmouseout = () => {
+        if (isPreview) back.style.background = "rgba(37, 99, 235, 0.1)";
+      };
+      back.onclick = () => prevStep();
+      nav.appendChild(back);
+    }
+    if (advanceAction === "manual click") {
+      const targetElement = await findBySelector(step.selector);
+      if (targetElement) {
+        attachClickListenerToElement(targetElement);
+      }
+    } else if (advanceAction === "scroll") {
+      const scrollMsg = document.createElement("div");
+      scrollMsg.textContent = "\u2B07\uFE0F Scroll to continue";
+      scrollMsg.style.cssText = `
+      padding: 8px 14px;
+      border-radius: 8px;
+      background: rgba(168, 85, 247, 0.1);
+      color: #a855f7;
+      font-size: 13px;
+      font-weight: 500;
+      align-self: center;
+    `;
+      nav.appendChild(scrollMsg);
+      enableScrollAdvance();
+    } else if (card_next_button) {
+      const next = document.createElement("button");
+      next.textContent = i === STATE.tips.length - 1 ? "Finish \u2713" : "Next \u2192";
+      const nextStyle = isPreview ? `
+      padding: 8px 14px;
+      border-radius: 8px;
+      border: 1px solid rgba(37, 99, 235, 0.5);
+      background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(37, 99, 235, 0.8) 100%);
+      color: white;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 600;
+      transition: all 0.2s ease;
+    ` : `
+      padding: 6px 10px;
+      border-radius: 8px;
+      border: 1px solid #333;
+      background: #2563eb;
+      color: #fff;
+      cursor: pointer;
+    `;
+      next.style.cssText = nextStyle;
+      next.onmouseover = () => {
+        if (isPreview)
+          next.style.background = "linear-gradient(135deg, rgba(37, 99, 235, 1) 0%, rgba(37, 99, 235, 0.9) 100%)";
+      };
+      next.onmouseout = () => {
+        if (isPreview)
+          next.style.background = "linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(37, 99, 235, 0.8) 100%)";
+      };
+      next.onclick = () => i === STATE.tips.length - 1 ? endTour() : nextStep();
+      nav.appendChild(next);
+    }
+    if (card_skip_button) {
+      const skip = document.createElement("button");
+      skip.textContent = "Skip";
+      const skipStyle = isPreview ? `
+      padding: 8px 14px;
+      border-radius: 8px;
+      border: 1px solid rgba(168, 85, 247, 0.3);
+      background: rgba(168, 85, 247, 0.1);
+      color: #a855f7;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      transition: all 0.2s ease;
+    ` : `
+      padding: 6px 10px;
+      border-radius: 8px;
+      border: 1px solid #999;
+      background: #f3f4f6;
+      color: #374151;
+      cursor: pointer;
+    `;
+      skip.style.cssText = skipStyle;
+      skip.onmouseover = () => {
+        if (isPreview) skip.style.background = "rgba(168, 85, 247, 0.2)";
+      };
+      skip.onmouseout = () => {
+        if (isPreview) skip.style.background = "rgba(168, 85, 247, 0.1)";
+      };
+      skip.onclick = () => endTour();
+      nav.appendChild(skip);
+    }
+    tip.appendChild(nav);
+    if (isPreview) {
+      tip.setAttribute("data-rivia-preview-nav", "true");
+    }
+    if (isPreview) {
+      const stepIndicator = document.createElement("div");
+      stepIndicator.style.cssText = `
+      position: absolute;
+      top: 8px;
+      right: 12px;
+      font-size: 11px;
+      color: rgba(37, 99, 235, 0.6);
+      font-weight: 500;
+    `;
+      stepIndicator.textContent = `Step ${i + 1} of ${STATE.tips.length}`;
+      tip.appendChild(stepIndicator);
+    }
+  }
+  async function cleanupAllOverlays() {
+    const welcomeBackdropOverlay = document.getElementById(
+      "rivia-welcome-backdrop-overlay"
+    );
+    if (welcomeBackdropOverlay) {
+      welcomeBackdropOverlay.remove();
+    }
+    const welcomePreviewOverlay = document.getElementById(
+      "rivia-welcome-preview-overlay"
+    );
+    if (welcomePreviewOverlay) {
+      welcomePreviewOverlay.remove();
+    }
+    const backdropOverlay = document.getElementById("rivia-backdrop-overlay");
+    if (backdropOverlay) {
+      if (backdropOverlay.updateBackdrop) {
+        window.removeEventListener("scroll", backdropOverlay.updateBackdrop);
+        window.removeEventListener("resize", backdropOverlay.updateBackdrop);
+      }
+      backdropOverlay.remove();
+    }
+    const spotlightOverlay = document.getElementById("rivia-spotlight-overlay");
+    if (spotlightOverlay) {
+      if (spotlightOverlay.updateSpotlight) {
+        window.removeEventListener("scroll", spotlightOverlay.updateSpotlight);
+        window.removeEventListener("resize", spotlightOverlay.updateSpotlight);
+      }
+      spotlightOverlay.remove();
+    }
+    document.querySelectorAll('[style*="box-shadow: 0 0 0 9999px"]').forEach((el) => {
+      el.remove();
+    });
+    document.querySelectorAll('svg[id*="rivia"]').forEach((svg) => {
+      if (svg.updateSpotlight) {
+        window.removeEventListener("scroll", svg.updateSpotlight);
+        window.removeEventListener("resize", svg.updateSpotlight);
+      }
+      svg.remove();
+    });
+  }
+  function nextStep() {
+    if (STATE.tourIndex < STATE.tips.length - 1) {
+      let getNextStepInfo3 = function(currentIndex2) {
+        if (currentIndex2 >= STATE.tips.length - 1) {
+          return { type: "end", index: currentIndex2 };
+        }
+        const nextStep2 = STATE.tips[currentIndex2 + 1];
+        if (!nextStep2) return { type: "end", index: currentIndex2 };
+        if (nextStep2.targetUrl && nextStep2.targetUrl.trim()) {
+          console.log("WE reached navigation");
+          return { type: "navigate", index: currentIndex2 + 1, url: nextStep2.targetUrl };
+        }
+        if (isStepAvailableOnCurrentPage(nextStep2)) {
+          return { type: "show", index: currentIndex2 + 1 };
+        }
+        return getNextStepInfo3(currentIndex2 + 1);
+      };
+      var getNextStepInfo2 = getNextStepInfo3;
+      const currentIndex = STATE.tourIndex;
+      STATE.tourIndex++;
+      const nextStepData = STATE.tips[STATE.tourIndex];
+      console.log("\u{1F7E2} nextStep called - moving from step", currentIndex, "to", STATE.tourIndex);
+      if (nextStepData.nextUrl && nextStepData.nextUrl.trim()) {
+        sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+          tourIndex: STATE.tourIndex,
+          tourId: STATE.tour_id,
+          tips: STATE.tips,
+          title: STATE.title || "Untitled Tour",
+          user_var1,
+          publish: STATE.publish
+        }));
+        const navUrl = addTourParamsToUrl(nextStepData.nextUrl, STATE.tour_id);
+        console.log("\u{1F7E2} Saving tour state before navigation to:", nextStepData.nextUrl);
+        window.location.href = nextStepData.nextUrl;
+        return;
+      }
+      const nextStepInfo = getNextStepInfo3(currentIndex);
+      if (nextStepInfo.type === "navigate") {
+        sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+          tourIndex: nextStepInfo.index,
+          tourId: STATE.tour_id,
+          isPreviewMode: STATE.isPreviewMode,
+          user_var1,
+          tips: STATE.tips,
+          title: STATE.title || "Untitled Tour",
+          publish: STATE.publish
+        }));
+        const navUrl = addTourParamsToUrl(nextStepInfo.url, STATE.tour_id);
+        console.log("\u{1F7E2} Navigating to next step URL:", navUrl);
+        window.location.href = navUrl;
+        return;
+      }
+      cleanupAllOverlays();
+      showStep(STATE.tourIndex, STATE.isPreviewMode);
+    } else if (STATE.tourIndex === STATE.tips.length - 1) {
+      endTour();
+    }
+  }
+  async function getNextStepInfo(currentIndex) {
+    if (currentIndex >= STATE.tips.length - 1) {
+      return { type: "end", index: currentIndex };
+    }
+    const nextStep2 = STATE.tips[currentIndex + 1];
+    if (!nextStep2) return { type: "end", index: currentIndex };
+    if (nextStep2.targetUrl && nextStep2.targetUrl.trim()) {
+      return { type: "navigate", index: currentIndex + 1, url: nextStep2.targetUrl };
+    }
+    if (isStepAvailableOnCurrentPage(nextStep2)) {
+      return { type: "show", index: currentIndex + 1 };
+    }
+    return getNextStepInfo(currentIndex + 1);
+  }
+  function isStepAvailableOnCurrentPage(step) {
+    if (!step) return false;
+    if (!step.targetUrl || !step.targetUrl.trim()) return true;
+    return urlMatches(step.targetUrl);
+  }
+  function urlMatches(pattern, currentUrl = window.location.href) {
+    if (!pattern || !pattern.trim()) return true;
+    const cleanPattern = pattern.trim();
+    const cleanUrl = currentUrl.trim();
+    if (cleanPattern === cleanUrl) return true;
+    try {
+      const patternUrl = new URL(cleanPattern);
+      const currentPageUrl = new URL(cleanUrl);
+      if (patternUrl.origin === currentPageUrl.origin) {
+        const patternPath = patternUrl.pathname;
+        const currentPath = currentPageUrl.pathname;
+        if (patternPath === "/" || patternPath === "") {
+          return true;
+        }
+        return currentPath.startsWith(patternPath);
+      }
+    } catch (e) {
+      console.warn("Failed to parse URLs for domain matching:", cleanPattern, cleanUrl, e);
+    }
+    if (cleanPattern.includes("*")) {
+      const regexPattern = cleanPattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*");
+      try {
+        const regex = new RegExp(`^${regexPattern}$`);
+        return regex.test(cleanUrl);
+      } catch (e) {
+        console.warn("Invalid URL pattern:", cleanPattern, e);
+        return false;
+      }
+    }
+    return cleanUrl.includes(cleanPattern);
+  }
+  function addTourParamsToUrl(url, tourId) {
+    if (!url || !tourId) return url;
+    try {
+      const urlObj = new URL(url);
+      return urlObj.toString();
+    } catch (e) {
+      console.warn("Failed to add tour params to URL:", url, e);
+      return url;
+    }
+  }
+  function getPreviousStepInfo(currentIndex) {
+    if (currentIndex <= 0) {
+      return { type: "start", index: 0 };
+    }
+    const prevStep2 = STATE.tips[currentIndex - 1];
+    if (!prevStep2) return { type: "start", index: 0 };
+    if (isStepAvailableOnCurrentPage(prevStep2)) {
+      return { type: "show", index: currentIndex - 1 };
+    }
+    if (prevStep2.targetUrl && prevStep2.targetUrl.trim()) {
+      return { type: "navigate", index: currentIndex - 1, url: prevStep2.targetUrl };
+    }
+    return getPreviousStepInfo(currentIndex - 1);
+  }
+  function prevStep() {
+    if (STATE.tourIndex > 0) {
+      const prevInfo = getPreviousStepInfo(STATE.tourIndex);
+      if (prevInfo.type === "start") {
+        return;
+      }
+      if (prevInfo.type === "navigate") {
+        STATE.tourIndex = prevInfo.index;
+        const prevNavUrl = addTourParamsToUrl(prevInfo.url, STATE.tour_id);
+        sessionStorage.setItem("rivia_tour_state", JSON.stringify({
+          tourIndex: STATE.tourIndex,
+          tourId: STATE.tour_id,
+          user_var1,
+          isPreviewMode: STATE.isPreviewMode,
+          tips: STATE.tips,
+          title: STATE.title,
+          publish: STATE.publish
+        }));
+        console.log(" Navigating to previous step URL:", prevNavUrl);
+        window.location.href = prevNavUrl;
+        return;
+      }
+      if (prevInfo.type === "show") {
+        STATE.tourIndex = prevInfo.index;
+        cleanupAllOverlays();
+        showStep(STATE.tourIndex, STATE.isPreviewMode);
+      }
+    }
+  }
+  function endTour() {
+    console.log("Ending tour and cleaning up UI elements...");
+    document.querySelectorAll("[data-rivia-tip-id]").forEach((n) => n.remove());
+    STATE.tourIndex = 0;
+    const user_var2 = user_var1;
+    const backendUrl = `https://demoapi.rivia.ai/tours_clients/${STATE.tour_id}`;
+    const payload = {
+      name: user_var2,
+      is_completed: true
+    };
+    fetch(backendUrl, {
+      method: "POST",
+      // <-- FIXED
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify(payload),
+      keepalive: true
+      // allow sending even during unload
+    }).catch((err) => {
+      console.warn("Failed to end tour:", err);
+    });
+  }
+  async function updateUrlStatus() {
+    const urlStatus = document.getElementById("rivia-url-status");
+    if (!urlStatus) return;
+    const currentStep = STATE.tips[STATE.tourIndex];
+    if (!currentStep) {
+      urlStatus.textContent = "\u{1F4CD} Current URL";
+      return;
+    }
+    const stepUrlInfo = getStepUrlInfo(currentStep);
+    if (stepUrlInfo) {
+      if (stepUrlInfo.isAvailable) {
+        urlStatus.textContent = "\u2713 On this page";
+        urlStatus.style.color = "#86efac";
+      } else {
+        const shortUrl = stepUrlInfo.targetUrl.length > 30 ? stepUrlInfo.targetUrl.substring(0, 27) + "..." : stepUrlInfo.targetUrl;
+        urlStatus.textContent = "\u{1F4CD} " + shortUrl;
+        urlStatus.style.color = "#fbbf24";
+      }
+      urlStatus.title = stepUrlInfo.displayText;
+    }
+  }
+  function playTour() {
+    if (STATE.is_completed)
+      return;
+    if (!STATE.tips.length) {
+      console.warn("No tips loaded for this host");
+      return;
+    }
+    STATE.savedTourIndex = STATE.tourIndex;
+    STATE.isPreviewMode = true;
+    console.log("\u{1F7E2} Starting tour preview mode...", STATE.tourIndex);
+    updateUrlStatus();
+    console.log("Cleaning up UI elements before preview...");
+    document.querySelectorAll("[data-rivia-tip-id]").forEach((n) => n.remove());
+    document.querySelectorAll('[id*="rivia-welcome-preview"]').forEach((el) => el.remove());
+    document.querySelectorAll('[id*="rivia-welcome-edit"]').forEach((el) => el.remove());
+    document.querySelectorAll('[id*="rivia-modal-dialog"]').forEach((el) => el.remove());
+    const videoSettingsPanel = document.getElementById("rivia-video-settings-panel");
+    if (videoSettingsPanel) {
+      videoSettingsPanel.remove();
+    }
+    document.querySelectorAll('[id*="rivia-backdrop"]').forEach((el) => el.remove());
+    document.querySelectorAll("[data-rivia-highlight]").forEach((n) => {
+      n.removeAttribute("data-rivia-highlight");
+      n.style.outline = "";
+      n.style.outlineOffset = "";
+      n.style.backgroundColor = "";
+    });
+    try {
+      overlay.remove();
+    } catch (e) {
+    }
+    const rightPanel = document.getElementById("rivia-pointer-card-panel");
+    if (rightPanel) {
+      rightPanel.remove();
+    }
+    console.log("UI cleanup complete, starting preview...");
+    showStep(STATE.tourIndex, true);
+  }
+  function cleanUrlForStorage(url) {
+    if (!url || !url.trim()) return url;
+    try {
+      const urlObj = new URL(url);
+      urlObj.searchParams.delete("rivia_tour");
+      urlObj.searchParams.delete("tour_id");
+      return urlObj.toString();
+    } catch (e) {
+      console.warn("Failed to parse URL:", url, e);
+      return url;
+    }
+  }
+  async function showFeedbackCardPreview(step, stepIndex) {
+    if (!step) {
+      console.warn("Step not found for preview");
+      return;
+    }
+    console.log("Showing feedback card preview for step:", step);
+    cleanupAllOverlays();
+    document.querySelectorAll('[id*="rivia-feedback-preview"]').forEach((el) => el.remove());
+    document.querySelectorAll('[id*="rivia-backdrop"]').forEach((el) => el.remove());
+    const backdropStyle = step.basic_backdrop || "none";
+    if (backdropStyle !== "none") {
+      const backdropOverlay = document.createElement("div");
+      backdropOverlay.id = "rivia-feedback-preview-backdrop";
+      backdropOverlay.style.cssText = `
+        position: fixed;
+        inset: 0;
+        z-index: 2147483643;
+        pointer-events: none;
+      `;
+      if (backdropStyle === "boxed") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.1)";
+        backdropOverlay.style.border = "2px solid rgba(0, 0, 0, 0.2)";
+      } else if (backdropStyle === "light overlay") {
+        backdropOverlay.style.background = "rgba(255, 255, 255, 0.7)";
+        backdropOverlay.style.border = "none";
+      } else if (backdropStyle === "dark overlay") {
+        backdropOverlay.style.background = "rgba(0, 0, 0, 0.7)";
+        backdropOverlay.style.border = "none";
+      }
+      document.body.insertBefore(backdropOverlay, document.body.firstChild);
+    }
+    const overlay2 = document.createElement("div");
+    overlay2.id = "rivia-feedback-preview-overlay";
+    overlay2.style.cssText = `
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 2147483644;
+    `;
+    const modal = document.createElement("div");
+    modal.id = "rivia-feedback-preview-modal";
+    const bgColor = step.feedback_bg_color || "#ffffff";
+    modal.style.cssText = `
+      background: ${bgColor};
+      border-radius: 12px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      max-width: 700px;
+      width: 90%;
+      max-height: 80vh;
+      overflow-y: auto;
+      padding: 0;
+    `;
+    const headerSection = document.createElement("div");
+    const headerBgColor = step.feedback_header_bg_color || "#667eea";
+    const headerTextColor = step.feedback_header_text_color || "#ffffff";
+    const headerHeight = step.feedback_header_height || 80;
+    headerSection.style.cssText = `
+      background: ${headerBgColor};
+      padding: ${headerHeight / 2}px 30px;
+      color: ${headerTextColor};
+      border-radius: 12px 12px 0 0;
+      text-align: center;
+      min-height: ${headerHeight}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+    headerSection.id = "rivia-feedback-preview-header";
+    const headerText = document.createElement("h1");
+    headerText.textContent = step.title || "How was your experience?";
+    headerText.style.cssText = `
+      margin: 0;
+      font-size: 32px;
+      font-weight: bold;
+      font-family: inherit;
+      color: ${headerTextColor};
+    `;
+    headerSection.appendChild(headerText);
+    modal.appendChild(headerSection);
+    const contentSection = document.createElement("div");
+    const footerPadding = step.feedback_footer_padding || 20;
+    const footerBgColor = step.feedback_footer_bg_color || "#ffffff";
+    const footerTextColor = step.feedback_footer_text_color || "#333333";
+    const footerHeight = step.feedback_footer_height || 60;
+    contentSection.style.cssText = `
+      padding: ${footerPadding}px 30px;
+      text-align: center;
+      background: ${footerBgColor};
+      color: ${footerTextColor};
+      min-height: ${footerHeight}px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    `;
+    contentSection.id = "rivia-feedback-preview-content";
+    const questionText = document.createElement("p");
+    questionText.textContent = step.content || "Please rate your experience";
+    questionText.style.cssText = `
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6;
+      color: ${footerTextColor};
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      font-family: inherit;
+    `;
+    contentSection.appendChild(questionText);
+    const emojiContainer = document.createElement("div");
+    emojiContainer.style.cssText = `
+      display: flex;
+      justify-content: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    `;
+    let selectedEmojiIndex = -1;
+    const emojis = step.feedback_emojis || ["\u{1F620}", "\u{1F615}", "\u{1F610}", "\u{1F60A}", "\u{1F604}"];
+    const currentEmoji = step.feedback_emoji || "\u{1F60A}";
+    const displayEmojis = emojis;
+    displayEmojis.forEach((emoji, index) => {
+      const emojiBtn = document.createElement("button");
+      emojiBtn.textContent = emoji;
+      emojiBtn.style.cssText = `
+        font-size: 32px;
+        background: ${emoji === currentEmoji ? "rgba(102, 126, 234, 0.2)" : "transparent"};
+        border: ${emoji === currentEmoji ? "2px solid #667eea" : "2px solid #e5e7eb"};
+        border-radius: 8px;
+        padding: 8px 12px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      `;
+      emojiBtn.onmouseover = () => {
+        if (emoji !== currentEmoji) {
+          emojiBtn.style.borderColor = "#667eea";
+          emojiBtn.style.background = "rgba(102, 126, 234, 0.1)";
+        }
+      };
+      emojiBtn.onmouseout = () => {
+        if (emoji !== currentEmoji) {
+          emojiBtn.style.borderColor = "#e5e7eb";
+          emojiBtn.style.background = "transparent";
+        }
+      };
+      emojiBtn.onclick = () => {
+        selectedEmojiIndex = index + 1;
+        document.querySelectorAll("[data-feedback-emoji-btn]").forEach((btn) => {
+          const btnEmoji = btn.textContent;
+          if (btnEmoji === emoji) {
+            btn.style.background = "rgba(102, 126, 234, 0.2)";
+            btn.style.borderColor = "#667eea";
+          } else {
+            btn.style.background = "transparent";
+            btn.style.borderColor = "#e5e7eb";
+          }
+        });
+      };
+      emojiBtn.setAttribute("data-feedback-emoji-btn", emoji);
+      emojiBtn.setAttribute("data-emoji-index", index);
+      emojiContainer.appendChild(emojiBtn);
+    });
+    contentSection.appendChild(emojiContainer);
+    modal.appendChild(contentSection);
+    const buttonSection = document.createElement("div");
+    buttonSection.style.cssText = `
+      display: flex;
+      gap: 12px;
+      padding: 20px 30px;
+      border-top: 1px solid #e5e7eb;
+      justify-content: flex-end;
+    `;
+    const skipBtn = document.createElement("button");
+    skipBtn.textContent = step.feedback_skip_label || "Skip";
+    skipBtn.style.cssText = `
+      padding: 8px 16px;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      background: white;
+      color: #6b7280;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      outline: none;
+      transition: all 0.2s ease;
+    `;
+    skipBtn.onmouseover = () => {
+      skipBtn.style.background = "#f3f4f6";
+    };
+    skipBtn.onmouseout = () => {
+      skipBtn.style.background = "white";
+    };
+    skipBtn.onclick = () => {
+      overlay2.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-feedback-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      endTour();
+    };
+    buttonSection.appendChild(skipBtn);
+    const nextBtn = document.createElement("button");
+    nextBtn.textContent = step.feedback_next_label || "Next";
+    nextBtn.style.cssText = `
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      background: #2563eb;
+      color: white;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      outline: none;
+      transition: all 0.2s ease;
+    `;
+    nextBtn.onmouseover = () => {
+      nextBtn.style.background = "#1d4ed8";
+    };
+    nextBtn.onmouseout = () => {
+      nextBtn.style.background = "#2563eb";
+    };
+    nextBtn.onclick = async () => {
+      const advanceAction = step.basic_advanceAction || "next button";
+      overlay2.remove();
+      const backdropOverlay = document.getElementById(
+        "rivia-feedback-preview-backdrop"
+      );
+      if (backdropOverlay) backdropOverlay.remove();
+      if (selectedEmojiIndex !== -1) {
+        console.log("Feedback given: emoji index", selectedEmojiIndex);
+        step.feedback_given = selectedEmojiIndex;
+        if (STATE.tour_id) putTips();
+        else saveTips();
+      }
+      if (advanceAction === "next button") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "scroll") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          const nextStep2 = STATE.tips[STATE.tourIndex];
+          const nextElement = await findBySelector(nextStep2.selector);
+          if (nextElement) {
+            nextElement.scrollIntoView({ behavior: "smooth", block: "center" });
+            setTimeout(() => showStep(STATE.tourIndex, true), 600);
+          } else {
+            showStep(STATE.tourIndex, true);
+          }
+        } else {
+          endTour();
+        }
+      } else if (advanceAction === "manual click") {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      } else {
+        STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
+        if (STATE.tourIndex < STATE.tips.length) {
+          showStep(STATE.tourIndex, true);
+        } else {
+          endTour();
+        }
+      }
+    };
+    buttonSection.appendChild(nextBtn);
+    modal.appendChild(buttonSection);
+    overlay2.appendChild(modal);
+    document.body.appendChild(overlay2);
+    overlay2.onclick = (e) => {
+      if (e.target === overlay2) {
+        e.stopPropagation();
+        overlay2.remove();
+        const backdropOverlay = document.getElementById(
+          "rivia-feedback-preview-backdrop"
+        );
+        if (backdropOverlay) backdropOverlay.remove();
+      }
+    };
+    modal.onclick = (e) => {
+      e.stopPropagation();
+    };
+    console.log(
+      "Feedback card preview displayed with backdrop:",
+      backdropStyle,
+      "and advance action:",
+      step.basic_advanceAction
+    );
+  }
+  return { loadTips, playTour, endTour, STATE };
+}();
+function evaluateRule2(rule, context) {
+  const leftValue = context[rule.name];
+  const operator = rule.operator;
+  const rightValue = rule.values;
+  console.log("leftValue", leftValue);
+  console.log("operator", operator);
+  console.log("rightValue", rightValue);
+  if (leftValue === void 0) return false;
+  switch (operator) {
+    case "in":
+      return Array.isArray(rightValue) && rightValue.includes(leftValue);
+    case "not_in":
+      return Array.isArray(rightValue) && !rightValue.includes(leftValue);
+    case "equals":
+      return leftValue === rightValue;
+    case "not_equals":
+      return leftValue != rightValue;
+    case "greater_than":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() > new Date(rightValue).getTime();
+      else
+        return leftValue > rightValue;
+    case "less_than":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() < new Date(rightValue).getTime();
+      else
+        return leftValue < rightValue;
+    case "greater_or_equals":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() >= new Date(rightValue).getTime();
+      else
+        return leftValue >= rightValue;
+    case "less_or_equals":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() <= new Date(rightValue).getTime();
+      else
+        return leftValue <= rightValue;
+    case "is_empty":
+      if (leftValue == "")
+        return true;
+      else
+        return false;
+    case "is_not_empty":
+      if (leftValue != "")
+        return true;
+      else
+        return false;
+    default:
+      return false;
+  }
+}
+function evaluateRules2(rules, context) {
+  if (!Array.isArray(rules) || rules.length === 0) return true;
+  let finalResult = evaluateRule2(rules[0], context);
+  for (let i = 1; i < rules.length; i++) {
+    console.log(finalResult);
+    const previousRule = rules[i - 1];
+    const currentResult = evaluateRule2(rules[i], context);
+    switch (previousRule.next) {
+      case "and":
+        finalResult = finalResult && currentResult;
+        break;
+      case "or":
+        finalResult = finalResult || currentResult;
+        break;
+      default:
+        finalResult = currentResult;
+    }
+  }
+  return finalResult;
+}
+async function Tours(workspace_id, obj) {
+  if (!sessionStorage.getItem("rivia_tour_state")) {
+    window.userId = obj.userid;
+    let userId = obj.userid;
+    window.sign_up_at = obj.sign_up_at;
+    window.role = obj.role;
+    window.email = obj.email;
+    try {
+      let doesRouteMatch2 = function(route) {
+        if (!route) return false;
+        const currentPath2 = window.location.href.toLowerCase().replace(/\/$/, "");
+        const normalizedRoute = route.toLowerCase().replace(/\/$/, "");
+        let pattern;
+        if (normalizedRoute.includes("[dynamic]")) {
+          const base = normalizedRoute.split("[dynamic]")[0].replace(/\/$/, "");
+          pattern = new RegExp(`^${escapeRegex2(base)}(/.*)?$`);
+        } else {
+          pattern = new RegExp(`^${escapeRegex2(normalizedRoute)}$`);
+        }
+        console.log("Matching current path:", currentPath2, "against pattern:", pattern);
+        return pattern.test(currentPath2);
+      }, escapeRegex2 = function(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      }, buildContext2 = function(obj2) {
+        return {
+          userid: obj2.userid,
+          role: obj2.role,
+          sign_up_at: obj2.sign_up_at,
+          email: obj2.email,
+          first_name: obj2.first_name,
+          last_name: obj2.last_name
+        };
+      };
+      var doesRouteMatch = doesRouteMatch2, escapeRegex = escapeRegex2, buildContext = buildContext2;
+      const res = await fetch(
+        `https://demoapi.rivia.ai/tour_by_workspace2/${workspace_id}`,
+        {
+          method: "GET",
+          headers: { "Content-Type": "application/json" }
+        }
+      );
+      if (!res.ok) {
+        console.warn("\u274C Failed to fetch tour");
+        return;
+      }
+      const data = await res.json();
+      const tours = data.tour || [];
+      if (!Array.isArray(tours) || tours.length === 0) return;
+      const currentPath = window.location.href;
+      const matchedTour = tours.find((chk) => {
+        const routes = chk?.url;
+        console.log("Checking tour:", window.location.href, "with routes:", routes);
+        if (!chk?.publish && !chk?.published)
+          return false;
+        return doesRouteMatch2(routes, currentPath);
+      });
+      if (!matchedTour) {
+        console.log("No tour applicable for this route");
+        return;
+      }
+      console.log("userid", obj.userid);
+      console.log("matched ch", matchedTour);
+      const rules = matchedTour?.targeting_data?.custom_rules || [];
+      console.log("rules", rules);
+      const context = buildContext2(obj);
+      const shouldShow = evaluateRules2(rules, context);
+      if (!shouldShow) {
+        console.log("User does not meet targeting rules for this tour");
+        return;
+      }
+      const {
+        tour_id,
+        title = "Untitled Tour",
+        subtitle = "Describe the purpose of this tour...",
+        items = [],
+        completion = 0,
+        branding_data: cssConfig = {},
+        targeting_data: targetingData = {},
+        customCSS = ""
+      } = matchedTour;
+      const fullData = {
+        tour: matchedTour,
+        cssConfig,
+        targetingData,
+        customCSS
+      };
+      RIVIA_TOUR.loadTips(tour_id, userId).then(() => {
+        try {
+          RIVIA_TOUR.playTour();
+        } catch (err) {
+        }
+      });
+    } catch (err) {
+      console.warn("Tour error:", err.message);
+      throw err;
+    }
+  }
+}
+var rivia_tour_default = Tours;
+
+// src/utils/banner.js
+function injectBanner(banner = {}, opts = {}, userId, bannerId) {
+  try {
+    let uploadVisitedPagesInBackground2 = function(bannerId2) {
+      console.log("Uploading visited pages in background for banner ID: and user_var:", userId);
+      let user_var2 = userId;
+      const backendUrl22 = `https://demoapi.rivia.ai/banners_clients/${bannerId2}`;
+      try {
+        const payload = {
+          name: user_var2,
+          is_completed: true
+        };
+        fetch(backendUrl22, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify(payload),
+          keepalive: true
+        }).then((res) => {
+          if (res.status === 404) {
+            throw new Error("Invalid banner id");
+          }
+          throw new Error(`Upload failed: ${res.status}`);
+        }).catch((err) => {
+          console.error("\u26A0\uFE0F Background PUT upload failed:", err);
+        });
+      } catch (err) {
+        console.error("\u274C Error preparing background upload:", err);
+      }
+    };
+    var uploadVisitedPagesInBackground = uploadVisitedPagesInBackground2;
+    const prefix = opts.idPrefix || "rivia";
+    const id = `${prefix}-banner`;
+    const old = document.getElementById(id);
+    if (old) old.remove();
+    const camelToKebab = (s) => s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    const applyStyles = (el, obj) => {
+      if (!obj) return;
+      for (const k in obj) {
+        el.style.setProperty(camelToKebab(k), obj[k]);
+      }
+    };
+    const container = document.createElement("div");
+    container.id = id;
+    container.style.position = "fixed";
+    container.style.left = "0";
+    container.style.right = "0";
+    container.style.width = "100%";
+    container.style.zIndex = "2147483647";
+    container.style.display = "flex";
+    container.style.fontFamily = "Avenir, sans-serif";
+    container.style.fontSize = "14px";
+    container.style.justifyContent = banner.align === "left" ? "flex-start" : banner.align === "right" ? "flex-end" : "center";
+    if (!banner.position?.includes("inline")) {
+      container.style[banner.position?.includes("bottom") ? "bottom" : "top"] = "0";
+    }
+    const box = document.createElement("div");
+    box.style.display = "flex";
+    box.style.alignItems = "center";
+    box.style.fontFamily = "Avenir, sans-serif";
+    box.style.fontSize = "14px";
+    box.style.justifyContent = "space-between";
+    box.style.padding = "16px 18px";
+    box.style.gap = "12px";
+    box.style.width = `${banner.canvas.width}px`;
+    if (banner.position?.includes("inline")) {
+      box.style.maxWidth = "100%";
+      box.style.width = "100%";
+      box.style.margin = "0";
+    } else {
+      box.style.maxWidth = "1100px";
+      box.style.margin = "0 auto";
+    }
+    box.style.margin = "0 auto";
+    box.style.borderRadius = banner.border?.radius ? `${banner.border.radius}px` : "6px";
+    box.style.border = banner.border ? `${banner.border.width || 1}px solid ${banner.border.color || "#000"}` : "none";
+    if (banner.background) {
+      if (banner.background.type === "gradient") {
+        box.style.background = `linear-gradient(${banner.background.gradient_degree || 0}deg, 
+          ${banner.background.gradient_color_1 || "#fff"}, 
+          ${banner.background.gradient_color_2 || "#eee"})`;
+      } else {
+        box.style.background = banner.background.color || "#ffffff";
+      }
+      box.style.color = banner.background.text_color || banner.text_color || "#000";
+    }
+    if (banner.canvas) {
+      if (banner.canvas.height) box.style.height = `${banner.canvas.height}px`;
+      if (banner.canvas.width && !banner.position.includes("inline")) box.style.width = `${banner.canvas.width}px`;
+    }
+    const textWrap = document.createElement("div");
+    textWrap.style.display = "flex";
+    textWrap.style.flexDirection = "column";
+    textWrap.style.flex = "1";
+    textWrap.style.gap = "6px";
+    textWrap.style.fontFamily = "Avenir, sans-serif";
+    textWrap.style.fontSize = "14px";
+    if (banner.text) {
+      const textEl = document.createElement("div");
+      textEl.textContent = banner.text;
+      textEl.style.fontFamily = "Avenir, sans-serif";
+      textEl.style.fontSize = "14px";
+      textEl.style.opacity = "0.9";
+      textEl.style.color = banner.background?.text_color || banner.text_color || "#fff";
+      textWrap.appendChild(textEl);
+    }
+    window.container = container;
+    const btnArea = document.createElement("div");
+    btnArea.style.display = "flex";
+    btnArea.style.alignItems = "center";
+    btnArea.style.gap = "10px";
+    const btn = banner.button || {};
+    if (btn.text) {
+      const a = btn.action_url ? document.createElement("a") : document.createElement("button");
+      if (btn.action == "url") {
+        a.href = btn.action_url;
+        a.target = btn.target || "_blank";
+        a.rel = "noopener noreferrer";
+      } else {
+        a.onclick = () => {
+          container.remove();
+          uploadVisitedPagesInBackground2(bannerId);
+        };
+      }
+      if (btn.border) {
+        a.style.border = btn.border.width ? `${btn.border.width}px solid ${btn.border.color || "#000"}` : "none";
+        a.style.borderRadius = btn.border.radius ? `${btn.border.radius}px` : "6px";
+      }
+      a.textContent = btn.text || "Learn More";
+      a.style.padding = "8px 14px";
+      a.style.fontFamily = "Avenir, sans-serif";
+      a.style.fontSize = "14px";
+      a.style.cursor = "pointer";
+      a.style.background = btn.color || "#ffffffff";
+      a.style.color = btn.text_color || "#0088ffff";
+      btnArea.appendChild(a);
+    }
+    if (banner.align === "left") {
+      box.appendChild(btnArea);
+      box.appendChild(textWrap);
+      if (banner.dismissible !== false) {
+        const closeBtn = document.createElement("button");
+        closeBtn.innerHTML = "\u2715";
+        closeBtn.style.border = "none";
+        closeBtn.style.background = "transparent";
+        closeBtn.style.fontFamily = "Avenir, sans-serif";
+        closeBtn.style.fontSize = "14px";
+        closeBtn.style.cursor = "pointer";
+        closeBtn.style.color = banner.background.text_color || "#fff";
+        closeBtn.style.marginLeft = "auto";
+        closeBtn.onclick = () => {
+          container.remove();
+          uploadVisitedPagesInBackground2(bannerId);
+        };
+        box.appendChild(closeBtn);
+      }
+    } else if (banner.align === "bottom") {
+      textWrap.style.textAlign = "left";
+      box.appendChild(textWrap);
+      if (banner.dismissible !== false) {
+        const closeBtn = document.createElement("button");
+        closeBtn.innerHTML = "\u2715";
+        closeBtn.style.border = "none";
+        closeBtn.style.background = "transparent";
+        closeBtn.style.fontFamily = "Avenir, sans-serif";
+        closeBtn.style.fontSize = "14px";
+        closeBtn.style.cursor = "pointer";
+        closeBtn.style.color = banner.background.text_color || "#fff";
+        closeBtn.onclick = () => {
+          container.remove();
+          uploadVisitedPagesInBackground2(bannerId);
+        };
+        box.appendChild(closeBtn);
+      }
+      btnArea.style.gridColumn = "1 / span 2";
+      btnArea.style.display = "flex";
+      btnArea.style.justifyContent = "center";
+      box.appendChild(btnArea);
+    } else {
+      box.appendChild(textWrap);
+      box.appendChild(btnArea);
+      if (banner.dismissible !== false) {
+        const closeBtn = document.createElement("button");
+        closeBtn.innerHTML = "\u2715";
+        closeBtn.style.border = "none";
+        closeBtn.style.background = "transparent";
+        closeBtn.style.fontFamily = "Avenir, sans-serif";
+        closeBtn.style.fontSize = "14px";
+        closeBtn.style.cursor = "pointer";
+        closeBtn.style.color = banner.background.text_color || "#fff";
+        closeBtn.style.marginLeft = "auto";
+        closeBtn.onclick = () => {
+          container.remove();
+          uploadVisitedPagesInBackground2(bannerId);
+        };
+        box.appendChild(closeBtn);
+      }
+    }
+    container.appendChild(box);
+    const target = document.body || document.documentElement;
+    if (banner.position?.includes("bottom")) {
+      target.appendChild(container);
+    } else {
+      target.insertBefore(container, target.firstChild);
+    }
+    return {
+      id,
+      element: container,
+      remove: () => container.remove()
+    };
+  } catch (err) {
+    console.error("injectBanner error:", err);
+  }
+}
+function evaluateRule3(rule, context) {
+  const leftValue = context[rule.name];
+  const operator = rule.operator;
+  const rightValue = rule.values;
+  console.log("leftValue", leftValue);
+  console.log("operator", operator);
+  console.log("rightValue", rightValue);
+  if (leftValue === void 0) return false;
+  switch (operator) {
+    case "in":
+      return Array.isArray(rightValue) && rightValue.includes(leftValue);
+    case "not_in":
+      return Array.isArray(rightValue) && !rightValue.includes(leftValue);
+    case "equals":
+      return leftValue === rightValue;
+    case "not_equals":
+      return leftValue != rightValue;
+    case "greater_than":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() > new Date(rightValue).getTime();
+      else
+        return leftValue > rightValue;
+    case "less_than":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() < new Date(rightValue).getTime();
+      else
+        return leftValue < rightValue;
+    case "greater_or_equals":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() >= new Date(rightValue).getTime();
+      else
+        return leftValue >= rightValue;
+    case "less_or_equals":
+      if (rule.name == "sign_up_at")
+        return new Date(leftValue).getTime() <= new Date(rightValue).getTime();
+      else
+        return leftValue <= rightValue;
+    case "is_empty":
+      if (leftValue == "")
+        return true;
+      else
+        return false;
+    case "is_not_empty":
+      if (leftValue != "")
+        return true;
+      else
+        return false;
+    default:
+      return false;
+  }
+}
+function evaluateRules3(rules, context) {
+  if (!Array.isArray(rules) || rules.length === 0) return true;
+  let finalResult = evaluateRule3(rules[0], context);
+  for (let i = 1; i < rules.length; i++) {
+    console.log(finalResult);
+    const previousRule = rules[i - 1];
+    const currentResult = evaluateRule3(rules[i], context);
+    switch (previousRule.next) {
+      case "and":
+        finalResult = finalResult && currentResult;
+        break;
+      case "or":
+        finalResult = finalResult || currentResult;
+        break;
+      default:
+        finalResult = currentResult;
+    }
+  }
+  return finalResult;
+}
+async function Banner(workspace_id, obj) {
+  window.addEventListener("locationchange", async () => {
+    window.workspace_id = workspace_id;
+    window.userid = obj.userid;
+    let user_var = obj.userid;
+    window.sign_up_at = obj.sign_up_at;
+    window.role = obj.role;
+    window.email = obj.email;
+    console.log("");
+    try {
+      let doesRouteMatch2 = function(routes) {
+        if (!Array.isArray(routes)) return true;
+        const currentPath2 = window.location.pathname.toLowerCase();
+        console.log("Current Path:", currentPath2);
+        return routes.some((route) => {
+          if (!route) return false;
+          let pattern;
+          const normalizedRoute = route.toLowerCase().replace(/\/$/, "");
+          if (normalizedRoute.includes("[dynamic]")) {
+            const base = normalizedRoute.split("[dynamic]")[0].replace(/\/$/, "");
+            console.log("Base:", base);
+            pattern = new RegExp(`^${escapeRegex2(base)}(/.*)?$`);
+          } else {
+            pattern = new RegExp(`^${escapeRegex2(normalizedRoute)}$`);
+          }
+          return pattern.test(currentPath2);
+        });
+      }, escapeRegex2 = function(str) {
+        return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      }, buildContext2 = function(obj2) {
+        return {
+          userid: obj2.userid,
+          role: obj2.role,
+          sign_up_at: obj2.sign_up_at,
+          email: obj2.email,
+          first_name: obj2.first_name,
+          last_name: obj2.last_name
+        };
+      };
+      var doesRouteMatch = doesRouteMatch2, escapeRegex = escapeRegex2, buildContext = buildContext2;
+      const res = await fetch(
+        `https://demoapi.rivia.ai/banner_by_workspace2/${workspace_id}`,
+        {
+          method: "GET",
+          headers: { "Content-Type": "application/json" }
+        }
+      );
+      if (!res.ok) {
+        console.warn("\u274C Failed to fetch banner");
+        return;
+      }
+      const data = await res.json();
+      const banners = data.banner || [];
+      if (!Array.isArray(banners) || banners.length === 0) return;
+      const currentPath = window.location.pathname;
+      const matchedbanner = banners.find((chk) => {
+        const routes = chk?.targeting_data?.routes;
+        if (!chk?.publish)
+          return false;
+        if (!chk?.targeting_data?.display)
+          return !doesRouteMatch2(routes, currentPath);
+        else
+          return doesRouteMatch2(routes, currentPath);
+      });
+      if (!matchedbanner) {
+        if (window.container && window.container.parentNode) {
+          window.container.remove();
+        }
+        console.log("No banner applicable for this route");
+        return;
+      }
+      console.log("userid", obj.userid);
+      console.log("matched ch", matchedbanner);
+      const rules = matchedbanner?.targeting_data?.custom_rules || [];
+      console.log("rules", rules);
+      const context = buildContext2(obj);
+      const shouldShow = evaluateRules3(rules, context);
+      if (!shouldShow) {
+        console.log("Banner rules not satisfied, not showing banner");
+        return;
+      }
+      const {
+        banner_id,
+        title = "Untitled banner",
+        subtitle = "Describe the purpose of this banner...",
+        items = [],
+        completion = 0,
+        branding_data: cssConfig = {},
+        targeting_data: targetingData = {},
+        customCSS = ""
+      } = matchedbanner;
+      console.log("Banner rules satisfied, showing banner", banner_id);
+      const fullData = {
+        banner: matchedbanner,
+        cssConfig,
+        targetingData,
+        customCSS
+      };
+      sessionStorage.removeItem("onboardingVisited");
+      injectBanner(matchedbanner, {}, obj.userid, banner_id);
+      return matchedbanner;
+    } catch (err) {
+      console.warn("banner error:", err.message);
+      throw err;
+    }
+  });
+  (function() {
+    const pushState = history.pushState;
+    const replaceState = history.replaceState;
+    history.pushState = function() {
+      pushState.apply(history, arguments);
+      window.dispatchEvent(new Event("locationchange"));
+    };
+    history.replaceState = function() {
+      replaceState.apply(history, arguments);
+      window.dispatchEvent(new Event("locationchange"));
+    };
+    window.addEventListener("popstate", () => {
+      window.dispatchEvent(new Event("locationchange"));
+    });
+    window.dispatchEvent(new Event("locationchange"));
+  })();
+}
+var banner_default = Banner;
+
+// src/utils/trigger-event.js
+var triggerEvent = async (message) => {
+  try {
+    let checklist_id = window.checklist_id;
+    let user_name = window.user_var;
+    for (let item of window.items) {
+      console.log("Comparing:", item.event_name, "with", message);
+      if (item.event_name === message) {
+        let clean_item = item.url.startsWith("/") ? item.url.slice(1) : item.url;
+        if (!window.storedVisited.includes(item.event_name)) {
+          window.storedVisited.push(item.event_name);
+        }
+        sessionStorage.setItem("onboardingVisited", JSON.stringify(window.storedVisited));
+        window.updateProgress(window.storedVisited);
+        window.updateProgress2(window.storedVisited);
+        window.updateUIFromVisited();
+        window.uploadVisitedPagesInBackground(window.storedVisited);
+        if (storedVisited.length === window.items.length) {
+          if (window.showBtn && window.showBtn.parentNode) {
+            window.showBtn.remove();
+          }
+          if (window.label && window.label.parentNode) {
+            window.label.remove();
+          }
+          (() => {
+            const ll2 = document.createElement("div");
+            ll2.id = "route-labe";
+            ll2.innerText = "\u{1F389} Congrats! You've completed all items!";
+            Object.assign(ll2.style, {
+              position: "fixed",
+              bottom: "20px",
+              left: "20px",
+              backgroundColor: "#4CAF50",
+              color: "white",
+              padding: "10px 20px",
+              borderRadius: "10px",
+              boxShadow: "0 4px 6px rgba(0,0,0,0.2)",
+              fontSize: "16px",
+              fontWeight: "bold",
+              zIndex: 9999,
+              opacity: 0,
+              transition: "opacity 0.5s ease"
+            });
+            document.body.appendChild(ll2);
+            console.log("ll2");
+            requestAnimationFrame(() => {
+              ll2.style.opacity = 1;
+            });
+            setTimeout(() => {
+              ll2.style.opacity = 0;
+              setTimeout(() => ll2.remove(), 500);
+            }, 3e3);
+          })();
+        }
+      }
+    }
+  } catch (error) {
+    console.error("\u274C Error triggering event:", error);
+    throw error;
+  }
+};
+
+// src/utils/pm.js
+var ProductManagement = /* @__PURE__ */ function() {
+  const defaults = {
+    apiUrl: "/api/changelog",
+    // backend endpoint to fetch changelog JSON (base URL)
+    appID: null,
+    authToken: null,
+    // optional Authorization header
+    buttonSelector: "[data-pm-changelog]",
+    position: "bottom",
+    // or 'top'
+    align: "right",
+    // or 'left' or 'center'
+    theme: "light",
+    // light | dark | auto
+    initialData: null,
+    // optional pre-fetched object to avoid network call
+    fetchOptions: {},
+    // additional fetch options
+    workspace: null,
+    // optional workspace identifier to send to backend for multi-tenant support
+    pmUserId: null,
+    // optional user identifier to send to backend for personalization
+    name: "abc",
+    user_avatar: null,
+    url: "https://img.freepik.com/free-photo/closeup-scarlet-macaw-from-side-view-scarlet-macaw-closeup-head_488145-3540.jpg?semt=ais_hybrid&w=740&q=80",
+    email: "priyanshu@yopmail.com",
+    // hardcoded preview id while debugging
+    changelogPreviewId: "outplay"
+  };
+  const state = {
+    initialized: false,
+    config: {},
+    widgetEl: null,
+    backdropEl: null,
+    pmUserId: null,
+    changelogEntries: [],
+    // ✅ store API data
+    titleFontSize: null,
+    // for dynamic spacing when preview styles are applied
+    workspaceId: null
+    // to track current workspace for dynamic updates
+  };
+  function mergeConfig(cfg) {
+    state.config = Object.assign({}, defaults, cfg || {});
+  }
+  async function fetchCSS(previewId, widget, header, body) {
+    if (!previewId) return;
+    try {
+      console.log("Fetching preview styles for id:", previewId);
+      const res = await fetch(`https://demoapi.rivia.ai/change_logs_preview_by_workspace_name/${previewId}`);
+      if (!res.ok) throw new Error("Failed to fetch preview styles");
+      const response = await res.json();
+      const data = response?.message?.[0];
+      console.log("Applying preview styles:", data);
+      if (data.width) {
+        widget.style.width = data.width;
+        widget.style.maxWidth = data.width;
+      }
+      if (data.backgroundColor)
+        widget.style.backgroundColor = data.backgroundColor;
+      if (data.borderRadius)
+        widget.style.borderRadius = data.borderRadius;
+      if (data.fontFamily)
+        widget.style.fontFamily = data.fontFamily;
+      if (data.padding)
+        body.style.padding = data.padding;
+      if (data.bodyFontSize)
+        body.style.fontSize = data.bodyFontSize;
+      if (data.bodyColor)
+        body.style.color = data.bodyColor;
+      if (data.titleFontSize) {
+        header.style.fontSize = data.titleFontSize;
+        state.titleFontSize = data.titleFontSize;
+      }
+      if (data.titleColor)
+        header.style.color = data.titleColor;
+    } catch (err) {
+      console.error("Preview CSS load failed:", err);
+    }
+  }
+  function ensureStyles() {
+    if (document.getElementById("pm-lite-styles")) return;
+    const css = `
+      .pm-lite-backdrop{position:fixed;inset:0;background:rgba(255, 255, 255, 0);display:none;z-index:9998}
+      .pm-lite-widget{position:fixed;z-index:9999;max-width:420px;width:clamp(280px,30vw,420px);box-shadow:0 10px 40px rgba(0,0,0,0.2);border-radius:12px;overflow:hidden;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
+      .pm-lite-widget.light{background:#fff;color:#111}
+      .pm-lite-widget.dark{background:#111;color:#eee}
+      .pm-lite-header{
+      
+  padding:6px;
+  padding-top:15px; /* default is 12px, can be overridden by preview styles */
+  font-weight:600;
+  position:relative;
+
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+.pm-lite-rivia-btn{
+  display:block;
+  margin-left:auto;
+  color:#2563eb;   /* blue */
+  font-style:italic;
+  font-size:13px;
+  background:transparent;
+  border:none;
+  cursor:pointer;
+  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
+  padding:3px 15px;
+
+}
+  .pm-lite-rivia-label{
+  display:block;
+  margin-right:auto;
+  color:rgba(0,0,0,0.6);
+  font-style:italic;
+  font-size:12px;
+  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
+  padding-left:18px;
+}
+      .pm-lite-badge{font-size:12px;margin-left:8px;color:rgba(0,0,0,0.6)}
+      .pm-lite-body{max-height:60vh;overflow:auto;
+      
+  overflow: visible;   /* remove scroll */
+  height: auto;        /* dynamic height */
+  max-height: none;  }
+      .pm-lite-item{
+  box-sizing:border-box;
+  margin-bottom:6px;
+  padding:6px 7px;
+  border:1px solid rgba(0,0,0,0.08);
+  border-radius:8px;
+  background:#ffffff;
+  /* isolate from external CSS */
+  font-family:inherit;
+  line-height:1.4;
+}
+      .pm-lite-item.unread{background:linear-gradient(90deg,rgba(255,245,235,0.6),transparent)}
+      .pm-lite-close{position:absolute;right:8px;top:8px;border:none;background:transparent;font-size:16px;cursor:pointer}
+      .pm-lite-tags{font-size:12px;opacity:0.8;}
+      .pm-lite-link{display:inline-block;margin-top:6px;font-size:13px}
+      .pm-lite-tags{
+  display:inline-block;
+  background-color:rgb(220, 252, 231);
+  color:rgb(22, 101, 52);
+  border-radius:999px;
+  padding:2px 8px;
+  font-size:12px;
+  font-weight:bold;
+  font:Verdana, sans-serif;
+}
+    `;
+    const style = document.createElement("style");
+    style.id = "pm-lite-styles";
+    style.appendChild(document.createTextNode(css));
+    document.head.appendChild(style);
+  }
+  async function createWidgetShell() {
+    if (state.widgetEl) return;
+    ensureStyles();
+    const backdrop = document.createElement("div");
+    backdrop.className = "pm-lite-backdrop";
+    backdrop.addEventListener("click", closeWidget);
+    const widget = document.createElement("div");
+    widget.className = "pm-lite-widget " + (state.config.theme === "dark" ? "dark" : "light");
+    widget.setAttribute("role", "dialog");
+    const header = document.createElement("div");
+    header.className = "pm-lite-header";
+    header.innerText = "Latest Updates";
+    header.paddingTop = "10px";
+    const badge = document.createElement("span");
+    badge.className = "pm-lite-badge";
+    badge.style.display = "none";
+    header.appendChild(badge);
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "pm-lite-close";
+    closeBtn.innerHTML = "\u2715";
+    closeBtn.addEventListener("click", closeWidget);
+    const body = document.createElement("div");
+    body.className = "pm-lite-body";
+    body.innerHTML = '<div class="pm-lite-loading">Loading\u2026</div>';
+    const footerRow = document.createElement("div");
+    footerRow.style.display = "flex";
+    footerRow.style.alignItems = "center";
+    footerRow.style.justifyContent = "space-between";
+    footerRow.style.marginTop = "5px";
+    footerRow.style.marginBottom = "5px";
+    const riviaLabel = document.createElement("span");
+    riviaLabel.className = "pm-lite-rivia-label";
+    riviaLabel.innerText = "Powered by Rivia";
+    riviaLabel.style.fontSize = "12px";
+    riviaLabel.style.opacity = "0.7";
+    const riviaBtn = document.createElement("button");
+    riviaBtn.className = "pm-lite-rivia-btn";
+    riviaBtn.innerText = "See all changes";
+    footerRow.appendChild(riviaLabel);
+    footerRow.appendChild(riviaBtn);
+    riviaBtn.addEventListener("click", () => {
+      const baseUrl = `http://${state.config.workspace}.rivia.ai:8080/users/changelog?userId=${state.pmUserId || ""}`;
+      const url = new URL(baseUrl);
+      window.open(url.toString(), "_blank");
+    });
+    widget.appendChild(header);
+    const divider = document.createElement("div");
+    divider.style.borderTop = "1px solid rgba(0,0,0,0.08)";
+    widget.appendChild(body);
+    widget.appendChild(divider);
+    widget.appendChild(footerRow);
+    document.body.appendChild(backdrop);
+    document.body.appendChild(widget);
+    state.backdropEl = backdrop;
+    state.widgetEl = widget;
+    state.widgetBody = body;
+    state.widgetHeader = header;
+    state.widgetBadge = badge;
+    console.log("Widget shell created, now fetching preview CSS if available...", state.config.workspace);
+    await fetchCSS(state.config.workspace, widget, header, body);
+    positionWidget();
+    window.addEventListener("resize", positionWidget);
+  }
+  function positionWidget() {
+    if (!state.widgetEl) return;
+    const { position, align } = state.config;
+    const offset = 20;
+    state.widgetEl.style.bottom = "";
+    state.widgetEl.style.top = "";
+    state.widgetEl.style.left = "";
+    state.widgetEl.style.right = "";
+    state.widgetEl.style.transform = "";
+    if (position === "bottom") {
+      state.widgetEl.style.bottom = offset + "px";
+    } else {
+      state.widgetEl.style.top = offset + "px";
+    }
+    if (align === "left") {
+      state.widgetEl.style.left = offset + "px";
+    } else if (align === "center") {
+      state.widgetEl.style.left = "50%";
+      state.widgetEl.style.transform = "translateX(-50%)";
+    } else {
+      state.widgetEl.style.right = offset + "px";
+    }
+  }
+  async function fetchChangelog(id) {
+    if (state.config.initialData) {
+      return state.config.initialData;
+    }
+    let urlStr = `https://demoapi.rivia.ai/change_logs_by_workspace_name`;
+    if (!urlStr) throw new Error("apiUrl is not configured");
+    if (id) {
+      if (urlStr.includes("{id}")) urlStr = urlStr.replace("{id}", encodeURIComponent(id));
+      else if (urlStr.includes(":id")) urlStr = urlStr.replace(":id", encodeURIComponent(id));
+      else urlStr = urlStr.replace(/\/$/, "") + "/" + encodeURIComponent(id);
+    }
+    try {
+      const url = new URL(urlStr, window.location.origin);
+      const headers = Object.assign({}, state.config.fetchOptions.headers || {});
+      const opts = Object.assign({ method: "GET", headers }, state.config.fetchOptions);
+      const res = await fetch(url.toString(), opts);
+      if (!res.ok) {
+        throw new Error("Failed to fetch changelog: " + res.status + " " + res.statusText);
+      }
+      const payload = await res.json();
+      state.changelogEntries = payload.message || [];
+      return state.changelogEntries;
+    } catch (err) {
+      throw err;
+    }
+  }
+  function renderChangelog(data) {
+    if (!state.widgetBody) return;
+    if (state.widgetHeader.childNodes[0]) {
+      state.widgetHeader.childNodes[0].nodeValue = "Latest Updates";
+    }
+    if (!data || !data.length) {
+      state.widgetBody.innerHTML = '<div class="pm-lite-empty">No updates yet.</div>';
+      return;
+    }
+    const frag = document.createDocumentFragment();
+    let i = 0;
+    data.forEach((it) => {
+      i++;
+      if (i > 3) return;
+      const div = document.createElement("div");
+      div.className = "pm-lite-item";
+      const date = it.created_at ? new Date(it.created_at).toLocaleDateString() : "";
+      if (it.label) {
+        const tag = document.createElement("span");
+        tag.className = "pm-lite-tags";
+        tag.innerText = it.label;
+        tag.style.display = "inline-block";
+        tag.style.borderRadius = "999px";
+        tag.style.fontSize = "11px";
+        tag.style.fontWeight = "bold";
+        tag.style.fontFamily = "Verdana, sans-serif";
+        tag.style.backgroundColor = "rgb(220, 252, 231)";
+        tag.style.color = "rgb(22, 101, 52)";
+        tag.style.border = "1px solid rgb(187, 247, 208)";
+        div.appendChild(tag);
+      }
+      const header = document.createElement("div");
+      header.className = "pm-lite-item-header";
+      header.style.fontWeight = "600";
+      header.innerText = `${it.title || "Untitled"}  `;
+      header.style.display = "-webkit-box";
+      header.style.webkitLineClamp = "1";
+      header.style.webkitBoxOrient = "vertical";
+      header.style.overflow = "hidden";
+      header.style.textOverflow = "ellipsis";
+      header.style.fontSize = state.titleFontSize;
+      const content = document.createElement("div");
+      content.innerHTML = it.text || "";
+      content.style.display = "-webkit-box";
+      content.style.webkitLineClamp = "3";
+      content.style.webkitBoxOrient = "vertical";
+      content.style.overflow = "hidden";
+      content.style.textOverflow = "ellipsis";
+      content.querySelectorAll("b, strong").forEach((el) => {
+        el.style.fontWeight = "normal";
+      });
+      div.appendChild(header);
+      div.appendChild(content);
+      frag.appendChild(div);
+    });
+    state.widgetBody.innerHTML = "";
+    state.widgetBody.appendChild(frag);
+  }
+  function escapeHtml(str) {
+    if (!str) return "";
+    return String(str).replace(/[&<>\"']/g, function(s) {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[s];
+    });
+  }
+  function showWidget() {
+    if (!state.widgetEl) createWidgetShell();
+    state.backdropEl.style.display = "block";
+    state.widgetEl.style.visibility = "hidden";
+    state.widgetEl.style.display = "block";
+  }
+  function closeWidget() {
+    if (!state.widgetEl) return;
+    state.backdropEl.style.display = "none";
+    state.widgetEl.style.display = "none";
+  }
+  function computePlacement(triggerRect, widgetRect, cfg) {
+    const offset = cfg && cfg.attachOffset || 8;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let top = triggerRect.bottom + offset;
+    let left;
+    const align = cfg && cfg.align ? cfg.align : state.config.align || "right";
+    if (align === "left") {
+      left = triggerRect.left;
+    } else if (align === "center") {
+      left = triggerRect.left + triggerRect.width / 2 - widgetRect.width / 2;
+    } else {
+      left = triggerRect.right - widgetRect.width;
+    }
+    if (top + widgetRect.height > vh) {
+      top = triggerRect.top - widgetRect.height - offset;
+    }
+    if (top < 6) top = 6;
+    const margin = 6;
+    if (left + widgetRect.width > vw - margin) left = vw - widgetRect.width - margin;
+    if (left < margin) left = margin;
+    return { top, left };
+  }
+  async function openWidgetFor(id) {
+    try {
+      showWidget();
+      state.widgetBody.innerHTML = '<div class="pm-lite-loading">Loading\u2026</div>';
+      const data = await fetchChangelog(id);
+      renderChangelog(data);
+      const active = document.activeElement;
+      const selector = state.config.buttonSelector || "[data-pm-changelog]";
+      const isTrigger = active && active instanceof Element && active.matches && active.matches(selector);
+      if (isTrigger) {
+        state.widgetEl.style.visibility = "hidden";
+        state.widgetEl.style.display = "block";
+        await new Promise((r) => requestAnimationFrame(r));
+        const widgetRect = state.widgetEl.getBoundingClientRect();
+        const triggerRect = active.getBoundingClientRect();
+        const { top, left } = computePlacement(triggerRect, widgetRect, state.config);
+        state.widgetEl.style.position = "fixed";
+        state.widgetEl.style.top = Math.round(top) + "px";
+        state.widgetEl.style.left = Math.round(left) + "px";
+        state.widgetEl.style.right = "auto";
+        state.widgetEl.style.bottom = "auto";
+        state.widgetEl.style.transform = "none";
+        state.widgetEl.style.visibility = "visible";
+      } else {
+        positionWidget();
+      }
+    } catch (err) {
+      state.widgetBody.innerHTML = `<div class="pm-lite-error">Error loading changelog: ${escapeHtml(err.message)}</div>`;
+      console.error(err);
+    }
+  }
+  function bindClicks() {
+    document.addEventListener("click", function onDocClick(e) {
+      const el = e.target.closest(state.config.buttonSelector);
+      if (!el) return;
+      e.preventDefault();
+      const id = el.getAttribute("data-pm-changelog");
+      openWidgetFor(state.config.workspace || id);
+    });
+  }
+  async function syncUserFromConfig() {
+    const cfg = state.config;
+    if (!cfg.workspace || !cfg.email) {
+      console.warn("ProductManagement: workspace/email missing, skipping user sync");
+      return;
+    }
+    const payload = {
+      workspace: cfg.workspace,
+      pmUserId: cfg.pmUserId,
+      name: cfg.name,
+      email: cfg.email,
+      user_avatar: cfg.user_avatar,
+      url: cfg.url
+    };
+    try {
+      const res = await fetch(`https://demoapi.rivia.ai/pm_users`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+      });
+      if (!res.ok) {
+        throw new Error(`Failed to sync user (${res.status})`);
+      }
+      const data = await res.json();
+      if (data?.pm_user?.pm_user_id) {
+        state.pmUserId = data.pm_user.pm_user_id;
+      } else {
+        state.pmUserId = cfg.pm_user_id;
+      }
+    } catch (err) {
+      console.error("ProductManagement user sync failed:", err);
+    }
+  }
+  function init(cfg) {
+    if (state.initialized) {
+      console.warn("ProductManagement already initialized \u2014 ignoring subsequent init call.");
+      return;
+    }
+    mergeConfig(cfg);
+    syncUserFromConfig();
+    bindClicks();
+    state.initialized = true;
+  }
+  function setConfig(cfg) {
+    mergeConfig(Object.assign({}, state.config, cfg));
+    if (state.widgetEl) {
+      state.widgetEl.className = "pm-lite-widget " + (state.config.theme === "dark" ? "dark" : "light");
+      positionWidget();
+    }
+  }
+  function attachButton(selector) {
+    state.config.buttonSelector = selector;
+  }
+  function destroy() {
+    if (state.widgetEl) state.widgetEl.remove();
+    if (state.backdropEl) state.backdropEl.remove();
+    const style = document.getElementById("pm-lite-styles");
+    if (style) style.remove();
+    state.widgetEl = null;
+    state.backdropEl = null;
+    state.initialized = false;
+  }
+  return {
+    init,
+    open: openWidgetFor,
+    close: closeWidget,
+    setConfig,
+    attachButton,
+    destroy
+  };
+}();
+if (typeof window !== "undefined") window.ProductManagement = ProductManagement;
+var pm_default = ProductManagement;
+
+// src/utils/index.js
+if (typeof window !== "undefined") {
+  window.Checklist = rivia_default;
+  window.Tours = rivia_tour_default;
+  window.Banner = banner_default;
+  window.triggerEvent = triggerEvent;
+  window.ProductManagement = pm_default;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Banner,
+  Checklist,
+  ProductManagement,
+  Tours,
+  triggerEvent
+});
+//# sourceMappingURL=index.cjs.js.map