smartcomply-web-sdk 1.0.26 → 1.0.30

package/dist/esm/modules/liveness/LivenessUI.js

@@ -1,45 +1,22 @@
-/**
- * Icons for the 5 backend-supported challenge actions (UPPERCASE).
- */
 const ICONS = {
-    BLINK: "\uD83D\uDE09",
-    TURN_LEFT: "\u27A1", // ➡️ — user turns RIGHT (mirror correction)
-    TURN_RIGHT: "\u2B05", // ⬅️ — user turns LEFT (mirror correction)
-    TURN_HEAD: "\uD83D\uDE42",
-    OPEN_MOUTH: "\uD83D\uDE2E",
+    BLINK: "👁",
+    TURN_LEFT: "↔",
+    TURN_RIGHT: "↔",
+    TURN_HEAD: "↔",
+    OPEN_MOUTH: "😮",
 };
-/**
- * Large animated SVG/HTML cues shown in the centre of the camera frame
- * so the user knows exactly what to do — like a real liveness test.
- */
 const 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;">👁️</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-right 1s ease-in-out infinite;">➡️</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-left 1s ease-in-out infinite;">⬅️</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;">↔️</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;">😮</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;">👁️</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;">↔️</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;">↔️</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;">↔️</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;">😮</div>
+               <div style="font-size:12px;font-weight:600;color:#fff;margin-top:6px;letter-spacing:0.5px;">OPEN YOUR MOUTH</div>`,
 };
-/** Keyframe CSS injected once */
 function injectLivenessKeyframes() {
     if (document.getElementById("sc-liveness-kf"))
         return;
@@ -48,37 +25,23 @@ function injectLivenessKeyframes() {
     s.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(s);
@@ -102,83 +65,117 @@ export class LivenessUI {
     mount(container, challenge) {
         injectLivenessKeyframes();
         this.totalActions = challenge.actions.length;
+        // ── Root — two-column layout ──────────────────────────────────────
         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;
+    `;
+        // ── LEFT: Camera column ───────────────────────────────────────────
+        const camCol = document.createElement("div");
+        camCol.style.cssText = `
+      position:relative;flex:0 0 58%;
+      background:#000;overflow:hidden;
     `;
-        // Video
         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;";
-        // Face guide — oval with confidence ring
+        this.videoEl.style.cssText = `
+      width:100%;height:100%;display:block;
+      transform:scaleX(-1);object-fit:cover;
+      min-height:320px;
+    `;
+        // Oval guide — centred in camera column
         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%;";
-        // Background oval (guide)
         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");
+        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");
-        // Confidence progress ring
+        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", "90");
-        confOval.setAttribute("cy", "120");
-        confOval.setAttribute("rx", "85");
-        confOval.setAttribute("ry", "115");
+        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);
-        // Top bar — instruction
-        const topBar = document.createElement("div");
-        topBar.style.cssText = `
+        // Instruction text — top of camera column
+        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);
-        // Bottom panel
-        const bottomPanel = document.createElement("div");
-        bottomPanel.style.cssText = `
+        camTop.appendChild(this.instructionEl);
+        // Timer — bottom of camera column
+        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);
+        // Action cue — centre of camera column
+        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);
+        // ── RIGHT: Steps column ───────────────────────────────────────────
+        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;
     `;
-        // Progress bar
+        // Progress bar at top of steps column
         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 = `
