@cqa-lib/cqa-ui 1.1.553 → 1.1.554

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

@@ -20794,6 +20794,13 @@ class SimulatorComponent {
         this.dragging = false;
         this.isPlaying = false;
         this.showPlayPauseOverlay = false;
+        /**
+         * Icon shown by the play/pause overlay during its 500ms lifetime. Pinned at click time
+         * so the icon doesn't flicker as `isPlaying` flips async between
+         * `<video>.play()` invocation and its promise resolving. Mirrors the YouTube-style
+         * convention: show the action just taken (▶ after play, ∥ after pause).
+         */
+        this.overlayShowsPlayingIcon = false;
         this.playPauseOverlayTimer = null;
         this.isFullScreen = false;
         this.currentView = 'video';
@@ -21470,7 +21477,16 @@ class SimulatorComponent {
         }
     }
     /**
-     * Toggle play/pause (now trivial with state machine)
+     * Toggle play/pause.
+     *
+     * Decision is based on the video element's native `paused` property (ground truth)
+     * rather than on `playerState`, which lags during async play() / pause() transitions.
+     * The previous implementation would, on a rapid second click during the ~50-200ms
+     * `video.play()` await window, see `playerState === 'loading'` and queue another
+     * `playVideo()` instead of the intended `pauseVideo()` — so the second click
+     * silently "did nothing" while the video kept playing. Reading `video.paused`
+     * directly makes the toggle correct regardless of what stage the state machine
+     * happens to be in.
      */
     togglePlay() {
         const video = this.vplayer?.nativeElement;
@@ -21490,43 +21506,37 @@ class SimulatorComponent {
             });
             return;
         }
-        // Recover from stuck 'loading' state when video is actually ready (e.g. after jump-to-segment)
-        if (this.playerState === 'loading' && video.readyState >= HTMLMediaElement.HAVE_METADATA) {
-            this.playerState = 'paused';
-        }
-        // Don't allow play during error state
+        // Clear error state so the next play attempt can proceed.
         if (this.playerState === 'error') {
             console.warn('[Simulator] togglePlay: player in error state', { readyState: video.readyState });
             this.playerState = 'idle';
         }
-        // If still loading and video not ready, wait and retry
-        if (this.playerState === 'loading') {
-            console.warn('[Simulator] togglePlay: player not ready', {
-                playerState: this.playerState,
-                readyState: video.readyState
-            });
-            setTimeout(() => {
-                if (video.readyState >= HTMLMediaElement.HAVE_METADATA && this.playerState !== 'playing') {
-                    this.togglePlay();
-                }
-            }, 50);
-            return;
-        }
         console.log('[Simulator] togglePlay:', {
             playerState: this.playerState,
             isPlaying: this.isPlaying,
+            videoPaused: video.paused,
             readyState: video.readyState
         });
-        // Simple toggle based on state
-        if (this.playerState === 'playing') {
-            this.pauseVideo();
+        // Ground truth: if the video element is paused (or hasn't started yet), play; else pause.
+        // The operation queue serializes these so back-to-back clicks resolve in order.
+        if (video.paused) {
+            this.playVideo();
         }
         else {
-            this.playVideo();
+            this.pauseVideo();
         }
     }
     //  SHOW PLAY PAUSE OVERLAY
     onVideoFrameClick() {
+        // Pin the overlay icon to the user's INTENT for this click (the action just taken),
+        // independent of how the async play/pause resolves. Prevents flicker where the icon
+        // briefly shows the pre-click state before flipping when `isPlaying` updates.
+        const video = this.vplayer?.nativeElement;
+        const wasPaused = video ? video.paused : !this.isPlaying;
+        // YouTube convention: after clicking to PLAY, show ▶ ("just played"); after PAUSE,
+        // show ∥. Template branches on `overlayShowsPlayingIcon` so it stays stable for
+        // the entire 500ms overlay lifetime.
+        this.overlayShowsPlayingIcon = wasPaused;
         this.togglePlay();
         this.showPlayPauseOverlay = true;
         if (this.playPauseOverlayTimer)
@@ -22191,6 +22201,15 @@ class SimulatorComponent {
                     return;
                 lastUpdate = now;
                 const currentMs = video.currentTime * 1000;
+                // Safety net: if `isPlaying` drifted from the element's actual state
+                // (e.g. a queued op set it false but playback never actually stopped,
+                // or the play promise hasn't resolved yet but `play` fired), realign
+                // here so the toolbar Play/Pause icon doesn't get stuck on the wrong
+                // glyph while playback continues.
+                const videoIsPlaying = !video.paused;
+                if (this.isPlaying !== videoIsPlaying) {
+                    this.isPlaying = videoIsPlaying;
+                }
                 if (!this.dragging && this.playerState !== 'switching') {
                     // Per-video progress (0-100% of current video)
                     const durationMs = video.duration * 1000;
@@ -22210,9 +22229,22 @@ class SimulatorComponent {
                     }
                 }
             };
+            // Mirror the <video> element's native state into `isPlaying`. The element
+            // is the source of truth — the existing playVideoInternal / pauseVideoInternal
+            // paths set `isPlaying` after their async work, but other paths (element
+            // remounts via onVideoElementReady, dropped queue ops, etc.) can leave it
+            // out of sync with reality. These listeners make the field self-correcting.
+            const onPlay = () => { this.isPlaying = true; };
+            const onPause = () => { this.isPlaying = false; };
             video.addEventListener('timeupdate', handler);
+            video.addEventListener('play', onPlay);
+            video.addEventListener('playing', onPlay);
+            video.addEventListener('pause', onPause);
             this.videoEventListenerCleanup = () => {
                 video.removeEventListener('timeupdate', handler);
+                video.removeEventListener('play', onPlay);
+                video.removeEventListener('playing', onPlay);
+                video.removeEventListener('pause', onPause);
             };
         }, 100);
     }
