smartcomply-web-sdk 1.0.24 → 1.0.30

package/dist/smartcomply.browser.js

@@ -4486,11 +4486,11 @@ var SmartComplySDK = (() => {
           return (left + right) / 2;
         }
         case "TURN_LEFT": {
-          const yaw = this.getHeadYaw(matrix);
-          return yaw < -8 ? Math.min(1, Math.abs(yaw) / 25) : 0;
+          const yaw = Math.abs(this.getHeadYaw(matrix));
+          return yaw > 8 ? Math.min(1, yaw / 25) : 0;
         }
         case "TURN_RIGHT": {
-          const yaw = this.getHeadYaw(matrix);
+          const yaw = Math.abs(this.getHeadYaw(matrix));
           return yaw > 8 ? Math.min(1, yaw / 25) : 0;
         }
         case "TURN_HEAD": {
@@ -4521,38 +4521,23 @@ var SmartComplySDK = (() => {
 
   // src/modules/liveness/LivenessUI.ts
   var ICONS = {
-    BLINK: "\u{1F609}",
-    TURN_LEFT: "\u2B05",
-    TURN_RIGHT: "\u27A1",
-    TURN_HEAD: "\u{1F642}",
+    BLINK: "\u{1F441}",
+    TURN_LEFT: "\u2194",
+    TURN_RIGHT: "\u2194",
+    TURN_HEAD: "\u2194",
     OPEN_MOUTH: "\u{1F62E}"
   };
   var ACTION_CUES = {
-    BLINK: `
-    <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
-      <div style="font-size:64px;line-height:1;animation:sc-blink 1.2s ease-in-out infinite;">\u{1F441}\uFE0F</div>
-      <div style="font-size:13px;font-weight:600;color:#fff;opacity:0.9;letter-spacing:0.5px;">BLINK YOUR EYES</div>
-    </div>`,
-    TURN_LEFT: `
-    <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
-      <div style="font-size:56px;line-height:1;animation:sc-slide-left 1s ease-in-out infinite;">\u2B05\uFE0F</div>
-      <div style="font-size:13px;font-weight:600;color:#fff;opacity:0.9;letter-spacing:0.5px;">TURN HEAD RIGHT</div>
-    </div>`,
-    TURN_RIGHT: `
-    <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
-      <div style="font-size:56px;line-height:1;animation:sc-slide-right 1s ease-in-out infinite;">\u27A1\uFE0F</div>
-      <div style="font-size:13px;font-weight:600;color:#fff;opacity:0.9;letter-spacing:0.5px;">TURN HEAD LEFT</div>
-    </div>`,
-    TURN_HEAD: `
-    <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
-      <div style="font-size:56px;line-height:1;animation:sc-turn-head 1.4s ease-in-out infinite;">\u2194\uFE0F</div>
-      <div style="font-size:13px;font-weight:600;color:#fff;opacity:0.9;letter-spacing:0.5px;">TURN HEAD SIDE TO SIDE</div>
-    </div>`,
-    OPEN_MOUTH: `
-    <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
-      <div style="font-size:64px;line-height:1;animation:sc-mouth 1.2s ease-in-out infinite;">\u{1F62E}</div>
-      <div style="font-size:13px;font-weight:600;color:#fff;opacity:0.9;letter-spacing:0.5px;">OPEN YOUR MOUTH</div>
-    </div>`
+    BLINK: `<div style="font-size:52px;line-height:1;animation:sc-blink 1.2s ease-in-out infinite;">\u{1F441}\uFE0F</div>
+          <div style="font-size:12px;font-weight:600;color:#fff;margin-top:6px;letter-spacing:0.5px;">BLINK YOUR EYES</div>`,
+    TURN_LEFT: `<div style="font-size:52px;line-height:1;animation:sc-turn-head 1.4s ease-in-out infinite;">\u2194\uFE0F</div>
+              <div style="font-size:12px;font-weight:600;color:#fff;margin-top:6px;letter-spacing:0.5px;">TURN HEAD SIDEWAYS</div>`,
+    TURN_RIGHT: `<div style="font-size:52px;line-height:1;animation:sc-turn-head 1.4s ease-in-out infinite;">\u2194\uFE0F</div>
+               <div style="font-size:12px;font-weight:600;color:#fff;margin-top:6px;letter-spacing:0.5px;">TURN HEAD SIDEWAYS</div>`,
+    TURN_HEAD: `<div style="font-size:52px;line-height:1;animation:sc-turn-head 1.4s ease-in-out infinite;">\u2194\uFE0F</div>
+              <div style="font-size:12px;font-weight:600;color:#fff;margin-top:6px;letter-spacing:0.5px;">TURN HEAD SIDE TO SIDE</div>`,
+    OPEN_MOUTH: `<div style="font-size:52px;line-height:1;animation:sc-mouth 1.2s ease-in-out infinite;">\u{1F62E}</div>
+               <div style="font-size:12px;font-weight:600;color:#fff;margin-top:6px;letter-spacing:0.5px;">OPEN YOUR MOUTH</div>`
   };
   function injectLivenessKeyframes() {
     if (document.getElementById("sc-liveness-kf")) return;
@@ -4561,37 +4546,23 @@ var SmartComplySDK = (() => {
     s2.textContent = `
     @keyframes sc-blink {
       0%,100% { transform:scaleY(1); }
-      40%      { transform:scaleY(0.1); }
-      50%      { transform:scaleY(1); }
-    }
-    @keyframes sc-slide-left {
-      0%,100% { transform:translateX(0);   opacity:1; }
-      50%      { transform:translateX(-14px); opacity:0.6; }
-    }
-    @keyframes sc-slide-right {
-      0%,100% { transform:translateX(0);    opacity:1; }
-      50%      { transform:translateX(14px); opacity:0.6; }
+      40%     { transform:scaleY(0.1); }
+      50%     { transform:scaleY(1); }
     }
     @keyframes sc-turn-head {
-      0%,100% { transform:translateX(0);    }
-      25%      { transform:translateX(-12px); }
-      75%      { transform:translateX(12px);  }
+      0%,100% { transform:translateX(0); }
+      25%     { transform:translateX(-12px); }
+      75%     { transform:translateX(12px); }
     }
     @keyframes sc-mouth {
-      0%,100% { transform:scaleY(1);   }
-      40%      { transform:scaleY(1.25); }
-      60%      { transform:scaleY(1);   }
+      0%,100% { transform:scaleY(1); }
+      40%     { transform:scaleY(1.25); }
+      60%     { transform:scaleY(1); }
     }
     @keyframes sc-pop-in {
       0%   { transform:scale(0.7); opacity:0; }
       60%  { transform:scale(1.05); }
-      100% { transform:scale(1);   opacity:1; }
-    }
-    @keyframes sc-cue-fade {
-      0%   { opacity:0; transform:translateY(8px);  }
-      20%  { opacity:1; transform:translateY(0);    }
-      80%  { opacity:1; transform:translateY(0);    }
-      100% { opacity:0; transform:translateY(-8px); }
+      100% { transform:scale(1); opacity:1; }
     }
   `;
     document.head.appendChild(s2);
@@ -4617,81 +4588,107 @@ var SmartComplySDK = (() => {
       this.totalActions = challenge.actions.length;
       this.root = document.createElement("div");
       this.root.style.cssText = `
-      position:relative;width:100%;max-width:420px;margin:0 auto;
+      display:flex;flex-direction:row;width:100%;max-width:560px;margin:0 auto;
       background:#0a0a0a;border-radius:16px;overflow:hidden;
       font-family:system-ui,-apple-system,sans-serif;
       box-shadow:0 8px 32px rgba(0,0,0,0.4);
+      min-height:340px;
+    `;
+      const camCol = document.createElement("div");
+      camCol.style.cssText = `
+      position:relative;flex:0 0 58%;
+      background:#000;overflow:hidden;
     `;
       this.videoEl = document.createElement("video");
       this.videoEl.autoplay = true;
       this.videoEl.playsInline = true;
       this.videoEl.muted = true;
-      this.videoEl.style.cssText = "width:100%;display:block;transform:scaleX(-1);aspect-ratio:3/4;object-fit:cover;";
+      this.videoEl.style.cssText = `
+      width:100%;height:100%;display:block;
+      transform:scaleX(-1);object-fit:cover;
+      min-height:320px;
+    `;
       const guideWrap = document.createElement("div");
       guideWrap.style.cssText = `
-      position:absolute;top:8%;left:50%;transform:translateX(-50%);
-      width:180px;height:240px;pointer-events:none;
+      position:absolute;top:50%;left:50%;
+      transform:translate(-50%,-55%);
+      width:140px;height:180px;pointer-events:none;
     `;
       const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.setAttribute("viewBox", "0 0 180 240");
+      svg.setAttribute("viewBox", "0 0 140 180");
       svg.style.cssText = "width:100%;height:100%;";
-      const bgOval = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "ellipse"
-      );
-      bgOval.setAttribute("cx", "90");
-      bgOval.setAttribute("cy", "120");
-      bgOval.setAttribute("rx", "85");
-      bgOval.setAttribute("ry", "115");
+      const bgOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+      bgOval.setAttribute("cx", "70");
+      bgOval.setAttribute("cy", "90");
+      bgOval.setAttribute("rx", "64");
+      bgOval.setAttribute("ry", "86");
       bgOval.setAttribute("fill", "none");
-      bgOval.setAttribute("stroke", "rgba(255,255,255,0.25)");
-      bgOval.setAttribute("stroke-width", "2.5");
-      bgOval.setAttribute("stroke-dasharray", "8 4");
-      const confOval = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "ellipse"
-      );
-      confOval.setAttribute("cx", "90");
-      confOval.setAttribute("cy", "120");
-      confOval.setAttribute("rx", "85");
-      confOval.setAttribute("ry", "115");
+      bgOval.setAttribute("stroke", "rgba(255,255,255,0.3)");
+      bgOval.setAttribute("stroke-width", "2");
+      bgOval.setAttribute("stroke-dasharray", "6 3");
+      const confOval = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+      confOval.setAttribute("cx", "70");
+      confOval.setAttribute("cy", "90");
+      confOval.setAttribute("rx", "64");
+      confOval.setAttribute("ry", "86");
       confOval.setAttribute("fill", "none");
       confOval.setAttribute("stroke", "#22c55e");
-      confOval.setAttribute("stroke-width", "3.5");
-      const circumference = 2 * Math.PI * Math.sqrt((85 * 85 + 115 * 115) / 2);
-      confOval.setAttribute(
-        "stroke-dasharray",
-        `${circumference}`
-      );
-      confOval.setAttribute("stroke-dashoffset", `${circumference}`);
-      confOval.style.cssText = "transition:stroke-dashoffset 0.15s ease;transform:rotate(-90deg);transform-origin:90px 120px;";
+      confOval.setAttribute("stroke-width", "3");
+      const circ = 2 * Math.PI * Math.sqrt((64 * 64 + 86 * 86) / 2);
+      confOval.setAttribute("stroke-dasharray", `${circ}`);
+      confOval.setAttribute("stroke-dashoffset", `${circ}`);
+      confOval.style.cssText = "transition:stroke-dashoffset 0.15s ease;transform:rotate(-90deg);transform-origin:70px 90px;";
       this.confidenceRingEl = confOval;
       svg.appendChild(bgOval);
       svg.appendChild(confOval);
       guideWrap.appendChild(svg);
-      const topBar = document.createElement("div");
-      topBar.style.cssText = `
+      const camTop = document.createElement("div");
+      camTop.style.cssText = `
       position:absolute;top:0;left:0;right:0;
-      background:linear-gradient(180deg,rgba(0,0,0,0.7) 0%,transparent 100%);
-      padding:16px 16px 32px;
+      background:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,transparent 100%);
+      padding:10px 12px 28px;
     `;
       this.instructionEl = document.createElement("div");
       this.instructionEl.style.cssText = `
-      color:#fff;font-size:15px;font-weight:600;text-align:center;
-      line-height:1.4;
+      color:#fff;font-size:13px;font-weight:600;text-align:center;line-height:1.4;
     `;
       this.instructionEl.textContent = challenge.instruction;
-      topBar.appendChild(this.instructionEl);
-      const bottomPanel = document.createElement("div");
-      bottomPanel.style.cssText = `
+      camTop.appendChild(this.instructionEl);
+      const camBottom = document.createElement("div");
+      camBottom.style.cssText = `
       position:absolute;bottom:0;left:0;right:0;
-      background:linear-gradient(0deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.6) 60%,transparent 100%);
-      padding:24px 16px 16px;
+      background:linear-gradient(0deg,rgba(0,0,0,0.7) 0%,transparent 100%);
+      padding:24px 10px 8px;text-align:center;
+    `;
+      this.timerEl = document.createElement("div");
+      this.timerEl.style.cssText = `
+      color:rgba(255,255,255,0.5);font-size:11px;font-variant-numeric:tabular-nums;
+    `;
+      camBottom.appendChild(this.timerEl);
+      this.actionCueEl = document.createElement("div");
+      this.actionCueEl.style.cssText = `
+      position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
+      z-index:5;pointer-events:none;display:none;text-align:center;
+      background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
+      border-radius:14px;padding:10px 18px;min-width:130px;
+      border:1.5px solid rgba(255,255,255,0.12);
+    `;
+      camCol.appendChild(this.videoEl);
+      camCol.appendChild(guideWrap);
+      camCol.appendChild(camTop);
+      camCol.appendChild(camBottom);
+      camCol.appendChild(this.actionCueEl);
+      const stepsCol = document.createElement("div");
+      stepsCol.style.cssText = `
+      flex:1;display:flex;flex-direction:column;
+      padding:16px 14px;gap:8px;
+      background:#111;border-left:1px solid rgba(255,255,255,0.06);
+      justify-content:space-between;
     `;
       const progressWrap = document.createElement("div");
       progressWrap.style.cssText = `
-      height:3px;background:rgba(255,255,255,0.15);border-radius:2px;
-      margin-bottom:14px;overflow:hidden;
+      height:3px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;
+      margin-bottom:4px;
     `;
       this.progressBarEl = document.createElement("div");
       this.progressBarEl.style.cssText = `
@@ -4699,78 +4696,52 @@ var SmartComplySDK = (() => {
       border-radius:2px;transition:width 0.4s ease;
     `;
       progressWrap.appendChild(this.progressBarEl);
-      bottomPanel.appendChild(progressWrap);
       this.stepsEl = document.createElement("div");
-      this.stepsEl.style.cssText = `
-      display:flex;flex-direction:column;gap:8px;margin-bottom:12px;
-    `;
+      this.stepsEl.style.cssText = "display:flex;flex-direction:column;gap:6px;flex:1;";
       for (let i2 = 0; i2 < challenge.actions.length; i2++) {
         const action = challenge.actions[i2];
         const step = document.createElement("div");
         step.dataset.action = action;
         step.style.cssText = `
-        display:flex;align-items:center;gap:10px;
-        padding:8px 12px;border-radius:10px;
-        background:rgba(255,255,255,0.06);
+        display:flex;align-items:center;gap:8px;
+        padding:8px 10px;border-radius:10px;
+        background:rgba(255,255,255,0.04);
+        border:1px solid rgba(255,255,255,0.06);
         transition:all 0.3s ease;
-        opacity:${i2 === 0 ? "1" : "0.4"};
+        opacity:${i2 === 0 ? "1" : "0.45"};
       `;
         const num = document.createElement("div");
         num.className = "sc-step-num";
         num.style.cssText = `
-        width:28px;height:28px;border-radius:50%;
+        width:24px;height:24px;border-radius:50%;flex-shrink:0;
         display:flex;align-items:center;justify-content:center;
-        font-size:13px;font-weight:700;color:#fff;
-        background:rgba(255,255,255,0.12);
-        border:2px solid rgba(255,255,255,0.2);
-        transition:all 0.3s ease;flex-shrink:0;
+        font-size:12px;font-weight:700;color:#fff;
+        background:rgba(255,255,255,0.1);
+        border:1.5px solid rgba(255,255,255,0.2);
+        transition:all 0.3s ease;
       `;
         num.textContent = String(i2 + 1);
         const label = document.createElement("div");
-        label.style.cssText = "color:#fff;font-size:13px;flex:1;";
+        label.style.cssText = "color:#fff;font-size:12px;font-weight:500;flex:1;line-height:1.3;";
         label.textContent = this.describeAction(action);
         const icon = document.createElement("div");
-        icon.className = "sc-step-icon";
-        icon.style.cssText = "font-size:18px;flex-shrink:0;";
+        icon.style.cssText = "font-size:16px;flex-shrink:0;";
         icon.textContent = ICONS[action] || "";
         step.appendChild(num);
         step.appendChild(label);
         step.appendChild(icon);
         this.stepsEl.appendChild(step);
       }
-      bottomPanel.appendChild(this.stepsEl);
-      this.timerEl = document.createElement("div");
-      this.timerEl.style.cssText = `
-      text-align:center;color:rgba(255,255,255,0.5);
-      font-size:11px;font-variant-numeric:tabular-nums;
-    `;
-      bottomPanel.appendChild(this.timerEl);
+      stepsCol.appendChild(progressWrap);
+      stepsCol.appendChild(this.stepsEl);
       this.overlayEl = document.createElement("div");
       this.overlayEl.style.cssText = `
       position:absolute;inset:0;display:none;align-items:center;
       justify-content:center;z-index:10;
-      background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);
-      transition:opacity 0.3s ease;
-    `;
-      this.actionCueEl = document.createElement("div");
-      this.actionCueEl.style.cssText = `
-      position:absolute;
-      top:50%;left:50%;transform:translate(-50%,-50%);
-      z-index:5;pointer-events:none;
-      display:none;
-      text-align:center;
-      background:rgba(0,0,0,0.55);
-      backdrop-filter:blur(4px);
-      border-radius:20px;
-      padding:18px 28px;
-      min-width:160px;
-      border:1.5px solid rgba(255,255,255,0.15);
+      background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);
     `;
-      this.root.appendChild(this.videoEl);
-      this.root.appendChild(guideWrap);
-      this.root.appendChild(topBar);
-      this.root.appendChild(bottomPanel);
-      this.root.appendChild(this.actionCueEl);
+      this.root.appendChild(camCol);
+      this.root.appendChild(stepsCol);
       this.root.appendChild(this.overlayEl);
       container.appendChild(this.root);
       this.startTimer(challenge.time_limit_seconds);
@@ -4780,7 +4751,6 @@ var SmartComplySDK = (() => {
       if (!this.stepsEl || !this.progressBarEl) return;
       let completed = 0;
       const activeState = states.find((s2) => s2.active && !s2.detected) ?? null;
-      const activeAction = activeState?.action ?? null;
       for (const state of states) {
         const step = this.stepsEl.querySelector(
           `[data-action="${state.action}"]`
@@ -4790,7 +4760,8 @@ var SmartComplySDK = (() => {
         if (state.detected) {
           completed++;
           step.style.opacity = "1";
-          step.style.background = "rgba(34,197,94,0.15)";
+          step.style.background = "rgba(34,197,94,0.12)";
+          step.style.borderColor = "rgba(34,197,94,0.3)";
           if (num) {
             num.style.background = "#22c55e";
             num.style.borderColor = "#22c55e";
@@ -4798,7 +4769,8 @@ var SmartComplySDK = (() => {
           }
         } else if (state.active) {
           step.style.opacity = "1";
-          step.style.background = "rgba(59,130,246,0.15)";
+          step.style.background = "rgba(59,130,246,0.12)";
+          step.style.borderColor = "rgba(59,130,246,0.3)";
           if (num) {
             num.style.borderColor = "#3b82f6";
             num.style.background = "rgba(59,130,246,0.3)";
@@ -4808,16 +4780,12 @@ var SmartComplySDK = (() => {
       const pct = this.totalActions > 0 ? completed / this.totalActions * 100 : 0;
       this.progressBarEl.style.width = `${pct}%`;
       if (this.confidenceRingEl) {
-        const circumference = 2 * Math.PI * Math.sqrt((85 * 85 + 115 * 115) / 2);
+        const circ = 2 * Math.PI * Math.sqrt((64 * 64 + 86 * 86) / 2);
         const conf = activeState ? activeState.confidence : 0;
-        const offset = circumference * (1 - conf);
-        this.confidenceRingEl.setAttribute("stroke-dashoffset", `${offset}`);
-        this.confidenceRingEl.setAttribute(
-          "stroke",
-          conf > 0.6 ? "#22c55e" : "#3b82f6"
-        );
+        this.confidenceRingEl.setAttribute("stroke-dashoffset", `${circ * (1 - conf)}`);
+        this.confidenceRingEl.setAttribute("stroke", conf > 0.6 ? "#22c55e" : "#3b82f6");
       }
-      this.updateActionCue(activeAction);
+      this.updateActionCue(activeState?.action ?? null);
     }
     updateActionCue(action) {
       if (!this.actionCueEl) return;
@@ -4840,18 +4808,14 @@ var SmartComplySDK = (() => {
       this.actionCueEl.style.animation = "sc-pop-in 0.3s ease forwards";
     }
     updateInstruction(text) {
-      if (this.instructionEl) {
-        this.instructionEl.textContent = text;
-      }
+      if (this.instructionEl) this.instructionEl.textContent = text;
     }
     stopTimer() {
       if (this.timerInterval) {
         clearInterval(this.timerInterval);
         this.timerInterval = null;
       }
-      if (this.timerEl) {
-        this.timerEl.textContent = "";
-      }
+      if (this.timerEl) this.timerEl.textContent = "";
     }
     showResult(status, verificationId) {
       return new Promise((resolve) => {
@@ -4861,38 +4825,22 @@ var SmartComplySDK = (() => {
         }
         if (this.actionCueEl) this.actionCueEl.style.display = "none";
         this.stopTimer();
-        const isProcessing = status === "processing";
+        const ok = status === "processing";
         this.overlayEl.style.display = "flex";
         this.overlayEl.innerHTML = `
         <div style="text-align:center;color:#fff;animation:sc-pop-in 0.35s ease;padding:24px;">
-          <div style="
-            width:80px;height:80px;border-radius:50%;margin:0 auto 20px;
-            display:flex;align-items:center;justify-content:center;
-            font-size:36px;
-            background:${isProcessing ? "rgba(34,197,94,0.2)" : "rgba(239,68,68,0.2)"};
-            border:3px solid ${isProcessing ? "#22c55e" : "#ef4444"};
-          ">${isProcessing ? "\u2713" : "\u2717"}</div>
-          <div style="font-size:19px;font-weight:700;margin-bottom:8px;">
-            ${isProcessing ? "Identity Check Submitted" : "Submission Failed"}
+          <div style="width:72px;height:72px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:32px;
+            background:${ok ? "rgba(34,197,94,0.2)" : "rgba(239,68,68,0.2)"};
+            border:3px solid ${ok ? "#22c55e" : "#ef4444"};">
+            ${ok ? "\u2713" : "\u2715"}
           </div>
-          <div style="font-size:13px;opacity:0.65;line-height:1.6;margin-bottom:${verificationId ? "16px" : "0"};">
-            ${isProcessing ? "Your identity is being verified.<br>You'll be notified of the outcome shortly." : "Something went wrong. Please try again."}
-          </div>
-          ${verificationId ? `
-          <div style="
-            margin-top:4px;padding:8px 14px;border-radius:8px;
-            background:rgba(255,255,255,0.08);display:inline-block;
-            font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:0.3px;
-          ">Ref: #${verificationId}</div>` : ""}
-        </div>
-      `;
+          <div style="font-size:17px;font-weight:700;margin-bottom:8px;">${ok ? "Identity Check Submitted" : "Submission Failed"}</div>
+          <div style="font-size:12px;opacity:0.6;line-height:1.6;">${ok ? "Your identity is being verified.<br>You'll be notified of the outcome shortly." : "Something went wrong. Please try again."}</div>
+          ${verificationId ? `<div style="margin-top:12px;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,0.07);display:inline-block;font-size:11px;color:rgba(255,255,255,0.4);">Ref: #${verificationId}</div>` : ""}
+        </div>`;
         setTimeout(resolve, 2800);
       });
     }
-    /**
-     * Show timeout screen with an optional retry callback.
-     * Resolves immediately so the orchestrator can move to next step.
-     */
     showTimeout(onRetry) {
       return new Promise((resolve) => {
         if (!this.overlayEl) {
@@ -4904,29 +4852,14 @@ var SmartComplySDK = (() => {
         this.overlayEl.style.display = "flex";
         this.overlayEl.innerHTML = `
         <div style="text-align:center;color:#fff;animation:sc-pop-in 0.35s ease;padding:24px;">
-          <div style="
-            width:80px;height:80px;border-radius:50%;margin:0 auto 16px;
-            display:flex;align-items:center;justify-content:center;
-            font-size:36px;
-            background:rgba(251,191,36,0.15);
-            border:3px solid #fbbf24;
-          ">\u23F1</div>
-          <div style="font-size:18px;font-weight:700;margin-bottom:8px;">Time's Up</div>
-          <div style="font-size:13px;opacity:0.65;margin-bottom:20px;">
-            You ran out of time. Please try again.
-          </div>
-          <button id="sc-retry-btn" style="
-            padding:12px 28px;border-radius:10px;
-            background:#3b82f6;color:#fff;
-            border:none;cursor:pointer;
-            font-size:14px;font-weight:600;
-            width:100%;max-width:200px;
-          ">Try Again</button>
-        </div>
-      `;
-        const retryBtn = this.overlayEl.querySelector("#sc-retry-btn");
-        if (retryBtn) {
-          retryBtn.addEventListener("click", () => {
+          <div style="width:72px;height:72px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:32px;background:rgba(251,191,36,0.15);border:3px solid #fbbf24;">\u23F1</div>
+          <div style="font-size:17px;font-weight:700;margin-bottom:8px;">Time's Up</div>
+          <div style="font-size:12px;opacity:0.6;margin-bottom:18px;">You ran out of time. Please try again.</div>
+          <button id="sc-retry-btn" style="padding:11px 28px;border-radius:10px;background:#3b82f6;color:#fff;border:none;cursor:pointer;font-size:14px;font-weight:600;width:100%;max-width:180px;">Try Again</button>
+        </div>`;
+        const btn = this.overlayEl.querySelector("#sc-retry-btn");
+        if (btn) {
+          btn.addEventListener("click", () => {
             onRetry();
             resolve();
           });
@@ -4938,21 +4871,11 @@ var SmartComplySDK = (() => {
     getVideoElement() {
       return this.videoEl;
     }
-    /**
-     * Mount a document scanning step before the liveness challenge.
-     * Reuses the already-open camera stream — no second permission prompt.
-     * Resolves with the captured document Blob.
-     */
     mountDocumentCapture(container, stream) {
       return new Promise((resolve, reject) => {
         injectLivenessKeyframes();
         const docRoot = document.createElement("div");
-        docRoot.style.cssText = `
-        position:relative;width:100%;max-width:420px;margin:0 auto;
-        background:#0a0a0a;border-radius:16px;overflow:hidden;
-        font-family:system-ui,-apple-system,sans-serif;
-        box-shadow:0 8px 32px rgba(0,0,0,0.4);
-      `;
+        docRoot.style.cssText = `position:relative;width:100%;max-width:420px;margin:0 auto;background:#0a0a0a;border-radius:16px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;box-shadow:0 8px 32px rgba(0,0,0,0.4);`;
         this.docCaptureRoot = docRoot;
         const docVideo = document.createElement("video");
         docVideo.autoplay = true;
@@ -4962,36 +4885,13 @@ var SmartComplySDK = (() => {
         docVideo.srcObject = stream;
         const guideOverlay = document.createElement("div");
         guideOverlay.style.cssText = "position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;";
-        guideOverlay.innerHTML = `
-        <div style="width:83%;height:53%;border:2px dashed rgba(255,255,255,0.55);border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,0.45);position:relative;">
-          <div style="position:absolute;top:-2px;left:-2px;width:18px;height:18px;border-top:3px solid #3b82f6;border-left:3px solid #3b82f6;border-radius:4px 0 0 0;"></div>
-          <div style="position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-top:3px solid #3b82f6;border-right:3px solid #3b82f6;border-radius:0 4px 0 0;"></div>
-          <div style="position:absolute;bottom:-2px;left:-2px;width:18px;height:18px;border-bottom:3px solid #3b82f6;border-left:3px solid #3b82f6;border-radius:0 0 0 4px;"></div>
-          <div style="position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-bottom:3px solid #3b82f6;border-right:3px solid #3b82f6;border-radius:0 0 4px 0;"></div>
-        </div>
-      `;
+        guideOverlay.innerHTML = `<div style="width:83%;height:53%;border:2px dashed rgba(255,255,255,0.55);border-radius:10px;box-shadow:0 0 0 2000px rgba(0,0,0,0.45);position:relative;"><div style="position:absolute;top:-2px;left:-2px;width:18px;height:18px;border-top:3px solid #3b82f6;border-left:3px solid #3b82f6;border-radius:4px 0 0 0;"></div><div style="position:absolute;top:-2px;right:-2px;width:18px;height:18px;border-top:3px solid #3b82f6;border-right:3px solid #3b82f6;border-radius:0 4px 0 0;"></div><div style="position:absolute;bottom:-2px;left:-2px;width:18px;height:18px;border-bottom:3px solid #3b82f6;border-left:3px solid #3b82f6;border-radius:0 0 0 4px;"></div><div style="position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-bottom:3px solid #3b82f6;border-right:3px solid #3b82f6;border-radius:0 0 4px 0;"></div></div>`;
         const header = document.createElement("div");
         header.style.cssText = "position:absolute;top:0;left:0;right:0;background:linear-gradient(180deg,rgba(0,0,0,0.88) 0%,transparent 100%);padding:18px 16px 40px;text-align:center;";
-        header.innerHTML = `
-        <div style="color:#fff;font-size:16px;font-weight:700;margin-bottom:6px;">Scan Your ID Document</div>
-        <div style="color:rgba(255,255,255,0.6);font-size:12px;line-height:1.6;">
-          Fit your document inside the frame.<br>Make sure all text and corners are visible.
-        </div>
-      `;
+        header.innerHTML = `<div style="color:#fff;font-size:16px;font-weight:700;margin-bottom:6px;">Scan Your ID Document</div><div style="color:rgba(255,255,255,0.6);font-size:12px;line-height:1.6;">Fit your document inside the frame.<br>Make sure all text and corners are visible.</div>`;
         const bottomPanel = document.createElement("div");
-        bottomPanel.style.cssText = "position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.6) 70%,transparent 100%);padding:16px 16px;";
-        bottomPanel.innerHTML = `
-        <div style="font-size:11px;color:rgba(255,255,255,0.4);text-align:center;margin-bottom:12px;">
-          \u{1F4A1} Good lighting &nbsp;\xB7&nbsp; No glare &nbsp;\xB7&nbsp; All 4 corners visible
-        </div>
-        <button id="sc-capture-doc-btn" style="width:100%;padding:12px;border-radius:12px;background:#3b82f6;color:#fff;border:none;cursor:pointer;font-size:15px;font-weight:700;margin-bottom:8px;">
-          Capture Document
-        </button>
-        <label style="width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.18);cursor:pointer;color:rgba(255,255,255,0.6);font-size:13px;font-weight:500;">
-          <span>\u{1F4C1}</span><span>Upload from gallery instead</span>
-          <input id="sc-upload-doc-input" type="file" accept="image/*" style="display:none;" />
-        </label>
-      `;
+        bottomPanel.style.cssText = "position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.6) 70%,transparent 100%);padding:16px;";
+        bottomPanel.innerHTML = `<div style="font-size:11px;color:rgba(255,255,255,0.4);text-align:center;margin-bottom:12px;">\u{1F4A1} Good lighting \xB7 No glare \xB7 All 4 corners visible</div><button id="sc-capture-doc-btn" style="width:100%;padding:12px;border-radius:12px;background:#3b82f6;color:#fff;border:none;cursor:pointer;font-size:15px;font-weight:700;margin-bottom:8px;">Capture Document</button><label style="width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.18);cursor:pointer;color:rgba(255,255,255,0.6);font-size:13px;font-weight:500;"><span>\u{1F4C1}</span><span>Upload from gallery instead</span><input id="sc-upload-doc-input" type="file" accept="image/*" style="display:none;" /></label>`;
         docRoot.appendChild(docVideo);
         docRoot.appendChild(guideOverlay);
         docRoot.appendChild(header);
@@ -5043,11 +4943,11 @@ var SmartComplySDK = (() => {
     }
     unmount() {
       this.stopTimer();
-      if (this.docCaptureRoot && this.docCaptureRoot.parentElement) {
+      if (this.docCaptureRoot?.parentElement) {
         this.docCaptureRoot.parentElement.removeChild(this.docCaptureRoot);
         this.docCaptureRoot = null;
       }
-      if (this.root && this.root.parentElement) {
+      if (this.root?.parentElement) {
         this.root.parentElement.removeChild(this.root);
       }
       this.root = null;
@@ -5066,11 +4966,8 @@ var SmartComplySDK = (() => {
         if (!this.timerEl) return;
         const m2 = Math.floor(remaining / 60);
         const s2 = remaining % 60;
-        const display = m2 > 0 ? `${m2}:${String(s2).padStart(2, "0")}` : `${s2}s`;
-        this.timerEl.textContent = `${display} remaining`;
-        if (remaining <= 5) {
-          this.timerEl.style.color = "#ef4444";
-        }
+        this.timerEl.textContent = `${m2 > 0 ? `${m2}:${String(s2).padStart(2, "0")}` : `${s2}s`} remaining`;
+        if (remaining <= 5) this.timerEl.style.color = "#ef4444";
       };
       update();
       this.timerInterval = setInterval(() => {
@@ -5084,10 +4981,8 @@ var SmartComplySDK = (() => {
     describeAction(action) {
       const labels = {
         BLINK: "Blink your eyes",
-        TURN_LEFT: "Turn your head right",
-        // camera-left = user's right (mirror)
-        TURN_RIGHT: "Turn your head left",
-        // camera-right = user's left (mirror)
+        TURN_LEFT: "Turn your head to the side",
+        TURN_RIGHT: "Turn your head to the side",
         TURN_HEAD: "Turn your head side to side",
         OPEN_MOUTH: "Open your mouth wide"
       };
@@ -5468,10 +5363,8 @@ var SmartComplySDK = (() => {
     describeAction(action) {
       const descriptions = {
         BLINK: "Blink your eyes",
-        TURN_LEFT: "Turn your head right",
-        // camera-left = user's right (mirror)
-        TURN_RIGHT: "Turn your head left",
-        // camera-right = user's left (mirror)
+        TURN_LEFT: "Turn your head to the side",
+        TURN_RIGHT: "Turn your head to the side",
         TURN_HEAD: "Turn your head side to side",
         OPEN_MOUTH: "Open your mouth wide"
       };
@@ -7600,9 +7493,9 @@ var SmartComplySDK = (() => {
             applyPassed();
             return;
           }
-          if (result.status === "failed" || result.status === "expired_document") {
+          if (result.status === "failed") {
             onResolved(result.status);
-            const reason = result.failure_reason || (result.status === "expired_document" ? "Your document has expired. Please use a valid ID." : "Verification could not be completed. Please try again.");
+            const reason = result.failure_reason || "Verification could not be completed. Please try again.";
             applyFailed(reason);
             return;
           }