@@ -186,85 +183,55 @@ export class LivenessUI {
       border-radius:2px;transition:width 0.4s ease;
     `;
         progressWrap.appendChild(this.progressBarEl);
-        bottomPanel.appendChild(progressWrap);
-        // Steps — compact pill row in top-right corner, always visible
+        // Steps list
         this.stepsEl = document.createElement("div");
-        this.stepsEl.style.cssText = `
-      position:absolute;top:10px;right:10px;
-      display:flex;flex-direction:row;gap:6px;
-      flex-wrap:wrap;justify-content:flex-end;
-      z-index:6;pointer-events:none;
-      max-width:calc(100% - 20px);
-    `;
+        this.stepsEl.style.cssText = "display:flex;flex-direction:column;gap:6px;flex:1;";
         for (let i = 0; i < challenge.actions.length; i++) {
             const action = challenge.actions[i];
             const step = document.createElement("div");
             step.dataset.action = action;
             step.style.cssText = `
-        display:flex;align-items:center;gap:5px;
-        padding:5px 10px;border-radius:20px;
-        background:rgba(0,0,0,0.55);
-        backdrop-filter:blur(4px);
-        border:1.5px solid rgba(255,255,255,0.15);
+        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:${i === 0 ? "1" : "0.5"};
+        opacity:${i === 0 ? "1" : "0.45"};
       `;
             const num = document.createElement("div");
             num.className = "sc-step-num";
             num.style.cssText = `
-        width:20px;height:20px;border-radius:50%;
+        width:24px;height:24px;border-radius:50%;flex-shrink:0;
         display:flex;align-items:center;justify-content:center;
-        font-size:11px;font-weight:700;color:#fff;
-        background:rgba(255,255,255,0.12);
-        border:1.5px solid rgba(255,255,255,0.25);
-        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(i + 1);
+            const label = document.createElement("div");
+            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:14px;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);
         }
-        // Timer
-        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);
-        // Result overlay (used for success / failure / timeout)
+        stepsCol.appendChild(progressWrap);
+        stepsCol.appendChild(this.stepsEl);
+        // Result overlay — full root
         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;
-    `;
-        // Action cue — large centred animation shown when an action is active
-        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);
     `;
-        // Assemble
-        this.root.appendChild(this.videoEl);
-        this.root.appendChild(guideWrap);
-        this.root.appendChild(topBar);
-        this.root.appendChild(this.stepsEl); // pinned top-right corner
-        this.root.appendChild(bottomPanel);
-        this.root.appendChild(this.actionCueEl);
+        // ── Assemble ──────────────────────────────────────────────────────
+        this.root.appendChild(camCol);
+        this.root.appendChild(stepsCol);
         this.root.appendChild(this.overlayEl);
         container.appendChild(this.root);
         this.startTimer(challenge.time_limit_seconds);
@@ -275,7 +242,6 @@ export class LivenessUI {
             return;
         let completed = 0;
         const activeState = states.find((s) => s.active && !s.detected) ?? null;
-        const activeAction = activeState?.action ?? null;
         for (const state of states) {
             const step = this.stepsEl.querySelector(`[data-action="${state.action}"]`);
             if (!step)
@@ -284,46 +250,42 @@ export class LivenessUI {
             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";
-                    num.textContent = "\u2713";
+                    num.textContent = "✓";
                 }
             }
             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)";
                 }
             }
         }
-        // Update progress bar
         const pct = this.totalActions > 0 ? (completed / this.totalActions) * 100 : 0;
         this.progressBarEl.style.width = `${pct}%`;
-        // Update confidence ring for the active action
         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-dashoffset", `${circ * (1 - conf)}`);
             this.confidenceRingEl.setAttribute("stroke", conf > 0.6 ? "#22c55e" : "#3b82f6");
         }
