@cqa-lib/cqa-ui 1.1.185 → 1.1.186

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

@@ -11271,6 +11271,8 @@ class MainStepCollapseComponent {
         this.viewStepsAsRedirect = false;
         /** When redirecting, open link in new tab. Default true */
         this.viewStepsOpenInNewTab = true;
+        /** Optional initial item id to expand (e.g. first failed prerequisite). When set and present in items, that item is expanded on load. */
+        this.initialExpandedItemId = null;
         this.viewSteps = new EventEmitter();
         this.headerButtonClick = new EventEmitter();
         this.expandedChange = new EventEmitter();
@@ -11279,11 +11281,25 @@ class MainStepCollapseComponent {
     }
     ngOnInit() {
         this.isExpanded = this.expanded;
+        this.applyInitialExpandedItemId();
     }
     ngOnChanges(changes) {
         if (changes['expanded']) {
             this.isExpanded = this.expanded;
         }
+        if (changes['initialExpandedItemId'] || changes['items']) {
+            this.applyInitialExpandedItemId();
+        }
+    }
+    applyInitialExpandedItemId() {
+        var _a;
+        if (this.initialExpandedItemId == null || !((_a = this.items) === null || _a === void 0 ? void 0 : _a.length)) {
+            return;
+        }
+        const match = this.items.find((item) => item.id == this.initialExpandedItemId);
+        if (match) {
+            this.expandedItemId = match.id;
+        }
     }
     toggle() {
         this.isExpanded = !this.isExpanded;
@@ -11335,7 +11351,7 @@ class MainStepCollapseComponent {
         this.viewSteps.emit(item);
     }
     isItemExpanded(itemId) {
-        return this.expandedItemId === itemId;
+        return this.expandedItemId == itemId;
     }
     getDisplayCount() {
         var _a;
@@ -11365,7 +11381,7 @@ class MainStepCollapseComponent {
     }
 }
 MainStepCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab" }, outputs: { viewSteps: "viewSteps", headerButtonClick: "headerButtonClick", expandedChange: "expandedChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n        {{ getDisplayCount() }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab", initialExpandedItemId: "initialExpandedItemId" }, outputs: { viewSteps: "viewSteps", headerButtonClick: "headerButtonClick", expandedChange: "expandedChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n        {{ getDisplayCount() }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-main-step-collapse', host: { class: 'cqa-ui-root' }, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n        {{ getDisplayCount() }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", styles: [] }]
@@ -11389,6 +11405,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], viewStepsOpenInNewTab: [{
                 type: Input
+            }], initialExpandedItemId: [{
+                type: Input
             }], itemContentTpl: [{
                 type: ContentChild,
                 args: ['itemContent', { read: TemplateRef }]
@@ -11459,7 +11477,6 @@ class SimulatorComponent {
         this.speedControlClickOutsideHandler = null;
         this.preloadVideoElement = null;
         this.preloadAllVideoElement = null;
-        this.targetGlobalTimeDuringSwitch = null;
         this.traceViewerLoading = false;
         this.traceViewerError = false;
         this.isCorrectDeviceFrameAvailable = false;
@@ -11593,6 +11610,9 @@ class SimulatorComponent {
     get isPlayerSwitching() {
         return this.playerState === 'switching';
     }
+    get shouldApplySmallHeightClasses() {
+        return typeof window !== 'undefined' && window.innerHeight < 600 && this.platformType === 'browser' && this.isLive;
+    }
     get effectiveBrowserViewPort() {
         const defaultViewport = { width: 1280, height: 720 };
         if (!this.browserViewPort) {
@@ -11740,52 +11760,12 @@ class SimulatorComponent {
             return;
         this.enqueueOperation(() => this.seekToTimeInternal(milliseconds));
     }
-    /**
-     * Seek to a global time on the combined timeline (converts to segment + local time)
-     */
-    seekToGlobalTime(globalTimeMs) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const total = this.totalDuration;
-            if (total <= 0)
-                return;
-            const clampedGlobal = Math.max(0, Math.min(globalTimeMs, total));
-            const boundaries = this.segmentBoundaries;
-            let segmentIndex = 0;
-            let segmentStart = 0;
-            for (let i = 0; i < boundaries.length; i++) {
-                if (clampedGlobal < boundaries[i]) {
-                    segmentIndex = i;
-                    segmentStart = i === 0 ? 0 : boundaries[i - 1];
-                    break;
-                }
-                segmentIndex = i;
-                segmentStart = i === 0 ? 0 : boundaries[i - 1];
-            }
-            if (boundaries.length > 0 && clampedGlobal >= boundaries[boundaries.length - 1]) {
-                segmentIndex = boundaries.length - 1;
-                segmentStart = segmentIndex === 0 ? 0 : boundaries[segmentIndex - 1];
-            }
-            const localTimeMs = clampedGlobal - segmentStart;
-            if (this.currentVideoIndex === segmentIndex) {
-                yield this.seekToTimeInternal(localTimeMs);
-                // Update progress after seek in same segment
-                if (this.totalDuration > 0) {
-                    this.progress = Math.min(100, Math.max(0, (this.globalCurrentTime / this.totalDuration) * 100));
-                }
-            }
-            else {
-                const cumulativeTimestamp = segmentStart + localTimeMs;
-                yield this.switchToVideoAndSeekInternal(cumulativeTimestamp);
-                // Progress is already updated inside switchToVideoAndSeekInternal
-            }
-        });
-    }
     /**
      * Seek video internal implementation (no enqueue - called from queue)
      * This prevents pipeline read errors during rapid seek operations
      */
     seekToTimeInternal(milliseconds) {
-        var _a;
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
             if (!video || !video.duration)
@@ -11812,11 +11792,13 @@ class SimulatorComponent {
             this.lastSetDuration = milliseconds;
             // Wait briefly for seek to complete (prevents rapid seek issues)
             yield new Promise(resolve => setTimeout(resolve, 50));
-            const total = this.totalDuration;
-            if (total > 0) {
-                this.progress = Math.min(100, Math.max(0, (this.globalCurrentTime / total) * 100));
+            // Per-video progress (0-100% of current video)
+            const durationMs = video.duration * 1000;
+            if (durationMs > 0) {
+                this.progress = Math.min(100, Math.max(0, (video.currentTime * 1000 / durationMs) * 100));
             }
-            this.videoTimeUpdate.emit(this.globalCurrentTime);
+            const segmentStart = this.currentVideoIndex === 0 ? 0 : ((_b = this.segmentBoundaries[this.currentVideoIndex - 1]) !== null && _b !== void 0 ? _b : 0);
+            this.videoTimeUpdate.emit(segmentStart + video.currentTime * 1000);
             // Set to paused state (user must explicitly play)
             this.playerState = 'paused';
             console.log('[Simulator] seekToTimeInternal: seek complete', {
@@ -11902,7 +11884,7 @@ class SimulatorComponent {
      * This eliminates FFmpegDemuxer errors and play promise interruptions
      */
     playVideoInternal() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function* () {
             const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
             if (!video) {
@@ -11914,91 +11896,6 @@ class SimulatorComponent {
                 console.log('[Simulator] playVideoInternal: already playing, skipping');
                 return;
             }
-            if (this.hasMultipleVideos && this.videoUrls) {
-                const total = this.totalDuration;
-                const currentGlobalTime = this.globalCurrentTime;
-                const isAtEnd = total > 0 && (this.progress >= 100 || currentGlobalTime >= total);
-                const isLastVideo = this.currentVideoIndex >= this.videoUrls.length - 1;
-                const isLastVideoAtEnd = isLastVideo && video.duration && video.currentTime >= video.duration - 0.1;
-                if (isAtEnd || isLastVideoAtEnd) {
-                    console.log('[Simulator] playVideoInternal: all videos completed, resetting to first video', {
-                        progress: this.progress,
-                        currentGlobalTime,
-                        total,
-                        currentVideoIndex: this.currentVideoIndex,
-                        isAtEnd,
-                        isLastVideoAtEnd
-                    });
-                    // Reset to first video at 0 progress
-                    this.currentVideoIndex = 0;
-                    this.progress = 0;
-                    this.targetGlobalTimeDuringSwitch = 0;
-                    this.hitMarkers.clear();
-                    // Switch to first video and seek to 0
-                    yield this.switchToVideoAndSeekInternal(0);
-                    // Update video reference after switch
-                    const videoAfterSwitch = (_b = this.vplayer) === null || _b === void 0 ? void 0 : _b.nativeElement;
-                    if (!videoAfterSwitch) {
-                        console.error('[Simulator] playVideoInternal: video element not found after switch');
-                        return;
-                    }
-                    // Continue with normal play logic below
-                    // The video element reference has changed, so we'll use videoAfterSwitch
-                    // But we need to wait for metadata again
-                    if (videoAfterSwitch.readyState < HTMLMediaElement.HAVE_METADATA) {
-                        yield new Promise((resolve, reject) => {
-                            const onLoadedMetadata = () => {
-                                videoAfterSwitch.removeEventListener('loadedmetadata', onLoadedMetadata);
-                                videoAfterSwitch.removeEventListener('error', onError);
-                                resolve();
-                            };
-                            const onError = () => {
-                                videoAfterSwitch.removeEventListener('loadedmetadata', onLoadedMetadata);
-                                videoAfterSwitch.removeEventListener('error', onError);
-                                reject(new Error('Failed to load video metadata'));
-                            };
-                            videoAfterSwitch.addEventListener('loadedmetadata', onLoadedMetadata, { once: true });
-                            videoAfterSwitch.addEventListener('error', onError, { once: true });
-                            setTimeout(() => {
-                                videoAfterSwitch.removeEventListener('loadedmetadata', onLoadedMetadata);
-                                videoAfterSwitch.removeEventListener('error', onError);
-                                if (videoAfterSwitch.readyState >= HTMLMediaElement.HAVE_METADATA) {
-                                    resolve();
-                                }
-                                else {
-                                    reject(new Error('Timeout waiting for metadata'));
-                                }
-                            }, 500);
-                        });
-                    }
-                    // Set state to loading
-                    this.playerState = 'loading';
-                    try {
-                        yield videoAfterSwitch.play();
-                        this.playerState = 'playing';
-                        this.isPlaying = true;
-                        this.playPromise = null;
-                        this.videoPlay.emit();
-                        this.isVideoPlayingChange.emit(true);
-                        this.targetGlobalTimeDuringSwitch = null;
-                        console.log('[Simulator] playVideoInternal: restarted from first video');
-                        return;
-                    }
-                    catch (err) {
-                        this.playerState = 'error';
-                        this.isPlaying = false;
-                        this.playPromise = null;
-                        this.isVideoPlayingChange.emit(false);
-                        if (err.name === 'AbortError') {
-                            this.playerState = 'paused';
-                        }
-                        else {
-                            console.error('[Simulator] playVideoInternal: failed after reset', err);
-                        }
-                        return;
-                    }
-                }
-            }
             console.log('[Simulator] playVideoInternal: starting', {
                 playerState: this.playerState,
                 currentTime: video.currentTime,
@@ -12020,17 +11917,6 @@ class SimulatorComponent {
                     };
                     video.addEventListener('loadedmetadata', onLoadedMetadata, { once: true });
                     video.addEventListener('error', onError, { once: true });
-                    // Timeout fallback
-                    setTimeout(() => {
-                        video.removeEventListener('loadedmetadata', onLoadedMetadata);
-                        video.removeEventListener('error', onError);
-                        if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
-                            resolve();
-                        }
-                        else {
-                            reject(new Error('Timeout waiting for metadata'));
-                        }
-                    }, 500);
                 });
             }
             // Clear hit markers if starting from beginning
@@ -12042,7 +11928,7 @@ class SimulatorComponent {
             this.playerState = 'loading';
             try {
                 // Verify video element is still available before playing
-                const currentVideo = (_c = this.vplayer) === null || _c === void 0 ? void 0 : _c.nativeElement;
+                const currentVideo = (_b = this.vplayer) === null || _b === void 0 ? void 0 : _b.nativeElement;
                 if (!currentVideo || currentVideo !== video) {
                     console.warn('[Simulator] playVideoInternal: video element changed or unavailable');
                     this.playerState = 'paused';
@@ -12053,7 +11939,7 @@ class SimulatorComponent {
                 // Await play promise - this is critical
                 yield video.play();
                 // Verify video element is still available after play promise resolves
-                const videoAfterPlay = (_d = this.vplayer) === null || _d === void 0 ? void 0 : _d.nativeElement;
+                const videoAfterPlay = (_c = this.vplayer) === null || _c === void 0 ? void 0 : _c.nativeElement;
                 if (!videoAfterPlay || videoAfterPlay !== video) {
                     console.warn('[Simulator] playVideoInternal: video element changed during play');
                     this.playerState = 'paused';
@@ -12071,17 +11957,19 @@ class SimulatorComponent {
                     currentTime: video.currentTime,
                     playerState: this.playerState
                 });
-                // Check early markers (non-blocking, doesn't need to be queued)
                 setTimeout(() => {
-                    if (this.isPlaying) {
-                        this.checkMarkerHit(this.globalCurrentTime);
+                    var _a, _b;
+                    if (this.isPlaying && ((_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+                        const v = this.vplayer.nativeElement;
+                        const segmentStart = this.currentVideoIndex === 0 ? 0 : ((_b = this.segmentBoundaries[this.currentVideoIndex - 1]) !== null && _b !== void 0 ? _b : 0);
+                        this.checkMarkerHit(segmentStart + v.currentTime * 1000);
                     }
                 }, 50);
             }
             catch (err) {
                 // Play failed
                 // Check if video element is still available
-                const videoAfterError = (_e = this.vplayer) === null || _e === void 0 ? void 0 : _e.nativeElement;
+                const videoAfterError = (_d = this.vplayer) === null || _d === void 0 ? void 0 : _d.nativeElement;
                 if (!videoAfterError || videoAfterError !== video) {
                     console.warn('[Simulator] playVideoInternal: video element changed during error');
                     this.playerState = 'paused';
@@ -12186,39 +12074,90 @@ class SimulatorComponent {
         }
         return [];
     }
-    get globalCurrentTime() {
-        var _a, _b;
-        if (this.targetGlobalTimeDuringSwitch !== null && !this.isPlaying && this.playerState !== 'playing') {
-            return this.targetGlobalTimeDuringSwitch;
+    get currentVideoMarkers() {
+        let markersToProcess;
+        if (!this.hasMultipleVideos) {
+            markersToProcess = this.stepMarkers;
         }
-        const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
-        if (!(video === null || video === void 0 ? void 0 : video.duration) || !isFinite(video.duration)) {
-            // Fallback to override if video not ready yet
-            if (this.targetGlobalTimeDuringSwitch !== null) {
-                return this.targetGlobalTimeDuringSwitch;
+        else {
+            const boundaries = this.getVideoDurationBoundaries();
+            if (boundaries.length === 0 || this.currentVideoIndex >= boundaries.length) {
+                markersToProcess = this.stepMarkers;
             }
-            return 0;
+            else {
+                const currentBoundary = boundaries[this.currentVideoIndex];
+                markersToProcess = this.stepMarkers
+                    .filter(marker => {
+                    return marker.cumulativeDuration >= currentBoundary.start &&
+                        marker.cumulativeDuration < currentBoundary.end;
+                })
+                    .map(marker => this.adjustChildStepsDuration(marker, currentBoundary.start, currentBoundary.start, currentBoundary.end));
+            }
+        }
+        return this.flattenMarkers(markersToProcess);
+    }
+    adjustChildStepsDuration(marker, adjustment, videoStart, videoEnd) {
+        const adjustedMarker = Object.assign(Object.assign({}, marker), { cumulativeDuration: marker.cumulativeDuration - adjustment });
+        if (marker.childSteps && marker.childSteps.length > 0) {
+            adjustedMarker.childSteps = marker.childSteps
+                .filter(child => child.cumulativeDuration >= videoStart && child.cumulativeDuration < videoEnd)
+                .map(child => {
+                const adjustedChild = Object.assign(Object.assign({}, child), { cumulativeDuration: child.cumulativeDuration - adjustment });
+                if (child.childSteps && child.childSteps.length > 0) {
+                    adjustedChild.childSteps = child.childSteps
+                        .filter(nestedChild => nestedChild.cumulativeDuration >= videoStart && nestedChild.cumulativeDuration < videoEnd)
+                        .map(nestedChild => this.adjustChildStepsDuration(nestedChild, adjustment, videoStart, videoEnd));
+                }
+                return adjustedChild;
+            });
         }
-        const segmentStart = this.currentVideoIndex === 0 ? 0 : ((_b = this.segmentBoundaries[this.currentVideoIndex - 1]) !== null && _b !== void 0 ? _b : 0);
-        return segmentStart + video.currentTime * 1000;
+        return adjustedMarker;
     }
-    getActualGlobalTime() {
-        var _a, _b;
+    getStepLeftPosition(step) {
+        var _a;
         const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
-        if (!(video === null || video === void 0 ? void 0 : video.duration) || !isFinite(video.duration))
+        if (!(video === null || video === void 0 ? void 0 : video.duration))
             return 0;
-        const segmentStart = this.currentVideoIndex === 0 ? 0 : ((_b = this.segmentBoundaries[this.currentVideoIndex - 1]) !== null && _b !== void 0 ? _b : 0);
-        return segmentStart + video.currentTime * 1000;
+        const durationMs = video.duration * 1000;
+        return (step.cumulativeDuration / durationMs) * 100;
     }
-    /** Global step markers for rendering on the combined timeline */
-    get globalStepMarkers() {
-        const allMarkers = this.flattenMarkers(this.stepMarkers);
-        return allMarkers.map(m => ({
-            globalTime: m.cumulativeDuration,
-            result: m.result,
-            testStepId: m.testStepId,
-            title: m.title,
-            level: m.level
+    getStepColor(step) {
+        return step.level === 1 ? '#000000' : '#6366F1';
+    }
+    getStepResultColor(step) {
+        return this.getGlobalMarkerResultColor(step.result);
+    }
+    getGlobalMarkerColor(level) {
+        return level === 1 ? '#000000' : '#FFA500';
+    }
+    getGlobalMarkerResultColor(result) {
+        switch (result) {
+            case 'SUCCESS':
+                return '#12B76A';
+            case 'FAILURE':
+                return '#B91C1C';
+            case 'ABORTED':
+                return '#F79009';
+            case 'SKIPPED':
+                return '#667085';
+            default:
+                return '#6366F1';
+        }
+    }
+    onMarkerClick(event, marker) {
+        var _a;
+        event.stopPropagation();
+        event.preventDefault();
+        const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        if (!(video === null || video === void 0 ? void 0 : video.duration))
+            return;
+        const targetTimeMs = marker.cumulativeDuration;
+        this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.seekToTimeInternal(targetTimeMs);
+            if (marker.testStepId != null) {
+                this.hitMarkers.add(marker.testStepId);
+                this.markerHit.emit(marker);
+            }
         }));
     }
     get currentVideoUrl() {
@@ -12260,37 +12199,35 @@ class SimulatorComponent {
         if (!this.hasMultipleVideos)
             return;
         if (this.currentVideoIndex > 0) {
-            this.currentVideoIndex -= 1;
-            this.resetVideoState();
+            this.enqueueOperation(() => this.switchToVideoAndResetInternal(this.currentVideoIndex - 1));
         }
     }
     nextVideo() {
         if (!this.hasMultipleVideos)
             return;
         if (this.videoUrls && this.currentVideoIndex < this.videoUrls.length - 1) {
-            this.currentVideoIndex += 1;
-            this.resetVideoState();
+            this.enqueueOperation(() => this.switchToVideoAndResetInternal(this.currentVideoIndex + 1));
         }
     }
     onTimelineClick(event) {
-        var _a;
-        if (!((_a = this.timelineBar) === null || _a === void 0 ? void 0 : _a.nativeElement))
+        var _a, _b;
+        if (!((_a = this.timelineBar) === null || _a === void 0 ? void 0 : _a.nativeElement) || !((_b = this.vplayer) === null || _b === void 0 ? void 0 : _b.nativeElement))
+            return;
+        const video = this.vplayer.nativeElement;
+        if (!video.duration || !isFinite(video.duration))
             return;
         const rect = this.timelineBar.nativeElement.getBoundingClientRect();
         const clickX = event.clientX - rect.left;
         const percent = Math.max(0, Math.min(1, clickX / rect.width));
-        const total = this.totalDuration;
-        if (total <= 0)
-            return;
-        const globalTimeMs = percent * total;
+        const targetTimeMs = percent * video.duration * 1000;
         const shouldResumePlaying = this.isPlaying;
         console.log('[Simulator] onTimelineClick', {
             percent,
-            globalTimeMs,
+            targetTimeMs,
             shouldResumePlaying
         });
         this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
-            yield this.seekToGlobalTime(globalTimeMs);
+            yield this.seekToTimeInternal(targetTimeMs);
             if (shouldResumePlaying) {
                 yield new Promise(resolve => setTimeout(resolve, 100));
                 yield this.playVideoInternal();
@@ -12325,11 +12262,11 @@ class SimulatorComponent {
         this.progress = percent * 100; // Global timeline position
     }
     stopDrag() {
+        var _a;
         if (!this.dragging)
             return;
         this.dragging = false;
         this.removeDragListeners();
-        // CRITICAL: Capture the playing state BEFORE any async operations
         const shouldResumePlaying = this.wasPlayingBeforeDrag;
         console.log('[Simulator] stopDrag: drag ended', {
             progress: this.progress,
@@ -12337,19 +12274,15 @@ class SimulatorComponent {
             shouldResumePlaying: shouldResumePlaying,
             currentPlayerState: this.playerState
         });
-        const total = this.totalDuration;
-        if (total <= 0)
+        const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        if (!video || !video.duration || !isFinite(video.duration))
             return;
-        const globalTimeMs = (this.progress / 100) * total;
-        // CRITICAL FIX: Queue both seek and resume play together
-        // This ensures seek completes before attempting to play
+        const targetTimeMs = (this.progress / 100) * video.duration * 1000;
         this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
-            // Perform seek (this will pause the video)
-            yield this.seekToGlobalTime(globalTimeMs);
-            // If video was playing before drag, resume it
+            yield this.seekToTimeInternal(targetTimeMs);
             if (shouldResumePlaying) {
                 console.log('[Simulator] stopDrag: resuming playback after seek', {
-                    globalTimeMs,
+                    targetTimeMs,
                     playerState: this.playerState
                 });
                 // Wait a bit longer to ensure seek is fully complete
@@ -12415,19 +12348,18 @@ class SimulatorComponent {
         this.attachVideoListeners();
     }
     onVideoEnded() {
-        var _a;
         this.isPlaying = false;
         this.playerState = 'paused';
         this.videoPause.emit();
         this.isVideoPlayingChange.emit(false);
-        // Seamlessly load and play next segment
+        // Switch to next video and reset to 0
         if (this.hasMultipleVideos && this.videoUrls && this.currentVideoIndex < this.videoUrls.length - 1) {
-            const nextIndex = this.currentVideoIndex + 1;
-            const segmentStart = nextIndex === 0 ? 0 : ((_a = this.segmentBoundaries[nextIndex - 1]) !== null && _a !== void 0 ? _a : 0);
+            this.currentVideoIndex += 1;
             this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
-                var _b;
-                yield this.switchToVideoAndSeekInternal(segmentStart);
-                if (((_b = this.vplayer) === null || _b === void 0 ? void 0 : _b.nativeElement) && this.currentVideoUrl) {
+                var _a;
+                yield this.resetVideoStateInternal();
+                yield new Promise(resolve => setTimeout(resolve, 100));
+                if (((_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement) && this.currentVideoUrl) {
                     yield this.playVideoInternal();
                 }
             }));
@@ -12445,30 +12377,22 @@ class SimulatorComponent {
                 return;
             let lastUpdate = 0;
             const handler = () => {
+                var _a;
                 const now = Date.now();
                 if (now - lastUpdate < 100)
                     return;
                 lastUpdate = now;
                 const currentMs = video.currentTime * 1000;
                 if (!this.dragging && this.playerState !== 'switching') {
-                    const total = this.totalDuration;
-                    // Clear targetGlobalTimeDuringSwitch if we've reached the target position
-                    // When playing, be more aggressive about clearing to allow live updates
-                    if (this.targetGlobalTimeDuringSwitch !== null) {
-                        const currentGlobal = this.getActualGlobalTime();
-                        const tolerance = this.isPlaying ? 1000 : 500; // More tolerance when playing
-                        if (Math.abs(currentGlobal - this.targetGlobalTimeDuringSwitch) < tolerance) {
-                            this.targetGlobalTimeDuringSwitch = null;
-                        }
-                    }
-                    // globalCurrentTime now handles override logic - use it directly
-                    if (total > 0) {
-                        this.progress = Math.min(100, Math.max(0, (this.globalCurrentTime / total) * 100));
+                    // Per-video progress (0-100% of current video)
+                    const durationMs = video.duration * 1000;
+                    if (durationMs > 0) {
+                        this.progress = Math.min(100, Math.max(0, (currentMs / durationMs) * 100));
                     }
-                    this.videoTimeUpdate.emit(this.globalCurrentTime);
-                    // Check if current time hits any marker
-                    this.checkMarkerHit(this.globalCurrentTime);
-                    // Preload next segment when ~5-10 seconds from ending
+                    // Emit cumulative time for parent (step highlighting)
+                    const segmentStart = this.currentVideoIndex === 0 ? 0 : ((_a = this.segmentBoundaries[this.currentVideoIndex - 1]) !== null && _a !== void 0 ? _a : 0);
+                    this.videoTimeUpdate.emit(segmentStart + currentMs);
+                    this.checkMarkerHit(segmentStart + currentMs);
                     this.maybePreloadNextSegment();
                 }
             };
@@ -12672,48 +12596,10 @@ class SimulatorComponent {
                 // Mark as hit and emit event
                 this.hitMarkers.add(marker.testStepId);
                 this.markerHit.emit(marker);
-                console.log('[Simulator] Marker hit detected', {
-                    testStepId: marker.testStepId,
-                    cumulativeDuration: marker.cumulativeDuration,
-                    currentTime: globalTimeMs,
-                    timeDifference,
-                    title: marker.title,
-                    level: marker.level
-                });
                 break; // Only emit one marker per check
             }
         }
     }
-    getGlobalMarkerResultColor(result) {
-        switch (result) {
-            case 'SUCCESS':
-                return '#12B76A';
-            case 'FAILURE':
-                return '#B91C1C';
-            case 'ABORTED':
-                return '#F79009';
-            case 'SKIPPED':
-                return '#667085';
-            default:
-                return '#6366F1';
-        }
-    }
-    getGlobalMarkerColor(level) {
-        return level === 1 ? '#000000' : '#FFA500';
-    }
-    onMarkerClick(event, marker) {
-        event.stopPropagation();
-        event.preventDefault();
-        this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
-            yield this.seekToGlobalTime(marker.globalTime);
-            if (marker.testStepId != null) {
-                this.hitMarkers.add(marker.testStepId);
-                const fullMarker = this.flattenMarkers(this.stepMarkers).find(m => m.testStepId === marker.testStepId);
-                if (fullMarker)
-                    this.markerHit.emit(fullMarker);
-            }
-        }));
-    }
     toggleFullScreen() {
         var _a, _b;
         const wasPlaying = this.isPlaying;
@@ -12769,20 +12655,15 @@ class SimulatorComponent {
     }
     onSegmentChange(value) {
         this.currentView = value;
-        // Pause video when switching away from video view
         if (this.currentView !== 'video') {
             this.pauseVideo();
             this.progress = 0;
         }
         else {
-            // Reset everything when switching back to video view
             this.enqueueOperation(() => __awaiter(this, void 0, void 0, function* () {
                 yield this.resetVideoStateInternal();
-                // If multiple videos, reset to first video
                 if (this.hasMultipleVideos && this.videoUrls) {
                     this.currentVideoIndex = 0;
-                    this.targetGlobalTimeDuringSwitch = 0;
-                    // Switch to first video and seek to 0
                     yield this.switchToVideoAndSeekInternal(0);
                 }
             }));
@@ -12980,6 +12861,66 @@ class SimulatorComponent {
         }
         return null;
     }
+    switchToVideoAndResetInternal(targetVideoIndex) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (!video || !this.videoUrls || targetVideoIndex < 0 || targetVideoIndex >= this.videoUrls.length) {
+                return;
+            }
+            if (this.currentVideoIndex === targetVideoIndex) {
+                yield this.resetVideoStateInternal();
+                return;
+            }
+            this.playerState = 'switching';
+            try {
+                video.pause();
+                this.isPlaying = false;
+                this.playPromise = null;
+                this.videoPause.emit();
+                this.isVideoPlayingChange.emit(false);
+                this.currentVideoIndex = targetVideoIndex;
+                yield new Promise((resolve, reject) => {
+                    let resolved = false;
+                    const cleanup = () => {
+                        if (resolved)
+                            return;
+                        resolved = true;
+                        video.removeEventListener('loadedmetadata', onLoadedMetadata);
+                        video.removeEventListener('error', onError);
+                    };
+                    const onLoadedMetadata = () => {
+                        cleanup();
+                        resolve();
+                    };
+                    const onError = () => {
+                        cleanup();
+                        reject(new Error('Failed to load video'));
+                    };
+                    setTimeout(() => {
+                        if (resolved)
+                            return;
+                        video.addEventListener('loadedmetadata', onLoadedMetadata, { once: true });
+                        video.addEventListener('error', onError, { once: true });
+                    }, 100);
+                });
+                video.currentTime = 0;
+                this.progress = 0;
+                this.playPromise = null;
+                this.hitMarkers.clear();
+                this.lastSetDuration = -1;
+                const segmentStart = targetVideoIndex === 0 ? 0 : ((_b = this.segmentBoundaries[targetVideoIndex - 1]) !== null && _b !== void 0 ? _b : 0);
+                this.videoTimeUpdate.emit(segmentStart);
+            }
+            catch (err) {
+                console.error('[Simulator] switchToVideoAndReset failed:', err);
+                this.progress = 0;
+            }
+            finally {
+                this.playerState = 'paused';
+            }
+        });
+    }
     switchToVideoAndSeek(cumulativeTimestamp) {
         this.enqueueOperation(() => this.switchToVideoAndSeekInternal(cumulativeTimestamp));
     }
@@ -13006,20 +12947,13 @@ class SimulatorComponent {
             const video = (_a = this.vplayer) === null || _a === void 0 ? void 0 : _a.nativeElement;
             if (!video)
                 return;
-            const total = this.totalDuration;
-            this.targetGlobalTimeDuringSwitch = cumulativeTimestamp;
-            if (total > 0) {
-                this.progress = Math.min(100, Math.max(0, (cumulativeTimestamp / total) * 100));
-            }
             this.playerState = 'switching';
             try {
-                // CRITICAL: Pause before switching source
                 video.pause();
                 this.isPlaying = false;
                 this.playPromise = null;
                 this.videoPause.emit();
                 this.isVideoPlayingChange.emit(false);
-                // Switch video source
                 this.currentVideoIndex = targetVideoIndex;
                 yield new Promise((resolve, reject) => {
                     let resolved = false;
@@ -13029,20 +12963,13 @@ class SimulatorComponent {
                         resolved = true;
                         video.removeEventListener('loadedmetadata', onLoadedMetadata);
                         video.removeEventListener('error', onError);
-                        clearTimeout(timeoutId);
                     };
                     const onLoadedMetadata = () => {
                         cleanup();
-                        console.log('[Simulator] switchToVideoAndSeek: loadedmetadata', {
-                            readyState: video.readyState,
-                            duration: video.duration,
-                            currentTime: video.currentTime
-                        });
                         resolve();
                     };
                     const onError = () => {
                         cleanup();
-                        console.error('[Simulator] switchToVideoAndSeek: video error');
                         reject(new Error('Failed to load video'));
                     };
                     setTimeout(() => {
@@ -13051,121 +12978,51 @@ class SimulatorComponent {
                         video.addEventListener('loadedmetadata', onLoadedMetadata, { once: true });
                         video.addEventListener('error', onError, { once: true });
                     }, 100);
-                    const timeoutId = setTimeout(() => {
-                        cleanup();
-                        if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
-                            console.log('[Simulator] switchToVideoAndSeek: metadata timeout but video ready', {
-                                readyState: video.readyState,
-                                duration: video.duration
-                            });
-                            resolve();
-                        }
-                        else {
-                            console.error('[Simulator] switchToVideoAndSeek: metadata timeout and video not ready');
-                            reject(new Error('Timeout waiting for video to load'));
-                        }
-                    }, 2000);
                 });
-                // Seek to the target position using 'seeked' event for reliability
                 const seekSeconds = relativeTimestamp / 1000;
                 const targetTime = Math.max(0, Math.min(seekSeconds, video.duration || seekSeconds));
-                console.log('[Simulator] switchToVideoAndSeek: setting currentTime', {
-                    targetTime,
-                    seekSeconds,
-                    relativeTimestamp,
-                    videoDuration: video.duration
-                });
                 yield new Promise((resolve) => {
-                    let resolved = false;
                     const onSeeked = () => {
-                        if (resolved)
-                            return;
-                        resolved = true;
                         video.removeEventListener('seeked', onSeeked);
                         clearTimeout(timeoutId);
-                        console.log('[Simulator] switchToVideoAndSeek: seeked event fired', {
-                            currentTime: video.currentTime,
-                            targetTime,
-                            diff: Math.abs(video.currentTime - targetTime)
-                        });
-                        // Small delay to ensure browser has processed the seek
                         setTimeout(() => resolve(), 100);
                     };
                     video.addEventListener('seeked', onSeeked, { once: true });
                     video.currentTime = targetTime;
-                    // Fallback timeout
                     const timeoutId = setTimeout(() => {
-                        if (resolved)
-                            return;
-                        resolved = true;
                         video.removeEventListener('seeked', onSeeked);
-                        console.log('[Simulator] switchToVideoAndSeek: seeked timeout, current time is', video.currentTime);
                         resolve();
                     }, 1000);
                 });
                 this.lastSetDuration = cumulativeTimestamp;
-                // Double-check: if video is not at target, force it again
                 if (Math.abs(video.currentTime - targetTime) > 0.5) {
-                    console.warn('[Simulator] switchToVideoAndSeek: video not at target after seeked, forcing again', {
-                        currentTime: video.currentTime,
-                        targetTime
-                    });
                     video.currentTime = targetTime;
                     yield new Promise(resolve => setTimeout(resolve, 200));
                 }
-                // Verify seek completed
-                const actualGlobal = this.getActualGlobalTime();
-                const actualVideoTime = video.currentTime;
-                console.log('[Simulator] switchToVideoAndSeek: seek verification', {
-                    actualGlobal,
-                    targetGlobal: cumulativeTimestamp,
-                    diff: Math.abs(actualGlobal - cumulativeTimestamp),
-                    actualVideoTime,
-                    targetVideoTime: targetTime,
-                    videoDiff: Math.abs(actualVideoTime - targetTime)
-                });
-                // Clear override only if video is actually at the target
-                const tolerance = 500;
-                if (Math.abs(actualGlobal - cumulativeTimestamp) < tolerance) {
-                    this.targetGlobalTimeDuringSwitch = null;
-                    console.log('[Simulator] switchToVideoAndSeek: cleared override - video at target');
+                // Per-video progress
+                const durationMs = video.duration * 1000;
+                if (durationMs > 0) {
+                    this.progress = Math.min(100, Math.max(0, (video.currentTime * 1000 / durationMs) * 100));
                 }
-                // Update UI with actual current position
-                if (total > 0) {
-                    this.progress = Math.min(100, Math.max(0, (this.globalCurrentTime / total) * 100));
-                }
-                this.videoTimeUpdate.emit(this.globalCurrentTime);
+                this.videoTimeUpdate.emit(cumulativeTimestamp);
             }
             catch (err) {
                 console.error('[Simulator] switchToVideoAndSeek failed:', err);
-                // Even on error, try to update to target position
-                if (total > 0) {
-                    this.progress = Math.min(100, Math.max(0, (cumulativeTimestamp / total) * 100));
-                }
+                this.progress = 0;
                 this.videoTimeUpdate.emit(cumulativeTimestamp);
             }
             finally {
                 this.playerState = 'paused';
                 this.hitMarkers.clear();
-                // Don't clear targetGlobalTimeDuringSwitch here - it's either already cleared
-                // or will be cleared by timeupdate handler when video reaches target
-            }
-            console.log('[Simulator] switchToVideoAndSeek: complete', {
-                currentVideoIndex: this.currentVideoIndex,
-                videoCurrentTime: video.currentTime,
-                globalCurrentTime: this.globalCurrentTime,
-                targetGlobalTimeDuringSwitch: this.targetGlobalTimeDuringSwitch,
-                playerState: this.playerState,
-                progress: this.progress
-            });
+            }
         });
     }
 }
 SimulatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SimulatorComponent, deps: [{ token: i1$1.DomSanitizer }], 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" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange" }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBarRef", first: true, predicate: ["timelineBar"], descendants: true }, { propertyName: "speedControlContainerRef", first: true, predicate: ["speedControlContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === '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=\"platformType === '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=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <ng-container *ngIf=\"hasDeviceFrame;\">\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\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-full cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-min-w-max': platformType === '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-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\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      </ng-container>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-83px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\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': platformType === 'browser', 'cqa-min-w-max': platformType === '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': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\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          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(globalCurrentTime / 1000) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div \n            #timelineBar\n            class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n            (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of globalStepMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"totalDuration > 0 ? (marker.globalTime / totalDuration) * 100 : 0\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(totalDuration / 1000) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\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': platformType === 'browser', 'cqa-min-w-max': platformType === '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]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === '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      </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=\"!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': platformType === '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"], outputs: ["valueChange"] }, { type: i2$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SimulatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SimulatorComponent, selector: "cqa-simulator", inputs: { videoUrl: "videoUrl", videoUrls: "videoUrls", videoCurrentDuration: "videoCurrentDuration", stepMarkers: "stepMarkers", screenShotUrl: "screenShotUrl", traceViewUrl: "traceViewUrl", platformName: "platformName", platformType: "platformType", platform: "platform", deviceName: "deviceName", isLive: "isLive", liveStatus: "liveStatus", liveLoadingLabel: "liveLoadingLabel", isContentVideoLoading: "isContentVideoLoading", failedStatusMessage: "failedStatusMessage", isVNCSessionIntruppted: "isVNCSessionIntruppted", vncSessionIntupptedMessage: "vncSessionIntupptedMessage", selectedView: "selectedView", hideVideoTab: "hideVideoTab", browserViewPort: "browserViewPort" }, outputs: { videoTimeUpdate: "videoTimeUpdate", videoPlay: "videoPlay", videoPause: "videoPause", markerHit: "markerHit", isVideoPlayingChange: "isVideoPlayingChange" }, viewQueries: [{ propertyName: "vplayerRef", first: true, predicate: ["vplayer"], descendants: true }, { propertyName: "timelineBarRef", first: true, predicate: ["timelineBar"], descendants: true }, { propertyName: "speedControlContainerRef", first: true, predicate: ["speedControlContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"background-color: #F3F4F6; height: 100%; display: flex; flex-direction: column;\"   [ngStyle]=\"{\n  position: isFullScreen ? 'fixed' : null,\n  inset: isFullScreen ? '1rem' : null,\n  zIndex: isFullScreen ? '50' : null,\n  boxShadow: isFullScreen ? '0px 13px 25px -12px rgba(0, 0, 0, 0.25)' : null,\n  borderRadius: isFullScreen ? '.5rem' : null,\n  border: isFullScreen ? '1px solid #E5E7EB' : null,\n  width: isFullScreen ? 'calc(100% - 32px)' : null,\n  height: isFullScreen ? 'calc(100% - 32px)' : '100%',\n  overflow: isFullScreen ? 'hidden' : null\n}\">\n  <div class=\"cqa-w-full cqa-py-1 cqa-px-2 cqa-bg-[#FFFFFF]\" style=\"border-bottom: 1px solid #E5E7EB;box-shadow: 0px 1px 2px 0px #0000000D;\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap\">\n      <div class=\"cqa-flex cqa-items-center\">\n        <div *ngIf=\"isLive\" class=\"cqa-h-[21px] cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-mr-2 cqa-px-[9px] cqa-py-[3px] cqa-bg-[#FCD9D9] cqa-rounded-[6px]\" style=\"border: 1px solid #F9BFBF;\">\n          <span class=\"cqa-relative cqa-w-2 cqa-h-2 cqa-rounded-full cqa-bg-[#F47F7F]\" style=\"flex-shrink: 0;\">\n            <span class=\"cqa-absolute cqa-inset-0 cqa-rounded-full cqa-bg-[#F47F7F] cqa-opacity-75 cqa-animate-ping\"></span>\n          </span>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#C63535] cqa-leading-[15px]\">Live</span>\n        </div>\n        <mat-icon *ngIf=\"platformType === '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=\"platformType === '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=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <ng-container *ngIf=\"hasDeviceFrame;\">\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\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-full cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-min-w-max': platformType === 'device', '!cqa-h-full !cqa-max-h-[500px]': shouldApplySmallHeightClasses}\">\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-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\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      </ng-container>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-97px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\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': platformType === 'browser', 'cqa-min-w-max': platformType === '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': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\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': platformType === 'browser', 'cqa-min-w-max': platformType === '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]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === '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      </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=\"!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': platformType === '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"], outputs: ["valueChange"] }, { type: i2$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 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=\"platformType === '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=\"platformType === '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=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <ng-container *ngIf=\"hasDeviceFrame;\">\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\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-full cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-min-w-max': platformType === '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-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\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      </ng-container>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-83px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\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': platformType === 'browser', 'cqa-min-w-max': platformType === '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': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\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          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(globalCurrentTime / 1000) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div \n            #timelineBar\n            class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-flex-1\"\n            (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of globalStepMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"totalDuration > 0 ? (marker.globalTime / totalDuration) * 100 : 0\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(totalDuration / 1000) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\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': platformType === 'browser', 'cqa-min-w-max': platformType === '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]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === '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      </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=\"!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': platformType === '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=\"platformType === '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=\"platformType === '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=\"platformType === 'browser'\"\n            class=\"cqa-ml-1\"\n            [matTooltip]=\"'Screen size: ' + effectiveBrowserViewPort.width + 'x' + effectiveBrowserViewPort.height\"\n            matTooltipPosition=\"below\"\n          >\n            \u00B7\n            <span class=\"cqa-ml-1\">\n              {{ effectiveBrowserViewPort.width }}x{{ effectiveBrowserViewPort.height }}\n            </span>\n          </span>\n        </p>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div *ngIf=\"isLive\" [ngClass]=\"getStatusBadgeClass()\">\n          <span [ngClass]=\"getStatusTextClass()\">{{ liveStatus }}</span>\n        </div>\n\n        <ng-container *ngIf=\"!isLive\">\n          <cqa-segment-control \n            [segments]=\"segments\" \n            [value]=\"currentView\"\n            (valueChange)=\"onSegmentChange($event)\">\n          </cqa-segment-control>\n          \n          <div *ngIf=\"!isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Expand\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M6.25 1.25H8.75V3.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.74992 1.25L5.83325 4.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 8.74967L4.16667 5.83301\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M3.75 8.75H1.25V6.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n\n          <div *ngIf=\"isFullScreen\" \n               class=\"cqa-p-1 cqa-cursor-pointer hover:cqa-bg-gray-100 cqa-rounded-sm cqa-transition-colors\"\n               (click)=\"toggleFullScreen()\"\n               title=\"Exit full screen\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n              <path d=\"M8.75 6.25H6.25V8.75\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.25008 6.25L9.16675 9.16667\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M0.833252 0.833008L3.74992 3.74967\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M1.25 3.75H3.75V1.25\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"cqa-w-full cqa-bg-[#F3F4F6] cqa-h-[calc(100%-41px)]\">\n  <!-- Live Content View -->\n    <div *ngIf=\"isLive\" class=\"cqa-h-full cqa-flex cqa-flex-col cqa-justify-center cqa-relative\">\n      <ng-container *ngIf=\"hasDeviceFrame;\">\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\" [ngClass]=\"{'cqa-rounded-md cqa-overflow-hidden': platformType === 'browser', 'cqa-max-h-full cqa-h-full': platformType !== 'browser' || !isLive, 'cqa-min-w-max': platformType === 'device', '!cqa-h-full !cqa-max-h-[500px]': shouldApplySmallHeightClasses}\">\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-z-20': platformType === 'browser', 'cqa-bg-white': platformType !== 'browser'}\">\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      </ng-container>\n    </div>\n\n    <!-- Normal Video View (when not live) -->\n    <div *ngIf=\"!isLive && currentView === 'video'\"\n         class=\"cqa-h-full cqa-flex cqa-flex-col\"\n         tabindex=\"0\"\n         role=\"region\"\n         aria-label=\"Video playback\"\n         (keydown)=\"onVideoKeydown($event)\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-flex cqa-items-center cqa-max-h-[calc(100%-97px)]\" *ngIf=\"currentVideoUrl\" [ngClass]=\"{'!cqa-h-full': platformType === 'device', 'cqa-mt-auto': hasDeviceFrame}\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\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': platformType === 'browser', 'cqa-min-w-max': platformType === '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': platformType !== 'browser'}\">\n                <video\n                  #vplayer\n                  class=\"cqa-object-cover cqa-w-full cqa-h-full cqa-block cqa-bg-[##F2F2F2]\"\n                  [src]=\"currentVideoUrl\"\n                  type=\"video/webm\"\n                  [ngClass]=\"{'cqa-z-20': platformType === 'browser'}\"\n                  (loadedmetadata)=\"onVideoMetadataLoaded()\"\n                  (canplay)=\"onVideoCanPlay()\"\n                  (ended)=\"onVideoEnded()\"\n                ></video>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    \n      <div class=\"cqa-p-10 cqa-text-center cqa-text-gray-400 cqa-text-sm cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" *ngIf=\"!currentVideoUrl\">\n        <ng-container *ngIf=\"isVNCSessionIntruppted && vncSessionIntupptedMessage; else noVideoDefault\">\n          <p class=\"cqa-text-sm cqa-text-gray-600\">\n            {{ vncSessionIntupptedMessage }}\n          </p>\n        </ng-container>\n        <ng-template #noVideoDefault>\n          <span>No video recording found</span>\n        </ng-template>\n      </div>\n    \n      <div class=\"cqa-px-2 cqa-py-2 cqa-bg-white\" style=\"border-top: 1px solid #E5E7EB;\" [ngClass]=\"{'cqa-mt-auto': hasDeviceFrame}\" *ngIf=\"currentVideoUrl && !isLive\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-font-medium cqa-mb-2 cqa-whitespace-nowrap cqa-block\">\n          Video {{ currentVideoIndex + 1 }} playing out of {{ videoUrls?.length || 0 }}\n        </span>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"currentVideoIndex === 0\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\"\n            (click)=\"prevVideo()\"\n            matTooltip=\"Previous video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': currentVideoIndex === 0}\">skip_previous</mat-icon>\n          </button>\n\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\" style=\"width: 16px; height: 16px;\">\n            <mat-progress-spinner\n              *ngIf=\"isPlayerSwitching\"\n              mode=\"indeterminate\"\n              diameter=\"16\"\n              class=\"cqa-inline-block\">\n            </mat-progress-spinner>\n            <button \n              *ngIf=\"!isPlayerSwitching\"\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n              style=\"pointer-events: auto;\"\n              (click)=\"togglePlay()\"\n              matTooltip=\"{{ isPlaying ? 'Pause' : 'Play' }}\"\n              matTooltipPosition=\"above\">\n              <span *ngIf=\"!isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M3 2L13 8L3 14V2Z\" fill=\"#374151\"/>\n                </svg>\n              </span>\n              <span *ngIf=\"isPlaying\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect x=\"3\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                  <rect x=\"10\" y=\"2\" width=\"3\" height=\"12\" fill=\"#374151\"/>\n                </svg>\n              </span>\n            </button>\n          </div>\n\n          <button \n            *ngIf=\"hasMultipleVideos\"\n            type=\"button\"\n            class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer !cqa-px-0 cqa-flex cqa-items-center cqa-justify-center hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none\"\n            style=\"pointer-events: auto;\"\n            [disabled]=\"videoUrls && (currentVideoIndex >= videoUrls.length - 1)\"\n            [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\"\n            (click)=\"nextVideo()\"\n            matTooltip=\"Next video\"\n            matTooltipPosition=\"above\">\n            <mat-icon class=\"cqa-w-4 cqa-h-4 !cqa-text-[16px] cqa-text-[#374151]\" [ngClass]=\"{'cqa-opacity-50 cqa-cursor-not-allowed': videoUrls && (currentVideoIndex >= videoUrls.length - 1)}\">skip_next</mat-icon>\n          </button>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.currentTime || 0) }}\n          </span>\n\n          <div #speedControlContainer class=\"cqa-relative cqa-mr-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n            <button\n              type=\"button\"\n              class=\"cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-text-[#9CA3AF] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap cqa-select-none hover:cqa-opacity-70 cqa-transition-opacity cqa-outline-none cqa-px-1\"\n              (click)=\"toggleSpeedControl()\"\n              [matTooltip]=\"'Playback Speed'\"\n              [matTooltipPosition]=\"'below'\">\n              {{ currentSpeed }}\n            </button>\n            \n            <div \n              *ngIf=\"isSpeedControlOpen\"\n              class=\"cqa-absolute cqa-bottom-full cqa-mb-2 cqa-right-0 cqa-bg-[#F0F0F1] cqa-rounded-lg cqa-overflow-hidden cqa-shadow-lg cqa-z-50\"\n              style=\"min-width: max-content; left: 50%; bottom: 0%; transform: translate(-50%, -50%);\">\n              <cqa-segment-control\n                [segments]=\"speedSegments\"\n                [value]=\"currentSpeed\"\n                [containerBgColor]=\"'#F0F0F1'\"\n                (valueChange)=\"onSpeedChange($event)\">\n              </cqa-segment-control>\n            </div>\n          </div>\n    \n          <div class=\"cqa-flex-1 cqa-min-w-0\">\n            <div \n              #timelineBar\n              class=\"cqa-relative cqa-h-1 cqa-bg-gray-200 cqa-rounded-full cqa-cursor-pointer cqa-w-full\"\n              (click)=\"onTimelineClick($event)\">\n            \n            <div \n              *ngFor=\"let marker of currentVideoMarkers\" \n              class=\"cqa-absolute cqa-rounded-full\"\n              [style.left.%]=\"getStepLeftPosition(marker)\"\n              [style.width]=\"'8px'\"\n              [style.height]=\"'8px'\"\n              [style.background]=\"getGlobalMarkerColor(marker.level)\"\n              [style.border]=\"'2px solid ' + getGlobalMarkerResultColor(marker.result)\"\n              [style.box-sizing]=\"'border-box'\"\n              [attr.title]=\"marker.title || ''\"\n              style=\"pointer-events: auto; z-index: 50; cursor: pointer; transform: translate(-50%, -50%); top: 50%;\"\n              (click)=\"onMarkerClick($event, marker)\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-left-0 cqa-top-0 cqa-h-full cqa-bg-blue-500 cqa-rounded-full\"\n              [style.width.%]=\"progress\"\n              [style.transition]=\"dragging ? 'none' : 'width 100ms'\"\n              style=\"pointer-events: none; z-index: 2;\">\n            </div>\n            \n            <div \n              class=\"cqa-absolute cqa-top-1/2 cqa-w-3 cqa-h-3 cqa-bg-blue-600 cqa-rounded-full cqa-cursor-grab active:cqa-cursor-grabbing cqa-shadow-md\"\n              [style.left.%]=\"progress\"\n              style=\"transform: translate(-50%, -50%); z-index: 60;\"\n              (mousedown)=\"startDrag($event)\">\n            </div>\n            </div>\n          </div>\n\n          <span class=\"cqa-text-[#9CA3AF] cqa-text-[9px] cqa-font-normal cqa-whitespace-nowrap cqa-select-none\">\n            {{ formatTime(vplayer?.nativeElement?.duration || 0) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isLive && currentView === 'screenshots'\" class=\"cqa-h-full\">\n      <div class=\"cqa-w-full cqa-py-4 cqa-h-full cqa-flex cqa-items-center\" *ngIf=\"screenShotUrl\">\n        <ng-container *ngIf=\"hasDeviceFrame\">\n          <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center\" [ngClass]=\"{'cqa-p-4': platformType === 'browser'}\">\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': platformType === 'browser', 'cqa-min-w-max': platformType === '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]': platformType === 'browser', 'cqa-max-h-full': platformType !== 'browser'}\"\n              />\n              <div class=\"cqa-absolute cqa-flex cqa-flex-col\" [ngStyle]=\"deviceScreenStyle\" [ngClass]=\"{'cqa-bg-white': platformType !== 'browser'}\">\n                <img\n                  [src]=\"screenShotUrl\"\n                  alt=\"Screenshot\"\n                  [ngClass]=\"{'cqa-z-20': platformType === '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      </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=\"!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': platformType === '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$1.DomSanitizer }]; }, propDecorators: { videoUrl: [{
                 type: Input
             }], videoUrls: [{