@cqa-lib/cqa-ui 1.1.556 → 1.1.557-epsilon.2

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

@@ -7156,6 +7156,15 @@ class TableTemplateComponent {
         this.viewMode = 'list';
         this.viewModeLabels = { list: 'List', modular: 'Modular' };
         this.viewModeChange = new EventEmitter();
+        // Stable reference fed to <cqa-segment-control [segments]>. A getter here
+        // allocates a new array each CD tick, which the segment control then sees as
+        // a changed Input — its updateIndicator runs inside a queueMicrotask, the
+        // zone re-ticks via onMicrotaskEmpty, and the loop pegs CPU at 100% with
+        // HTTP requests starved. Rebuilt only when viewModeLabels actually changes.
+        this.viewModeSegments = [
+            { label: 'List', value: 'list', icon: 'view_list' },
+            { label: 'Modular', value: 'modular', icon: 'folder' },
+        ];
         // Data input
         this.data = [];
         // Empty state inputs
@@ -7261,12 +7270,6 @@ class TableTemplateComponent {
         // Export modal state
         this.isExportModalOpen = false;
     }
-    get viewModeSegments() {
-        return [
-            { label: this.viewModeLabels.list, value: 'list', icon: 'view_list' },
-            { label: this.viewModeLabels.modular, value: 'modular', icon: 'folder' },
-        ];
-    }
     onViewModeChange(value) {
         const next = value === 'modular' ? 'modular' : 'list';
         if (next !== this.viewMode) {
@@ -7319,6 +7322,12 @@ class TableTemplateComponent {
         if (changes['selectedItems'] || changes['data']) {
             this.restoreSelectionState();
         }
+        if (changes['viewModeLabels']) {
+            this.viewModeSegments = [
+                { label: this.viewModeLabels.list, value: 'list', icon: 'view_list' },
+                { label: this.viewModeLabels.modular, value: 'modular', icon: 'folder' },
+            ];
+        }
     }
     initializeComponent() {
         if (this.isEmptyState) {
@@ -7940,6 +7949,7 @@ const DEFAULT_MODULAR_LABELS = {
     folderColumnLabel: 'Folder',
     unorganizedRowLabel: 'Unorganized',
     noFoldersFound: 'No Folders Found',
+    noFoldersEmptyDescription: 'Click the + icon above to create your first folder.',
     folderTooltipTotalSingular: '1 total test case including subfolders',
     folderTooltipTotalPlural: '{n} total test cases including subfolders',
 };
@@ -9728,10 +9738,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-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 });
+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      <div\n        *ngIf=\"!rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-px-4 cqa-py-6 cqa-gap-2\"\n      >\n        <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-neutral-100 cqa-text-neutral-400\">\n          <mat-icon style=\"font-size:22px;width:22px;height:22px\">folder_open</mat-icon>\n        </span>\n        <span class=\"cqa-text-sm cqa-font-medium cqa-text-neutral-700\">{{ labels.noFoldersFound }}</span>\n        <span *ngIf=\"allowCreate\" class=\"cqa-text-xs cqa-text-neutral-500 cqa-leading-snug\">\n          {{ labels.noFoldersEmptyDescription }}\n        </span>\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]=\"renamingId === row.node.id ? '#FFFFFF' : ((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-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: [] }]
+            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      <div\n        *ngIf=\"!rootFoldersLoading && folders.length === 0 && !searchValue?.trim()\"\n        class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-text-center cqa-px-4 cqa-py-6 cqa-gap-2\"\n      >\n        <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-neutral-100 cqa-text-neutral-400\">\n          <mat-icon style=\"font-size:22px;width:22px;height:22px\">folder_open</mat-icon>\n        </span>\n        <span class=\"cqa-text-sm cqa-font-medium cqa-text-neutral-700\">{{ labels.noFoldersFound }}</span>\n        <span *ngIf=\"allowCreate\" class=\"cqa-text-xs cqa-text-neutral-500 cqa-leading-snug\">\n          {{ labels.noFoldersEmptyDescription }}\n        </span>\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]=\"renamingId === row.node.id ? '#FFFFFF' : ((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: [{
@@ -9862,6 +9872,15 @@ class ModularTableTemplateComponent {
         this.viewMode = 'list';
         this.viewModeLabels = { list: 'List', modular: 'Modular' };
         this.viewModeChange = new EventEmitter();
+        // Stable reference fed to <cqa-segment-control [segments]>. A getter here
+        // allocates a new array each CD tick, which the segment control then sees as
+        // a changed Input — its updateIndicator runs inside a queueMicrotask, the
+        // zone re-ticks via onMicrotaskEmpty, and the loop pegs CPU at 100% with
+        // HTTP requests starved. Rebuilt only when viewModeLabels actually changes.
+        this.viewModeSegments = [
+            { label: 'List', value: 'list', icon: 'view_list' },
+            { label: 'Modular', value: 'modular', icon: 'folder' },
+        ];
         // Data input
         this.data = [];
         // Empty state inputs
@@ -10158,12 +10177,6 @@ class ModularTableTemplateComponent {
             return ids;
         };
     }
-    get viewModeSegments() {
-        return [
-            { label: this.viewModeLabels.list, value: 'list', icon: 'view_list' },
-            { label: this.viewModeLabels.modular, value: 'modular', icon: 'folder' },
-        ];
-    }
     onViewModeChange(value) {
         const next = value === 'modular' ? 'modular' : 'list';
         if (next !== this.viewMode) {
@@ -10321,6 +10334,12 @@ class ModularTableTemplateComponent {
         if (changes['selectedItems'] || changes['data']) {
             this.restoreSelectionState();
         }
+        if (changes['viewModeLabels']) {
+            this.viewModeSegments = [
+                { label: this.viewModeLabels.list, value: 'list', icon: 'view_list' },
+                { label: this.viewModeLabels.modular, value: 'modular', icon: 'folder' },
+            ];
+        }
         if (changes['reorderSaving'] && !changes['reorderSaving'].firstChange) {
             const nowSaving = !!changes['reorderSaving'].currentValue;
             // Host finished its bulk-update call — exit reorder mode.
@@ -21656,7 +21675,56 @@ class SimulatorComponent {
         return 'browser';
     }
     get hasDeviceFrame() {
-        return !!this.deviceFrameConfig;
+        if (!this.deviceFrameConfig)
+            return false;
+        return true;
+    }
+    /** Render the CSS-built browser frame for every web/browser run that
+     *  has a known viewport — including mobile-sized viewports (375×667,
+     *  412×915, etc.). Phone-mockup PNGs are reserved for actual mobile
+     *  *device* emulation (`platformType === 'device'`). */
+    get useCssBrowserFrame() {
+        if (this.effectivePlatformType !== 'browser')
+            return false;
+        const vp = this.effectiveBrowserViewPort;
+        return !!(vp && vp.width && vp.height);
+    }
+    /** Size the CSS browser frame **dynamically** from the viewport's aspect
+     *  ratio. The binding dimension is picked from the viewport's own
+     *  orientation so the frame fills the pane along its dominant axis and
+     *  keeps the viewport's exact aspect on the other axis.
+     *
+     *  - Landscape (`w >= h`, e.g. 1024×768, 1920×1080, 3000×2000):
+     *    `width: 100%` is primary; height is derived via `aspect-ratio`.
+     *    `max-height: 100%` lets the engine clamp + shrink width when the
+     *    pane is shorter than the derived height would require.
+     *  - Portrait (`w < h`, e.g. 375×667, 412×915):
+     *    `height: 100%` is primary; width follows via `aspect-ratio`.
+     *    `max-width: 100%` clamps when the pane is narrower.
+     *
+     *  The 40px chrome bar is baked into the ratio so the inner content
+     *  area below the chrome lands at the viewport's exact `vp.w / vp.h`.
+     *  Returns `{}` when no viewport data is available — the parent flex
+     *  container then keeps the default look (no resize). */
+    get cssBrowserFrameOuterStyle() {
+        const vp = this.effectiveBrowserViewPort;
+        if (!vp || !vp.width || !vp.height)
+            return {};
+        const chromeHeight = 40;
+        const aspect = `${vp.width} / ${vp.height + chromeHeight}`;
+        const portrait = vp.height > vp.width;
+        const sizing = portrait
+            ? {
+                height: '100%',
+                'max-height': '100%',
+                'max-width': '100%',
+            }
+            : {
+                width: '100%',
+                'max-width': '100%',
+                'max-height': '100%',
+            };
+        return Object.assign(Object.assign({}, sizing), { 'min-width': '0', 'min-height': '0', 'aspect-ratio': aspect, 'border-left': '1px solid #E5E7EB', 'border-right': '1px solid #E5E7EB', 'border-bottom': '1px solid #E5E7EB', 'box-sizing': 'border-box' });
     }
     get isPlayerSwitching() {
         return this.playerState === 'switching';
@@ -23726,10 +23794,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                    <!-- 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"] }] });
+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-flex cqa-items-center cqa-justify-center cqa-overflow-hidden\"\n             [ngClass]=\"{\n               'cqa-h-full': !useCssBrowserFrame,\n               'cqa-w-auto': hasDeviceFrame && !useCssBrowserFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n               'cqa-max-h-full': hasDeviceFrame && (effectivePlatformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && effectivePlatformType === 'device',\n               'cqa-flex-col': useCssBrowserFrame\n             }\"\n             [ngStyle]=\"useCssBrowserFrame ? cssBrowserFrameOuterStyle : liveContentContainerStyle\">\n\n          <!-- CSS-built browser chrome bar (used when useCssBrowserFrame).\n               Height scales with width via aspect-ratio (30:1, clamped\n               20\u201340px) so the chrome shrinks when the splitter narrows\n               the simulator and grows again when it widens. Dots use\n               percent-of-parent so they track the bar's height. -->\n          <div *ngIf=\"useCssBrowserFrame\"\n               class=\"cqa-w-full cqa-flex cqa-items-center cqa-px-3 cqa-bg-[#2a2a2a]\"\n               style=\"aspect-ratio: 30 / 1; min-height: 20px; max-height: 40px; flex: 0 0 auto; box-sizing: border-box;\">\n            <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FF5F57;\"></span>\n            <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FEBC2E;\"></span>\n            <span class=\"cqa-inline-block cqa-rounded-full\" style=\"aspect-ratio: 1; height: 35%; background: #28C840;\"></span>\n          </div>\n\n          <!-- Image-based mockup (default / legacy frame). -->\n          <img *ngIf=\"hasDeviceFrame && !useCssBrowserFrame\"\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\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame && !useCssBrowserFrame,\n                 'cqa-flex-1 cqa-w-full cqa-flex cqa-flex-col cqa-bg-white cqa-overflow-hidden': useCssBrowserFrame,\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' && !useCssBrowserFrame,\n                 'cqa-bg-white': hasDeviceFrame && effectivePlatformType !== 'browser' && !useCssBrowserFrame\n               }\"\n               [ngStyle]=\"(hasDeviceFrame && !useCssBrowserFrame) ? 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-flex cqa-items-center cqa-justify-center cqa-max-h-full\"\n                 [ngClass]=\"{\n                   'cqa-h-full cqa-w-auto': !useCssBrowserFrame,\n                   'cqa-flex-col cqa-overflow-hidden': useCssBrowserFrame,\n                   'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n                   'cqa-min-w-max': effectivePlatformType === 'device' && !useCssBrowserFrame\n                 }\"\n                 [ngStyle]=\"useCssBrowserFrame ? cssBrowserFrameOuterStyle : {}\">\n\n              <!-- CSS-built browser chrome bar (used when useCssBrowserFrame). -->\n              <div *ngIf=\"useCssBrowserFrame\"\n                   class=\"cqa-w-full cqa-flex cqa-items-center cqa-px-3 cqa-bg-[#2a2a2a]\"\n                   style=\"aspect-ratio: 30 / 1; min-height: 20px; max-height: 40px; flex: 0 0 auto; box-sizing: border-box;\">\n                <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FF5F57;\"></span>\n                <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FEBC2E;\"></span>\n                <span class=\"cqa-inline-block cqa-rounded-full\" style=\"aspect-ratio: 1; height: 35%; background: #28C840;\"></span>\n              </div>\n\n              <!-- Image-based mockup (default / legacy frame). -->\n              <img *ngIf=\"!useCssBrowserFrame\"\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': !useCssBrowserFrame,\n                     'cqa-flex-1 cqa-w-full cqa-flex cqa-flex-col cqa-bg-white cqa-overflow-hidden cqa-relative': useCssBrowserFrame,\n                     'cqa-bg-white': effectivePlatformType !== 'browser' && !useCssBrowserFrame\n                   }\"\n                   [ngStyle]=\"useCssBrowserFrame ? {} : deviceScreenStyle\">\n                <video\n                  *ngIf=\"!videoRefreshing\"\n                  #vplayer\n                  class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2] cqa-cursor-pointer\"\n                  [ngClass]=\"{\n                    'cqa-z-20': effectivePlatformType === 'browser' && !useCssBrowserFrame,\n                    'cqa-object-cover': useCssBrowserFrame && isLive,\n                    'cqa-object-contain': !useCssBrowserFrame || !isLive\n                  }\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\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-flex cqa-items-center cqa-justify-center cqa-max-h-full\"\n                 [ngClass]=\"{\n                   'cqa-h-full cqa-w-auto': !useCssBrowserFrame,\n                   'cqa-flex-col cqa-overflow-hidden': useCssBrowserFrame,\n                   'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n                   'cqa-min-w-max': effectivePlatformType === 'device' && !useCssBrowserFrame\n                 }\"\n                 [ngStyle]=\"useCssBrowserFrame ? cssBrowserFrameOuterStyle : {}\">\n\n              <!-- CSS-built browser chrome bar (used when useCssBrowserFrame). -->\n              <div *ngIf=\"useCssBrowserFrame\"\n                   class=\"cqa-w-full cqa-flex cqa-items-center cqa-px-3 cqa-bg-[#2a2a2a]\"\n                   style=\"aspect-ratio: 30 / 1; min-height: 20px; max-height: 40px; flex: 0 0 auto; box-sizing: border-box;\">\n                <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FF5F57;\"></span>\n                <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FEBC2E;\"></span>\n                <span class=\"cqa-inline-block cqa-rounded-full\" style=\"aspect-ratio: 1; height: 35%; background: #28C840;\"></span>\n              </div>\n\n              <img *ngIf=\"!useCssBrowserFrame\"\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 [ngClass]=\"{\n                     'cqa-absolute cqa-flex cqa-flex-col': !useCssBrowserFrame,\n                     'cqa-flex-1 cqa-w-full cqa-flex cqa-flex-col cqa-bg-white cqa-overflow-hidden cqa-relative': useCssBrowserFrame,\n                     'cqa-bg-white': effectivePlatformType !== 'browser' && !useCssBrowserFrame\n                   }\"\n                   [ngStyle]=\"useCssBrowserFrame ? {} : deviceScreenStyle\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser' && !useCssBrowserFrame}\"\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                    <!-- 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: [] }]
+            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-flex cqa-items-center cqa-justify-center cqa-overflow-hidden\"\n             [ngClass]=\"{\n               'cqa-h-full': !useCssBrowserFrame,\n               'cqa-w-auto': hasDeviceFrame && !useCssBrowserFrame,\n               'cqa-w-full cqa-flex-col': !hasDeviceFrame,\n               'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n               'cqa-max-h-full': hasDeviceFrame && (effectivePlatformType !== 'browser' || !isLive),\n               'cqa-min-w-max': hasDeviceFrame && effectivePlatformType === 'device',\n               'cqa-flex-col': useCssBrowserFrame\n             }\"\n             [ngStyle]=\"useCssBrowserFrame ? cssBrowserFrameOuterStyle : liveContentContainerStyle\">\n\n          <!-- CSS-built browser chrome bar (used when useCssBrowserFrame).\n               Height scales with width via aspect-ratio (30:1, clamped\n               20\u201340px) so the chrome shrinks when the splitter narrows\n               the simulator and grows again when it widens. Dots use\n               percent-of-parent so they track the bar's height. -->\n          <div *ngIf=\"useCssBrowserFrame\"\n               class=\"cqa-w-full cqa-flex cqa-items-center cqa-px-3 cqa-bg-[#2a2a2a]\"\n               style=\"aspect-ratio: 30 / 1; min-height: 20px; max-height: 40px; flex: 0 0 auto; box-sizing: border-box;\">\n            <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FF5F57;\"></span>\n            <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FEBC2E;\"></span>\n            <span class=\"cqa-inline-block cqa-rounded-full\" style=\"aspect-ratio: 1; height: 35%; background: #28C840;\"></span>\n          </div>\n\n          <!-- Image-based mockup (default / legacy frame). -->\n          <img *ngIf=\"hasDeviceFrame && !useCssBrowserFrame\"\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\n          <div [ngClass]=\"{\n                 'cqa-absolute cqa-flex cqa-flex-col': hasDeviceFrame && !useCssBrowserFrame,\n                 'cqa-flex-1 cqa-w-full cqa-flex cqa-flex-col cqa-bg-white cqa-overflow-hidden': useCssBrowserFrame,\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' && !useCssBrowserFrame,\n                 'cqa-bg-white': hasDeviceFrame && effectivePlatformType !== 'browser' && !useCssBrowserFrame\n               }\"\n               [ngStyle]=\"(hasDeviceFrame && !useCssBrowserFrame) ? 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-flex cqa-items-center cqa-justify-center cqa-max-h-full\"\n                 [ngClass]=\"{\n                   'cqa-h-full cqa-w-auto': !useCssBrowserFrame,\n                   'cqa-flex-col cqa-overflow-hidden': useCssBrowserFrame,\n                   'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n                   'cqa-min-w-max': effectivePlatformType === 'device' && !useCssBrowserFrame\n                 }\"\n                 [ngStyle]=\"useCssBrowserFrame ? cssBrowserFrameOuterStyle : {}\">\n\n              <!-- CSS-built browser chrome bar (used when useCssBrowserFrame). -->\n              <div *ngIf=\"useCssBrowserFrame\"\n                   class=\"cqa-w-full cqa-flex cqa-items-center cqa-px-3 cqa-bg-[#2a2a2a]\"\n                   style=\"aspect-ratio: 30 / 1; min-height: 20px; max-height: 40px; flex: 0 0 auto; box-sizing: border-box;\">\n                <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FF5F57;\"></span>\n                <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FEBC2E;\"></span>\n                <span class=\"cqa-inline-block cqa-rounded-full\" style=\"aspect-ratio: 1; height: 35%; background: #28C840;\"></span>\n              </div>\n\n              <!-- Image-based mockup (default / legacy frame). -->\n              <img *ngIf=\"!useCssBrowserFrame\"\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': !useCssBrowserFrame,\n                     'cqa-flex-1 cqa-w-full cqa-flex cqa-flex-col cqa-bg-white cqa-overflow-hidden cqa-relative': useCssBrowserFrame,\n                     'cqa-bg-white': effectivePlatformType !== 'browser' && !useCssBrowserFrame\n                   }\"\n                   [ngStyle]=\"useCssBrowserFrame ? {} : deviceScreenStyle\">\n                <video\n                  *ngIf=\"!videoRefreshing\"\n                  #vplayer\n                  class=\"cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2] cqa-cursor-pointer\"\n                  [ngClass]=\"{\n                    'cqa-z-20': effectivePlatformType === 'browser' && !useCssBrowserFrame,\n                    'cqa-object-cover': useCssBrowserFrame && isLive,\n                    'cqa-object-contain': !useCssBrowserFrame || !isLive\n                  }\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\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-flex cqa-items-center cqa-justify-center cqa-max-h-full\"\n                 [ngClass]=\"{\n                   'cqa-h-full cqa-w-auto': !useCssBrowserFrame,\n                   'cqa-flex-col cqa-overflow-hidden': useCssBrowserFrame,\n                   'cqa-rounded-md cqa-overflow-hidden': effectivePlatformType === 'browser',\n                   'cqa-min-w-max': effectivePlatformType === 'device' && !useCssBrowserFrame\n                 }\"\n                 [ngStyle]=\"useCssBrowserFrame ? cssBrowserFrameOuterStyle : {}\">\n\n              <!-- CSS-built browser chrome bar (used when useCssBrowserFrame). -->\n              <div *ngIf=\"useCssBrowserFrame\"\n                   class=\"cqa-w-full cqa-flex cqa-items-center cqa-px-3 cqa-bg-[#2a2a2a]\"\n                   style=\"aspect-ratio: 30 / 1; min-height: 20px; max-height: 40px; flex: 0 0 auto; box-sizing: border-box;\">\n                <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FF5F57;\"></span>\n                <span class=\"cqa-inline-block cqa-rounded-full cqa-mr-2\" style=\"aspect-ratio: 1; height: 35%; background: #FEBC2E;\"></span>\n                <span class=\"cqa-inline-block cqa-rounded-full\" style=\"aspect-ratio: 1; height: 35%; background: #28C840;\"></span>\n              </div>\n\n              <img *ngIf=\"!useCssBrowserFrame\"\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 [ngClass]=\"{\n                     'cqa-absolute cqa-flex cqa-flex-col': !useCssBrowserFrame,\n                     'cqa-flex-1 cqa-w-full cqa-flex cqa-flex-col cqa-bg-white cqa-overflow-hidden cqa-relative': useCssBrowserFrame,\n                     'cqa-bg-white': effectivePlatformType !== 'browser' && !useCssBrowserFrame\n                   }\"\n                   [ngStyle]=\"useCssBrowserFrame ? {} : deviceScreenStyle\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': effectivePlatformType === 'browser' && !useCssBrowserFrame}\"\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: [{
@@ -48059,6 +48127,9 @@ class TestCaseDetailsEditComponent {
         else {
             this.viewportMode = 'desktop';
         }
+        // Whatever mode we ended up in, attach the required validator to that
+        // mode's resolution / device control so the field is gated until set.
+        this.applyViewportRequiredValidator(this.viewportMode);
     }
     buildViewportValue() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -48096,8 +48167,59 @@ class TestCaseDetailsEditComponent {
             this.customViewportHeight = '';
             this.customViewportTags = [];
         }
+        this.applyViewportRequiredValidator(mode);
         this.cdr.markForCheck();
     }
+    /** Toggle `Validators.required` on the resolution / device control that
+     *  belongs to the active viewport mode, and clear it from the others.
+     *  Mirrors the organization-setting / test-plan-form pattern; keeps the
+     *  form only invalid for the field the user can actually see. */
+    applyViewportRequiredValidator(mode) {
+        const desktop = this.viewportDesktopDeviceForm.get('viewportDesktopDevice');
+        const laptop = this.viewportLaptopDeviceForm.get('viewportLaptopDevice');
+        const tablet = this.viewportTabletDeviceForm.get('viewportTabletDevice');
+        const mobile = this.viewportMobileDeviceForm.get('viewportMobileDevice');
+        const set = (ctrl, required) => {
+            if (!ctrl)
+                return;
+            if (required)
+                ctrl.setValidators([Validators.required]);
+            else
+                ctrl.clearValidators();
+            ctrl.updateValueAndValidity({ emitEvent: false });
+        };
+        set(desktop, mode === 'desktop');
+        set(laptop, mode === 'laptop');
+        set(tablet, mode === 'tablet');
+        set(mobile, mode === 'mobile');
+    }
+    /** True when the resolution / device for the active viewport mode is
+     *  filled. When false, the relevant control is marked touched so the
+     *  inline error block renders. Used by `onSave()` to gate the emit. */
+    validateViewportSelection() {
+        const map = {
+            desktop: { form: this.viewportDesktopDeviceForm, key: 'viewportDesktopDevice' },
+            laptop: { form: this.viewportLaptopDeviceForm, key: 'viewportLaptopDevice' },
+            tablet: { form: this.viewportTabletDeviceForm, key: 'viewportTabletDevice' },
+            mobile: { form: this.viewportMobileDeviceForm, key: 'viewportMobileDevice' },
+            custom: null,
+        };
+        const target = map[this.viewportMode];
+        if (!target)
+            return true;
+        const ctrl = target.form.get(target.key);
+        if (!ctrl)
+            return true;
+        const v = ctrl.value;
+        const empty = v == null || (typeof v === 'string' && v.trim() === '');
+        if (empty) {
+            ctrl.markAsTouched();
+            ctrl.updateValueAndValidity();
+            this.cdr.markForCheck();
+            return false;
+        }
+        return true;
+    }
     applyViewportCategoryOptions() {
         const opts = this.viewportCategoryOptions || {};
         if (opts.DESKTOP)
@@ -48442,6 +48564,8 @@ class TestCaseDetailsEditComponent {
         }
     }
     onSave() {
+        if (!this.validateViewportSelection())
+            return;
         this.save.emit(this.buildSavePayload());
     }
     mergeConfigSections() {
@@ -48607,10 +48731,10 @@ class TestCaseDetailsEditComponent {
     }
 }
 TestCaseDetailsEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", isSaving: "isSaving", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText", orgLevelTestCaseTimeout: "orgLevelTestCaseTimeout", viewportCategoryOptions: "viewportCategoryOptions" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange", configureApiMocking: "configureApiMocking" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n  <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n  <!-- Description (Figma: document icon, textarea with light purple bg) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n    </div>\n    <cqa-custom-textarea\n      [value]=\"editDescription\"\n      (valueChange)=\"editDescription = $event\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      [enableMarkdown]=\"enableMarkdown\"\n      placeholder=\"Enter description...\"\n      textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n      class=\"cqa-w-full\">\n    </cqa-custom-textarea>\n  </div>\n\n  <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('status')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('priority')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('type')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n  </div>\n\n  <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n      <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n      <button\n        type=\"button\"\n        *ngIf=\"editLabels.length > 0\"\n        class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n        (click)=\"onClearAllLabels()\">\n        Clear All\n      </button>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n      <div\n        *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n        [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n        <span>{{ label }}</span>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          [style.color]=\"getLabelCloseIconColor(label)\"\n          (click)=\"onRemoveLabel(label)\"\n          [attr.aria-label]=\"'Remove ' + label\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <button\n          *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n          type=\"button\"\n          class=\"cqa-cursor-pointer\"\n          (click)=\"onAddFrequentLabel(label)\">\n          <cqa-badge\n            [label]=\"label\"\n            variant=\"default\"\n            size=\"small\"\n            backgroundColor=\"#E8E9FF\"\n            textColor=\"#3F43EE\"\n            borderColor=\"#E8E9FF\">\n          </cqa-badge>\n        </button>\n      </div>\n    </div>\n    <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n    <cqa-dynamic-select\n      [form]=\"editForm\"\n      [config]=\"labelsSelectConfig\"\n      (searchChange)=\"onSelectSearch($event)\"\n      (selectClick)=\"onSelectOpened('labels')\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n      class=\"cqa-w-full\">\n    </cqa-dynamic-select>\n  </div>\n  </div>\n\n\n  <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n    </div>\n\n    <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n      <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"executionExpanded = !executionExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataProfile')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataSet')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('videoRecording')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n        </div>\n      </div>\n      <!-- AI Configuration -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('defaultAiAction')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('useAiMetadata')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Waits & Retries-->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Retry Failed Steps\"\n              [value]=\"retryFailedSteps\"\n              (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n              placeholder=\"0\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n              Test Case Timeout (minutes)\n            </label>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n              <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n                <cqa-dropdown-button\n                  [options]=\"testCaseTimeoutModeOptions\"\n                  [selectedValue]=\"testCaseTimeoutMode\"\n                  (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n                </cqa-dropdown-button>\n              </div>\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <cqa-custom-input\n                  type=\"number\"\n                  [value]=\"testCaseTimeoutDisplayValue\"\n                  [disabled]=\"testCaseTimeoutMode === 'org'\"\n                  (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n                  placeholder=\"30\"\n                  [fullWidth]=\"true\"\n                  size=\"sm\">\n                </cqa-custom-input>\n              </div>\n            </div>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Wait Timeout for Locators (sec)\"\n              [value]=\"waitTimeoutLocators\"\n              (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n              placeholder=\"15\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"deviceExpanded = !deviceExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- Web only: mobile Device Settings hidden temporarily -->\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultBrowser')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- Viewport selector \u2014 replaces single dropdown -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151] cqa-leading-[18.2px]\">Viewport</span>\n            <cqa-radio-card-group\n              class=\"viewport-selector\"\n              [options]=\"viewportModeOptions\"\n              [ngModel]=\"viewportMode\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (ngModelChange)=\"onViewportModeChange($event)\">\n            </cqa-radio-card-group>\n            <div *ngIf=\"viewportMode === 'desktop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n              <cqa-dynamic-select\n                [form]=\"viewportDesktopDeviceForm\"\n                [config]=\"desktopViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"viewportMode === 'laptop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n              <cqa-dynamic-select\n                [form]=\"viewportLaptopDeviceForm\"\n                [config]=\"laptopViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"viewportMode === 'tablet'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n              <cqa-dynamic-select\n                [form]=\"viewportTabletDeviceForm\"\n                [config]=\"tabletViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"viewportMode === 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Device</span>\n              <cqa-dynamic-select\n                [form]=\"viewportMobileDeviceForm\"\n                [config]=\"mobileViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Key Flags -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n          </div>\n        </div>\n      </div>\n\n      \n      <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [captureHint]=\"apiMockingCaptureHint\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [renewHint]=\"apiMockingRenewHint\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\n        [storeMock]=\"editApiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [editing]=\"true\"\n        (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n        (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n        (configure)=\"configureApiMocking.emit()\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        [text]=\"'Cancel'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        *ngIf=\"!isSaving\"\n        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!hasUnsavedChanges\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n      <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n        <cqa-badge\n          label=\"Saving\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: RadioCardGroupComponent, selector: "cqa-radio-card-group", inputs: ["options", "wrap", "disabled"], outputs: ["selectionChange"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", isSaving: "isSaving", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText", orgLevelTestCaseTimeout: "orgLevelTestCaseTimeout", viewportCategoryOptions: "viewportCategoryOptions" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange", configureApiMocking: "configureApiMocking" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n  <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n  <!-- Description (Figma: document icon, textarea with light purple bg) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n    </div>\n    <cqa-custom-textarea\n      [value]=\"editDescription\"\n      (valueChange)=\"editDescription = $event\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      [enableMarkdown]=\"enableMarkdown\"\n      placeholder=\"Enter description...\"\n      textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n      class=\"cqa-w-full\">\n    </cqa-custom-textarea>\n  </div>\n\n  <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('status')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('priority')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('type')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n  </div>\n\n  <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n      <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n      <button\n        type=\"button\"\n        *ngIf=\"editLabels.length > 0\"\n        class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n        (click)=\"onClearAllLabels()\">\n        Clear All\n      </button>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n      <div\n        *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n        [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n        <span>{{ label }}</span>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          [style.color]=\"getLabelCloseIconColor(label)\"\n          (click)=\"onRemoveLabel(label)\"\n          [attr.aria-label]=\"'Remove ' + label\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <button\n          *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n          type=\"button\"\n          class=\"cqa-cursor-pointer\"\n          (click)=\"onAddFrequentLabel(label)\">\n          <cqa-badge\n            [label]=\"label\"\n            variant=\"default\"\n            size=\"small\"\n            backgroundColor=\"#E8E9FF\"\n            textColor=\"#3F43EE\"\n            borderColor=\"#E8E9FF\">\n          </cqa-badge>\n        </button>\n      </div>\n    </div>\n    <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n    <cqa-dynamic-select\n      [form]=\"editForm\"\n      [config]=\"labelsSelectConfig\"\n      (searchChange)=\"onSelectSearch($event)\"\n      (selectClick)=\"onSelectOpened('labels')\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n      class=\"cqa-w-full\">\n    </cqa-dynamic-select>\n  </div>\n  </div>\n\n\n  <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n    </div>\n\n    <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n      <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"executionExpanded = !executionExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataProfile')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataSet')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('videoRecording')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n        </div>\n      </div>\n      <!-- AI Configuration -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('defaultAiAction')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('useAiMetadata')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Waits & Retries-->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Retry Failed Steps\"\n              [value]=\"retryFailedSteps\"\n              (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n              placeholder=\"0\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n              Test Case Timeout (minutes)\n            </label>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n              <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n                <cqa-dropdown-button\n                  [options]=\"testCaseTimeoutModeOptions\"\n                  [selectedValue]=\"testCaseTimeoutMode\"\n                  (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n                </cqa-dropdown-button>\n              </div>\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <cqa-custom-input\n                  type=\"number\"\n                  [value]=\"testCaseTimeoutDisplayValue\"\n                  [disabled]=\"testCaseTimeoutMode === 'org'\"\n                  (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n                  placeholder=\"30\"\n                  [fullWidth]=\"true\"\n                  size=\"sm\">\n                </cqa-custom-input>\n              </div>\n            </div>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Wait Timeout for Locators (sec)\"\n              [value]=\"waitTimeoutLocators\"\n              (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n              placeholder=\"15\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"deviceExpanded = !deviceExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- Web only: mobile Device Settings hidden temporarily -->\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultBrowser')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- Viewport selector \u2014 replaces single dropdown -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151] cqa-leading-[18.2px]\">Viewport</span>\n            <cqa-radio-card-group\n              class=\"viewport-selector\"\n              [options]=\"viewportModeOptions\"\n              [ngModel]=\"viewportMode\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (ngModelChange)=\"onViewportModeChange($event)\">\n            </cqa-radio-card-group>\n            <div *ngIf=\"viewportMode === 'desktop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution <span class=\"cqa-text-[#EF4444]\">*</span></span>\n              <cqa-dynamic-select\n                [form]=\"viewportDesktopDeviceForm\"\n                [config]=\"desktopViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n              <div *ngIf=\"viewportDesktopDeviceForm.get('viewportDesktopDevice')?.touched && viewportDesktopDeviceForm.get('viewportDesktopDevice')?.hasError('required')\"\n                   class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-mt-1\">\n                Resolution is required.\n              </div>\n            </div>\n            <div *ngIf=\"viewportMode === 'laptop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution <span class=\"cqa-text-[#EF4444]\">*</span></span>\n              <cqa-dynamic-select\n                [form]=\"viewportLaptopDeviceForm\"\n                [config]=\"laptopViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n              <div *ngIf=\"viewportLaptopDeviceForm.get('viewportLaptopDevice')?.touched && viewportLaptopDeviceForm.get('viewportLaptopDevice')?.hasError('required')\"\n                   class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-mt-1\">\n                Resolution is required.\n              </div>\n            </div>\n            <div *ngIf=\"viewportMode === 'tablet'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution <span class=\"cqa-text-[#EF4444]\">*</span></span>\n              <cqa-dynamic-select\n                [form]=\"viewportTabletDeviceForm\"\n                [config]=\"tabletViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n              <div *ngIf=\"viewportTabletDeviceForm.get('viewportTabletDevice')?.touched && viewportTabletDeviceForm.get('viewportTabletDevice')?.hasError('required')\"\n                   class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-mt-1\">\n                Resolution is required.\n              </div>\n            </div>\n            <div *ngIf=\"viewportMode === 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Device <span class=\"cqa-text-[#EF4444]\">*</span></span>\n              <cqa-dynamic-select\n                [form]=\"viewportMobileDeviceForm\"\n                [config]=\"mobileViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n              <div *ngIf=\"viewportMobileDeviceForm.get('viewportMobileDevice')?.touched && viewportMobileDeviceForm.get('viewportMobileDevice')?.hasError('required')\"\n                   class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-mt-1\">\n                Device is required.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Key Flags -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n          </div>\n        </div>\n      </div>\n\n      \n      <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [captureHint]=\"apiMockingCaptureHint\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [renewHint]=\"apiMockingRenewHint\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\n        [storeMock]=\"editApiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [editing]=\"true\"\n        (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n        (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n        (configure)=\"configureApiMocking.emit()\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        [text]=\"'Cancel'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        *ngIf=\"!isSaving\"\n        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!hasUnsavedChanges\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n      <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n        <cqa-badge\n          label=\"Saving\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: RadioCardGroupComponent, selector: "cqa-radio-card-group", inputs: ["options", "wrap", "disabled"], outputs: ["selectionChange"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-details-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n  <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n  <!-- Description (Figma: document icon, textarea with light purple bg) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n    </div>\n    <cqa-custom-textarea\n      [value]=\"editDescription\"\n      (valueChange)=\"editDescription = $event\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      [enableMarkdown]=\"enableMarkdown\"\n      placeholder=\"Enter description...\"\n      textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n      class=\"cqa-w-full\">\n    </cqa-custom-textarea>\n  </div>\n\n  <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('status')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('priority')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('type')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n  </div>\n\n  <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n      <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n      <button\n        type=\"button\"\n        *ngIf=\"editLabels.length > 0\"\n        class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n        (click)=\"onClearAllLabels()\">\n        Clear All\n      </button>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n      <div\n        *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n        [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n        <span>{{ label }}</span>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          [style.color]=\"getLabelCloseIconColor(label)\"\n          (click)=\"onRemoveLabel(label)\"\n          [attr.aria-label]=\"'Remove ' + label\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <button\n          *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n          type=\"button\"\n          class=\"cqa-cursor-pointer\"\n          (click)=\"onAddFrequentLabel(label)\">\n          <cqa-badge\n            [label]=\"label\"\n            variant=\"default\"\n            size=\"small\"\n            backgroundColor=\"#E8E9FF\"\n            textColor=\"#3F43EE\"\n            borderColor=\"#E8E9FF\">\n          </cqa-badge>\n        </button>\n      </div>\n    </div>\n    <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n    <cqa-dynamic-select\n      [form]=\"editForm\"\n      [config]=\"labelsSelectConfig\"\n      (searchChange)=\"onSelectSearch($event)\"\n      (selectClick)=\"onSelectOpened('labels')\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n      class=\"cqa-w-full\">\n    </cqa-dynamic-select>\n  </div>\n  </div>\n\n\n  <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n    </div>\n\n    <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n      <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"executionExpanded = !executionExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataProfile')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataSet')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('videoRecording')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n        </div>\n      </div>\n      <!-- AI Configuration -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('defaultAiAction')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('useAiMetadata')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Waits & Retries-->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Retry Failed Steps\"\n              [value]=\"retryFailedSteps\"\n              (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n              placeholder=\"0\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n              Test Case Timeout (minutes)\n            </label>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n              <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n                <cqa-dropdown-button\n                  [options]=\"testCaseTimeoutModeOptions\"\n                  [selectedValue]=\"testCaseTimeoutMode\"\n                  (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n                </cqa-dropdown-button>\n              </div>\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <cqa-custom-input\n                  type=\"number\"\n                  [value]=\"testCaseTimeoutDisplayValue\"\n                  [disabled]=\"testCaseTimeoutMode === 'org'\"\n                  (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n                  placeholder=\"30\"\n                  [fullWidth]=\"true\"\n                  size=\"sm\">\n                </cqa-custom-input>\n              </div>\n            </div>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Wait Timeout for Locators (sec)\"\n              [value]=\"waitTimeoutLocators\"\n              (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n              placeholder=\"15\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"deviceExpanded = !deviceExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- Web only: mobile Device Settings hidden temporarily -->\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultBrowser')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- Viewport selector \u2014 replaces single dropdown -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151] cqa-leading-[18.2px]\">Viewport</span>\n            <cqa-radio-card-group\n              class=\"viewport-selector\"\n              [options]=\"viewportModeOptions\"\n              [ngModel]=\"viewportMode\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (ngModelChange)=\"onViewportModeChange($event)\">\n            </cqa-radio-card-group>\n            <div *ngIf=\"viewportMode === 'desktop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n              <cqa-dynamic-select\n                [form]=\"viewportDesktopDeviceForm\"\n                [config]=\"desktopViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"viewportMode === 'laptop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n              <cqa-dynamic-select\n                [form]=\"viewportLaptopDeviceForm\"\n                [config]=\"laptopViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"viewportMode === 'tablet'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n              <cqa-dynamic-select\n                [form]=\"viewportTabletDeviceForm\"\n                [config]=\"tabletViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"viewportMode === 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Device</span>\n              <cqa-dynamic-select\n                [form]=\"viewportMobileDeviceForm\"\n                [config]=\"mobileViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Key Flags -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n          </div>\n        </div>\n      </div>\n\n      \n      <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [captureHint]=\"apiMockingCaptureHint\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [renewHint]=\"apiMockingRenewHint\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\n        [storeMock]=\"editApiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [editing]=\"true\"\n        (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n        (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n        (configure)=\"configureApiMocking.emit()\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        [text]=\"'Cancel'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        *ngIf=\"!isSaving\"\n        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!hasUnsavedChanges\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n      <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n        <cqa-badge\n          label=\"Saving\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-test-case-details-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n  <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n  <!-- Description (Figma: document icon, textarea with light purple bg) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n    </div>\n    <cqa-custom-textarea\n      [value]=\"editDescription\"\n      (valueChange)=\"editDescription = $event\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      [enableMarkdown]=\"enableMarkdown\"\n      placeholder=\"Enter description...\"\n      textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n      class=\"cqa-w-full\">\n    </cqa-custom-textarea>\n  </div>\n\n  <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('status')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('priority')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n    <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n      <cqa-dynamic-select\n          [form]=\"editForm\"\n          [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n          (searchChange)=\"onSelectSearch($event)\"\n          (loadMore)=\"onSelectLoadMore($event)\"\n          (selectClick)=\"onSelectOpened('type')\"\n          (selectionChange)=\"onSelectionChange($event)\"\n          class=\"cqa-w-full\"></cqa-dynamic-select>\n    </div>\n  </div>\n\n  <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n      <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n      <button\n        type=\"button\"\n        *ngIf=\"editLabels.length > 0\"\n        class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n        (click)=\"onClearAllLabels()\">\n        Clear All\n      </button>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n      <div\n        *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n        [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n        <span>{{ label }}</span>\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          [style.color]=\"getLabelCloseIconColor(label)\"\n          (click)=\"onRemoveLabel(label)\"\n          [attr.aria-label]=\"'Remove ' + label\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n        </button>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <button\n          *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n          type=\"button\"\n          class=\"cqa-cursor-pointer\"\n          (click)=\"onAddFrequentLabel(label)\">\n          <cqa-badge\n            [label]=\"label\"\n            variant=\"default\"\n            size=\"small\"\n            backgroundColor=\"#E8E9FF\"\n            textColor=\"#3F43EE\"\n            borderColor=\"#E8E9FF\">\n          </cqa-badge>\n        </button>\n      </div>\n    </div>\n    <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n    <cqa-dynamic-select\n      [form]=\"editForm\"\n      [config]=\"labelsSelectConfig\"\n      (searchChange)=\"onSelectSearch($event)\"\n      (selectClick)=\"onSelectOpened('labels')\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n      class=\"cqa-w-full\">\n    </cqa-dynamic-select>\n  </div>\n  </div>\n\n\n  <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n      <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n        <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n      </div>\n      <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n    </div>\n\n    <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n      <!-- Execution -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"executionExpanded = !executionExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataProfile')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('testDataSet')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('videoRecording')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div> -->\n        </div>\n      </div>\n      <!-- AI Configuration -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('defaultAiAction')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n            [form]=\"editForm\"\n            [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n            (searchChange)=\"onSelectSearch($event)\"\n            (loadMore)=\"onSelectLoadMore($event)\"\n            (selectClick)=\"onSelectOpened('useAiMetadata')\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n        </div>\n      </div>\n      <!-- Waits & Retries-->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Retry Failed Steps\"\n              [value]=\"retryFailedSteps\"\n              (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n              placeholder=\"0\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n              Test Case Timeout (minutes)\n            </label>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n              <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n                <cqa-dropdown-button\n                  [options]=\"testCaseTimeoutModeOptions\"\n                  [selectedValue]=\"testCaseTimeoutMode\"\n                  (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n                </cqa-dropdown-button>\n              </div>\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <cqa-custom-input\n                  type=\"number\"\n                  [value]=\"testCaseTimeoutDisplayValue\"\n                  [disabled]=\"testCaseTimeoutMode === 'org'\"\n                  (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n                  placeholder=\"30\"\n                  [fullWidth]=\"true\"\n                  size=\"sm\">\n                </cqa-custom-input>\n              </div>\n            </div>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n            <cqa-custom-input\n              type=\"number\"\n              label=\"Wait Timeout for Locators (sec)\"\n              [value]=\"waitTimeoutLocators\"\n              (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n              placeholder=\"15\"\n              [fullWidth]=\"true\"\n              size=\"sm\"\n              labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n            </cqa-custom-input>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"deviceExpanded = !deviceExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n          <!-- Web only: mobile Device Settings hidden temporarily -->\n          <div class=\"cqa-min-w-0 cqa-w-full\">\n            <cqa-dynamic-select\n              [form]=\"editForm\"\n              [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n              (searchChange)=\"onSelectSearch($event)\"\n              (loadMore)=\"onSelectLoadMore($event)\"\n              (selectClick)=\"onSelectOpened('defaultBrowser')\"\n              (selectionChange)=\"onSelectionChange($event)\"\n              class=\"cqa-w-full\"></cqa-dynamic-select>\n          </div>\n          <!-- Viewport selector \u2014 replaces single dropdown -->\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151] cqa-leading-[18.2px]\">Viewport</span>\n            <cqa-radio-card-group\n              class=\"viewport-selector\"\n              [options]=\"viewportModeOptions\"\n              [ngModel]=\"viewportMode\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (ngModelChange)=\"onViewportModeChange($event)\">\n            </cqa-radio-card-group>\n            <div *ngIf=\"viewportMode === 'desktop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution <span class=\"cqa-text-[#EF4444]\">*</span></span>\n              <cqa-dynamic-select\n                [form]=\"viewportDesktopDeviceForm\"\n                [config]=\"desktopViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n              <div *ngIf=\"viewportDesktopDeviceForm.get('viewportDesktopDevice')?.touched && viewportDesktopDeviceForm.get('viewportDesktopDevice')?.hasError('required')\"\n                   class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-mt-1\">\n                Resolution is required.\n              </div>\n            </div>\n            <div *ngIf=\"viewportMode === 'laptop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution <span class=\"cqa-text-[#EF4444]\">*</span></span>\n              <cqa-dynamic-select\n                [form]=\"viewportLaptopDeviceForm\"\n                [config]=\"laptopViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n              <div *ngIf=\"viewportLaptopDeviceForm.get('viewportLaptopDevice')?.touched && viewportLaptopDeviceForm.get('viewportLaptopDevice')?.hasError('required')\"\n                   class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-mt-1\">\n                Resolution is required.\n              </div>\n            </div>\n            <div *ngIf=\"viewportMode === 'tablet'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution <span class=\"cqa-text-[#EF4444]\">*</span></span>\n              <cqa-dynamic-select\n                [form]=\"viewportTabletDeviceForm\"\n                [config]=\"tabletViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n              <div *ngIf=\"viewportTabletDeviceForm.get('viewportTabletDevice')?.touched && viewportTabletDeviceForm.get('viewportTabletDevice')?.hasError('required')\"\n                   class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-mt-1\">\n                Resolution is required.\n              </div>\n            </div>\n            <div *ngIf=\"viewportMode === 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Device <span class=\"cqa-text-[#EF4444]\">*</span></span>\n              <cqa-dynamic-select\n                [form]=\"viewportMobileDeviceForm\"\n                [config]=\"mobileViewportConfig\"\n                class=\"cqa-w-full\">\n              </cqa-dynamic-select>\n              <div *ngIf=\"viewportMobileDeviceForm.get('viewportMobileDevice')?.touched && viewportMobileDeviceForm.get('viewportMobileDevice')?.hasError('required')\"\n                   class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-mt-1\">\n                Device is required.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Key Flags -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n        <button\n          type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n          (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n              <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n            </div>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n          </div>\n          <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n            {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n          </mat-icon>\n        </button>\n        <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n            <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n            <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n          </div>\n        </div>\n      </div>\n\n      \n      <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n      <cqa-api-mocking-card\n        *ngIf=\"showApiMockingCard\"\n        style=\"width: 100%;\"\n        [title]=\"apiMockingTitle\"\n        [statusLabel]=\"apiMockingStatusLabel\"\n        [captureLabel]=\"apiMockingCaptureLabel\"\n        [captureHint]=\"apiMockingCaptureHint\"\n        [renewLabel]=\"apiMockingRenewLabel\"\n        [renewHint]=\"apiMockingRenewHint\"\n        [restoreMock]=\"editApiMockingRestoreMock\"\n        [storeMock]=\"editApiMockingStoreMock\"\n        [mockedApisCount]=\"apiMockingMockedApisCount\"\n        [totalApisCount]=\"apiMockingTotalApisCount\"\n        [progressPercent]=\"apiMockingProgressPercent\"\n        [showProgress]=\"apiMockingShowProgress\"\n        [summaryText]=\"apiMockingSummaryText\"\n        [percentText]=\"apiMockingPercentText\"\n        [editing]=\"true\"\n        (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n        (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n        (configure)=\"configureApiMocking.emit()\">\n      </cqa-api-mocking-card>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        [text]=\"'Cancel'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        *ngIf=\"!isSaving\"\n        variant=\"filled\"\n        [text]=\"'Save Changes'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!hasUnsavedChanges\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n      <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n        <cqa-badge\n          label=\"Saving\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { descriptionTitle: [{
                 type: Input
             }], descriptionContent: [{