@cqa-lib/cqa-ui 1.1.508 → 1.1.510

package/fesm2015/cqa-lib-cqa-ui.mjs

@@ -16524,11 +16524,15 @@ class SimulatorComponent {
         this.browserDevice = '';
         this.isFastForwarding = false;
         this.fastForwardConfig = null;
+        this.showVideoLibrary = false;
+        this.showCaptureVideo = false;
+        this.isCapturingVideo = false;
         this.videoTimeUpdate = new EventEmitter();
         this.videoPlay = new EventEmitter();
         this.videoPause = new EventEmitter();
         this.markerHit = new EventEmitter();
         this.isVideoPlayingChange = new EventEmitter();
+        this.captureVideoRequested = new EventEmitter();
         this.progress = 0;
         this.dragging = false;
         this.isPlaying = false;
@@ -16546,6 +16550,42 @@ class SimulatorComponent {
         // State machine for robust media operations
         this.playerState = 'idle';
         this.operationQueue = Promise.resolve(); // Serialize all media operations
+        // Video-on-demand (Video Library) state — single source of truth is `videoUrls`.
+        // `newVideoIndexes` marks which indexes were just captured (so we can show the
+        // NEW badge until that clip is selected); `libraryVideoDurations` caches the
+        // metadata-loaded duration per index for each library card's thumbnail.
+        this.isVideoLibraryCollapsed = true;
+        this.newVideoIndexes = new Set();
+        this.libraryVideoDurations = new Map();
+        this.downloadingIndexes = new Set();
+        this.downloadProgress = new Map(); // 0-100 per clip index
+        this.lastLibrarySyncKey = '';
+        // Tracks which clip index the library row was last auto-scrolled to, so the
+        // timeupdate handler doesn't re-trigger a scroll every frame.
+        this.lastScrolledClipIndex = -1;
+        // Auto-recovery: when the <video> fires an error event (e.g. Chrome's
+        // "PIPELINE_ERROR_READ: FFmpegDemuxer" after a network glitch), we flip
+        // this flag to unmount the <video> via *ngIf, then flip it back so Angular
+        // remounts a fresh element — the same mechanism that makes the
+        // Screenshots↔Video tab-switch workaround recover playback today.
+        this.videoRefreshing = false;
+        this.pendingRecoverySeekSec = null;
+        this.pendingRecoveryPlay = false;
+        this.recoveryAttempts = 0;
+        this.recoveryAttemptWindowStart = 0;
+        this.MAX_RECOVERY_ATTEMPTS = 10;
+        this.RECOVERY_WINDOW_MS = 10000;
+        // Phase 2 — "Show Full Video" mode. When true, the main timeline spans the total
+        // duration across all clips and step markers from every clip are laid out on it.
+        // Clip-to-clip transitions happen under the hood via the existing onVideoEnded
+        // auto-advance path — the user doesn't see a reset.
+        this.isVideoFullMode = false;
+        // 0-100 position on the global timeline while the user is actively dragging.
+        // Needed because `progress` is per-current-clip and would give the wrong value.
+        this.globalDragProgress = 0;
+        // Drag-to-scroll state for the clips row (mouse equivalent of touch-swipe).
+        this.clipsDragState = { dragging: false, startX: 0, startScrollLeft: 0, didMove: false };
+        this.clipsDragActive = false;
         this.segments = [
             { label: 'Screenshots', value: 'screenshots', icon: 'photo' },
             { label: 'Video', value: 'video', icon: 'videocam' },
@@ -16761,6 +16801,8 @@ class SimulatorComponent {
                 borderRadius: '0%'
             }
         };
+        /** Circumference of the 6-radius progress ring (see clip-download-btn__ring in template). */
+        this.downloadRingCircumference = 2 * Math.PI * 6;
         this.safeTraceUrl = this.sanitizer.bypassSecurityTrustResourceUrl('');
         this.updateSegments();
     }
@@ -16887,6 +16929,45 @@ class SimulatorComponent {
         this.attachVideoListeners();
         this.updateSafeTraceUrl();
     }
+    ngAfterViewChecked() {
+        // Keep the active library card's <video> element's play state in sync with the main player
+        // so the card doesn't show a frozen thumbnail while the main video is playing.
+        const key = `${this.currentVideoIndex}:${this.isPlaying}`;
+        if (key !== this.lastLibrarySyncKey) {
+            this.lastLibrarySyncKey = key;
+            this.syncLibraryClipPlayback();
+        }
+    }
+    syncLibraryClipPlayback() {
+        var _a;
+        const refs = this.clipVideos;
+        if (!refs)
+            return;
+        const mainEl = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        refs.forEach((ref, i) => {
+            const el = ref === null || ref === void 0 ? void 0 : ref.nativeElement;
+            if (!el)
+                return;
+            const shouldPlay = i === this.currentVideoIndex && this.isPlaying;
+            if (shouldPlay) {
+                // Seed the card's currentTime from the main player so they start roughly aligned.
+                if (mainEl && isFinite(mainEl.currentTime) && !isNaN(mainEl.currentTime)) {
+                    try {
+                        el.currentTime = mainEl.currentTime;
+                    }
+                    catch (_) { /* ignore */ }
+                }
+                if (el.paused) {
+                    const p = el.play();
+                    if (p && typeof p.catch === 'function')
+                        p.catch(() => { });
+                }
+            }
+            else if (!el.paused) {
+                el.pause();
+            }
+        });
+    }
     ngOnChanges(changes) {
         var _a, _b;
         if (changes['videoUrls']) {
@@ -17350,6 +17431,37 @@ class SimulatorComponent {
         const durationMs = video.duration * 1000;
         return (step.cumulativeDuration / durationMs) * 100;
     }
+    /** Full-video markers: every marker, flattened, laid out on the global timeline.
+     * `stepMarkers` is already in global coordinates — `currentVideoMarkers` does the
+     * inverse (filters + adjusts per-clip); here we just flatten the original list. */
+    get fullVideoMarkers() {
+        return this.flattenMarkers(this.stepMarkers || []);
+    }
+    getGlobalFullStepLeftPosition(step) {
+        const total = this.totalDuration;
+        if (!total)
+            return 0;
+        return Math.min(100, Math.max(0, (step.cumulativeDuration / total) * 100));
+    }
+    /** Cumulative elapsed ms on the global timeline (prior clip durations + current local time). */
+    get globalCurrentTimeMs() {
+        var _a, _b, _c, _d;
+        const local = ((_c = (_b = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.currentTime) !== null && _c !== void 0 ? _c : 0) * 1000;
+        const boundaries = this.segmentBoundaries;
+        const priorEnd = this.currentVideoIndex > 0 ? ((_d = boundaries[this.currentVideoIndex - 1]) !== null && _d !== void 0 ? _d : 0) : 0;
+        return priorEnd + local;
+    }
+    /** 0-100 position on the global timeline, driven by timeupdate. */
+    get globalProgress() {
+        const total = this.totalDuration;
+        if (!total)
+            return 0;
+        return Math.min(100, Math.max(0, (this.globalCurrentTimeMs / total) * 100));
+    }
+    /** While dragging in full mode, the scrubber reads the override; otherwise globalProgress. */
+    get globalScrubberPercent() {
+        return this.dragging ? this.globalDragProgress : this.globalProgress;
+    }
     getStepColor(step) {
         return step.level === 1 ? '#000000' : '#6366F1';
     }
@@ -17440,14 +17552,31 @@ class SimulatorComponent {
     }
     onTimelineClick(event) {
         var _a, _b;
-        if (!((_a = this.timelineBar) === null || _a === void 0 ? void 0 : _a.nativeElement) || !((_b = this.vplayer) === null || _b === void 0 ? void 0 : _b.nativeElement))
-            return;
-        const video = this.vplayer.nativeElement;
-        if (!video.duration || !isFinite(video.duration))
+        if (!((_a = this.timelineBar) === null || _a === void 0 ? void 0 : _a.nativeElement))
             return;
         const rect = this.timelineBar.nativeElement.getBoundingClientRect();
         const clickX = event.clientX - rect.left;
         const percent = Math.max(0, Math.min(1, clickX / rect.width));
+        if (this.isVideoFullMode) {
+            const total = this.totalDuration;
+            if (!total)
+                return;
+            const shouldResumePlaying = this.isPlaying;
+            const targetGlobalMs = percent * total;
+            this.switchToVideoAndSeek(targetGlobalMs);
+            if (shouldResumePlaying) {
+                this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve, 120));
+                    yield this.playVideoInternal();
+                }));
+            }
+            return;
+        }
+        if (!((_b = this.vplayer) === null || _b === void 0 ? void 0 : _b.nativeElement))
+            return;
+        const video = this.vplayer.nativeElement;
+        if (!video.duration || !isFinite(video.duration))
+            return;
         const targetTimeMs = percent * video.duration * 1000;
         const shouldResumePlaying = this.isPlaying;
         console.log('[Simulator] onTimelineClick', {
@@ -17488,7 +17617,12 @@ class SimulatorComponent {
         const rect = this.timelineBar.nativeElement.getBoundingClientRect();
         const x = event.clientX - rect.left;
         const percent = Math.max(0, Math.min(x / rect.width, 1));
-        this.progress = percent * 100; // Global timeline position
+        if (this.isVideoFullMode) {
+            this.globalDragProgress = percent * 100;
+        }
+        else {
+            this.progress = percent * 100; // Per-clip timeline position
+        }
     }
     stopDrag() {
         var _a;
@@ -17503,6 +17637,20 @@ class SimulatorComponent {
             shouldResumePlaying: shouldResumePlaying,
             currentPlayerState: this.playerState
         });
+        if (this.isVideoFullMode) {
+            const total = this.totalDuration;
+            if (!total)
+                return;
+            const targetGlobalMs = (this.globalDragProgress / 100) * total;
+            this.switchToVideoAndSeek(targetGlobalMs);
+            if (shouldResumePlaying) {
+                this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve, 200));
+                    yield this.playVideoInternal();
+                }));
+            }
+            return;
+        }
         const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
         if (!video || !video.duration || !isFinite(video.duration))
             return;
@@ -17571,10 +17719,84 @@ class SimulatorComponent {
         this.attachVideoListeners();
     }
     onVideoCanPlay() {
+        var _a;
         console.log('[Simulator] onVideoCanPlay');
         // Ensure playback speed is consistent across all videos
         this.applyCurrentPlaybackRate();
         this.attachVideoListeners();
+        // Consume any pending recovery state queued by onVideoError(): seek back to
+        // where playback errored and auto-resume if we were playing at the time.
+        if (this.pendingRecoverySeekSec != null) {
+            const seekSec = this.pendingRecoverySeekSec;
+            const shouldPlay = this.pendingRecoveryPlay;
+            this.pendingRecoverySeekSec = null;
+            this.pendingRecoveryPlay = false;
+            const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (video && isFinite(video.duration)) {
+                try {
+                    video.currentTime = Math.max(0, Math.min(seekSec, video.duration));
+                }
+                catch (_) { /* element may not be seekable yet; harmless */ }
+            }
+            if (shouldPlay) {
+                this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve, 80));
+                    yield this.playVideoInternal();
+                }));
+            }
+        }
+    }
+    /** Native error-event handler for the main <video> element. The Chrome media
+     * stack occasionally throws "PipelineStatus::PIPELINE_ERROR_READ: FFmpegDemuxer:
+     * data source error" during playback after a brief network blip or a burst of
+     * fast user actions; once that happens the element becomes unresponsive to
+     * play/pause/seek. We recover by unmounting+remounting the <video> via *ngIf
+     * — the same mechanism that makes the Screenshots↔Video tab-switch workaround
+     * work today — then restore the pre-error playhead and resume playback. */
+    onVideoError() {
+        var _a;
+        const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        const err = video === null || video === void 0 ? void 0 : video.error;
+        console.error('[Simulator] onVideoError — triggering auto-recovery', {
+            playerState: this.playerState,
+            errorCode: err === null || err === void 0 ? void 0 : err.code,
+            errorMessage: err === null || err === void 0 ? void 0 : err.message,
+            networkState: video === null || video === void 0 ? void 0 : video.networkState,
+            readyState: video === null || video === void 0 ? void 0 : video.readyState,
+            currentVideoIndex: this.currentVideoIndex,
+            currentVideoUrl: this.currentVideoUrl,
+            attempts: this.recoveryAttempts
+        });
+        // Bound the retry budget to a rolling window so a persistently broken
+        // source (404, unsupported codec, …) doesn't flap forever.
+        const now = Date.now();
+        if (now - this.recoveryAttemptWindowStart > this.RECOVERY_WINDOW_MS) {
+            this.recoveryAttempts = 0;
+            this.recoveryAttemptWindowStart = now;
+        }
+        this.recoveryAttempts++;
+        if (this.recoveryAttempts > this.MAX_RECOVERY_ATTEMPTS) {
+            console.error('[Simulator] onVideoError: exceeded recovery attempts, giving up');
+            this.playerState = 'error';
+            this.isPlaying = false;
+            this.isVideoPlayingChange.emit(false);
+            return;
+        }
+        // Capture what we need to restore after the remount.
+        this.pendingRecoverySeekSec = (video && isFinite(video.currentTime)) ? video.currentTime : 0;
+        this.pendingRecoveryPlay = this.isPlaying;
+        // Put the state machine into 'error' so onVideoElementReady resets it
+        // back to 'idle' when the remounted element arrives.
+        this.playerState = 'error';
+        this.isPlaying = false;
+        this.playPromise = null;
+        this.isVideoPlayingChange.emit(false);
+        // Unmount → remount. Brief 100ms gap mirrors the tab-switch workaround.
+        this.videoRefreshing = true;
+        setTimeout(() => {
+            this.videoRefreshing = false;
+            this.cdr.markForCheck();
+        }, 100);
     }
     onVideoEnded() {
         this.isPlaying = false;
@@ -17622,6 +17844,12 @@ class SimulatorComponent {
                     this.videoTimeUpdate.emit(segmentStart + currentMs);
                     this.checkMarkerHit(segmentStart + currentMs);
                     this.maybePreloadNextSegment();
+                    // Auto-scroll the library row so the currently-playing clip stays visible.
+                    // Only while playing; when paused we leave the row where the user left it.
+                    if (this.isPlaying && this.currentVideoIndex !== this.lastScrolledClipIndex) {
+                        this.lastScrolledClipIndex = this.currentVideoIndex;
+                        this.scrollCurrentClipIntoView();
+                    }
                 }
             };
             video.addEventListener('timeupdate', handler);
@@ -17910,6 +18138,260 @@ class SimulatorComponent {
         }
         return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
     }