-        // Show / switch large animated action cue
-        this.updateActionCue(activeAction);
+        this.updateActionCue(activeState?.action ?? null);
     }
     updateActionCue(action) {
         if (!this.actionCueEl)
             return;
-        // No active action → hide cue
         if (!action) {
             this.actionCueEl.style.display = "none";
             this.currentCueAction = null;
             return;
         }
-        // Same action already showing — no DOM thrash
         if (action === this.currentCueAction)
             return;
         this.currentCueAction = action;
@@ -332,27 +294,23 @@ export class LivenessUI {
             this.actionCueEl.style.display = "none";
             return;
         }
-        // Inject content and animate in
         this.actionCueEl.innerHTML = cueHtml;
         this.actionCueEl.style.display = "block";
         this.actionCueEl.style.animation = "none";
-        // Force reflow then trigger animation
         void this.actionCueEl.offsetWidth;
         this.actionCueEl.style.animation = "sc-pop-in 0.3s ease forwards";
     }
     updateInstruction(text) {
-        if (this.instructionEl) {
+        if (this.instructionEl)
             this.instructionEl.textContent = text;
-        }
     }
     stopTimer() {
         if (this.timerInterval) {
             clearInterval(this.timerInterval);
             this.timerInterval = null;
         }
-        if (this.timerEl) {
+        if (this.timerEl)
             this.timerEl.textContent = "";
-        }
     }
     showResult(status, verificationId) {
         return new Promise((resolve) => {
@@ -363,40 +321,22 @@ export class LivenessUI {
             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 ? "✓" : "✕"}
           </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) {
@@ -409,58 +349,26 @@ export class LivenessUI {
             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;
-          ">⏱</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>
-      `;
-            // Wire retry button
-            const retryBtn = this.overlayEl.querySelector("#sc-retry-btn");
-            if (retryBtn) {
-                retryBtn.addEventListener("click", () => {
-                    onRetry();
-                    resolve();
-                });
+          <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;">⏱</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(); });
             }
             else {
-                // fallback — auto-resolve after 5s
                 setTimeout(resolve, 5000);
             }
         });
     }
-    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.
-     */
+    getVideoElement() { return this.videoEl; }
     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;
@@ -468,50 +376,23 @@ export class LivenessUI {
             docVideo.muted = true;
             docVideo.style.cssText = "width:100%;display:block;aspect-ratio:4/3;object-fit:cover;";
             docVideo.srcObject = stream;
-            // Rectangle guide with blue corner accents
             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;">
-          💡 Good lighting &nbsp;·&nbsp; No glare &nbsp;·&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>📁</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;">💡 Good lighting · No glare · 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>📁</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);
             docRoot.appendChild(bottomPanel);
             container.appendChild(docRoot);
             docVideo.play().catch(() => { });
-            const cleanup = () => {
-                if (docRoot.parentElement)
-                    docRoot.parentElement.removeChild(docRoot);
-                this.docCaptureRoot = null;
-            };
+            const cleanup = () => { if (docRoot.parentElement)
+                docRoot.parentElement.removeChild(docRoot); this.docCaptureRoot = null; };
             const captureBtn = bottomPanel.querySelector("#sc-capture-doc-btn");
             if (captureBtn) {
                 captureBtn.addEventListener("click", () => {
@@ -525,15 +406,13 @@ export class LivenessUI {
                             return;
                         }
                         ctx.drawImage(docVideo, 0, 0);
-                        canvas.toBlob((blob) => {
-                            if (blob) {
-                                cleanup();
-                                resolve(blob);
-                            }
-                            else {
-                                reject(new Error("Failed to capture document image"));
-                            }
-                        }, "image/jpeg", 0.92);
+                        canvas.toBlob((blob) => { if (blob) {
+                            cleanup();
+                            resolve(blob);
+                        }
+                        else {
+                            reject(new Error("Failed to capture document image"));
+                        } }, "image/jpeg", 0.92);
                     }
                     catch (err) {
                         reject(err);
@@ -542,23 +421,20 @@ export class LivenessUI {
             }
             const uploadInput = bottomPanel.querySelector("#sc-upload-doc-input");
             if (uploadInput) {
-                uploadInput.addEventListener("change", () => {
-                    const file = uploadInput.files?.[0];
-                    if (file) {
-                        cleanup();
-                        resolve(file);
-                    }
-                });
+                uploadInput.addEventListener("change", () => { const file = uploadInput.files?.[0]; if (file) {
+                    cleanup();
+                    resolve(file);
+                } });
             }
         });
     }
     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;
@@ -578,26 +454,20 @@ export class LivenessUI {
                 return;
             const m = Math.floor(remaining / 60);
             const s = remaining % 60;
-            const display = m > 0 ? `${m}:${String(s).padStart(2, "0")}` : `${s}s`;
-            this.timerEl.textContent = `${display} remaining`;
-            if (remaining <= 5) {
+            this.timerEl.textContent = `${m > 0 ? `${m}:${String(s).padStart(2, "0")}` : `${s}s`} remaining`;
+            if (remaining <= 5)
                 this.timerEl.style.color = "#ef4444";
-            }
         };
         update();
-        this.timerInterval = setInterval(() => {
-            remaining--;
-            update();
-            if (remaining <= 0 && this.timerInterval) {
-                clearInterval(this.timerInterval);
-            }
-        }, 1000);
+        this.timerInterval = setInterval(() => { remaining--; update(); if (remaining <= 0 && this.timerInterval) {
+            clearInterval(this.timerInterval);
+        } }, 1000);
     }
     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",
         };