@@ -23119,10 +23151,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", showVideoLibrary: "showVideoLibrary", showCaptureVideo: "showCaptureVideo", isCapturingVideo: "isCapturingVideo", liveSessionView: "liveSessionView" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange", captureVideoRequested: "captureVideoRequested", liveSessionViewChange: "liveSessionViewChange" }, 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        <cqa-segment-control\n          *ngIf=\"isLive && videoUrls && videoUrls.length > 0\"\n          [segments]=\"liveSessionSegments\"\n          [value]=\"liveSessionView\"\n          (valueChange)=\"onLiveSessionViewChange($event)\">\n        </cqa-segment-control>\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 <span [innerHTML]=\"fastForwardConfig.targetStepLabel\"></span>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Live Content View -->\n    <div *ngIf=\"!isFastForwarding && isLive && liveSessionView === 'live'\" 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    <!-- Video View: post-execution Video tab, or mid-session Captured view inside a live session -->\n    <div *ngIf=\"!isFastForwarding && ((!isLive && currentView === 'video') || (isLive && liveSessionView === 'captured'))\"\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 || liveSessionView === 'captured')\">\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", "size"], 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"] }] });
+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", liveSessionView: "liveSessionView" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange", captureVideoRequested: "captureVideoRequested", liveSessionViewChange: "liveSessionViewChange" }, 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        <cqa-segment-control\n          *ngIf=\"isLive && videoUrls && videoUrls.length > 0\"\n          [segments]=\"liveSessionSegments\"\n          [value]=\"liveSessionView\"\n          (valueChange)=\"onLiveSessionViewChange($event)\">\n        </cqa-segment-control>\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 <span [innerHTML]=\"fastForwardConfig.targetStepLabel\"></span>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Live Content View -->\n    <div *ngIf=\"!isFastForwarding && isLive && liveSessionView === 'live'\" 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    <!-- Video View: post-execution Video tab, or mid-session Captured view inside a live session -->\n    <div *ngIf=\"!isFastForwarding && ((!isLive && currentView === 'video') || (isLive && liveSessionView === 'captured'))\"\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                    <!-- Icon pinned to the just-taken action (set in onVideoFrameClick) so it\n                         doesn't flicker as `isPlaying` flips async between play() invocation\n                         and its promise resolving. -->\n                    <svg *ngIf=\"overlayShowsPlayingIcon\" 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=\"!overlayShowsPlayingIcon\" 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                <!-- Icon pinned to the just-taken action (set in onVideoFrameClick) so it\n                     doesn't flicker as `isPlaying` flips async between play() invocation\n                     and its promise resolving. -->\n                <svg *ngIf=\"overlayShowsPlayingIcon\" 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=\"!overlayShowsPlayingIcon\" 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 || liveSessionView === 'captured')\">\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", "size"], 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        <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        <cqa-segment-control\n          *ngIf=\"isLive && videoUrls && videoUrls.length > 0\"\n          [segments]=\"liveSessionSegments\"\n          [value]=\"liveSessionView\"\n          (valueChange)=\"onLiveSessionViewChange($event)\">\n        </cqa-segment-control>\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 <span [innerHTML]=\"fastForwardConfig.targetStepLabel\"></span>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Live Content View -->\n    <div *ngIf=\"!isFastForwarding && isLive && liveSessionView === 'live'\" 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    <!-- Video View: post-execution Video tab, or mid-session Captured view inside a live session -->\n    <div *ngIf=\"!isFastForwarding && ((!isLive && currentView === 'video') || (isLive && liveSessionView === 'captured'))\"\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 || liveSessionView === 'captured')\">\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: [] }]
+            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        <cqa-segment-control\n          *ngIf=\"isLive && videoUrls && videoUrls.length > 0\"\n          [segments]=\"liveSessionSegments\"\n          [value]=\"liveSessionView\"\n          (valueChange)=\"onLiveSessionViewChange($event)\">\n        </cqa-segment-control>\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 <span [innerHTML]=\"fastForwardConfig.targetStepLabel\"></span>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <!-- Live Content View -->\n    <div *ngIf=\"!isFastForwarding && isLive && liveSessionView === 'live'\" 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    <!-- Video View: post-execution Video tab, or mid-session Captured view inside a live session -->\n    <div *ngIf=\"!isFastForwarding && ((!isLive && currentView === 'video') || (isLive && liveSessionView === 'captured'))\"\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                    <!-- Icon pinned to the just-taken action (set in onVideoFrameClick) so it\n                         doesn't flicker as `isPlaying` flips async between play() invocation\n                         and its promise resolving. -->\n                    <svg *ngIf=\"overlayShowsPlayingIcon\" 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=\"!overlayShowsPlayingIcon\" 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                <!-- Icon pinned to the just-taken action (set in onVideoFrameClick) so it\n                     doesn't flicker as `isPlaying` flips async between play() invocation\n                     and its promise resolving. -->\n                <svg *ngIf=\"overlayShowsPlayingIcon\" 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=\"!overlayShowsPlayingIcon\" 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 || liveSessionView === 'captured')\">\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: [{