+    captureVideo() {
+        if (!this.showCaptureVideo || !this.isLive || this.isCapturingVideo)
+            return;
+        this.captureVideoRequested.emit();
+    }
+    // ─── Clips row drag-to-scroll (mouse equivalent of touch-swipe) ──────────────
+    // Design: tracking starts on mousedown but we DON'T flip to the "dragging" visual state
+    // or block clicks until the pointer crosses a 5px threshold. That way a plain click
+    // (no movement) registers normally on the card / download button with the usual cursor.
+    onClipsMouseDown(event, scroller) {
+        if (event.button !== 0 || !scroller)
+            return;
+        this.clipsDragState.dragging = true;
+        this.clipsDragState.didMove = false;
+        this.clipsDragState.startX = event.clientX;
+        this.clipsDragState.startScrollLeft = scroller.scrollLeft;
+    }
+    onClipsMouseMove(event, scroller) {
+        if (!this.clipsDragState.dragging || !scroller)
+            return;
+        const dx = event.clientX - this.clipsDragState.startX;
+        if (!this.clipsDragState.didMove && Math.abs(dx) > 5) {
+            this.clipsDragState.didMove = true;
+            this.clipsDragActive = true; // flip the grabbing cursor now that it's a real drag
+        }
+        if (this.clipsDragState.didMove) {
+            scroller.scrollLeft = this.clipsDragState.startScrollLeft - dx;
+        }
+    }
+    onClipsMouseUp(_event) {
+        if (!this.clipsDragState.dragging)
+            return;
+        this.clipsDragState.dragging = false;
+        this.clipsDragActive = false;
+        if (this.clipsDragState.didMove) {
+            // Keep didMove=true briefly so the synthetic click fires and is ignored, then reset.
+            setTimeout(() => { this.clipsDragState.didMove = false; }, 0);
+        }
+    }
+    onClipsMouseLeave(event) {
+        this.onClipsMouseUp(event);
+    }
+    /** Click handler on a Video Library card — switches the main player to that clip and auto-plays.
+     * Selecting a *different* clip also collapses the library so the newly-playing video is unobstructed;
+     * re-clicking the active clip just toggles play/pause and keeps the drawer state.
+     * Ignored when the click originated from a horizontal drag-scroll. */
+    selectLibraryClip(index) {
+        var _a;
+        if (this.clipsDragState.didMove)
+            return;
+        if (!Array.isArray(this.videoUrls) || index < 0 || index >= this.videoUrls.length)
+            return;
+        this.newVideoIndexes.delete(index);
+        // Full-mode: seek the global timeline to this clip's start. Keep full mode and
+        // the library panel open so the user can see the highlight follow along.
+        // If the clicked card is the one already playing under the hood, treat the
+        // click as a play/pause toggle (the card's overlay icon reflects that state).
+        if (this.isVideoFullMode) {
+            if (index === this.currentVideoIndex) {
+                this.togglePlay();
+                return;
+            }
+            const boundaries = this.segmentBoundaries;
+            const targetGlobalMs = index === 0 ? 0 : ((_a = boundaries[index - 1]) !== null && _a !== void 0 ? _a : 0);
+            const shouldResume = this.isPlaying;
+            this.switchToVideoAndSeek(targetGlobalMs);
+            if (shouldResume) {
+                this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve, 150));
+                    yield this.playVideoInternal();
+                }));
+            }
+            return;
+        }
+        if (index === this.currentVideoIndex) {
+            this.togglePlay();
+            return;
+        }
+        this.isVideoLibraryCollapsed = true;
+        this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.switchToVideoAndResetInternal(index);
+            yield this.playVideoInternal();
+        }));
+    }
+    /** Per-card metadata handler — caches duration so the `0:42` thumbnail label can render.
+     * Bound to BOTH `loadedmetadata` and `durationchange`:
+     *   - Some MP4s (esp. short clips with moov at the end) report a wrong/partial duration
+     *     on `loadedmetadata`; Chrome later corrects it via `durationchange`. Listening to
+     *     both + keeping the max-so-far avoids stale wrong values like "00:01" for a 5s clip.
+     *   - For streamed MP4s that report `Infinity`, seek to the end once so Chrome fetches
+     *     the cues/trailer and fires a corrected `durationchange`. */
+    onLibraryClipMetadataLoaded(index, videoEl) {
+        const d = videoEl === null || videoEl === void 0 ? void 0 : videoEl.duration;
+        if (d === Infinity && !videoEl.dataset['cqaDurationProbed']) {
+            videoEl.dataset['cqaDurationProbed'] = '1';
+            try {
+                videoEl.currentTime = Number.MAX_SAFE_INTEGER;
+            }
+            catch (_) { /* some browsers throw before metadata; ignore */ }
+            return;
+        }
+        if (typeof d === 'number' && isFinite(d) && d > 0) {
+            const prev = this.libraryVideoDurations.get(index) || 0;
+            if (d > prev) {
+                this.libraryVideoDurations.set(index, d);
+                this.cdr.markForCheck();
+            }
+        }
+    }
+    trackLibraryClipByIndex(index, url) {
+        return index + ':' + (url || '');
+    }
+    /** Download the clip at `index`. Streams the bytes with fetch so we can show progress,
+     * then saves via a temporary blob URL so the file comes down on the same page
+     * (no new tab / window). Falls back to a direct anchor click if fetch is unavailable or fails. */
+    downloadClip(index) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.clipsDragState.didMove)
+                return;
+            const url = Array.isArray(this.videoUrls) ? this.videoUrls[index] : undefined;
+            if (!url || this.downloadingIndexes.has(index))
+                return;
+            const filename = this.deriveClipFilename(url, index);
+            this.downloadingIndexes.add(index);
+            this.downloadProgress.set(index, 0);
+            this.cdr.markForCheck();
+            try {
+                const response = yield fetch(url, { mode: 'cors', credentials: 'omit' });
+                if (!response.ok || !response.body) {
+                    throw new Error('Download failed: ' + response.status);
+                }
+                const total = Number(response.headers.get('content-length')) || 0;
+                const reader = response.body.getReader();
+                const chunks = [];
+                let received = 0;
+                while (true) {
+                    const { done, value } = yield reader.read();
+                    if (done)
+                        break;
+                    if (value) {
+                        chunks.push(value);
+                        received += value.length;
+                        if (total > 0) {
+                            this.downloadProgress.set(index, Math.min(100, Math.round((received / total) * 100)));
+                        }
+                        this.cdr.markForCheck();
+                    }
+                }
+                const blob = new Blob(chunks, { type: 'video/webm' });
+                this.saveBlobAsDownload(blob, filename);
+            }
+            catch (_err) {
+                // CORS block or network failure — fall back to a direct anchor click (may open in a new tab
+                // depending on the server's Content-Disposition, but at least always triggers the browser's save flow).
+                this.triggerDirectDownload(url, filename);
+            }
+            finally {
+                this.downloadingIndexes.delete(index);
+                this.downloadProgress.delete(index);
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    deriveClipFilename(url, index) {
+        try {
+            const u = new URL(url);
+            const last = (u.pathname.split('/').pop() || '').split('?')[0];
+            if (last && /\.[a-z0-9]+$/i.test(last))
+                return `clip-${index + 1}-${last}`;
+        }
+        catch (_) { /* ignore */ }
+        return `clip-${index + 1}.webm`;
+    }
+    saveBlobAsDownload(blob, filename) {
+        const objectUrl = URL.createObjectURL(blob);
+        try {
+            const a = document.createElement('a');
+            a.href = objectUrl;
+            a.download = filename;
+            a.rel = 'noopener';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        }
+        finally {
+            setTimeout(() => URL.revokeObjectURL(objectUrl), 2000);
+        }
+    }
+    /** stroke-dashoffset for the progress ring of clip `index`; 0 = full, circumference = empty. */
+    downloadRingDashoffset(index) {
+        const pct = Math.min(100, Math.max(0, this.downloadProgress.get(index) || 0));
+        return this.downloadRingCircumference * (1 - pct / 100);
+    }
+    triggerDirectDownload(url, filename) {
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.rel = 'noopener';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+    onShowFullVideo() {
+        if (!this.showVideoLibrary)
+            return;
+        if (!Array.isArray(this.videoUrls) || this.videoUrls.length === 0)
+            return;
+        this.isVideoFullMode = true;
+        this.isVideoLibraryCollapsed = true;
+        this.progress = 0;
+        this.globalDragProgress = 0;
+        this.lastScrolledClipIndex = -1;
+        this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.switchToVideoAndResetInternal(0);
+            yield this.playVideoInternal();
+        }));
+    }
+    onExitFullVideo() {
+        this.isVideoFullMode = false;
+        this.isVideoLibraryCollapsed = true;
+        this.progress = 0;
+        this.globalDragProgress = 0;
+        this.lastScrolledClipIndex = -1;
+        this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.switchToVideoAndResetInternal(0);
+        }));
+    }
+    /** Horizontally scrolls the `.clips-row` so the currently-playing clip card is
+     * in the visible strip. No-op if the card is already on screen. Caller guards
+     * on `isPlaying` so the user can freely scroll the row while paused. */
+    scrollCurrentClipIntoView() {
+        var _a;
+        const scroller = (_a = this.clipsScrollerRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        if (!scroller)
+            return;
+        const cards = scroller.querySelectorAll('.clip-card');
+        const card = cards[this.currentVideoIndex];
+        if (!card)
+            return;
+        const padding = 8;
+        const cardLeft = card.offsetLeft;
+        const cardRight = cardLeft + card.offsetWidth;
+        const viewLeft = scroller.scrollLeft;
+        const viewRight = viewLeft + scroller.clientWidth;
+        if (cardLeft < viewLeft + padding) {
+            scroller.scrollTo({ left: Math.max(0, cardLeft - padding), behavior: 'smooth' });
+        }
+        else if (cardRight > viewRight - padding) {
+            scroller.scrollTo({ left: cardRight - scroller.clientWidth + padding, behavior: 'smooth' });
+        }
+    }
+    toggleVideoLibraryCollapsed() {
+        this.isVideoLibraryCollapsed = !this.isVideoLibraryCollapsed;
+    }
     getStatusBadgeClass() {
         const baseClasses = 'cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-[9px] cqa-py-[3px] cqa-rounded-[6px] cqa-h-[21px]';
         switch (this.liveStatus) {
@@ -18096,6 +18578,9 @@ class SimulatorComponent {
             if (!video || !this.videoUrls || targetVideoIndex < 0 || targetVideoIndex >= this.videoUrls.length) {
                 return;
             }
+            // User-initiated navigation — reset the auto-recovery retry budget.
+            this.recoveryAttempts = 0;
+            this.recoveryAttemptWindowStart = 0;
             if (this.currentVideoIndex === targetVideoIndex) {
                 yield this.resetVideoStateInternal();
                 return;
@@ -18147,6 +18632,9 @@ class SimulatorComponent {
     switchToVideoAndSeekInternal(cumulativeTimestamp) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
+            // User-initiated seek — reset the auto-recovery retry budget.
+            this.recoveryAttempts = 0;
+            this.recoveryAttemptWindowStart = 0;
             if (!this.hasMultipleVideos) {
                 yield this.seekToTimeInternal(cumulativeTimestamp);
                 return;
@@ -18231,10 +18719,10 @@ class SimulatorComponent {
     }
 }
 SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [{ token: i1$2.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab", browserViewPort: "browserViewPort", browserDevice: "browserDevice", isFastForwarding: "isFastForwarding", fastForwardConfig: "fastForwardConfig" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBarRef", first: true, predicate: ["timelineBar"], descendants: true }, { propertyName: "speedControlContainerRef", first: true, predicate: ["speedControlContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"effectivePlatformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"effectivePlatformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"effectivePlatformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n    <!-- Fast-forward overlay: covers content area but not header -->\n    <div *ngIf=\"isFastForwarding && fastForwardConfig\"\n         class=\"cqa-h-full cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-p-6\"\n         style=\"background-color: #F3F4F6;\">\n      <div class=\"cqa-bg-white cqa-rounded-xl cqa-w-full\"\n           style=\"max-width: 500px; padding: 32px; box-shadow: 0px 25px 50px -12px #00000040; border: 1px solid #E5E5E5\">\n        <!-- Sparkle avatar with rotating arc -->\n        <div class=\"cqa-flex cqa-justify-center cqa-mb-2\">\n          <div class=\"cqa-relative\" style=\"width: 56px; height: 56px;\">\n            <div class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-flex cqa-items-center cqa-justify-center\"\n                 style=\"background-color: rgba(63,67,238,0.12);\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"26\" viewBox=\"0 0 24 26\" fill=\"none\">\n                <path d=\"M12.0251 0C12.173 0.0634121 12.2362 0.218264 12.2968 0.36211C12.3272 0.445923 12.355 0.530192 12.3821 0.615133C12.3927 0.647682 12.4033 0.680231 12.4142 0.713766C12.5548 1.15177 12.6801 1.59447 12.8061 2.03686C12.8346 2.13673 12.8632 2.23656 12.8918 2.33638C13.0375 2.84464 13.1821 3.35321 13.3258 3.86201C13.346 3.93347 13.3662 4.00492 13.3864 4.07638C13.4434 4.27783 13.5003 4.4793 13.5569 4.68087C13.6764 5.10678 13.7993 5.53145 13.9301 5.95405C13.9415 5.99102 13.9529 6.02799 13.9647 6.06608C14.3045 7.15318 14.7862 8.12751 15.5757 8.95743C15.5953 8.979 15.6148 9.00058 15.635 9.02282C15.972 9.38246 16.4045 9.67063 16.8368 9.90322C16.8588 9.91526 16.8808 9.92729 16.9035 9.9397C18.1757 10.6231 19.7053 10.9237 21.0832 11.3238C21.6869 11.4992 22.2888 11.6802 22.8885 11.8691C22.9306 11.8823 22.9727 11.8956 23.0149 11.9088C23.1409 11.9483 23.2667 11.9885 23.3923 12.0293C23.4216 12.0385 23.4509 12.0478 23.481 12.0573C23.6541 12.1146 23.8197 12.1821 23.9618 12.2992C24.0051 12.3938 24.0051 12.3938 23.9933 12.4884C23.855 12.6258 23.7179 12.6902 23.5354 12.753C23.5093 12.7623 23.4832 12.7716 23.4564 12.7811C23.1483 12.8892 22.836 12.9838 22.5234 13.0775C22.4592 13.0969 22.395 13.1163 22.3309 13.1357C21.9352 13.2551 21.5389 13.3719 21.1421 13.4874C20.6195 13.6395 20.0977 13.7942 19.5763 13.9506C19.4909 13.9763 19.4055 14.0018 19.32 14.0272C18.8712 14.161 18.4246 14.2995 17.9817 14.4516C17.945 14.4642 17.9082 14.4768 17.8704 14.4897C16.387 15.0059 15.2563 15.9687 14.5486 17.3768C14.167 18.1681 13.9419 19.0239 13.7124 19.8685C13.6503 20.0964 13.5842 20.323 13.5175 20.5496C13.4651 20.7278 13.4139 20.9064 13.364 21.0853C13.358 21.1066 13.3521 21.1279 13.346 21.1499C13.3172 21.253 13.2885 21.3562 13.26 21.4594C13.1872 21.7211 13.1087 21.9807 13.0281 22.2401C12.8851 22.7012 12.7549 23.1656 12.6256 23.6306C12.4305 24.3308 12.4305 24.3308 12.3199 24.6674C12.3126 24.69 12.3052 24.7126 12.2977 24.7359C12.2573 24.8557 12.2158 24.966 12.1394 25.0674C12.0231 25.093 12.0231 25.093 11.9187 25.0989C11.7993 24.9249 11.7202 24.7562 11.6569 24.5553C11.6476 24.5269 11.6384 24.4984 11.6289 24.4691C11.5116 24.1019 11.4067 23.7309 11.3018 23.36C11.2778 23.2752 11.2536 23.1904 11.2295 23.1056C11.0496 22.4737 10.8727 21.8409 10.696 21.2081C9.96019 18.0775 9.96019 18.0775 8.104 15.5464C8.07425 15.5222 8.0445 15.4979 8.01385 15.4729C6.79767 14.4989 5.19556 14.1382 3.7284 13.7155C3.36553 13.6109 3.0028 13.5058 2.64009 13.4007C2.60837 13.3915 2.60837 13.3915 2.57601 13.3821C2.05283 13.2304 1.5298 13.0783 1.0086 12.9199C0.986549 12.9132 0.9645 12.9066 0.941783 12.8997C0.141064 12.6578 0.141064 12.6578 0.0017241 12.4884C-0.0022167 12.4115 -0.0022167 12.4115 0.0332505 12.3307C0.178889 12.188 0.320205 12.1269 0.512426 12.0647C0.540259 12.0554 0.56809 12.046 0.596766 12.0364C0.682008 12.0079 0.767436 11.9801 0.852936 11.9524C0.877335 11.9444 0.901735 11.9364 0.926874 11.9282C1.09943 11.8716 1.2726 11.8171 1.44603 11.7633C1.48864 11.75 1.48864 11.75 1.53212 11.7364C2.27272 11.5061 3.01815 11.2917 3.76336 11.0769C4.31866 10.9168 4.87302 10.754 5.42561 10.5847C5.451 10.577 5.4764 10.5692 5.50256 10.5613C6.78267 10.1705 8.03409 9.61612 8.86063 8.51606C8.873 8.49974 8.88538 8.48342 8.89813 8.46661C9.8186 7.24564 10.1775 5.76082 10.5785 4.31201C10.7105 3.83552 10.844 3.35947 10.9779 2.88356C11.015 2.75177 11.0521 2.61997 11.089 2.48812C11.2372 1.95852 11.3876 1.42964 11.5467 0.903181C11.5616 0.853882 11.5764 0.804561 11.5911 0.755218C11.8138 0.0111205 11.8138 0.0111205 12.0251 0Z\" fill=\"#3F43EE\"/>\n                <path d=\"M19.2962 1.54899C19.441 1.7128 19.4699 1.90532 19.515 2.11449C19.6653 2.77161 19.8384 3.37584 20.4394 3.75756C20.8102 3.96263 21.2522 4.05595 21.663 4.14409C21.8364 4.18205 21.9829 4.23242 22.1316 4.33316C22.1651 4.38636 22.1651 4.38636 22.1632 4.47897C22.1287 4.59159 22.0984 4.62791 22.0075 4.70163C21.9081 4.73488 21.9081 4.73488 21.7888 4.76074C21.7437 4.7711 21.6985 4.78158 21.6535 4.79214C21.6293 4.79774 21.6051 4.80335 21.5803 4.80912C20.8456 4.97907 20.8456 4.97907 20.2105 5.36368C20.1899 5.3803 20.1692 5.39692 20.1479 5.41405C19.6941 5.81426 19.5981 6.48 19.4615 7.0377C19.4536 7.06833 19.4458 7.09896 19.4377 7.13051C19.431 7.15762 19.4242 7.18474 19.4172 7.21267C19.3877 7.29546 19.3572 7.34945 19.2962 7.41289C19.1266 7.43444 19.1266 7.43444 19.044 7.41289C18.9128 7.31114 18.8834 7.19524 18.8491 7.0395C18.8433 7.01539 18.8376 6.99127 18.8317 6.96642C18.8134 6.8894 18.7956 6.81226 18.778 6.73508C18.6398 6.13403 18.4837 5.54432 17.9324 5.19201C17.5015 4.95172 16.9776 4.83808 16.496 4.74631C16.364 4.71883 16.2884 4.68427 16.2067 4.57552C16.1889 4.46518 16.1889 4.46518 16.2067 4.35484C16.3322 4.22484 16.4644 4.19311 16.6342 4.15386C16.6877 4.14061 16.7412 4.12726 16.7947 4.11383C16.8223 4.10694 16.85 4.10004 16.8784 4.09294C17.0193 4.05668 17.1588 4.01602 17.2983 3.97455C17.3236 3.9672 17.3489 3.95985 17.3751 3.95227C17.6585 3.86752 17.9032 3.75911 18.1298 3.56668C18.1509 3.54928 18.172 3.53189 18.1938 3.51397C18.5465 3.19658 18.6663 2.71976 18.7751 2.27484C18.7834 2.24106 18.7916 2.20728 18.8002 2.17248C18.8167 2.10463 18.8329 2.0367 18.8488 1.9687C18.8602 1.92139 18.8602 1.92139 18.8717 1.87312C18.8784 1.84486 18.885 1.81659 18.8918 1.78747C18.9209 1.69749 18.959 1.62683 19.0125 1.54899C19.1153 1.49761 19.1874 1.52084 19.2962 1.54899Z\" fill=\"#0F12A8\"/>\n                <path d=\"M4.7881 17.4219C4.82561 17.4222 4.82561 17.4222 4.86387 17.4225C5.13296 17.4307 5.31503 17.5169 5.51321 17.6978C5.74381 17.9469 5.85029 18.2279 5.84423 18.5637C5.81833 18.8359 5.65779 19.0736 5.46087 19.2576C5.22908 19.4447 4.99525 19.5065 4.69906 19.4979C4.44933 19.4688 4.21438 19.3502 4.03738 19.1717C3.81726 18.8713 3.75291 18.5958 3.78517 18.2259C3.8518 17.9346 4.0439 17.6981 4.28959 17.5323C4.46027 17.4458 4.59755 17.4203 4.7881 17.4219Z\" fill=\"#1216CC\"/>\n                </svg>\n            </div>\n            <svg class=\"cqa-absolute\"\n                 width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                 style=\"top: -2px; left: -2px;\">\n              <circle cx=\"30\" cy=\"30\" r=\"28\" stroke=\"#E2E2E3\" stroke-width=\"2\" fill=\"none\"/>\n            </svg>\n            <svg class=\"cqa-absolute cqa-ff-spin\"\n                 width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                 style=\"top: -2px; left: -2px; transform-origin: 30px 30px;\">\n              <path d=\"M30 2 A 28 28 0 0 1 54.24 44\"\n                    stroke=\"#3f43ee\" stroke-width=\"2\" stroke-linecap=\"round\" fill=\"none\"/>\n            </svg>\n          </div>\n        </div>\n\n        <p class=\"cqa-text-center cqa-m-0 cqa-mb-2\"\n           style=\"font-size: 16px; font-weight: 600; color: #161617;\">\n          Fast-forwarding to your step\n        </p>\n\n        <p class=\"cqa-text-center cqa-m-0\"\n           style=\"font-size: 12px; color: #6D6D74;\">\n          Steps {{ fastForwardConfig.fromStep }}\u2013{{ fastForwardConfig.toStep }} are running at full speed in the background.\n          <strong style=\"color: #6D6D74; font-weight: 600;\">Live view and screenshots are paused</strong>\n          until execution reaches your target step \u2014 then you're in automatically.\n        </p>\n\n        <div class=\"cqa-mt-6 cqa-mb-5\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span style=\"font-size: 12px; color: #4C4C51;\">Steps executing in background</span>\n            <span style=\"font-size: 12px; color: #6D6D74;\">\n              {{ fastForwardConfig.currentStep }} of {{ fastForwardConfig.totalSteps }} steps\n            </span>\n          </div>\n          <div style=\"height: 6px; background-color: #E2E2E3; border-radius: 9999px; overflow: hidden;\">\n            <div [style.width.%]=\"fastForwardProgressPercent\"\n                 style=\"height: 100%; background: linear-gradient(90deg, #3F43EE 0%, #818CF8 100%); transition: width 300ms cubic-bezier(0.4,0,0.2,1);\"></div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\"\n             style=\"padding: 10px 14px; border-radius: 10px; background: #6366F11A; border: 1px solid #6366F133;\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" style=\"flex-shrink: 0;\">\n            <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"#3f43ee\" stroke-width=\"1.25\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"3\" stroke=\"#3f43ee\" stroke-width=\"1.25\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"1\" fill=\"#3f43ee\"/>\n          </svg>\n          <div style=\"font-size: 12px;\">\n            <span style=\"color: #6D6D74;\">Jumping to</span>\n            <span style=\"color: #3F43EE; font-weight: 400; display: block;\">\n              Step {{ fastForwardConfig.targetStepNumber }} \u2014 {{ fastForwardConfig.targetStepLabel }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Live Content View -->\n    <div *ngIf=\"!isFastForwarding && isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n        <div class=\"cqa-relative cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-overflow-hidden\"\n             [ngClass]=\"{\n               'cqa-w-auto': hasDeviceFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n               'cqa-max-h-full cqa-h-full': hasDeviceFrame && (effectivePlatformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && effectivePlatformType === 'device'\n             }\"\n             [ngStyle]=\"liveContentContainerStyle\">\n          <img *ngIf=\"hasDeviceFrame\"\n            [src]=\"deviceMockupImage\"\n            alt=\"Device mockup\"\n            class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n          />\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame,\n                 'cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative': !hasDeviceFrame,\n                 'cqa-z-20': hasDeviceFrame && effectivePlatformType === 'browser',\n                 'cqa-bg-white': hasDeviceFrame && effectivePlatformType !== 'browser'\n               }\"\n               [ngStyle]=\"hasDeviceFrame ? deviceScreenStyle : {}\">\n            <!-- Loading State -->\n            <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <div class=\"cqa-mb-4\">\n                <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n              </div>\n              <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n            </div>\n\n            <!-- Live Content (when not loading) -->\n            <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n              <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                  <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                  <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                </div>\n              </div>\n              <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-max-h-[calc(100%-60px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': effectivePlatformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame; else videoNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser', 'cqa-min-w-max': effectivePlatformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': effectivePlatformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2] cqa-cursor-pointer\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser'}\"\n                  (click)=\"onVideoFrameClick()\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n                <!-- Play/Pause overlay icon -->\n                <div *ngIf=\"showPlayPauseOverlay\"\n                     class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-pointer-events-none\"\n                     [ngClass]=\"{'cqa-z-30': effectivePlatformType === 'browser'}\"\n                     [ngStyle]=\"{animation: 'cqaFadeOut 500ms ease-out forwards'}\">\n                  <div class=\"cqa-rounded-full cqa-bg-black cqa-bg-opacity-50 cqa-flex cqa-items-center cqa-justify-center\"\n                       style=\"width: 56px; height: 56px;\">\n                    <svg *ngIf=\"isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                      <polygon points=\"5,3 19,12 5,21\" />\n                    </svg>\n                    <svg *ngIf=\"!isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                      <rect x=\"5\" y=\"3\" width=\"4\" height=\"18\" />\n                      <rect x=\"15\" y=\"3\" width=\"4\" height=\"18\" />\n                    </svg>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #videoNoFrame>\n          <div class=\"cqa-relative cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4 cqa-cursor-pointer\"\n               (click)=\"onVideoFrameClick()\">\n            <video\n              #vplayer\n              class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n              [src]=\"currentVideoUrl\"\n              type=\"video/webm\"\n              (loadedmetadata)=\"onVideoMetadataLoaded()\"\n              (canplay)=\"onVideoCanPlay()\"\n              (ended)=\"onVideoEnded()\"\n            ></video>\n            <!-- Play/Pause overlay icon -->\n            <div *ngIf=\"showPlayPauseOverlay\"\n                 class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-pointer-events-none\"\n                 [ngStyle]=\"{animation: 'cqaFadeOut 500ms ease-out forwards'}\">\n              <div class=\"cqa-rounded-full cqa-bg-black cqa-bg-opacity-50 cqa-flex cqa-items-center cqa-justify-center\"\n                   style=\"width: 56px; height: 56px;\">\n                <svg *ngIf=\"isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                  <polygon points=\"5,3 19,12 5,21\" />\n                </svg>\n                <svg *ngIf=\"!isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                  <rect x=\"5\" y=\"3\" width=\"4\" height=\"18\" />\n                  <rect x=\"15\" y=\"3\" width=\"4\" height=\"18\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span\n            class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-inline-block\"\n            style=\"width: 40px; text-align: center;\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-2\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame; else screenshotNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser', 'cqa-min-w-max': effectivePlatformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': effectivePlatformType === 'browser', 'cqa-max-h-full': effectivePlatformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': effectivePlatformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #screenshotNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <img\n              [src]=\"screenShotUrl\"\n              alt=\"Screenshot\"\n              class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            />\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': effectivePlatformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth"], outputs: ["valueChange"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab", browserViewPort: "browserViewPort", browserDevice: "browserDevice", isFastForwarding: "isFastForwarding", fastForwardConfig: "fastForwardConfig", showVideoLibrary: "showVideoLibrary", showCaptureVideo: "showCaptureVideo", isCapturingVideo: "isCapturingVideo" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange", captureVideoRequested: "captureVideoRequested" }, host: { listeners: { "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBarRef", first: true, predicate: ["timelineBar"], descendants: true }, { propertyName: "speedControlContainerRef", first: true, predicate: ["speedControlContainer"], descendants: true }, { propertyName: "clipsScrollerRef", first: true, predicate: ["clipsScroller"], descendants: true }, { propertyName: "clipVideos", predicate: ["clipVideo"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"effectivePlatformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"effectivePlatformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"effectivePlatformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n        <button\n          *ngIf=\"showCaptureVideo && isLive\"\n          type=\"button\"\n          class=\"capture-video-btn\"\n          [class.is-loading]=\"isCapturingVideo\"\n          [disabled]=\"isCapturingVideo\"\n          (click)=\"captureVideo()\">\n          <span *ngIf=\"!isCapturingVideo\" class=\"capture-video-btn__dot\"></span>\n          <span *ngIf=\"isCapturingVideo\" class=\"capture-video-btn__spinner\" aria-hidden=\"true\"></span>\n          <span>{{ isCapturingVideo ? 'Capturing\u2026' : 'Capture Video' }}</span>\n        </button>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n    <!-- Fast-forward overlay: covers content area but not header -->\n    <div *ngIf=\"isFastForwarding && fastForwardConfig\"\n         class=\"cqa-h-full cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-p-6\"\n         style=\"background-color: #F3F4F6;\">\n      <div class=\"cqa-bg-white cqa-rounded-xl cqa-w-full\"\n           style=\"max-width: 500px; padding: 32px; box-shadow: 0px 25px 50px -12px #00000040; border: 1px solid #E5E5E5\">\n        <!-- Sparkle avatar with rotating arc -->\n        <div class=\"cqa-flex cqa-justify-center cqa-mb-2\">\n          <div class=\"cqa-relative\" style=\"width: 56px; height: 56px;\">\n            <div class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-flex cqa-items-center cqa-justify-center\"\n                 style=\"background-color: rgba(63,67,238,0.12);\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"26\" viewBox=\"0 0 24 26\" fill=\"none\">\n                <path d=\"M12.0251 0C12.173 0.0634121 12.2362 0.218264 12.2968 0.36211C12.3272 0.445923 12.355 0.530192 12.3821 0.615133C12.3927 0.647682 12.4033 0.680231 12.4142 0.713766C12.5548 1.15177 12.6801 1.59447 12.8061 2.03686C12.8346 2.13673 12.8632 2.23656 12.8918 2.33638C13.0375 2.84464 13.1821 3.35321 13.3258 3.86201C13.346 3.93347 13.3662 4.00492 13.3864 4.07638C13.4434 4.27783 13.5003 4.4793 13.5569 4.68087C13.6764 5.10678 13.7993 5.53145 13.9301 5.95405C13.9415 5.99102 13.9529 6.02799 13.9647 6.06608C14.3045 7.15318 14.7862 8.12751 15.5757 8.95743C15.5953 8.979 15.6148 9.00058 15.635 9.02282C15.972 9.38246 16.4045 9.67063 16.8368 9.90322C16.8588 9.91526 16.8808 9.92729 16.9035 9.9397C18.1757 10.6231 19.7053 10.9237 21.0832 11.3238C21.6869 11.4992 22.2888 11.6802 22.8885 11.8691C22.9306 11.8823 22.9727 11.8956 23.0149 11.9088C23.1409 11.9483 23.2667 11.9885 23.3923 12.0293C23.4216 12.0385 23.4509 12.0478 23.481 12.0573C23.6541 12.1146 23.8197 12.1821 23.9618 12.2992C24.0051 12.3938 24.0051 12.3938 23.9933 12.4884C23.855 12.6258 23.7179 12.6902 23.5354 12.753C23.5093 12.7623 23.4832 12.7716 23.4564 12.7811C23.1483 12.8892 22.836 12.9838 22.5234 13.0775C22.4592 13.0969 22.395 13.1163 22.3309 13.1357C21.9352 13.2551 21.5389 13.3719 21.1421 13.4874C20.6195 13.6395 20.0977 13.7942 19.5763 13.9506C19.4909 13.9763 19.4055 14.0018 19.32 14.0272C18.8712 14.161 18.4246 14.2995 17.9817 14.4516C17.945 14.4642 17.9082 14.4768 17.8704 14.4897C16.387 15.0059 15.2563 15.9687 14.5486 17.3768C14.167 18.1681 13.9419 19.0239 13.7124 19.8685C13.6503 20.0964 13.5842 20.323 13.5175 20.5496C13.4651 20.7278 13.4139 20.9064 13.364 21.0853C13.358 21.1066 13.3521 21.1279 13.346 21.1499C13.3172 21.253 13.2885 21.3562 13.26 21.4594C13.1872 21.7211 13.1087 21.9807 13.0281 22.2401C12.8851 22.7012 12.7549 23.1656 12.6256 23.6306C12.4305 24.3308 12.4305 24.3308 12.3199 24.6674C12.3126 24.69 12.3052 24.7126 12.2977 24.7359C12.2573 24.8557 12.2158 24.966 12.1394 25.0674C12.0231 25.093 12.0231 25.093 11.9187 25.0989C11.7993 24.9249 11.7202 24.7562 11.6569 24.5553C11.6476 24.5269 11.6384 24.4984 11.6289 24.4691C11.5116 24.1019 11.4067 23.7309 11.3018 23.36C11.2778 23.2752 11.2536 23.1904 11.2295 23.1056C11.0496 22.4737 10.8727 21.8409 10.696 21.2081C9.96019 18.0775 9.96019 18.0775 8.104 15.5464C8.07425 15.5222 8.0445 15.4979 8.01385 15.4729C6.79767 14.4989 5.19556 14.1382 3.7284 13.7155C3.36553 13.6109 3.0028 13.5058 2.64009 13.4007C2.60837 13.3915 2.60837 13.3915 2.57601 13.3821C2.05283 13.2304 1.5298 13.0783 1.0086 12.9199C0.986549 12.9132 0.9645 12.9066 0.941783 12.8997C0.141064 12.6578 0.141064 12.6578 0.0017241 12.4884C-0.0022167 12.4115 -0.0022167 12.4115 0.0332505 12.3307C0.178889 12.188 0.320205 12.1269 0.512426 12.0647C0.540259 12.0554 0.56809 12.046 0.596766 12.0364C0.682008 12.0079 0.767436 11.9801 0.852936 11.9524C0.877335 11.9444 0.901735 11.9364 0.926874 11.9282C1.09943 11.8716 1.2726 11.8171 1.44603 11.7633C1.48864 11.75 1.48864 11.75 1.53212 11.7364C2.27272 11.5061 3.01815 11.2917 3.76336 11.0769C4.31866 10.9168 4.87302 10.754 5.42561 10.5847C5.451 10.577 5.4764 10.5692 5.50256 10.5613C6.78267 10.1705 8.03409 9.61612 8.86063 8.51606C8.873 8.49974 8.88538 8.48342 8.89813 8.46661C9.8186 7.24564 10.1775 5.76082 10.5785 4.31201C10.7105 3.83552 10.844 3.35947 10.9779 2.88356C11.015 2.75177 11.0521 2.61997 11.089 2.48812C11.2372 1.95852 11.3876 1.42964 11.5467 0.903181C11.5616 0.853882 11.5764 0.804561 11.5911 0.755218C11.8138 0.0111205 11.8138 0.0111205 12.0251 0Z\" fill=\"#3F43EE\"/>\n                <path d=\"M19.2962 1.54899C19.441 1.7128 19.4699 1.90532 19.515 2.11449C19.6653 2.77161 19.8384 3.37584 20.4394 3.75756C20.8102 3.96263 21.2522 4.05595 21.663 4.14409C21.8364 4.18205 21.9829 4.23242 22.1316 4.33316C22.1651 4.38636 22.1651 4.38636 22.1632 4.47897C22.1287 4.59159 22.0984 4.62791 22.0075 4.70163C21.9081 4.73488 21.9081 4.73488 21.7888 4.76074C21.7437 4.7711 21.6985 4.78158 21.6535 4.79214C21.6293 4.79774 21.6051 4.80335 21.5803 4.80912C20.8456 4.97907 20.8456 4.97907 20.2105 5.36368C20.1899 5.3803 20.1692 5.39692 20.1479 5.41405C19.6941 5.81426 19.5981 6.48 19.4615 7.0377C19.4536 7.06833 19.4458 7.09896 19.4377 7.13051C19.431 7.15762 19.4242 7.18474 19.4172 7.21267C19.3877 7.29546 19.3572 7.34945 19.2962 7.41289C19.1266 7.43444 19.1266 7.43444 19.044 7.41289C18.9128 7.31114 18.8834 7.19524 18.8491 7.0395C18.8433 7.01539 18.8376 6.99127 18.8317 6.96642C18.8134 6.8894 18.7956 6.81226 18.778 6.73508C18.6398 6.13403 18.4837 5.54432 17.9324 5.19201C17.5015 4.95172 16.9776 4.83808 16.496 4.74631C16.364 4.71883 16.2884 4.68427 16.2067 4.57552C16.1889 4.46518 16.1889 4.46518 16.2067 4.35484C16.3322 4.22484 16.4644 4.19311 16.6342 4.15386C16.6877 4.14061 16.7412 4.12726 16.7947 4.11383C16.8223 4.10694 16.85 4.10004 16.8784 4.09294C17.0193 4.05668 17.1588 4.01602 17.2983 3.97455C17.3236 3.9672 17.3489 3.95985 17.3751 3.95227C17.6585 3.86752 17.9032 3.75911 18.1298 3.56668C18.1509 3.54928 18.172 3.53189 18.1938 3.51397C18.5465 3.19658 18.6663 2.71976 18.7751 2.27484C18.7834 2.24106 18.7916 2.20728 18.8002 2.17248C18.8167 2.10463 18.8329 2.0367 18.8488 1.9687C18.8602 1.92139 18.8602 1.92139 18.8717 1.87312C18.8784 1.84486 18.885 1.81659 18.8918 1.78747C18.9209 1.69749 18.959 1.62683 19.0125 1.54899C19.1153 1.49761 19.1874 1.52084 19.2962 1.54899Z\" fill=\"#0F12A8\"/>\n                <path d=\"M4.7881 17.4219C4.82561 17.4222 4.82561 17.4222 4.86387 17.4225C5.13296 17.4307 5.31503 17.5169 5.51321 17.6978C5.74381 17.9469 5.85029 18.2279 5.84423 18.5637C5.81833 18.8359 5.65779 19.0736 5.46087 19.2576C5.22908 19.4447 4.99525 19.5065 4.69906 19.4979C4.44933 19.4688 4.21438 19.3502 4.03738 19.1717C3.81726 18.8713 3.75291 18.5958 3.78517 18.2259C3.8518 17.9346 4.0439 17.6981 4.28959 17.5323C4.46027 17.4458 4.59755 17.4203 4.7881 17.4219Z\" fill=\"#1216CC\"/>\n                </svg>\n            </div>\n            <svg class=\"cqa-absolute\"\n                 width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                 style=\"top: -2px; left: -2px;\">\n              <circle cx=\"30\" cy=\"30\" r=\"28\" stroke=\"#E2E2E3\" stroke-width=\"2\" fill=\"none\"/>\n            </svg>\n            <svg class=\"cqa-absolute cqa-ff-spin\"\n                 width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                 style=\"top: -2px; left: -2px; transform-origin: 30px 30px;\">\n              <path d=\"M30 2 A 28 28 0 0 1 54.24 44\"\n                    stroke=\"#3f43ee\" stroke-width=\"2\" stroke-linecap=\"round\" fill=\"none\"/>\n            </svg>\n          </div>\n        </div>\n\n        <p class=\"cqa-text-center cqa-m-0 cqa-mb-2\"\n           style=\"font-size: 16px; font-weight: 600; color: #161617;\">\n          Fast-forwarding to your step\n        </p>\n\n        <p class=\"cqa-text-center cqa-m-0\"\n           style=\"font-size: 12px; color: #6D6D74;\">\n          Steps {{ fastForwardConfig.fromStep }}\u2013{{ fastForwardConfig.toStep }} are running at full speed in the background.\n          <strong style=\"color: #6D6D74; font-weight: 600;\">Live view and screenshots are paused</strong>\n          until execution reaches your target step \u2014 then you're in automatically.\n        </p>\n\n        <div class=\"cqa-mt-6 cqa-mb-5\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span style=\"font-size: 12px; color: #4C4C51;\">Steps executing in background</span>\n            <span style=\"font-size: 12px; color: #6D6D74;\">\n              {{ fastForwardConfig.currentStep }} of {{ fastForwardConfig.totalSteps }} steps\n            </span>\n          </div>\n          <div style=\"height: 6px; background-color: #E2E2E3; border-radius: 9999px; overflow: hidden;\">\n            <div [style.width.%]=\"fastForwardProgressPercent\"\n                 style=\"height: 100%; background: linear-gradient(90deg, #3F43EE 0%, #818CF8 100%); transition: width 300ms cubic-bezier(0.4,0,0.2,1);\"></div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\"\n             style=\"padding: 10px 14px; border-radius: 10px; background: #6366F11A; border: 1px solid #6366F133;\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" style=\"flex-shrink: 0;\">\n            <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"#3f43ee\" stroke-width=\"1.25\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"3\" stroke=\"#3f43ee\" stroke-width=\"1.25\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"1\" fill=\"#3f43ee\"/>\n          </svg>\n          <div style=\"font-size: 12px;\">\n            <span style=\"color: #6D6D74;\">Jumping to</span>\n            <span style=\"color: #3F43EE; font-weight: 400; display: block;\">\n              Step {{ fastForwardConfig.targetStepNumber }} \u2014 {{ fastForwardConfig.targetStepLabel }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Live Content View -->\n    <div *ngIf=\"!isFastForwarding && isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n        <div class=\"cqa-relative cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-overflow-hidden\"\n             [ngClass]=\"{\n               'cqa-w-auto': hasDeviceFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n               'cqa-max-h-full cqa-h-full': hasDeviceFrame && (effectivePlatformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && effectivePlatformType === 'device'\n             }\"\n             [ngStyle]=\"liveContentContainerStyle\">\n          <img *ngIf=\"hasDeviceFrame\"\n            [src]=\"deviceMockupImage\"\n            alt=\"Device mockup\"\n            class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n          />\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame,\n                 'cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative': !hasDeviceFrame,\n                 'cqa-z-20': hasDeviceFrame && effectivePlatformType === 'browser',\n                 'cqa-bg-white': hasDeviceFrame && effectivePlatformType !== 'browser'\n               }\"\n               [ngStyle]=\"hasDeviceFrame ? deviceScreenStyle : {}\">\n            <!-- Loading State -->\n            <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <div class=\"cqa-mb-4\">\n                <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n              </div>\n              <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n            </div>\n\n            <!-- Live Content (when not loading) -->\n            <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n              <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                  <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                  <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                </div>\n              </div>\n              <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-flex cqa-items-center\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': effectivePlatformType === 'device', 'cqa-mt-auto': hasDeviceFrame, 'cqa-max-h-[calc(100%-108px)]': showVideoLibrary, 'cqa-max-h-[calc(100%-60px)]': !showVideoLibrary}\">\n        <ng-container *ngIf=\"hasDeviceFrame; else videoNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser', 'cqa-min-w-max': effectivePlatformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': effectivePlatformType !== 'browser'}\">\n                <video\n                  *ngIf=\"!videoRefreshing\"\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2] cqa-cursor-pointer\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser'}\"\n                  (click)=\"onVideoFrameClick()\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                  (error)=\"onVideoError()\"\n                ></video>\n                <!-- Play/Pause overlay icon -->\n                <div *ngIf=\"showPlayPauseOverlay\"\n                     class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-pointer-events-none\"\n                     [ngClass]=\"{'cqa-z-30': effectivePlatformType === 'browser'}\"\n                     [ngStyle]=\"{animation: 'cqaFadeOut 500ms ease-out forwards'}\">\n                  <div class=\"cqa-rounded-full cqa-bg-black cqa-bg-opacity-50 cqa-flex cqa-items-center cqa-justify-center\"\n                       style=\"width: 56px; height: 56px;\">\n                    <svg *ngIf=\"isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                      <polygon points=\"5,3 19,12 5,21\" />\n                    </svg>\n                    <svg *ngIf=\"!isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                      <rect x=\"5\" y=\"3\" width=\"4\" height=\"18\" />\n                      <rect x=\"15\" y=\"3\" width=\"4\" height=\"18\" />\n                    </svg>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #videoNoFrame>\n          <div class=\"cqa-relative cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4 cqa-cursor-pointer\"\n               (click)=\"onVideoFrameClick()\">\n            <video\n              *ngIf=\"!videoRefreshing\"\n              #vplayer\n              class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n              [src]=\"currentVideoUrl\"\n              type=\"video/webm\"\n              (loadedmetadata)=\"onVideoMetadataLoaded()\"\n              (canplay)=\"onVideoCanPlay()\"\n              (ended)=\"onVideoEnded()\"\n              (error)=\"onVideoError()\"\n            ></video>\n            <!-- Play/Pause overlay icon -->\n            <div *ngIf=\"showPlayPauseOverlay\"\n                 class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-pointer-events-none\"\n                 [ngStyle]=\"{animation: 'cqaFadeOut 500ms ease-out forwards'}\">\n              <div class=\"cqa-rounded-full cqa-bg-black cqa-bg-opacity-50 cqa-flex cqa-items-center cqa-justify-center\"\n                   style=\"width: 56px; height: 56px;\">\n                <svg *ngIf=\"isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                  <polygon points=\"5,3 19,12 5,21\" />\n                </svg>\n                <svg *ngIf=\"!isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                  <rect x=\"5\" y=\"3\" width=\"4\" height=\"18\" />\n                  <rect x=\"15\" y=\"3\" width=\"4\" height=\"18\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <!-- Video Library Panel \u2014 reserves only header-height in flow; the inner panel is absolutely anchored to its bottom edge, so the body expanding makes the panel grow UPWARD over the video. Timeline stays put. -->\n      <div *ngIf=\"showVideoLibrary && videoUrls && videoUrls.length > 0\"\n           class=\"video-library\"\n           [class.video-library--open]=\"!isVideoLibraryCollapsed\"\n           [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\">\n       <div class=\"video-library__inner\">\n        <!-- Header \u2014 always visible, clicking the chevron toggles the body -->\n        <div class=\"video-library__header\">\n          <div class=\"video-library__title-group\">\n            <mat-icon class=\"video-library__icon\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                <path d=\"M9.33398 7.58308L12.3807 9.61425C12.4247 9.64348 12.4757 9.66024 12.5284 9.66276C12.5811 9.66528 12.6335 9.65347 12.68 9.62856C12.7265 9.60366 12.7654 9.56661 12.7925 9.52136C12.8196 9.4761 12.834 9.42434 12.834 9.37158V4.59058C12.834 4.53926 12.8205 4.48885 12.7948 4.44443C12.7691 4.40001 12.7321 4.36315 12.6876 4.33759C12.6431 4.31203 12.5926 4.29866 12.5413 4.29883C12.49 4.299 12.4396 4.31272 12.3953 4.33858L9.33398 6.12475\" stroke=\"#3F43EE\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.16602 3.5H2.33268C1.68835 3.5 1.16602 4.02233 1.16602 4.66667V9.33333C1.16602 9.97767 1.68835 10.5 2.33268 10.5H8.16602C8.81035 10.5 9.33268 9.97767 9.33268 9.33333V4.66667C9.33268 4.02233 8.81035 3.5 8.16602 3.5Z\" stroke=\"#3F43EE\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n            </mat-icon>\n            <span class=\"video-library__title\">Video Library</span>\n            <cqa-badge\n              size=\"small\"\n              inlineStyles=\"min-width: max-content;\"\n              backgroundColor=\"#EDE9FE\"\n              textColor=\"#6D28D9\"\n              [label]=\"videoUrls.length + ' clip' + (videoUrls.length === 1 ? '' : 's')\">\n            </cqa-badge>\n            <span class=\"video-library__subtitle\"\n                  [matTooltip]=\"isVideoFullMode ? 'Playing all clips as one continuous video' : 'Each clip covers execution since last capture'\"\n                  matTooltipPosition=\"below\">{{ isVideoFullMode ? '\u00B7 Playing all clips as one continuous video' : '\u00B7 Each clip covers execution since last capture' }}</span>\n          </div>\n          <div class=\"video-library__actions\">\n            <cqa-button\n              *ngIf=\"!isVideoFullMode\"\n              variant=\"filled\"\n              btnSize=\"md\"\n              icon=\"play_arrow\"\n              iconPosition=\"start\"\n              text=\"Show Full Video\"\n              (clicked)=\"onShowFullVideo()\">\n            </cqa-button>\n            <cqa-button\n              *ngIf=\"isVideoFullMode\"\n              variant=\"outlined\"\n              btnSize=\"md\"\n              icon=\"close\"\n              iconPosition=\"start\"\n              text=\"Exit Full Video\"\n              (clicked)=\"onExitFullVideo()\">\n            </cqa-button>\n            <button type=\"button\" class=\"video-library__collapse\" (click)=\"toggleVideoLibraryCollapsed()\"\n                    [attr.aria-label]=\"isVideoLibraryCollapsed ? 'Show video library' : 'Hide video library'\">\n              <svg *ngIf=\"!isVideoLibraryCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M3 7.5L6 4.5L9 7.5\" stroke=\"#6B7280\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <svg *ngIf=\"isVideoLibraryCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#6B7280\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Body (cards) \u2014 max-height animates from 0 (collapsed) to a fixed height (open). -->\n        <div class=\"video-library__body\"\n             [class.video-library__body--open]=\"!isVideoLibraryCollapsed\"\n             [attr.aria-hidden]=\"isVideoLibraryCollapsed ? true : null\">\n          <div class=\"clips-row\"\n               #clipsScroller\n               [class.clips-row--dragging]=\"clipsDragActive\"\n               (mousedown)=\"onClipsMouseDown($event, clipsScroller)\"\n               (mousemove)=\"onClipsMouseMove($event, clipsScroller)\"\n               (mouseup)=\"onClipsMouseUp($event)\"\n               (mouseleave)=\"onClipsMouseLeave($event)\">\n            <div\n              *ngFor=\"let url of videoUrls; let i = index; trackBy: trackLibraryClipByIndex\"\n              class=\"clip-card\"\n              [class.clip-card--playing]=\"i === currentVideoIndex\">\n              <div class=\"clip-thumb\"\n                   [class.clip-thumb--ready]=\"libraryVideoDurations.has(i)\"\n                   (click)=\"selectLibraryClip(i)\">\n                <video\n                  #clipVideo\n                  class=\"clip-thumb__video\"\n                  [src]=\"url\"\n                  preload=\"metadata\"\n                  playsinline\n                  muted\n                  (loadedmetadata)=\"onLibraryClipMetadataLoaded(i, clipVideo)\"\n                  (durationchange)=\"onLibraryClipMetadataLoaded(i, clipVideo)\"></video>\n                <div class=\"clip-thumb__overlay\">\n                  <div class=\"clip-thumb__play-circle\">\n                    <svg *ngIf=\"!(i === currentVideoIndex && isPlaying)\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                      <path d=\"M3.5 1.75L11.375 7L3.5 12.25V1.75Z\" fill=\"#FFFFFF\"/>\n                    </svg>\n                    <svg *ngIf=\"i === currentVideoIndex && isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                      <rect x=\"3.5\" y=\"2.5\" width=\"2.5\" height=\"9\" rx=\"0.5\" fill=\"#FFFFFF\"/>\n                      <rect x=\"8\" y=\"2.5\" width=\"2.5\" height=\"9\" rx=\"0.5\" fill=\"#FFFFFF\"/>\n                    </svg>\n                  </div>\n                </div>\n                <span *ngIf=\"i === currentVideoIndex && isPlaying\" class=\"clip-thumb__badge clip-thumb__badge--playing\">PLAYING</span>\n                <span *ngIf=\"newVideoIndexes.has(i) && i !== currentVideoIndex\" class=\"clip-thumb__badge clip-thumb__badge--new\">NEW</span>\n                <span class=\"clip-thumb__duration\">{{ formatTime(libraryVideoDurations.get(i) || 0) }}</span>\n              </div>\n              <div class=\"clip-meta\">\n                <div class=\"clip-meta__title\">Clip {{ i + 1 }}</div>\n                <button\n                  type=\"button\"\n                  class=\"clip-download-btn\"\n                  [class.clip-download-btn--downloading]=\"downloadingIndexes.has(i)\"\n                  [disabled]=\"downloadingIndexes.has(i)\"\n                  (click)=\"downloadClip(i); $event.stopPropagation()\">\n                  <ng-container *ngIf=\"!downloadingIndexes.has(i)\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                      <!-- Figma icon: upward arrow with a short tray line at the bottom (share/export glyph). -->\n                      <path d=\"M6 8.5V2M6 2L3 5M6 2L9 5M3 10.5H9\" stroke=\"currentColor\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                    <span>Download</span>\n                  </ng-container>\n                  <ng-container *ngIf=\"downloadingIndexes.has(i)\">\n                    <svg class=\"clip-download-btn__ring\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                      <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#E5E7EB\" stroke-width=\"1.5\" fill=\"none\"/>\n                      <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"\n                              stroke-linecap=\"round\"\n                              [attr.stroke-dasharray]=\"downloadRingCircumference\"\n                              [attr.stroke-dashoffset]=\"downloadRingDashoffset(i)\"\n                              transform=\"rotate(-90 7 7)\"/>\n                    </svg>\n                    <span>{{ downloadProgress.get(i) || 0 }}%</span>\n                  </ng-container>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n       </div>\n      </div>\n\n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame && !(showVideoLibrary && videoUrls && videoUrls.length > 0)}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span *ngIf=\"!isVideoFullMode\"\n              class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button\n            *ngIf=\"hasMultipleVideos && !isVideoFullMode\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button\n            *ngIf=\"hasMultipleVideos && !isVideoFullMode\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span\n            class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-inline-block\"\n            style=\"width: 40px; text-align: center;\">\n            {{ formatTime(isVideoFullMode ? (globalCurrentTimeMs / 1000) : (vplayer?.nativeElement?.currentTime || 0)) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%); z-index: 101;\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div\n              *ngFor=\"let marker of (isVideoFullMode ? fullVideoMarkers : currentVideoMarkers)\"\n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"isVideoFullMode ? getGlobalFullStepLeftPosition(marker) : getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div\n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"isVideoFullMode ? globalScrubberPercent : progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div\n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"isVideoFullMode ? globalScrubberPercent : progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-2\">\n            {{ formatTime(isVideoFullMode ? (totalDuration / 1000) : (vplayer?.nativeElement?.duration || 0)) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame; else screenshotNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser', 'cqa-min-w-max': effectivePlatformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': effectivePlatformType === 'browser', 'cqa-max-h-full': effectivePlatformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': effectivePlatformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #screenshotNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <img\n              [src]=\"screenShotUrl\"\n              alt=\"Screenshot\"\n              class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            />\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': effectivePlatformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth"], outputs: ["valueChange"] }, { type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"effectivePlatformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"effectivePlatformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"effectivePlatformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n    <!-- Fast-forward overlay: covers content area but not header -->\n    <div *ngIf=\"isFastForwarding && fastForwardConfig\"\n         class=\"cqa-h-full cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-p-6\"\n         style=\"background-color: #F3F4F6;\">\n      <div class=\"cqa-bg-white cqa-rounded-xl cqa-w-full\"\n           style=\"max-width: 500px; padding: 32px; box-shadow: 0px 25px 50px -12px #00000040; border: 1px solid #E5E5E5\">\n        <!-- Sparkle avatar with rotating arc -->\n        <div class=\"cqa-flex cqa-justify-center cqa-mb-2\">\n          <div class=\"cqa-relative\" style=\"width: 56px; height: 56px;\">\n            <div class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-flex cqa-items-center cqa-justify-center\"\n                 style=\"background-color: rgba(63,67,238,0.12);\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"26\" viewBox=\"0 0 24 26\" fill=\"none\">\n                <path d=\"M12.0251 0C12.173 0.0634121 12.2362 0.218264 12.2968 0.36211C12.3272 0.445923 12.355 0.530192 12.3821 0.615133C12.3927 0.647682 12.4033 0.680231 12.4142 0.713766C12.5548 1.15177 12.6801 1.59447 12.8061 2.03686C12.8346 2.13673 12.8632 2.23656 12.8918 2.33638C13.0375 2.84464 13.1821 3.35321 13.3258 3.86201C13.346 3.93347 13.3662 4.00492 13.3864 4.07638C13.4434 4.27783 13.5003 4.4793 13.5569 4.68087C13.6764 5.10678 13.7993 5.53145 13.9301 5.95405C13.9415 5.99102 13.9529 6.02799 13.9647 6.06608C14.3045 7.15318 14.7862 8.12751 15.5757 8.95743C15.5953 8.979 15.6148 9.00058 15.635 9.02282C15.972 9.38246 16.4045 9.67063 16.8368 9.90322C16.8588 9.91526 16.8808 9.92729 16.9035 9.9397C18.1757 10.6231 19.7053 10.9237 21.0832 11.3238C21.6869 11.4992 22.2888 11.6802 22.8885 11.8691C22.9306 11.8823 22.9727 11.8956 23.0149 11.9088C23.1409 11.9483 23.2667 11.9885 23.3923 12.0293C23.4216 12.0385 23.4509 12.0478 23.481 12.0573C23.6541 12.1146 23.8197 12.1821 23.9618 12.2992C24.0051 12.3938 24.0051 12.3938 23.9933 12.4884C23.855 12.6258 23.7179 12.6902 23.5354 12.753C23.5093 12.7623 23.4832 12.7716 23.4564 12.7811C23.1483 12.8892 22.836 12.9838 22.5234 13.0775C22.4592 13.0969 22.395 13.1163 22.3309 13.1357C21.9352 13.2551 21.5389 13.3719 21.1421 13.4874C20.6195 13.6395 20.0977 13.7942 19.5763 13.9506C19.4909 13.9763 19.4055 14.0018 19.32 14.0272C18.8712 14.161 18.4246 14.2995 17.9817 14.4516C17.945 14.4642 17.9082 14.4768 17.8704 14.4897C16.387 15.0059 15.2563 15.9687 14.5486 17.3768C14.167 18.1681 13.9419 19.0239 13.7124 19.8685C13.6503 20.0964 13.5842 20.323 13.5175 20.5496C13.4651 20.7278 13.4139 20.9064 13.364 21.0853C13.358 21.1066 13.3521 21.1279 13.346 21.1499C13.3172 21.253 13.2885 21.3562 13.26 21.4594C13.1872 21.7211 13.1087 21.9807 13.0281 22.2401C12.8851 22.7012 12.7549 23.1656 12.6256 23.6306C12.4305 24.3308 12.4305 24.3308 12.3199 24.6674C12.3126 24.69 12.3052 24.7126 12.2977 24.7359C12.2573 24.8557 12.2158 24.966 12.1394 25.0674C12.0231 25.093 12.0231 25.093 11.9187 25.0989C11.7993 24.9249 11.7202 24.7562 11.6569 24.5553C11.6476 24.5269 11.6384 24.4984 11.6289 24.4691C11.5116 24.1019 11.4067 23.7309 11.3018 23.36C11.2778 23.2752 11.2536 23.1904 11.2295 23.1056C11.0496 22.4737 10.8727 21.8409 10.696 21.2081C9.96019 18.0775 9.96019 18.0775 8.104 15.5464C8.07425 15.5222 8.0445 15.4979 8.01385 15.4729C6.79767 14.4989 5.19556 14.1382 3.7284 13.7155C3.36553 13.6109 3.0028 13.5058 2.64009 13.4007C2.60837 13.3915 2.60837 13.3915 2.57601 13.3821C2.05283 13.2304 1.5298 13.0783 1.0086 12.9199C0.986549 12.9132 0.9645 12.9066 0.941783 12.8997C0.141064 12.6578 0.141064 12.6578 0.0017241 12.4884C-0.0022167 12.4115 -0.0022167 12.4115 0.0332505 12.3307C0.178889 12.188 0.320205 12.1269 0.512426 12.0647C0.540259 12.0554 0.56809 12.046 0.596766 12.0364C0.682008 12.0079 0.767436 11.9801 0.852936 11.9524C0.877335 11.9444 0.901735 11.9364 0.926874 11.9282C1.09943 11.8716 1.2726 11.8171 1.44603 11.7633C1.48864 11.75 1.48864 11.75 1.53212 11.7364C2.27272 11.5061 3.01815 11.2917 3.76336 11.0769C4.31866 10.9168 4.87302 10.754 5.42561 10.5847C5.451 10.577 5.4764 10.5692 5.50256 10.5613C6.78267 10.1705 8.03409 9.61612 8.86063 8.51606C8.873 8.49974 8.88538 8.48342 8.89813 8.46661C9.8186 7.24564 10.1775 5.76082 10.5785 4.31201C10.7105 3.83552 10.844 3.35947 10.9779 2.88356C11.015 2.75177 11.0521 2.61997 11.089 2.48812C11.2372 1.95852 11.3876 1.42964 11.5467 0.903181C11.5616 0.853882 11.5764 0.804561 11.5911 0.755218C11.8138 0.0111205 11.8138 0.0111205 12.0251 0Z\" fill=\"#3F43EE\"/>\n                <path d=\"M19.2962 1.54899C19.441 1.7128 19.4699 1.90532 19.515 2.11449C19.6653 2.77161 19.8384 3.37584 20.4394 3.75756C20.8102 3.96263 21.2522 4.05595 21.663 4.14409C21.8364 4.18205 21.9829 4.23242 22.1316 4.33316C22.1651 4.38636 22.1651 4.38636 22.1632 4.47897C22.1287 4.59159 22.0984 4.62791 22.0075 4.70163C21.9081 4.73488 21.9081 4.73488 21.7888 4.76074C21.7437 4.7711 21.6985 4.78158 21.6535 4.79214C21.6293 4.79774 21.6051 4.80335 21.5803 4.80912C20.8456 4.97907 20.8456 4.97907 20.2105 5.36368C20.1899 5.3803 20.1692 5.39692 20.1479 5.41405C19.6941 5.81426 19.5981 6.48 19.4615 7.0377C19.4536 7.06833 19.4458 7.09896 19.4377 7.13051C19.431 7.15762 19.4242 7.18474 19.4172 7.21267C19.3877 7.29546 19.3572 7.34945 19.2962 7.41289C19.1266 7.43444 19.1266 7.43444 19.044 7.41289C18.9128 7.31114 18.8834 7.19524 18.8491 7.0395C18.8433 7.01539 18.8376 6.99127 18.8317 6.96642C18.8134 6.8894 18.7956 6.81226 18.778 6.73508C18.6398 6.13403 18.4837 5.54432 17.9324 5.19201C17.5015 4.95172 16.9776 4.83808 16.496 4.74631C16.364 4.71883 16.2884 4.68427 16.2067 4.57552C16.1889 4.46518 16.1889 4.46518 16.2067 4.35484C16.3322 4.22484 16.4644 4.19311 16.6342 4.15386C16.6877 4.14061 16.7412 4.12726 16.7947 4.11383C16.8223 4.10694 16.85 4.10004 16.8784 4.09294C17.0193 4.05668 17.1588 4.01602 17.2983 3.97455C17.3236 3.9672 17.3489 3.95985 17.3751 3.95227C17.6585 3.86752 17.9032 3.75911 18.1298 3.56668C18.1509 3.54928 18.172 3.53189 18.1938 3.51397C18.5465 3.19658 18.6663 2.71976 18.7751 2.27484C18.7834 2.24106 18.7916 2.20728 18.8002 2.17248C18.8167 2.10463 18.8329 2.0367 18.8488 1.9687C18.8602 1.92139 18.8602 1.92139 18.8717 1.87312C18.8784 1.84486 18.885 1.81659 18.8918 1.78747C18.9209 1.69749 18.959 1.62683 19.0125 1.54899C19.1153 1.49761 19.1874 1.52084 19.2962 1.54899Z\" fill=\"#0F12A8\"/>\n                <path d=\"M4.7881 17.4219C4.82561 17.4222 4.82561 17.4222 4.86387 17.4225C5.13296 17.4307 5.31503 17.5169 5.51321 17.6978C5.74381 17.9469 5.85029 18.2279 5.84423 18.5637C5.81833 18.8359 5.65779 19.0736 5.46087 19.2576C5.22908 19.4447 4.99525 19.5065 4.69906 19.4979C4.44933 19.4688 4.21438 19.3502 4.03738 19.1717C3.81726 18.8713 3.75291 18.5958 3.78517 18.2259C3.8518 17.9346 4.0439 17.6981 4.28959 17.5323C4.46027 17.4458 4.59755 17.4203 4.7881 17.4219Z\" fill=\"#1216CC\"/>\n                </svg>\n            </div>\n            <svg class=\"cqa-absolute\"\n                 width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                 style=\"top: -2px; left: -2px;\">\n              <circle cx=\"30\" cy=\"30\" r=\"28\" stroke=\"#E2E2E3\" stroke-width=\"2\" fill=\"none\"/>\n            </svg>\n            <svg class=\"cqa-absolute cqa-ff-spin\"\n                 width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                 style=\"top: -2px; left: -2px; transform-origin: 30px 30px;\">\n              <path d=\"M30 2 A 28 28 0 0 1 54.24 44\"\n                    stroke=\"#3f43ee\" stroke-width=\"2\" stroke-linecap=\"round\" fill=\"none\"/>\n            </svg>\n          </div>\n        </div>\n\n        <p class=\"cqa-text-center cqa-m-0 cqa-mb-2\"\n           style=\"font-size: 16px; font-weight: 600; color: #161617;\">\n          Fast-forwarding to your step\n        </p>\n\n        <p class=\"cqa-text-center cqa-m-0\"\n           style=\"font-size: 12px; color: #6D6D74;\">\n          Steps {{ fastForwardConfig.fromStep }}\u2013{{ fastForwardConfig.toStep }} are running at full speed in the background.\n          <strong style=\"color: #6D6D74; font-weight: 600;\">Live view and screenshots are paused</strong>\n          until execution reaches your target step \u2014 then you're in automatically.\n        </p>\n\n        <div class=\"cqa-mt-6 cqa-mb-5\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span style=\"font-size: 12px; color: #4C4C51;\">Steps executing in background</span>\n            <span style=\"font-size: 12px; color: #6D6D74;\">\n              {{ fastForwardConfig.currentStep }} of {{ fastForwardConfig.totalSteps }} steps\n            </span>\n          </div>\n          <div style=\"height: 6px; background-color: #E2E2E3; border-radius: 9999px; overflow: hidden;\">\n            <div [style.width.%]=\"fastForwardProgressPercent\"\n                 style=\"height: 100%; background: linear-gradient(90deg, #3F43EE 0%, #818CF8 100%); transition: width 300ms cubic-bezier(0.4,0,0.2,1);\"></div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\"\n             style=\"padding: 10px 14px; border-radius: 10px; background: #6366F11A; border: 1px solid #6366F133;\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" style=\"flex-shrink: 0;\">\n            <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"#3f43ee\" stroke-width=\"1.25\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"3\" stroke=\"#3f43ee\" stroke-width=\"1.25\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"1\" fill=\"#3f43ee\"/>\n          </svg>\n          <div style=\"font-size: 12px;\">\n            <span style=\"color: #6D6D74;\">Jumping to</span>\n            <span style=\"color: #3F43EE; font-weight: 400; display: block;\">\n              Step {{ fastForwardConfig.targetStepNumber }} \u2014 {{ fastForwardConfig.targetStepLabel }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Live Content View -->\n    <div *ngIf=\"!isFastForwarding && isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n        <div class=\"cqa-relative cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-overflow-hidden\"\n             [ngClass]=\"{\n               'cqa-w-auto': hasDeviceFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n               'cqa-max-h-full cqa-h-full': hasDeviceFrame && (effectivePlatformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && effectivePlatformType === 'device'\n             }\"\n             [ngStyle]=\"liveContentContainerStyle\">\n          <img *ngIf=\"hasDeviceFrame\"\n            [src]=\"deviceMockupImage\"\n            alt=\"Device mockup\"\n            class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n          />\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame,\n                 'cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative': !hasDeviceFrame,\n                 'cqa-z-20': hasDeviceFrame && effectivePlatformType === 'browser',\n                 'cqa-bg-white': hasDeviceFrame && effectivePlatformType !== 'browser'\n               }\"\n               [ngStyle]=\"hasDeviceFrame ? deviceScreenStyle : {}\">\n            <!-- Loading State -->\n            <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <div class=\"cqa-mb-4\">\n                <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n              </div>\n              <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n            </div>\n\n            <!-- Live Content (when not loading) -->\n            <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n              <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                  <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                  <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                </div>\n              </div>\n              <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-max-h-[calc(100%-60px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': effectivePlatformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame; else videoNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser', 'cqa-min-w-max': effectivePlatformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': effectivePlatformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2] cqa-cursor-pointer\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser'}\"\n                  (click)=\"onVideoFrameClick()\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n                <!-- Play/Pause overlay icon -->\n                <div *ngIf=\"showPlayPauseOverlay\"\n                     class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-pointer-events-none\"\n                     [ngClass]=\"{'cqa-z-30': effectivePlatformType === 'browser'}\"\n                     [ngStyle]=\"{animation: 'cqaFadeOut 500ms ease-out forwards'}\">\n                  <div class=\"cqa-rounded-full cqa-bg-black cqa-bg-opacity-50 cqa-flex cqa-items-center cqa-justify-center\"\n                       style=\"width: 56px; height: 56px;\">\n                    <svg *ngIf=\"isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                      <polygon points=\"5,3 19,12 5,21\" />\n                    </svg>\n                    <svg *ngIf=\"!isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                      <rect x=\"5\" y=\"3\" width=\"4\" height=\"18\" />\n                      <rect x=\"15\" y=\"3\" width=\"4\" height=\"18\" />\n                    </svg>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #videoNoFrame>\n          <div class=\"cqa-relative cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4 cqa-cursor-pointer\"\n               (click)=\"onVideoFrameClick()\">\n            <video\n              #vplayer\n              class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n              [src]=\"currentVideoUrl\"\n              type=\"video/webm\"\n              (loadedmetadata)=\"onVideoMetadataLoaded()\"\n              (canplay)=\"onVideoCanPlay()\"\n              (ended)=\"onVideoEnded()\"\n            ></video>\n            <!-- Play/Pause overlay icon -->\n            <div *ngIf=\"showPlayPauseOverlay\"\n                 class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-pointer-events-none\"\n                 [ngStyle]=\"{animation: 'cqaFadeOut 500ms ease-out forwards'}\">\n              <div class=\"cqa-rounded-full cqa-bg-black cqa-bg-opacity-50 cqa-flex cqa-items-center cqa-justify-center\"\n                   style=\"width: 56px; height: 56px;\">\n                <svg *ngIf=\"isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                  <polygon points=\"5,3 19,12 5,21\" />\n                </svg>\n                <svg *ngIf=\"!isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                  <rect x=\"5\" y=\"3\" width=\"4\" height=\"18\" />\n                  <rect x=\"15\" y=\"3\" width=\"4\" height=\"18\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span\n            class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-inline-block\"\n            style=\"width: 40px; text-align: center;\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-2\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame; else screenshotNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser', 'cqa-min-w-max': effectivePlatformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': effectivePlatformType === 'browser', 'cqa-max-h-full': effectivePlatformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': effectivePlatformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #screenshotNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <img\n              [src]=\"screenShotUrl\"\n              alt=\"Screenshot\"\n              class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            />\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': effectivePlatformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-simulator', template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"effectivePlatformType === 'browser'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <g clip-path=\"url(#clip0_935_15847)\">\n              <path\n                d=\"M0.625 5C0.625 6.16032 1.08594 7.27312 1.90641 8.09359C2.72688 8.91406 3.83968 9.375 5 9.375C6.16032 9.375 7.27312 8.91406 8.09359 8.09359C8.91406 7.27312 9.375 6.16032 9.375 5C9.375 3.83968 8.91406 2.72688 8.09359 1.90641C7.27312 1.08594 6.16032 0.625 5 0.625C3.83968 0.625 2.72688 1.08594 1.90641 1.90641C1.08594 2.72688 0.625 3.83968 0.625 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M3.125 5C3.125 3.83968 3.32254 2.72688 3.67417 1.90641C4.02581 1.08594 4.50272 0.625 5 0.625C5.49728 0.625 5.97419 1.08594 6.32582 1.90641C6.67746 2.72688 6.875 3.83968 6.875 5C6.875 6.16032 6.67746 7.27312 6.32582 8.09359C5.97419 8.91406 5.49728 9.375 5 9.375C4.50272 9.375 4.02581 8.91406 3.67417 8.09359C3.32254 7.27312 3.125 6.16032 3.125 5Z\"\n                stroke=\"#9CA3AF\" stroke-width=\"0.6\" stroke-linejoin=\"round\" />\n              <path d=\"M0.9375 6.45866H9.0625M0.9375 3.54199H9.0625\" stroke=\"#9CA3AF\" stroke-width=\"0.6\"\n                stroke-linecap=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_935_15847\">\n                <rect width=\"10\" height=\"10\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </mat-icon>\n        <mat-icon *ngIf=\"effectivePlatformType === 'device'\" style=\"width: 10px; height: 10px;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n            <path d=\"M7.08325 0.833008H2.91659C2.45635 0.833008 2.08325 1.2061 2.08325 1.66634V8.33301C2.08325 8.79324 2.45635 9.16634 2.91659 9.16634H7.08325C7.54349 9.16634 7.91658 8.79324 7.91658 8.33301V1.66634C7.91658 1.2061 7.54349 0.833008 7.08325 0.833008Z\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5 7.5H5.00417\" stroke=\"#6B7280\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n        <p class=\"cqa-text-sm !cqa-text-[10px] cqa-text-[#6B7280] cqa-ml-2\">\n          {{ platformName }}\n          <span\n            *ngIf=\"effectivePlatformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n        <button\n          *ngIf=\"showCaptureVideo && isLive\"\n          type=\"button\"\n          class=\"capture-video-btn\"\n          [class.is-loading]=\"isCapturingVideo\"\n          [disabled]=\"isCapturingVideo\"\n          (click)=\"captureVideo()\">\n          <span *ngIf=\"!isCapturingVideo\" class=\"capture-video-btn__dot\"></span>\n          <span *ngIf=\"isCapturingVideo\" class=\"capture-video-btn__spinner\" aria-hidden=\"true\"></span>\n          <span>{{ isCapturingVideo ? 'Capturing\u2026' : 'Capture Video' }}</span>\n        </button>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n    <!-- Fast-forward overlay: covers content area but not header -->\n    <div *ngIf=\"isFastForwarding && fastForwardConfig\"\n         class=\"cqa-h-full cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-p-6\"\n         style=\"background-color: #F3F4F6;\">\n      <div class=\"cqa-bg-white cqa-rounded-xl cqa-w-full\"\n           style=\"max-width: 500px; padding: 32px; box-shadow: 0px 25px 50px -12px #00000040; border: 1px solid #E5E5E5\">\n        <!-- Sparkle avatar with rotating arc -->\n        <div class=\"cqa-flex cqa-justify-center cqa-mb-2\">\n          <div class=\"cqa-relative\" style=\"width: 56px; height: 56px;\">\n            <div class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-flex cqa-items-center cqa-justify-center\"\n                 style=\"background-color: rgba(63,67,238,0.12);\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"26\" viewBox=\"0 0 24 26\" fill=\"none\">\n                <path d=\"M12.0251 0C12.173 0.0634121 12.2362 0.218264 12.2968 0.36211C12.3272 0.445923 12.355 0.530192 12.3821 0.615133C12.3927 0.647682 12.4033 0.680231 12.4142 0.713766C12.5548 1.15177 12.6801 1.59447 12.8061 2.03686C12.8346 2.13673 12.8632 2.23656 12.8918 2.33638C13.0375 2.84464 13.1821 3.35321 13.3258 3.86201C13.346 3.93347 13.3662 4.00492 13.3864 4.07638C13.4434 4.27783 13.5003 4.4793 13.5569 4.68087C13.6764 5.10678 13.7993 5.53145 13.9301 5.95405C13.9415 5.99102 13.9529 6.02799 13.9647 6.06608C14.3045 7.15318 14.7862 8.12751 15.5757 8.95743C15.5953 8.979 15.6148 9.00058 15.635 9.02282C15.972 9.38246 16.4045 9.67063 16.8368 9.90322C16.8588 9.91526 16.8808 9.92729 16.9035 9.9397C18.1757 10.6231 19.7053 10.9237 21.0832 11.3238C21.6869 11.4992 22.2888 11.6802 22.8885 11.8691C22.9306 11.8823 22.9727 11.8956 23.0149 11.9088C23.1409 11.9483 23.2667 11.9885 23.3923 12.0293C23.4216 12.0385 23.4509 12.0478 23.481 12.0573C23.6541 12.1146 23.8197 12.1821 23.9618 12.2992C24.0051 12.3938 24.0051 12.3938 23.9933 12.4884C23.855 12.6258 23.7179 12.6902 23.5354 12.753C23.5093 12.7623 23.4832 12.7716 23.4564 12.7811C23.1483 12.8892 22.836 12.9838 22.5234 13.0775C22.4592 13.0969 22.395 13.1163 22.3309 13.1357C21.9352 13.2551 21.5389 13.3719 21.1421 13.4874C20.6195 13.6395 20.0977 13.7942 19.5763 13.9506C19.4909 13.9763 19.4055 14.0018 19.32 14.0272C18.8712 14.161 18.4246 14.2995 17.9817 14.4516C17.945 14.4642 17.9082 14.4768 17.8704 14.4897C16.387 15.0059 15.2563 15.9687 14.5486 17.3768C14.167 18.1681 13.9419 19.0239 13.7124 19.8685C13.6503 20.0964 13.5842 20.323 13.5175 20.5496C13.4651 20.7278 13.4139 20.9064 13.364 21.0853C13.358 21.1066 13.3521 21.1279 13.346 21.1499C13.3172 21.253 13.2885 21.3562 13.26 21.4594C13.1872 21.7211 13.1087 21.9807 13.0281 22.2401C12.8851 22.7012 12.7549 23.1656 12.6256 23.6306C12.4305 24.3308 12.4305 24.3308 12.3199 24.6674C12.3126 24.69 12.3052 24.7126 12.2977 24.7359C12.2573 24.8557 12.2158 24.966 12.1394 25.0674C12.0231 25.093 12.0231 25.093 11.9187 25.0989C11.7993 24.9249 11.7202 24.7562 11.6569 24.5553C11.6476 24.5269 11.6384 24.4984 11.6289 24.4691C11.5116 24.1019 11.4067 23.7309 11.3018 23.36C11.2778 23.2752 11.2536 23.1904 11.2295 23.1056C11.0496 22.4737 10.8727 21.8409 10.696 21.2081C9.96019 18.0775 9.96019 18.0775 8.104 15.5464C8.07425 15.5222 8.0445 15.4979 8.01385 15.4729C6.79767 14.4989 5.19556 14.1382 3.7284 13.7155C3.36553 13.6109 3.0028 13.5058 2.64009 13.4007C2.60837 13.3915 2.60837 13.3915 2.57601 13.3821C2.05283 13.2304 1.5298 13.0783 1.0086 12.9199C0.986549 12.9132 0.9645 12.9066 0.941783 12.8997C0.141064 12.6578 0.141064 12.6578 0.0017241 12.4884C-0.0022167 12.4115 -0.0022167 12.4115 0.0332505 12.3307C0.178889 12.188 0.320205 12.1269 0.512426 12.0647C0.540259 12.0554 0.56809 12.046 0.596766 12.0364C0.682008 12.0079 0.767436 11.9801 0.852936 11.9524C0.877335 11.9444 0.901735 11.9364 0.926874 11.9282C1.09943 11.8716 1.2726 11.8171 1.44603 11.7633C1.48864 11.75 1.48864 11.75 1.53212 11.7364C2.27272 11.5061 3.01815 11.2917 3.76336 11.0769C4.31866 10.9168 4.87302 10.754 5.42561 10.5847C5.451 10.577 5.4764 10.5692 5.50256 10.5613C6.78267 10.1705 8.03409 9.61612 8.86063 8.51606C8.873 8.49974 8.88538 8.48342 8.89813 8.46661C9.8186 7.24564 10.1775 5.76082 10.5785 4.31201C10.7105 3.83552 10.844 3.35947 10.9779 2.88356C11.015 2.75177 11.0521 2.61997 11.089 2.48812C11.2372 1.95852 11.3876 1.42964 11.5467 0.903181C11.5616 0.853882 11.5764 0.804561 11.5911 0.755218C11.8138 0.0111205 11.8138 0.0111205 12.0251 0Z\" fill=\"#3F43EE\"/>\n                <path d=\"M19.2962 1.54899C19.441 1.7128 19.4699 1.90532 19.515 2.11449C19.6653 2.77161 19.8384 3.37584 20.4394 3.75756C20.8102 3.96263 21.2522 4.05595 21.663 4.14409C21.8364 4.18205 21.9829 4.23242 22.1316 4.33316C22.1651 4.38636 22.1651 4.38636 22.1632 4.47897C22.1287 4.59159 22.0984 4.62791 22.0075 4.70163C21.9081 4.73488 21.9081 4.73488 21.7888 4.76074C21.7437 4.7711 21.6985 4.78158 21.6535 4.79214C21.6293 4.79774 21.6051 4.80335 21.5803 4.80912C20.8456 4.97907 20.8456 4.97907 20.2105 5.36368C20.1899 5.3803 20.1692 5.39692 20.1479 5.41405C19.6941 5.81426 19.5981 6.48 19.4615 7.0377C19.4536 7.06833 19.4458 7.09896 19.4377 7.13051C19.431 7.15762 19.4242 7.18474 19.4172 7.21267C19.3877 7.29546 19.3572 7.34945 19.2962 7.41289C19.1266 7.43444 19.1266 7.43444 19.044 7.41289C18.9128 7.31114 18.8834 7.19524 18.8491 7.0395C18.8433 7.01539 18.8376 6.99127 18.8317 6.96642C18.8134 6.8894 18.7956 6.81226 18.778 6.73508C18.6398 6.13403 18.4837 5.54432 17.9324 5.19201C17.5015 4.95172 16.9776 4.83808 16.496 4.74631C16.364 4.71883 16.2884 4.68427 16.2067 4.57552C16.1889 4.46518 16.1889 4.46518 16.2067 4.35484C16.3322 4.22484 16.4644 4.19311 16.6342 4.15386C16.6877 4.14061 16.7412 4.12726 16.7947 4.11383C16.8223 4.10694 16.85 4.10004 16.8784 4.09294C17.0193 4.05668 17.1588 4.01602 17.2983 3.97455C17.3236 3.9672 17.3489 3.95985 17.3751 3.95227C17.6585 3.86752 17.9032 3.75911 18.1298 3.56668C18.1509 3.54928 18.172 3.53189 18.1938 3.51397C18.5465 3.19658 18.6663 2.71976 18.7751 2.27484C18.7834 2.24106 18.7916 2.20728 18.8002 2.17248C18.8167 2.10463 18.8329 2.0367 18.8488 1.9687C18.8602 1.92139 18.8602 1.92139 18.8717 1.87312C18.8784 1.84486 18.885 1.81659 18.8918 1.78747C18.9209 1.69749 18.959 1.62683 19.0125 1.54899C19.1153 1.49761 19.1874 1.52084 19.2962 1.54899Z\" fill=\"#0F12A8\"/>\n                <path d=\"M4.7881 17.4219C4.82561 17.4222 4.82561 17.4222 4.86387 17.4225C5.13296 17.4307 5.31503 17.5169 5.51321 17.6978C5.74381 17.9469 5.85029 18.2279 5.84423 18.5637C5.81833 18.8359 5.65779 19.0736 5.46087 19.2576C5.22908 19.4447 4.99525 19.5065 4.69906 19.4979C4.44933 19.4688 4.21438 19.3502 4.03738 19.1717C3.81726 18.8713 3.75291 18.5958 3.78517 18.2259C3.8518 17.9346 4.0439 17.6981 4.28959 17.5323C4.46027 17.4458 4.59755 17.4203 4.7881 17.4219Z\" fill=\"#1216CC\"/>\n                </svg>\n            </div>\n            <svg class=\"cqa-absolute\"\n                 width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                 style=\"top: -2px; left: -2px;\">\n              <circle cx=\"30\" cy=\"30\" r=\"28\" stroke=\"#E2E2E3\" stroke-width=\"2\" fill=\"none\"/>\n            </svg>\n            <svg class=\"cqa-absolute cqa-ff-spin\"\n                 width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                 style=\"top: -2px; left: -2px; transform-origin: 30px 30px;\">\n              <path d=\"M30 2 A 28 28 0 0 1 54.24 44\"\n                    stroke=\"#3f43ee\" stroke-width=\"2\" stroke-linecap=\"round\" fill=\"none\"/>\n            </svg>\n          </div>\n        </div>\n\n        <p class=\"cqa-text-center cqa-m-0 cqa-mb-2\"\n           style=\"font-size: 16px; font-weight: 600; color: #161617;\">\n          Fast-forwarding to your step\n        </p>\n\n        <p class=\"cqa-text-center cqa-m-0\"\n           style=\"font-size: 12px; color: #6D6D74;\">\n          Steps {{ fastForwardConfig.fromStep }}\u2013{{ fastForwardConfig.toStep }} are running at full speed in the background.\n          <strong style=\"color: #6D6D74; font-weight: 600;\">Live view and screenshots are paused</strong>\n          until execution reaches your target step \u2014 then you're in automatically.\n        </p>\n\n        <div class=\"cqa-mt-6 cqa-mb-5\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n            <span style=\"font-size: 12px; color: #4C4C51;\">Steps executing in background</span>\n            <span style=\"font-size: 12px; color: #6D6D74;\">\n              {{ fastForwardConfig.currentStep }} of {{ fastForwardConfig.totalSteps }} steps\n            </span>\n          </div>\n          <div style=\"height: 6px; background-color: #E2E2E3; border-radius: 9999px; overflow: hidden;\">\n            <div [style.width.%]=\"fastForwardProgressPercent\"\n                 style=\"height: 100%; background: linear-gradient(90deg, #3F43EE 0%, #818CF8 100%); transition: width 300ms cubic-bezier(0.4,0,0.2,1);\"></div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\"\n             style=\"padding: 10px 14px; border-radius: 10px; background: #6366F11A; border: 1px solid #6366F133;\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" style=\"flex-shrink: 0;\">\n            <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"#3f43ee\" stroke-width=\"1.25\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"3\" stroke=\"#3f43ee\" stroke-width=\"1.25\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"1\" fill=\"#3f43ee\"/>\n          </svg>\n          <div style=\"font-size: 12px;\">\n            <span style=\"color: #6D6D74;\">Jumping to</span>\n            <span style=\"color: #3F43EE; font-weight: 400; display: block;\">\n              Step {{ fastForwardConfig.targetStepNumber }} \u2014 {{ fastForwardConfig.targetStepLabel }}\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Live Content View -->\n    <div *ngIf=\"!isFastForwarding && isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n        <div class=\"cqa-relative cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-overflow-hidden\"\n             [ngClass]=\"{\n               'cqa-w-auto': hasDeviceFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n               'cqa-max-h-full cqa-h-full': hasDeviceFrame && (effectivePlatformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && effectivePlatformType === 'device'\n             }\"\n             [ngStyle]=\"liveContentContainerStyle\">\n          <img *ngIf=\"hasDeviceFrame\"\n            [src]=\"deviceMockupImage\"\n            alt=\"Device mockup\"\n            class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n          />\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame,\n                 'cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative': !hasDeviceFrame,\n                 'cqa-z-20': hasDeviceFrame && effectivePlatformType === 'browser',\n                 'cqa-bg-white': hasDeviceFrame && effectivePlatformType !== 'browser'\n               }\"\n               [ngStyle]=\"hasDeviceFrame ? deviceScreenStyle : {}\">\n            <!-- Loading State -->\n            <div *ngIf=\"isContentVideoLoading\" class=\"cqa-p-10 cqa-text-center cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n              <div class=\"cqa-mb-4\">\n                <mat-progress-spinner mode=\"indeterminate\" diameter=\"40\"></mat-progress-spinner>\n              </div>\n              <p class=\"cqa-text-gray-400 cqa-text-sm\">{{ liveLoadingLabel }}</p>\n            </div>\n\n            <!-- Live Content (when not loading) -->\n            <div *ngIf=\"!isContentVideoLoading\" class=\"cqa-w-full cqa-h-full cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-relative\">\n              <div *ngIf=\"liveStatus === 'Failed' && failedStatusMessage\" class=\"cqa-p-6 cqa-text-center cqa-w-full\">\n                <div class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-4 cqa-py-3 cqa-bg-[#FCD9D9] cqa-border cqa-border-[#F9BFBF] cqa-rounded-lg\">\n                  <mat-icon style=\"width: 18px; height: 18px; color: #C63535; font-size: 18px;\">error</mat-icon>\n                  <p class=\"cqa-text-[#C63535] cqa-text-sm cqa-font-medium cqa-m-0\">{{ failedStatusMessage }}</p>\n                </div>\n              </div>\n              <ng-content *ngIf=\"liveStatus !== 'Failed' || !failedStatusMessage\"></ng-content>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-flex cqa-items-center\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': effectivePlatformType === 'device', 'cqa-mt-auto': hasDeviceFrame, 'cqa-max-h-[calc(100%-108px)]': showVideoLibrary, 'cqa-max-h-[calc(100%-60px)]': !showVideoLibrary}\">\n        <ng-container *ngIf=\"hasDeviceFrame; else videoNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser', 'cqa-min-w-max': effectivePlatformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-max-h-full cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': effectivePlatformType !== 'browser'}\">\n                <video\n                  *ngIf=\"!videoRefreshing\"\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2] cqa-cursor-pointer\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser'}\"\n                  (click)=\"onVideoFrameClick()\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                  (error)=\"onVideoError()\"\n                ></video>\n                <!-- Play/Pause overlay icon -->\n                <div *ngIf=\"showPlayPauseOverlay\"\n                     class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-pointer-events-none\"\n                     [ngClass]=\"{'cqa-z-30': effectivePlatformType === 'browser'}\"\n                     [ngStyle]=\"{animation: 'cqaFadeOut 500ms ease-out forwards'}\">\n                  <div class=\"cqa-rounded-full cqa-bg-black cqa-bg-opacity-50 cqa-flex cqa-items-center cqa-justify-center\"\n                       style=\"width: 56px; height: 56px;\">\n                    <svg *ngIf=\"isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                      <polygon points=\"5,3 19,12 5,21\" />\n                    </svg>\n                    <svg *ngIf=\"!isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                      <rect x=\"5\" y=\"3\" width=\"4\" height=\"18\" />\n                      <rect x=\"15\" y=\"3\" width=\"4\" height=\"18\" />\n                    </svg>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #videoNoFrame>\n          <div class=\"cqa-relative cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4 cqa-cursor-pointer\"\n               (click)=\"onVideoFrameClick()\">\n            <video\n              *ngIf=\"!videoRefreshing\"\n              #vplayer\n              class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n              [src]=\"currentVideoUrl\"\n              type=\"video/webm\"\n              (loadedmetadata)=\"onVideoMetadataLoaded()\"\n              (canplay)=\"onVideoCanPlay()\"\n              (ended)=\"onVideoEnded()\"\n              (error)=\"onVideoError()\"\n            ></video>\n            <!-- Play/Pause overlay icon -->\n            <div *ngIf=\"showPlayPauseOverlay\"\n                 class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-pointer-events-none\"\n                 [ngStyle]=\"{animation: 'cqaFadeOut 500ms ease-out forwards'}\">\n              <div class=\"cqa-rounded-full cqa-bg-black cqa-bg-opacity-50 cqa-flex cqa-items-center cqa-justify-center\"\n                   style=\"width: 56px; height: 56px;\">\n                <svg *ngIf=\"isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                  <polygon points=\"5,3 19,12 5,21\" />\n                </svg>\n                <svg *ngIf=\"!isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"white\">\n                  <rect x=\"5\" y=\"3\" width=\"4\" height=\"18\" />\n                  <rect x=\"15\" y=\"3\" width=\"4\" height=\"18\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <!-- Video Library Panel \u2014 reserves only header-height in flow; the inner panel is absolutely anchored to its bottom edge, so the body expanding makes the panel grow UPWARD over the video. Timeline stays put. -->\n      <div *ngIf=\"showVideoLibrary && videoUrls && videoUrls.length > 0\"\n           class=\"video-library\"\n           [class.video-library--open]=\"!isVideoLibraryCollapsed\"\n           [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\">\n       <div class=\"video-library__inner\">\n        <!-- Header \u2014 always visible, clicking the chevron toggles the body -->\n        <div class=\"video-library__header\">\n          <div class=\"video-library__title-group\">\n            <mat-icon class=\"video-library__icon\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                <path d=\"M9.33398 7.58308L12.3807 9.61425C12.4247 9.64348 12.4757 9.66024 12.5284 9.66276C12.5811 9.66528 12.6335 9.65347 12.68 9.62856C12.7265 9.60366 12.7654 9.56661 12.7925 9.52136C12.8196 9.4761 12.834 9.42434 12.834 9.37158V4.59058C12.834 4.53926 12.8205 4.48885 12.7948 4.44443C12.7691 4.40001 12.7321 4.36315 12.6876 4.33759C12.6431 4.31203 12.5926 4.29866 12.5413 4.29883C12.49 4.299 12.4396 4.31272 12.3953 4.33858L9.33398 6.12475\" stroke=\"#3F43EE\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.16602 3.5H2.33268C1.68835 3.5 1.16602 4.02233 1.16602 4.66667V9.33333C1.16602 9.97767 1.68835 10.5 2.33268 10.5H8.16602C8.81035 10.5 9.33268 9.97767 9.33268 9.33333V4.66667C9.33268 4.02233 8.81035 3.5 8.16602 3.5Z\" stroke=\"#3F43EE\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n            </mat-icon>\n            <span class=\"video-library__title\">Video Library</span>\n            <cqa-badge\n              size=\"small\"\n              inlineStyles=\"min-width: max-content;\"\n              backgroundColor=\"#EDE9FE\"\n              textColor=\"#6D28D9\"\n              [label]=\"videoUrls.length + ' clip' + (videoUrls.length === 1 ? '' : 's')\">\n            </cqa-badge>\n            <span class=\"video-library__subtitle\"\n                  [matTooltip]=\"isVideoFullMode ? 'Playing all clips as one continuous video' : 'Each clip covers execution since last capture'\"\n                  matTooltipPosition=\"below\">{{ isVideoFullMode ? '\u00B7 Playing all clips as one continuous video' : '\u00B7 Each clip covers execution since last capture' }}</span>\n          </div>\n          <div class=\"video-library__actions\">\n            <cqa-button\n              *ngIf=\"!isVideoFullMode\"\n              variant=\"filled\"\n              btnSize=\"md\"\n              icon=\"play_arrow\"\n              iconPosition=\"start\"\n              text=\"Show Full Video\"\n              (clicked)=\"onShowFullVideo()\">\n            </cqa-button>\n            <cqa-button\n              *ngIf=\"isVideoFullMode\"\n              variant=\"outlined\"\n              btnSize=\"md\"\n              icon=\"close\"\n              iconPosition=\"start\"\n              text=\"Exit Full Video\"\n              (clicked)=\"onExitFullVideo()\">\n            </cqa-button>\n            <button type=\"button\" class=\"video-library__collapse\" (click)=\"toggleVideoLibraryCollapsed()\"\n                    [attr.aria-label]=\"isVideoLibraryCollapsed ? 'Show video library' : 'Hide video library'\">\n              <svg *ngIf=\"!isVideoLibraryCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M3 7.5L6 4.5L9 7.5\" stroke=\"#6B7280\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <svg *ngIf=\"isVideoLibraryCollapsed\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#6B7280\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Body (cards) \u2014 max-height animates from 0 (collapsed) to a fixed height (open). -->\n        <div class=\"video-library__body\"\n             [class.video-library__body--open]=\"!isVideoLibraryCollapsed\"\n             [attr.aria-hidden]=\"isVideoLibraryCollapsed ? true : null\">\n          <div class=\"clips-row\"\n               #clipsScroller\n               [class.clips-row--dragging]=\"clipsDragActive\"\n               (mousedown)=\"onClipsMouseDown($event, clipsScroller)\"\n               (mousemove)=\"onClipsMouseMove($event, clipsScroller)\"\n               (mouseup)=\"onClipsMouseUp($event)\"\n               (mouseleave)=\"onClipsMouseLeave($event)\">\n            <div\n              *ngFor=\"let url of videoUrls; let i = index; trackBy: trackLibraryClipByIndex\"\n              class=\"clip-card\"\n              [class.clip-card--playing]=\"i === currentVideoIndex\">\n              <div class=\"clip-thumb\"\n                   [class.clip-thumb--ready]=\"libraryVideoDurations.has(i)\"\n                   (click)=\"selectLibraryClip(i)\">\n                <video\n                  #clipVideo\n                  class=\"clip-thumb__video\"\n                  [src]=\"url\"\n                  preload=\"metadata\"\n                  playsinline\n                  muted\n                  (loadedmetadata)=\"onLibraryClipMetadataLoaded(i, clipVideo)\"\n                  (durationchange)=\"onLibraryClipMetadataLoaded(i, clipVideo)\"></video>\n                <div class=\"clip-thumb__overlay\">\n                  <div class=\"clip-thumb__play-circle\">\n                    <svg *ngIf=\"!(i === currentVideoIndex && isPlaying)\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                      <path d=\"M3.5 1.75L11.375 7L3.5 12.25V1.75Z\" fill=\"#FFFFFF\"/>\n                    </svg>\n                    <svg *ngIf=\"i === currentVideoIndex && isPlaying\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                      <rect x=\"3.5\" y=\"2.5\" width=\"2.5\" height=\"9\" rx=\"0.5\" fill=\"#FFFFFF\"/>\n                      <rect x=\"8\" y=\"2.5\" width=\"2.5\" height=\"9\" rx=\"0.5\" fill=\"#FFFFFF\"/>\n                    </svg>\n                  </div>\n                </div>\n                <span *ngIf=\"i === currentVideoIndex && isPlaying\" class=\"clip-thumb__badge clip-thumb__badge--playing\">PLAYING</span>\n                <span *ngIf=\"newVideoIndexes.has(i) && i !== currentVideoIndex\" class=\"clip-thumb__badge clip-thumb__badge--new\">NEW</span>\n                <span class=\"clip-thumb__duration\">{{ formatTime(libraryVideoDurations.get(i) || 0) }}</span>\n              </div>\n              <div class=\"clip-meta\">\n                <div class=\"clip-meta__title\">Clip {{ i + 1 }}</div>\n                <button\n                  type=\"button\"\n                  class=\"clip-download-btn\"\n                  [class.clip-download-btn--downloading]=\"downloadingIndexes.has(i)\"\n                  [disabled]=\"downloadingIndexes.has(i)\"\n                  (click)=\"downloadClip(i); $event.stopPropagation()\">\n                  <ng-container *ngIf=\"!downloadingIndexes.has(i)\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                      <!-- Figma icon: upward arrow with a short tray line at the bottom (share/export glyph). -->\n                      <path d=\"M6 8.5V2M6 2L3 5M6 2L9 5M3 10.5H9\" stroke=\"currentColor\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                    <span>Download</span>\n                  </ng-container>\n                  <ng-container *ngIf=\"downloadingIndexes.has(i)\">\n                    <svg class=\"clip-download-btn__ring\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                      <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#E5E7EB\" stroke-width=\"1.5\" fill=\"none\"/>\n                      <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"\n                              stroke-linecap=\"round\"\n                              [attr.stroke-dasharray]=\"downloadRingCircumference\"\n                              [attr.stroke-dashoffset]=\"downloadRingDashoffset(i)\"\n                              transform=\"rotate(-90 7 7)\"/>\n                    </svg>\n                    <span>{{ downloadProgress.get(i) || 0 }}%</span>\n                  </ng-container>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n       </div>\n      </div>\n\n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame && !(showVideoLibrary && videoUrls && videoUrls.length > 0)}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span *ngIf=\"!isVideoFullMode\"\n              class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button\n            *ngIf=\"hasMultipleVideos && !isVideoFullMode\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button\n            *ngIf=\"hasMultipleVideos && !isVideoFullMode\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span\n            class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-inline-block\"\n            style=\"width: 40px; text-align: center;\">\n            {{ formatTime(isVideoFullMode ? (globalCurrentTimeMs / 1000) : (vplayer?.nativeElement?.currentTime || 0)) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%); z-index: 101;\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div\n              *ngFor=\"let marker of (isVideoFullMode ? fullVideoMarkers : currentVideoMarkers)\"\n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"isVideoFullMode ? getGlobalFullStepLeftPosition(marker) : getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div\n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"isVideoFullMode ? globalScrubberPercent : progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div\n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"isVideoFullMode ? globalScrubberPercent : progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none cqa-mr-2\">\n            {{ formatTime(isVideoFullMode ? (totalDuration / 1000) : (vplayer?.nativeElement?.duration || 0)) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame; else screenshotNoFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <div class=\"cqa-relative cqa-h-full cqa-w-auto cqa-flex cqa-items-center cqa-justify-center cqa-max-h-full\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser', 'cqa-min-w-max': effectivePlatformType === 'device'}\">\n              <img\n                [src]=\"deviceMockupImage\"\n                alt=\"Device mockup\"\n                class=\"cqa-h-full cqa-w-auto cqa-object-contain cqa-block cqa-pointer-events-none cqa-z-10\"\n                [ngClass]=\"{'cqa-max-h-[inherit]': effectivePlatformType === 'browser', 'cqa-max-h-full': effectivePlatformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': effectivePlatformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser'}\"\n                  class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                />\n              </div>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #screenshotNoFrame>\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-4\">\n            <img\n              [src]=\"screenShotUrl\"\n              alt=\"Screenshot\"\n              class=\"cqa-object-contain cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            />\n          </div>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!screenShotUrl\">\n        No screenshot available\n      </div>\n    </div>\n\n    <div *ngIf=\"!isFastForwarding && !isLive && currentView === 'trace'\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center\">\n      <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-relative\" *ngIf=\"traceViewUrl\" [ngClass]=\"{'!cqa-h-full': effectivePlatformType === 'device'}\" style=\"padding-top: 48px; padding-bottom: 0px;\">\n        <div class=\"cqa-w-full cqa-h-full cqa-overflow-hidden cqa-relative\">\n          <iframe \n            [src]=\"safeTraceUrl\" \n            title=\"Trace Viewer\"\n            class=\"cqa-object-contain cqa-w-full cqa-min-h-[250px] cqa-max-h-full cqa-block cqa-bg-[##F2F2F2]\"\n            style=\"margin-top: -48px; height: calc(100% + 48px);\"\n            frameborder=\"0\"\n            allowfullscreen\n            width=\"100%\"\n            loading=\"lazy\"\n            (load)=\"onTraceViewerLoad()\"\n            (error)=\"onTraceViewerError()\">\n          </iframe>\n        </div>\n        \n        <div *ngIf=\"traceViewerLoading\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Loading trace viewer...\n          </div>\n        </div>\n        \n        <div *ngIf=\"traceViewerError\" class=\"cqa-absolute cqa-inset-0 cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center cqa-z-10\">\n          <div class=\"cqa-text-center cqa-text-gray-400 cqa-text-sm\">\n            Failed to load trace viewer\n          </div>\n        </div>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!traceViewUrl\">\n        No trace available\n      </div>\n    </div>  \n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { videoUrl: [{
                 type: Input
             }], videoUrls: [{
@@ -18281,6 +18769,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], fastForwardConfig: [{
                 type: Input
+            }], showVideoLibrary: [{
+                type: Input
+            }], showCaptureVideo: [{
+                type: Input
+            }], isCapturingVideo: [{
+                type: Input
             }], videoTimeUpdate: [{
                 type: Output
             }], videoPlay: [{
@@ -18291,6 +18785,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], isVideoPlayingChange: [{
                 type: Output
+            }], captureVideoRequested: [{
+                type: Output
             }], vplayerRef: [{
                 type: ViewChild,
                 args: ['vplayer']
@@ -18300,6 +18796,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }], speedControlContainerRef: [{
                 type: ViewChild,
                 args: ['speedControlContainer', { static: false }]
+            }], clipVideos: [{
+                type: ViewChildren,
+                args: ['clipVideo']
+            }], clipsScrollerRef: [{
+                type: ViewChild,
+                args: ['clipsScroller']
             }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -18660,6 +19162,7 @@ class AiPromptCardComponent {
             case 'edited': return 'Edited';
             case 'duplicated': return 'Duplicated';
             case 'deleted': return 'Deleted';
+            case 'converted': return 'Converted';
             default: return '';
         }
     }
@@ -18669,6 +19172,7 @@ class AiPromptCardComponent {
             case 'edited': return { bg: '#FFFBEB', text: '#B45309', border: '#FDE68A' };
             case 'duplicated': return { bg: '#EEF2FF', text: '#4338CA', border: '#C7D2FE' };
             case 'deleted': return { bg: '#FEF2F2', text: '#B42318', border: '#FECACA' };
+            case 'converted': return { bg: '#CFFAFE', text: '#155E75', border: '#A5F3FC' };
             default: return { bg: '#F3F4F6', text: '#374151', border: '#E5E7EB' };
         }
     }
@@ -45641,33 +46145,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 /**
  * Confirmation dialog shown before editing an AI-Agent step whose execution has
- * already generated sub-steps (CON-926). The caller supplies the option list
- * and copy; this component only renders the UI and emits the user's choice.
+ * already generated sub-steps (CON-926). Also used by CON-1166 to review
+ * AI-generated steps before persisting.
+ *
+ * The caller supplies the whole payload via the `config` input (one object, one
+ * reference change = one re-render). `isOpen` stays separate so open/close
+ * transitions don't force callers to rebuild the payload.
  */
 class SubStepsConfirmationDialogComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.isOpen = false;
-        this.title = 'This step has generated sub-steps';
-        this.description = '';
-        this.options = [];
-        this.cancelLabel = 'Cancel';
-        this.disableBackdropClose = false;
+        this.config = { options: [] };
         this.selectionChange = new EventEmitter();
         this.confirm = new EventEmitter();
         this.closeModal = new EventEmitter();
+        this.timeoutExpired = new EventEmitter();
+        this.remainingSeconds = 0;
+        this._tickIntervalId = null;
+        this._timeoutEmitted = false;
     }
     ngOnChanges(changes) {
-        var _a, _b;
-        if (changes['options'] || changes['selectedValue'] || changes['isOpen']) {
-            const valid = (_a = this.options) === null || _a === void 0 ? void 0 : _a.some(o => o.value === this.selectedValue);
-            if (!valid && ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.selectedValue = this.options[0].value;
+        var _a, _b, _c, _d, _e;
+        if (changes['config'] || changes['isOpen']) {
+            const options = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.options) !== null && _b !== void 0 ? _b : [];
+            const incoming = (_c = this.config) === null || _c === void 0 ? void 0 : _c.selectedValue;
+            const stillValid = options.some(o => o.value === this.selectedValue);
+            if (incoming != null && options.some(o => o.value === incoming)) {
+                this.selectedValue = incoming;
+            }
+            else if (!stillValid) {
+                this.selectedValue = options.length ? options[0].value : undefined;
+            }
+        }
+        if (changes['isOpen'] || changes['config']) {
+            const timeoutSeconds = (_d = this.config) === null || _d === void 0 ? void 0 : _d.timeoutSeconds;
+            if (this.isOpen && typeof timeoutSeconds === 'number' && timeoutSeconds > 0) {
+                const prevTimeout = changes['config']
+                    ? (_e = changes['config'].previousValue) === null || _e === void 0 ? void 0 : _e.timeoutSeconds
+                    : undefined;
+                const opening = !!changes['isOpen'] && this.isOpen;
+                if (opening || timeoutSeconds !== prevTimeout || this._tickIntervalId == null) {
+                    this._startCountdown(timeoutSeconds);
+                }
+            }
+            else {
+                this._stopCountdown();
             }
         }
     }
+    ngOnDestroy() {
+        this._stopCountdown();
+    }
+    get title() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : 'This step has generated sub-steps'; }
+    get description() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : ''; }
+    get subtitle() { var _a; return (_a = this.config) === null || _a === void 0 ? void 0 : _a.subtitle; }
+    get options() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.options) !== null && _b !== void 0 ? _b : []; }
+    get cancelLabel() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.cancelLabel) !== null && _b !== void 0 ? _b : 'Cancel'; }
+    get disableBackdropClose() { var _a; return !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.disableBackdropClose); }
+    get hideCloseButton() { var _a; return !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.hideCloseButton); }
+    get hideCancel() { var _a; return !!((_a = this.config) === null || _a === void 0 ? void 0 : _a.hideCancel); }
+    get warnings() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.warnings) !== null && _b !== void 0 ? _b : []; }
+    get previewItems() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.previewItems) !== null && _b !== void 0 ? _b : []; }
+    get previewOverflowCount() { var _a, _b; return (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.previewOverflowCount) !== null && _b !== void 0 ? _b : 0; }
     get currentOption() {
+        return this.options.find(o => o.value === this.selectedValue);
+    }
+    get showCountdown() {
         var _a;
-        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(o => o.value === this.selectedValue);
+        const t = (_a = this.config) === null || _a === void 0 ? void 0 : _a.timeoutSeconds;
+        return typeof t === 'number' && t > 0;
+    }
+    get countdownLabel() {
+        const total = Math.max(0, this.remainingSeconds);
+        const m = Math.floor(total / 60);
+        const s = total % 60;
+        return `${m}:${s.toString().padStart(2, '0')}`;
     }
     isSelected(option) {
         return option.value === this.selectedValue;
@@ -45679,8 +46232,7 @@ class SubStepsConfirmationDialogComponent {
         this.selectionChange.emit(option.value);
     }
     onRadioChange(event) {
-        var _a;
-        const option = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(o => o.value === event.value);
+        const option = this.options.find(o => o.value === event.value);
         if (option)
             this.onSelect(option);
     }
@@ -45701,25 +46253,37 @@ class SubStepsConfirmationDialogComponent {
             return;
         this.confirm.emit(this.selectedValue);
     }
+    _startCountdown(seconds) {
+        this._stopCountdown();
+        this.remainingSeconds = seconds;
+        this._timeoutEmitted = false;
+        this._tickIntervalId = setInterval(() => {
+            if (this.remainingSeconds > 0) {
+                this.remainingSeconds--;
+                this.cdr.markForCheck();
+                if (this.remainingSeconds === 0 && !this._timeoutEmitted) {
+                    this._timeoutEmitted = true;
+                    this.timeoutExpired.emit();
+                    this._stopCountdown();
+                }
+            }
+        }, 1000);
+    }
+    _stopCountdown() {
+        if (this._tickIntervalId) {
+            clearInterval(this._tickIntervalId);
+            this._tickIntervalId = null;
+        }
+    }
 }
-SubStepsConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SubStepsConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SubStepsConfirmationDialogComponent, selector: "cqa-sub-steps-confirmation-dialog", inputs: { isOpen: "isOpen", title: "title", description: "description", options: "options", selectedValue: "selectedValue", cancelLabel: "cancelLabel", disableBackdropClose: "disableBackdropClose" }, outputs: { selectionChange: "selectionChange", confirm: "confirm", closeModal: "closeModal" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <button type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n        (click)=\"onClose()\"\n        aria-label=\"Close\">\n        <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+SubStepsConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SubStepsConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SubStepsConfirmationDialogComponent, selector: "cqa-sub-steps-confirmation-dialog", inputs: { isOpen: "isOpen", config: "config" }, outputs: { selectionChange: "selectionChange", confirm: "confirm", closeModal: "closeModal", timeoutExpired: "timeoutExpired" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n        <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n          {{ title }}\n        </h2>\n        <span *ngIf=\"subtitle\"\n          class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-m-0\">\n          {{ subtitle }}\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <span *ngIf=\"showCountdown\"\n          class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4A5565] cqa-rounded cqa-px-2 cqa-py-0.5\"\n          style=\"background: #F3F4F6;\"\n          [title]=\"'Auto-discards when timer reaches 0'\">\n          {{ countdownLabel }}\n        </span>\n        <button *ngIf=\"!hideCloseButton\" type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n          (click)=\"onClose()\"\n          aria-label=\"Close\">\n          <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <!-- Warnings (amber) -->\n      <div *ngIf=\"warnings?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-px-3 cqa-py-2\"\n        style=\"background: #FEF3C7; border: 1px solid #FDE68A;\">\n        <div *ngFor=\"let warn of warnings\"\n          class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-text-[12px] cqa-text-[#92400E]\">\n          <span aria-hidden=\"true\">\u26A0</span>\n          <span>{{ warn }}</span>\n        </div>\n      </div>\n\n      <!-- Preview list (optional) -->\n      <div *ngIf=\"previewItems?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-3 cqa-py-2 cqa-max-h-[100px] cqa-overflow-y-auto\">\n        <div *ngFor=\"let item of previewItems; let i = index\"\n          class=\"cqa-flex cqa-items-baseline cqa-gap-2 cqa-text-[12px] cqa-text-[#101828]\">\n          <span class=\"cqa-text-[#4A5565] cqa-flex-shrink-0\">{{ i + 1 }}.</span>\n          <span class=\"cqa-font-semibold cqa-text-[#111827]\">{{ item.primary }}</span>\n          <span *ngIf=\"item.secondary\" class=\"cqa-text-[#4A5565]\">\u2014&nbsp;&nbsp;{{ item.secondary }}</span>\n        </div>\n        <div *ngIf=\"previewOverflowCount > 0\"\n          class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-italic cqa-mt-1\">\n          + {{ previewOverflowCount }} more step<span *ngIf=\"previewOverflowCount !== 1\">s</span>\n        </div>\n      </div>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div *ngIf=\"!hideCancel\" class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" [style.width]=\"hideCancel ? '100%' : '50%'\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SubStepsConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-sub-steps-confirmation-dialog', template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n        {{ title }}\n      </h2>\n      <button type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n        (click)=\"onClose()\"\n        aria-label=\"Close\">\n        <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
-        }], propDecorators: { isOpen: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], cancelLabel: [{
+            args: [{ selector: 'cqa-sub-steps-confirmation-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isOpen\" class=\"cqa-ui-root\"\n  style=\"position: fixed; inset: 0; z-index: 9999;\">\n  <div\n    class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n    (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[560px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[85vh] cqa-font-inter\"\n      style=\"box-shadow: 0px 8px 8px -4px #10182808;\" (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-px-6 cqa-py-4\" style=\"border-bottom: 1px solid #E5E5E5;\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n        <h2 class=\"cqa-text-[16px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n          {{ title }}\n        </h2>\n        <span *ngIf=\"subtitle\"\n          class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-m-0\">\n          {{ subtitle }}\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <span *ngIf=\"showCountdown\"\n          class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4A5565] cqa-rounded cqa-px-2 cqa-py-0.5\"\n          style=\"background: #F3F4F6;\"\n          [title]=\"'Auto-discards when timer reaches 0'\">\n          {{ countdownLabel }}\n        </span>\n        <button *ngIf=\"!hideCloseButton\" type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-text-[#4A5565] hover:cqa-text-[#111827] cqa-bg-transparent cqa-border-0 cqa-cursor-pointer\"\n          (click)=\"onClose()\"\n          aria-label=\"Close\">\n          <mat-icon class=\"cqa-h-5 cqa-w-5 cqa-text-[20px] cqa-leading-5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-px-6 cqa-py-3 cqa-overflow-y-auto\">\n      <p *ngIf=\"description\"\n        class=\"cqa-text-[12px] cqa-text-[#101828] cqa-m-0\">\n        {{ description }}\n      </p>\n\n      <!-- Warnings (amber) -->\n      <div *ngIf=\"warnings?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-px-3 cqa-py-2\"\n        style=\"background: #FEF3C7; border: 1px solid #FDE68A;\">\n        <div *ngFor=\"let warn of warnings\"\n          class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-text-[12px] cqa-text-[#92400E]\">\n          <span aria-hidden=\"true\">\u26A0</span>\n          <span>{{ warn }}</span>\n        </div>\n      </div>\n\n      <!-- Preview list (optional) -->\n      <div *ngIf=\"previewItems?.length\"\n        class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-3 cqa-py-2 cqa-max-h-[100px] cqa-overflow-y-auto\">\n        <div *ngFor=\"let item of previewItems; let i = index\"\n          class=\"cqa-flex cqa-items-baseline cqa-gap-2 cqa-text-[12px] cqa-text-[#101828]\">\n          <span class=\"cqa-text-[#4A5565] cqa-flex-shrink-0\">{{ i + 1 }}.</span>\n          <span class=\"cqa-font-semibold cqa-text-[#111827]\">{{ item.primary }}</span>\n          <span *ngIf=\"item.secondary\" class=\"cqa-text-[#4A5565]\">\u2014&nbsp;&nbsp;{{ item.secondary }}</span>\n        </div>\n        <div *ngIf=\"previewOverflowCount > 0\"\n          class=\"cqa-text-[12px] cqa-text-[#4A5565] cqa-italic cqa-mt-1\">\n          + {{ previewOverflowCount }} more step<span *ngIf=\"previewOverflowCount !== 1\">s</span>\n        </div>\n      </div>\n\n      <mat-radio-group\n        class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-radio-group\"\n        [value]=\"selectedValue\"\n        (change)=\"onRadioChange($event)\">\n        <label\n          *ngFor=\"let option of options\"\n          class=\"cqa-radio-card-option qqa-m-0 cqa-flex cqa-items-start cqa-gap-1 cqa-cursor-pointer cqa-rounded-[10px] cqa-border cqa-border-solid cqa-p-4 cqa-transition-colors\"\n          [ngClass]=\"isSelected(option)\n            ? 'cqa-border-[#B1B2F8] cqa-bg-[#D8D9FC4D]'\n            : 'cqa-border-[#E5E7EB] cqa-bg-white hover:cqa-border-[#6366f1]'\">\n          <mat-radio-button [value]=\"option.value\" class=\"!cqa-pr-0 cqa-mt-[-2px]\"></mat-radio-button>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <span\n              class=\"cqa-text-[12px] cqa-font-bold\"\n              [ngClass]=\"option.variant === 'danger' ? 'cqa-text-[#EE3F3F]' : 'cqa-text-[#364153]'\">\n              {{ option.title }}\n            </span>\n            <span class=\"cqa-text-[12px] cqa-text-[#101828]\">\n              {{ option.description }}\n            </span>\n          </div>\n        </label>\n      </mat-radio-group>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-flex cqa-items-center cqa-px-6 cqa-py-4 cqa-bg-white\" style=\"gap: 24px;\">\n      <div *ngIf=\"!hideCancel\" class=\"cqa-flex-1\" style=\"width: 50%;\">\n        <cqa-button\n          variant=\"outlined\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"cancelLabel\"\n          (clicked)=\"onClose()\">\n        </cqa-button>\n      </div>\n      <div class=\"cqa-flex-1\" [style.width]=\"hideCancel ? '100%' : '50%'\">\n        <cqa-button\n          *ngIf=\"currentOption\"\n          [variant]=\"currentOption.buttonVariant || 'filled'\"\n          btnSize=\"lg\"\n          [fullWidth]=\"true\"\n          [text]=\"currentOption.buttonLabel\"\n          (clicked)=\"onConfirm()\">\n        </cqa-button>\n      </div>\n    </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { isOpen: [{
                 type: Input
-            }], disableBackdropClose: [{
+            }], config: [{
                 type: Input
             }], selectionChange: [{
                 type: Output
@@ -45727,6 +46291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], closeModal: [{
                 type: Output
+            }], timeoutExpired: [{
+                type: Output
             }] } });
 
 class UiKitModule {