@cqa-lib/cqa-ui 1.1.552 → 1.1.554

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

@@ -9728,10 +9728,10 @@ FolderSidebarComponent.RENAME_LIMIT_FLASH_MS = 600;
  *  position is within this many px of the end. */
 FolderSidebarComponent.SCROLL_LOAD_THRESHOLD_PX = 64;
 FolderSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", foldersAccordionExpanded: "foldersAccordionExpanded", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading", savingFolderIds: "savingFolderIds", searchValue: "searchValue" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange", foldersAccordionExpandedChange: "foldersAccordionExpandedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"(isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FolderSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FolderSidebarComponent, selector: "cqa-folder-sidebar", inputs: { folders: "folders", selectedFolderId: "selectedFolderId", expandedFolderIds: "expandedFolderIds", unorganizedCount: "unorganizedCount", allowCreate: "allowCreate", allowRename: "allowRename", allowDelete: "allowDelete", allowMove: "allowMove", allowDuplicate: "allowDuplicate", allowDrop: "allowDrop", showCounts: "showCounts", collapsed: "collapsed", foldersAccordionExpanded: "foldersAccordionExpanded", labels: "labels", serverSideSearch: "serverSideSearch", rootTotal: "rootTotal", folderSearchLoading: "folderSearchLoading", rootFoldersLoading: "rootFoldersLoading", savingFolderIds: "savingFolderIds", searchValue: "searchValue" }, outputs: { folderSelected: "folderSelected", folderExpansionToggled: "folderExpansionToggled", folderChildrenRequested: "folderChildrenRequested", folderLoadMoreRequested: "folderLoadMoreRequested", searchChange: "searchChange", rootLoadMoreRequested: "rootLoadMoreRequested", folderCreated: "folderCreated", folderCreateRequested: "folderCreateRequested", folderRenamed: "folderRenamed", folderDeleted: "folderDeleted", folderMoveRequested: "folderMoveRequested", folderDuplicateRequested: "folderDuplicateRequested", testsDropped: "testsDropped", folderDropped: "folderDropped", collapsedChange: "collapsedChange", foldersAccordionExpandedChange: "foldersAccordionExpandedChange" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()", "document:dragend": "onDocumentDragEnd()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"(isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-my-1\" style=\"background-color: #E5E7EB;\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FolderDropDirective, selector: "[cqaFolderDrop]", inputs: ["cqaFolderDrop", "dropEnabled"], outputs: ["testsDropped", "folderDropped"] }, { type: FolderDragDirective, selector: "[cqaFolderDrag]", inputs: ["cqaFolderDrag", "dragEnabled"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FolderSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"(isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-bg-neutral-200 cqa-my-1\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", styles: [] }]
+            args: [{ selector: 'cqa-folder-sidebar', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Reusable indeterminate loading spinner. Render via\n     <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>. -->\n<ng-template #loadingSpinner let-size=\"size\">\n  <svg [attr.width]=\"size || 16\" [attr.height]=\"size || 16\" viewBox=\"0 0 50 50\" aria-label=\"loading\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"></circle>\n    <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n      <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"></animateTransform>\n    </path>\n  </svg>\n</ng-template>\n\n<!-- Reusable folder icon. Render via <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: node.color }\"></ng-container>. -->\n<ng-template #folderIcon let-color=\"color\">\n  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-flex-shrink-0\">\n    <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n      <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" [attr.stroke]=\"color || '#99999E'\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n</ng-template>\n\n<aside\n  class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-h-full cqa-min-h-0\"\n  [class.cqa-border]=\"!collapsed\"\n  [class.cqa-border-neutral-200]=\"!collapsed\"\n  [class.cqa-rounded-lg]=\"!collapsed\"\n  [style.width.px]=\"collapsed ? 22 : 240\"\n  style=\"overflow: hidden; transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);\"\n>\n  <!-- Collapsed rail: the entire sidebar becomes a single click target so the\n       slim strip reads as an obvious \"expand me\" handle. -->\n  <button\n    *ngIf=\"collapsed\"\n    type=\"button\"\n    style=\"width: 22px;\"\n    class=\"cqa-group cqa-flex cqa-flex-col cqa-items-center cqa-flex-shrink-0 cqa-h-full cqa-py-2 cqa-gap-3 cqa-bg-neutral-50 cqa-border cqa-border-neutral-200 cqa-text-neutral-500 hover:cqa-bg-indigo-50 hover:cqa-border-indigo-200 hover:cqa-text-indigo-600 focus:cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-indigo-200 cqa-cursor-pointer\"\n    (click)=\"togglePanel()\"\n    [attr.aria-label]=\"'Expand folders panel'\"\n    [title]=\"'Expand folders panel'\"\n  >\n    <mat-icon style=\"font-size:16px;width:16px;height:16px\">chevron_right</mat-icon>\n    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center\" aria-hidden=\"true\">\n      <svg width=\"13\" height=\"12\" viewBox=\"0 0 13 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12.1916 9.85824C12.1916 10.1677 12.0687 10.4644 11.8499 10.6832C11.6311 10.902 11.3343 11.0249 11.0249 11.0249H1.69157C1.38215 11.0249 1.0854 10.902 0.866611 10.6832C0.647819 10.4644 0.524902 10.1677 0.524902 9.85824V1.69157C0.524902 1.38215 0.647819 1.0854 0.866611 0.866611C1.0854 0.647819 1.38215 0.524902 1.69157 0.524902H4.60824L5.7749 2.2749H11.0249C11.3343 2.2749 11.6311 2.39782 11.8499 2.61661C12.0687 2.8354 12.1916 3.13215 12.1916 3.44157V9.85824Z\" stroke=\"currentColor\" stroke-width=\"1.05\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n  </button>\n\n  <div *ngIf=\"!collapsed\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-h-0 cqa-pb-2\" style=\"width: 240px;\">\n  <!-- Header (expanded) -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1 cqa-px-3\"\n    style=\"border-bottom: 1px solid #E2E2E3; margin-bottom: 8px;\"\n  >\n    <span class=\"cqa-text-sm cqa-font-semibold cqa-text-neutral-900 cqa-py-0.5\">{{ labels.folders }}</span>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"togglePanel()\"\n        [attr.aria-label]=\"'Collapse folders panel'\"\n        [title]=\"'Collapse folders panel'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">keyboard_double_arrow_left</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100\"\n        [class.cqa-text-neutral-500]=\"!searchVisible\"\n        [class.cqa-text-indigo-600]=\"searchVisible\"\n        [class.cqa-bg-neutral-100]=\"searchVisible\"\n        (click)=\"toggleSearchVisible()\"\n        [attr.aria-label]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n        [attr.aria-pressed]=\"searchVisible\"\n        [title]=\"searchVisible ? 'Hide folder search' : 'Search folders'\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">search</mat-icon>\n      </button>\n      <button\n        *ngIf=\"allowCreate\"\n        type=\"button\"\n        class=\"cqa-p-1 cqa-rounded hover:cqa-bg-neutral-100 cqa-text-neutral-500\"\n        (click)=\"requestCreate(null)\"\n        [attr.aria-label]=\"labels.newFolder\"\n        [title]=\"labels.newFolder\"\n      >\n        <mat-icon style=\"font-size:18px;width:18px;height:18px\">add</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <ng-container>\n    <!-- Search (toggled via the search icon in the header) -->\n    <div\n      class=\"cqa-grid\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"searchVisible ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n        <div class=\"cqa-px-3 cqa-pb-2\">\n          <div class=\"cqa-relative\">\n            <cqa-search-bar\n              size=\"sm\"\n              [fullWidth]=\"true\"\n              [value]=\"searchValue\"\n              [autoFocus]=\"searchVisible\"\n              [placeholder]=\"labels.searchFoldersPlaceholder\"\n              [showClear]=\"true\"\n              (valueChange)=\"onSearchInput($event)\"\n              (cleared)=\"onSearchClear()\"\n            ></cqa-search-bar>\n            <span\n              *ngIf=\"folderSearchLoading\"\n              class=\"cqa-absolute cqa-right-8 cqa-inset-y-0 cqa-flex cqa-items-center\"\n              aria-live=\"polite\"\n              aria-label=\"Searching folders\"\n            >\n              <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Organized section header \u2014 visually distinct from folder rows so it reads\n         as a view/section toggle rather than a folder item. -->\n    <button\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-px-3 cqa-py-1 cqa-text-left cqa-text-[#6D6D74] hover:cqa-text-[#3F43EE] focus:cqa-outline-none focus:cqa-text-[#3F43EE] cqa-flex-shrink-0 cqa-uppercase\"\n      (click)=\"toggleFoldersAccordion()\"\n      [attr.aria-expanded]=\"foldersAccordionExpanded\"\n      [attr.aria-label]=\"foldersAccordionExpanded ? 'Collapse organized folders' : 'Expand organized folders'\"\n    >\n      <span class=\"cqa-text-[11px] cqa-font-semibold cqa-tracking-wider\">{{ labels.organized }}</span>\n      <mat-icon\n        style=\"font-size:16px;width:16px;height:16px;transition: transform 200ms ease;\"\n        [style.transform]=\"foldersAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'\"\n      >expand_more</mat-icon>\n    </button>\n\n    <!-- Tree (folders only \u2014 Unorganized sits directly below; tree caps at 60vh and scrolls when overflowing).\n         Scroll-based lazy-loading at the root level: nearing the bottom emits\n         `rootLoadMoreRequested`, which the host responds to by fetching the\n         next page of roots. -->\n    <div\n      class=\"cqa-grid cqa-min-h-0\"\n      style=\"transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);\"\n      [style.grid-template-rows]=\"foldersAccordionExpanded ? '1fr' : '0fr'\"\n    >\n      <div class=\"cqa-min-h-0\" style=\"overflow: hidden;\">\n    <div role=\"tree\" class=\"cqa-min-h-0 cqa-max-h-[40vh] cqa-overflow-y-auto cqa-py-1 cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n         (scroll)=\"onTreeScroll($event)\">\n      <!-- Initial-load spinner: only renders when we have no folders yet AND\n           no search active (search has its own inline spinner). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-6\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 20 }\"></ng-container>\n      </div>\n      <div\n        *ngIf=\"searchValue?.trim() && rows.length === 0 && !folderSearchLoading\"\n        class=\"cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-neutral-500 cqa-text-center\"\n      >\n        {{ labels.noFoldersFound }}\n      </div>\n      <ng-container *ngFor=\"let row of rows; let i = index; trackBy: trackByRow\">\n        <!-- Synthetic loading row (lazy fetch in flight) -->\n        <div\n          *ngIf=\"row.kind === 'loading'\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-1.5 cqa-text-sm cqa-text-neutral-500\"\n          aria-live=\"polite\"\n        >\n          <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n          <span>Loading\u2026</span>\n        </div>\n        <!-- Synthetic load-more row (more children available on backend) -->\n        <button\n          *ngIf=\"row.kind === 'load-more'\"\n          type=\"button\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          class=\"cqa-flex cqa-items-center cqa-w-full cqa-py-1.5 cqa-text-sm cqa-text-indigo-600 hover:cqa-bg-[#D8D9FC] cqa-text-left\"\n          (click)=\"onLoadMore(row.node); $event.stopPropagation()\"\n        >\n          <span>Load more ({{ (row.node.totalChildren ?? 0) - (row.node.children?.length ?? 0) }})</span>\n        </button>\n        <!-- Real folder row -->\n        <div\n          *ngIf=\"row.kind === 'folder'\"\n          role=\"treeitem\"\n          tabindex=\"0\"\n          [attr.aria-expanded]=\"row.hasChildren ? isExpanded(row.node.id) : null\"\n          [attr.aria-selected]=\"isSelected(row.node.id)\"\n          [attr.data-folder-row-id]=\"row.node.id\"\n          [cqaFolderDrop]=\"row.node.id\"\n          [dropEnabled]=\"allowDrop\"\n          (testsDropped)=\"rowDropped(row.node.id, $event)\"\n          (folderDropped)=\"onFolderRowDropped(row.node.id, $event)\"\n          [cqaFolderDrag]=\"row.node.id\"\n          [dragEnabled]=\"allowDrop\"\n          (dragstart)=\"onFolderDragStart(row.node)\"\n          (dragend)=\"onFolderDragEnd()\"\n          (dragover)=\"onFolderRowDragOver(row)\"\n          (dragleave)=\"onFolderRowDragLeave(row)\"\n          (click)=\"onSelect(row.node)\"\n          (contextmenu)=\"openContextMenu(row.node, $event)\"\n          (keydown)=\"onRowKeydown($event, row, i)\"\n          class=\"cqa-group cqa-flex cqa-items-center cqa-gap-1 cqa-pr-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative\"\n          [style.background-color]=\"(isSelected(row.node.id) || contextMenuFolderId === row.node.id) ? '#D8D9FC' : null\"\n          [style.paddingLeft.px]=\"rowIndent(row.depth)\"\n          [attr.title]=\"folderRowTooltip(row.node)\"\n        >\n          <span\n            *ngIf=\"isSelected(row.node.id)\"\n            class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n          ></span>\n          <button\n            type=\"button\"\n            class=\"cqa-p-0\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [style.visibility]=\"row.hasChildren ? 'visible' : 'hidden'\"\n            (click)=\"onToggle(row.node, $event)\"\n            [attr.aria-label]=\"isExpanded(row.node.id) ? 'Collapse' : 'Expand'\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">\n              {{ isExpanded(row.node.id) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <ng-container *ngTemplateOutlet=\"folderIcon; context: { color: row.node.color }\"></ng-container>\n\n          <ng-container *ngIf=\"renamingId === row.node.id; else nameTpl\">\n            <input\n              type=\"text\"\n              size=\"1\"\n              [attr.data-folder-rename-input]=\"row.node.id\"\n              [attr.maxlength]=\"renameMaxLength\"\n              class=\"cqa-flex-1 cqa-min-w-0 cqa-w-full cqa-px-2 cqa-py-0.5 cqa-rounded cqa-border cqa-bg-white cqa-text-sm cqa-shadow-sm focus:cqa-outline-none focus:cqa-ring-1\"\n              [ngClass]=\"(isRenameDraftValid && !renameLimitFlash)\n                ? 'cqa-border-neutral-300 focus:cqa-border-indigo-400 focus:cqa-ring-indigo-200'\n                : 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-[#FCA5A5]'\"\n              [attr.aria-invalid]=\"!isRenameDraftValid || renameLimitFlash\"\n              [(ngModel)]=\"renameDraft\"\n              (keydown)=\"onRenameKey($event, row.node)\"\n              (keypress)=\"$event.stopPropagation()\"\n              (keyup)=\"$event.stopPropagation()\"\n              (blur)=\"commitRename(row.node)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </ng-container>\n          <ng-template #nameTpl>\n            <span\n              class=\"cqa-flex-1 cqa-text-sm cqa-truncate\"\n              [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n              (dblclick)=\"beginRename(row.node, $event)\"\n            >{{ row.node.name }}</span>\n          </ng-template>\n\n          <!-- Saving indicator: replaces the count while the host's rename/save\n               API call is in flight, so the user gets immediate feedback. -->\n          <span\n            *ngIf=\"isFolderSaving(row.node.id)\"\n            class=\"cqa-flex cqa-items-center cqa-ml-1 cqa-flex-shrink-0\"\n            aria-live=\"polite\"\n            [attr.aria-label]=\"'Saving ' + row.node.name\"\n          >\n            <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 12 }\"></ng-container>\n          </span>\n\n          <!-- Count shown at rest; hidden on row hover when delete is allowed -->\n          <span\n            *ngIf=\"!isFolderSaving(row.node.id) && showCounts && row.node.count != null\"\n            class=\"cqa-text-xs cqa-tabular-nums cqa-ml-1\"\n            [style.color]=\"isSelected(row.node.id) ? '#3F43EE' : '#4C4C51'\"\n            [class.group-hover:cqa-hidden]=\"allowDelete\"\n          >{{ row.node.count }}</span>\n\n          <button\n            *ngIf=\"hasAnyContextAction\"\n            type=\"button\"\n            class=\"cqa-p-0.5 cqa-rounded hover:cqa-bg-neutral-200\"\n            [style.color]=\"isSelected(row.node.id) || contextMenuFolderId === row.node.id ? '#3F43EE' : '#4C4C51'\"\n            [class.cqa-hidden]=\"contextMenuFolderId !== row.node.id\"\n            [class.group-hover:cqa-inline-flex]=\"true\"\n            [class.cqa-inline-flex]=\"contextMenuFolderId === row.node.id\"\n            (click)=\"openContextMenu(row.node, $event)\"\n            [attr.aria-label]=\"'Open actions for ' + row.node.name\"\n            [attr.aria-haspopup]=\"'menu'\"\n            [attr.aria-expanded]=\"contextMenuFolderId === row.node.id\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">more_horiz</mat-icon>\n          </button>\n        </div>\n      </ng-container>\n      <!-- Root-level pagination is now driven by scroll (see `(scroll)` on the\n           tree container above). Per-folder children retain the explicit\n           \"Load more\" button rendered inside the rows loop above, since\n           subtrees aren't independently scrollable. -->\n      <!-- Pagination spinner \u2014 visible only when fetching an additional page\n           of roots (folders.length > 0 distinguishes from initial-load case). -->\n      <div\n        *ngIf=\"rootFoldersLoading && folders.length > 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-2\"\n        aria-live=\"polite\"\n      >\n        <ng-container *ngTemplateOutlet=\"loadingSpinner; context: { size: 14 }\"></ng-container>\n      </div>\n    </div>\n      </div>\n    </div>\n\n    <!-- Divider between folder tree and pinned Unorganized tab -->\n    <div\n      aria-hidden=\"true\"\n      class=\"cqa-mx-3 cqa-flex-shrink-0\"\n      style=\"height: 1px; background-color: #E5E7EB; margin-top: 6px; margin-bottom: 6px;\"\n    ></div>\n\n    <!-- Unorganized \u2014 pinned below the scrollable folder tree so it stays visible regardless of folder count -->\n    <div\n      role=\"treeitem\"\n      tabindex=\"0\"\n      [attr.aria-selected]=\"isSelected(null)\"\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-1.5 cqa-cursor-pointer hover:cqa-bg-[#D8D9FC] focus:cqa-outline-none focus:cqa-bg-[#D8D9FC] cqa-relative cqa-flex-shrink-0\"\n      [style.background-color]=\"isSelected(null) ? '#D8D9FC' : null\"\n      [cqaFolderDrop]=\"null\"\n      [dropEnabled]=\"allowDrop\"\n      (testsDropped)=\"rowDropped(null, $event)\"\n      (folderDropped)=\"onFolderRowDropped(null, $event)\"\n      (click)=\"onSelectUnorganized()\"\n    >\n      <span\n        *ngIf=\"isSelected(null)\"\n        class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-bottom-0 cqa-w-[3px] cqa-bg-indigo-600\"\n      ></span>\n      <mat-icon [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\" style=\"font-size:16px;width:16px;height:16px\">inbox</mat-icon>\n      <span class=\"cqa-flex-1 cqa-text-sm\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ labels.unorganized }}</span>\n      <span *ngIf=\"showCounts\" class=\"cqa-text-xs cqa-tabular-nums\" [style.color]=\"isSelected(null) ? '#3F43EE' : '#4C4C51'\">{{ unorganizedCount }}</span>\n    </div>\n\n    <!-- Folder context menu (right-click / ellipsis). A 0\u00D70 fixed-position\n         anchor at the click coords drives a cdkConnectedOverlay; CDK's\n         flexible-connected positioning auto-flips up/left when the menu\n         would overflow the viewport (last-folder-near-bottom case). -->\n    <div #ctxAnchor cdkOverlayOrigin\n         class=\"cqa-fixed cqa-w-0 cqa-h-0 cqa-pointer-events-none\"\n         [style.left.px]=\"contextMenuPosition.x\"\n         [style.top.px]=\"contextMenuPosition.y\"></div>\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"ctxAnchor\"\n      [cdkConnectedOverlayOpen]=\"contextMenuFolderId !== null\"\n      [cdkConnectedOverlayPositions]=\"contextMenuPositions\"\n      [cdkConnectedOverlayHasBackdrop]=\"false\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"false\"\n      [cdkConnectedOverlayPush]=\"true\"\n      (overlayOutsideClick)=\"onOverlayOutsideClick()\"\n      (detach)=\"closeContextMenu()\"\n    >\n      <!-- The lib's tailwind config sets important: '.cqa-ui-root', which\n           emits descendant selectors like `.cqa-ui-root .cqa-bg-white`.\n           CDK Overlay teleports this template into the global overlay\n           container (outside the host's cqa-ui-root), so we wrap the menu in\n           an ancestor cqa-ui-root div to re-establish the utility scope. -->\n      <div class=\"cqa-ui-root\">\n      <div\n        role=\"menu\"\n        class=\"cqa-min-w-[180px] cqa-bg-white cqa-border cqa-border-neutral-200 cqa-rounded-md cqa-shadow-lg cqa-py-1\"\n        (click)=\"$event.stopPropagation()\"\n        (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n      >\n        <ng-container *ngIf=\"folderById(contextMenuFolderId) as menuNode\">\n          <button\n            *ngIf=\"allowCreate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextCreateSubfolder(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">create_new_folder</mat-icon>\n            <span>{{ labels.folderMenuCreateSubfolder }}</span>\n          </button>\n          <button\n            *ngIf=\"allowRename\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextRename(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">edit</mat-icon>\n            <span>{{ labels.folderMenuRename }}</span>\n          </button>\n          <button\n            *ngIf=\"allowMove\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextMove(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">drive_file_move</mat-icon>\n            <span>{{ labels.folderMenuMove }}</span>\n          </button>\n          <button\n            *ngIf=\"allowDuplicate\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-neutral-800 hover:cqa-bg-indigo-50 cqa-text-left\"\n            (click)=\"onContextDuplicate(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">content_copy</mat-icon>\n            <span>{{ labels.folderMenuDuplicate }}</span>\n          </button>\n          <div *ngIf=\"allowDelete && (allowCreate || allowRename || allowMove || allowDuplicate)\" class=\"cqa-h-px cqa-my-1\" style=\"background-color: #E5E7EB;\"></div>\n          <button\n            *ngIf=\"allowDelete\"\n            type=\"button\"\n            role=\"menuitem\"\n            class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-w-full cqa-px-3 cqa-py-1.5 cqa-text-sm cqa-text-red-600 hover:cqa-bg-red-50 cqa-text-left\"\n            (click)=\"onContextDelete(menuNode)\"\n          >\n            <mat-icon style=\"font-size:16px;width:16px;height:16px\">delete_outline</mat-icon>\n            <span>{{ labels.folderMenuDelete }}</span>\n          </button>\n        </ng-container>\n      </div>\n      </div>\n    </ng-template>\n\n  </ng-container>\n  </div>\n</aside>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { folders: [{
                 type: Input
             }], selectedFolderId: [{
@@ -20769,6 +20769,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';
@@ -21447,7 +21454,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() {
         var _a;
@@ -21468,43 +21484,38 @@ 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() {
+        var _a;
+        // 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 = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.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)
@@ -22185,6 +22196,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;
@@ -22204,9 +22224,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);
     }
@@ -23130,10 +23163,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: [{