@eric-emg/symphiq-components 1.2.298 → 1.2.299

package/fesm2022/symphiq-components.mjs

@@ -1,4 +1,4 @@
-import { ViewModeEnum, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, MetricEnum, DimensionEnum, UiDataPeriodEnum, UiDataComparePeriodEnum, ChartTypeEnum, IconSourceEnum, ProfileAnalysisRecommendationPriorityEnum, ProfileItemTypeEnum, PriceVsCompetitorsEnum, DifferentiationStrengthEnum, ThreatLevelEnum, normalizeToV3, FocusAreaDetailStatusEnum, FocusAreaDomainEnumUtil, FocusAreaDomainEnum, ShopDataLoadStatusEnum, MetricEnumUtil, NumberTypeEnum, LineChartUseCaseEnum, FunnelMetricTypeEnum, AiDynamicContentStatusEnum, FocusAreaHealthEnum, ProfileAnalysisPriorityEnum, CapabilityStateEnum, QuadrantEnum, AdvantageEnum, OverallGradeEnum, OperationalMaturityEnum, ProfileAnalysisEffortLevelEnum, ProfileAnalysisImpactLevelEnum, ProfileAnalysisTypeEnum, BarChartUseCaseEnum } from '@jebgem/model';
+import { ViewModeEnum, MetricStatusEnum, TrendDirectionEnum, CompetitiveScoreEnum, MetricEnum, DimensionEnum, UiDataPeriodEnum, UiDataComparePeriodEnum, ChartTypeEnum, IconSourceEnum, ProfileAnalysisRecommendationPriorityEnum, ProfileItemTypeEnum, PriceVsCompetitorsEnum, DifferentiationStrengthEnum, ThreatLevelEnum, AiDynamicContentStatusEnum, normalizeToV3, FocusAreaDetailStatusEnum, FocusAreaDomainEnumUtil, FocusAreaDomainEnum, ShopDataLoadStatusEnum, MetricEnumUtil, NumberTypeEnum, LineChartUseCaseEnum, FunnelMetricTypeEnum, FocusAreaHealthEnum, ProfileAnalysisPriorityEnum, CapabilityStateEnum, QuadrantEnum, AdvantageEnum, OverallGradeEnum, OperationalMaturityEnum, ProfileAnalysisEffortLevelEnum, ProfileAnalysisImpactLevelEnum, ProfileAnalysisTypeEnum, BarChartUseCaseEnum } from '@jebgem/model';
 export * from '@jebgem/model';
 import * as i0 from '@angular/core';
 import { Injectable, signal, computed, input, ChangeDetectionStrategy, Component, output, inject, ElementRef, Renderer2, effect, Directive, HostListener, untracked, ViewChild, PLATFORM_ID, Inject, Input, afterNextRender } from '@angular/core';
@@ -45482,6 +45482,328 @@ class BusinessAnalysisModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BusinessAnalysisModalComponent, { className: "BusinessAnalysisModalComponent", filePath: "lib/components/business-analysis-dashboard/business-analysis-modal.component.ts", lineNumber: 171 }); })();
 
+function ContentGenerationProgressComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "div", 21)(2, "div", 22)(3, "div", 23)(4, "div", 24)(5, "div", 25)(6, "div", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
+} }
+function ContentGenerationProgressComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 27);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
+    i0.ɵɵproperty("ngClass", ctx_r0.progressGlowClasses());
+} }
+class ContentGenerationProgressComponent {
+    constructor() {
+        this.itemStatus = input(...(ngDevMode ? [undefined, { debugName: "itemStatus" }] : []));
+        this.title = input('Generating Your Analysis', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.subtitle = input('This will appear when ready. You can check back later as this will take a few minutes to complete.', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+        this.progressPercentage = computed(() => {
+            const status = this.itemStatus();
+            if (!status?.percentageComplete) {
+                return 0;
+            }
+            return Math.round(Math.min(100, Math.max(0, status.percentageComplete)));
+        }, ...(ngDevMode ? [{ debugName: "progressPercentage" }] : []));
+        this.progressMessage = computed(() => {
+            const status = this.itemStatus();
+            return status?.message || 'Initializing';
+        }, ...(ngDevMode ? [{ debugName: "progressMessage" }] : []));
+        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.containerClasses = computed(() => {
+            return this.isLightMode()
+                ? 'bg-gradient-to-br from-slate-50 to-white'
+                : 'bg-gradient-to-br from-slate-900 to-slate-800';
+        }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+        this.iconContainerClasses = computed(() => {
+            if (this.isLightMode()) {
+                return 'bg-gradient-to-br from-blue-500 to-purple-500 text-white shadow-lg shadow-blue-500/30';
+            }
+            return 'bg-gradient-to-br from-blue-400 to-purple-400 text-white shadow-lg shadow-blue-400/30';
+        }, ...(ngDevMode ? [{ debugName: "iconContainerClasses" }] : []));
+        this.titleClasses = computed(() => {
+            if (this.isLightMode()) {
+                return 'bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent';
+            }
+            return 'bg-gradient-to-r from-blue-400 via-purple-400 to-blue-400 bg-clip-text text-transparent';
+        }, ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
+        this.subtitleClasses = computed(() => {
+            return this.isLightMode()
+                ? 'text-slate-600'
+                : 'text-slate-400';
+        }, ...(ngDevMode ? [{ debugName: "subtitleClasses" }] : []));
+        this.progressMessageClasses = computed(() => {
+            return this.isLightMode()
+                ? 'text-slate-700'
+                : 'text-slate-300';
+        }, ...(ngDevMode ? [{ debugName: "progressMessageClasses" }] : []));
+        this.progressBarContainerClasses = computed(() => {
+            return 'w-full';
+        }, ...(ngDevMode ? [{ debugName: "progressBarContainerClasses" }] : []));
+        this.progressBarBackgroundClasses = computed(() => {
+            return this.isLightMode()
+                ? 'bg-slate-200'
+                : 'bg-slate-700';
+        }, ...(ngDevMode ? [{ debugName: "progressBarBackgroundClasses" }] : []));
+        this.progressBarFillClasses = computed(() => {
+            if (this.isLightMode()) {
+                return 'bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-600 shadow-lg shadow-blue-500/40';
+            }
+            return 'bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-500 shadow-lg shadow-blue-400/40';
+        }, ...(ngDevMode ? [{ debugName: "progressBarFillClasses" }] : []));
+        this.dotClasses = computed(() => {
+            return this.isLightMode()
+                ? 'bg-blue-400 shadow-lg shadow-blue-400/60'
+                : 'bg-cyan-300 shadow-lg shadow-cyan-300/60';
+        }, ...(ngDevMode ? [{ debugName: "dotClasses" }] : []));
+        this.dotColor = computed(() => {
+            return this.isLightMode() ? '#60a5fa' : '#67e8f9';
+        }, ...(ngDevMode ? [{ debugName: "dotColor" }] : []));
+        this.progressGlowClasses = computed(() => {
+            return this.isLightMode()
+                ? 'bg-blue-400 shadow-xl'
+                : 'bg-cyan-300 shadow-xl';
+        }, ...(ngDevMode ? [{ debugName: "progressGlowClasses" }] : []));
+        this.percentageClasses = computed(() => {
+            return this.isLightMode()
+                ? 'text-slate-600'
+                : 'text-slate-400';
+        }, ...(ngDevMode ? [{ debugName: "percentageClasses" }] : []));
+    }
+    static { this.ɵfac = function ContentGenerationProgressComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContentGenerationProgressComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContentGenerationProgressComponent, selectors: [["symphiq-content-generation-progress"]], inputs: { itemStatus: [1, "itemStatus"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], showIcon: [1, "showIcon"] }, decls: 25, vars: 17, consts: [[1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "max-w-3xl", "w-full", "space-y-8"], [1, "text-center", "space-y-3"], [1, "flex", "items-center", "justify-center", "mb-4"], [1, "relative", "w-20", "h-20", "rounded-2xl", "flex", "items-center", "justify-center", "icon-pulse", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "absolute", "inset-0", "rounded-2xl", "icon-glow"], [1, "text-3xl", "sm:text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", "sm:text-lg", "max-w-2xl", "mx-auto", 3, "ngClass"], [1, "space-y-4"], [1, "text-center"], [1, "text-lg", "sm:text-xl", "font-medium", "message-fade", 3, "ngClass"], [1, "relative", "h-3", "rounded-full", 2, "overflow", "visible", 3, "ngClass"], [1, "absolute", "inset-0", "rounded-full", 3, "ngClass"], [1, "absolute", "inset-y-0", "left-0", "rounded-full", "transition-all", "duration-700", "ease-out", "overflow-hidden", 3, "ngClass"], [1, "absolute", "inset-0", "shimmer-effect"], [1, "absolute", "pointer-events-none", 2, "right", "0", "top", "-4px", "bottom", "-4px", "overflow", "visible", 3, "left"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass", "left"], [1, "text-sm", "font-medium", "tabular-nums", 3, "ngClass"], [1, "absolute", "pointer-events-none", 2, "right", "0", "top", "-4px", "bottom", "-4px", "overflow", "visible"], [1, "animated-dot", "animated-dot-1"], [1, "animated-dot", "animated-dot-2"], [1, "animated-dot", "animated-dot-3"], [1, "animated-dot", "animated-dot-4"], [1, "animated-dot", "animated-dot-5"], [1, "animated-dot", "animated-dot-6"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass"]], template: function ContentGenerationProgressComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(5, "svg", 5);
+            i0.ɵɵelement(6, "path", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelement(7, "div", 7);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "h2", 8);
+            i0.ɵɵtext(9);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "p", 9);
+            i0.ɵɵtext(11);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "div", 10)(13, "div", 11)(14, "p", 12);
+            i0.ɵɵtext(15);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(16, "div", 13);
+            i0.ɵɵelement(17, "div", 14);
+            i0.ɵɵelementStart(18, "div", 15);
+            i0.ɵɵelement(19, "div", 16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_20_Template, 7, 14, "div", 17);
+            i0.ɵɵconditionalCreate(21, ContentGenerationProgressComponent_Conditional_21_Template, 1, 3, "div", 18);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "div", 11)(23, "span", 19);
+            i0.ɵɵtext(24);
+            i0.ɵɵelementEnd()()()()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngClass", ctx.containerClasses());
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", ctx.titleClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.subtitleClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.subtitle(), " ");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.progressMessageClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.progressMessage(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.progressBarContainerClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.progressBarBackgroundClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵstyleProp("width", ctx.progressPercentage(), "%");
+            i0.ɵɵproperty("ngClass", ctx.progressBarFillClasses());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.progressPercentage() > 0 && ctx.progressPercentage() < 100 ? 20 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.progressPercentage() > 0 && ctx.progressPercentage() < 100 ? 21 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", ctx.percentageClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.progressPercentage(), "% complete ");
+        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["@keyframes _ngcontent-%COMP%_icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes _ngcontent-%COMP%_icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes _ngcontent-%COMP%_dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes _ngcontent-%COMP%_dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes _ngcontent-%COMP%_message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-pulse 2s ease-in-out infinite}.icon-glow[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect[_ngcontent-%COMP%]{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:_ngcontent-%COMP%_shimmer 2s ease-in-out infinite}.message-fade[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_message-fade 3s ease-in-out infinite}.animated-dot[_ngcontent-%COMP%]{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:_ngcontent-%COMP%_dots-move 6s linear infinite,_ngcontent-%COMP%_dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1[_ngcontent-%COMP%]{animation-delay:0s,0s}.animated-dot-2[_ngcontent-%COMP%]{animation-delay:1s,0s}.animated-dot-3[_ngcontent-%COMP%]{animation-delay:2s,0s}.animated-dot-4[_ngcontent-%COMP%]{animation-delay:3s,0s}.animated-dot-5[_ngcontent-%COMP%]{animation-delay:4s,0s}.animated-dot-6[_ngcontent-%COMP%]{animation-delay:5s,0s}"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
+      <div class="max-w-3xl w-full space-y-8">
+        <!-- Title Section -->
+        <div class="text-center space-y-3">
+          <div class="flex items-center justify-center mb-4">
+            <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
+              <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+              </svg>
+              <div class="absolute inset-0 rounded-2xl icon-glow"></div>
+            </div>
+          </div>
+
+          <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
+            {{ title() }}
+          </h2>
+
+          <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
+            {{ subtitle() }}
+          </p>
+        </div>
+
+        <!-- Progress Section -->
+        <div class="space-y-4">
+          <!-- Progress Message -->
+          <div class="text-center">
+            <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
+              {{ progressMessage() }}
+            </p>
+          </div>
+
+          <!-- Progress Bar Container -->
+          <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
+            <!-- Background Track -->
+            <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
+
+            <!-- Solid Fill with Gradient -->
+            <div
+              [ngClass]="progressBarFillClasses()"
+              [style.width.%]="progressPercentage()"
+              class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
+              <!-- Inner shimmer effect -->
+              <div class="absolute inset-0 shimmer-effect"></div>
+            </div>
+
+            <!-- Animated Dots Overlay (container positioned at progress edge, dots animate within) -->
+            @if (progressPercentage() > 0 && progressPercentage() < 100) {
+              <div
+                class="absolute pointer-events-none"
+                [style.left.%]="progressPercentage()"
+                style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
+                <div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
+              </div>
+            }
+
+            <!-- Glow effect at the progress edge -->
+            @if (progressPercentage() > 0 && progressPercentage() < 100) {
+              <div
+                [ngClass]="progressGlowClasses()"
+                [style.left.%]="progressPercentage()"
+                class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
+                style="margin-left: -8px;">
+              </div>
+            }
+          </div>
+
+          <!-- Progress Percentage -->
+          <div class="text-center">
+            <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
+              {{ progressPercentage() }}% complete
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: ["@keyframes icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse{animation:icon-pulse 2s ease-in-out infinite}.icon-glow{animation:icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s ease-in-out infinite}.message-fade{animation:message-fade 3s ease-in-out infinite}.animated-dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:dots-move 6s linear infinite,dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1{animation-delay:0s,0s}.animated-dot-2{animation-delay:1s,0s}.animated-dot-3{animation-delay:2s,0s}.animated-dot-4{animation-delay:3s,0s}.animated-dot-5{animation-delay:4s,0s}.animated-dot-6{animation-delay:5s,0s}\n"] }]
+    }], null, { itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 222 }); })();
+
+class ContentGenerationProgressWithConfettiComponent {
+    constructor() {
+        this.itemStatus = input(...(ngDevMode ? [undefined, { debugName: "itemStatus" }] : []));
+        this.title = input('Generating Your Analysis', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.subtitle = input('This will appear when ready. You can check back later as this will take a few minutes to complete.', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+        this.profile = input(...(ngDevMode ? [undefined, { debugName: "profile" }] : []));
+        this.funnelAnalysis = input(...(ngDevMode ? [undefined, { debugName: "funnelAnalysis" }] : []));
+        this.confettiIntensity = input('normal', ...(ngDevMode ? [{ debugName: "confettiIntensity" }] : []));
+        this.enableConfetti = input(true, ...(ngDevMode ? [{ debugName: "enableConfetti" }] : []));
+        this.confettiDelay = input(200, ...(ngDevMode ? [{ debugName: "confettiDelay" }] : []));
+        this.confettiService = inject(ConfettiService);
+        this.hasCelebrated = signal(false, ...(ngDevMode ? [{ debugName: "hasCelebrated" }] : []));
+        effect(() => {
+            const currentProfile = this.profile();
+            const currentFunnelAnalysis = this.funnelAnalysis();
+            const currentStatus = currentProfile?.selfContentStatus ?? currentFunnelAnalysis?.selfContentStatus;
+            if (!this.enableConfetti()) {
+                return;
+            }
+            if (currentStatus === AiDynamicContentStatusEnum.GENERATED && !this.hasCelebrated()) {
+                untracked(() => {
+                    this.confettiService.trigger({
+                        intensity: this.confettiIntensity(),
+                        delay: this.confettiDelay(),
+                        viewMode: this.viewMode(),
+                    });
+                    this.hasCelebrated.set(true);
+                });
+            }
+            if (currentStatus === AiDynamicContentStatusEnum.REQUESTED ||
+                currentStatus === AiDynamicContentStatusEnum.GENERATING) {
+                untracked(() => {
+                    this.hasCelebrated.set(false);
+                });
+            }
+        });
+    }
+    static { this.ɵfac = function ContentGenerationProgressWithConfettiComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContentGenerationProgressWithConfettiComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContentGenerationProgressWithConfettiComponent, selectors: [["symphiq-content-generation-progress-with-confetti"]], inputs: { itemStatus: [1, "itemStatus"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], showIcon: [1, "showIcon"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], confettiIntensity: [1, "confettiIntensity"], enableConfetti: [1, "enableConfetti"], confettiDelay: [1, "confettiDelay"] }, decls: 1, vars: 5, consts: [[3, "itemStatus", "title", "subtitle", "viewMode", "showIcon"]], template: function ContentGenerationProgressWithConfettiComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "symphiq-content-generation-progress", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("itemStatus", ctx.itemStatus())("title", ctx.title())("subtitle", ctx.subtitle())("viewMode", ctx.viewMode())("showIcon", ctx.showIcon());
+        } }, dependencies: [ContentGenerationProgressComponent], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressWithConfettiComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-content-generation-progress-with-confetti',
+                standalone: true,
+                imports: [ContentGenerationProgressComponent],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <symphiq-content-generation-progress
+      [itemStatus]="itemStatus()"
+      [title]="title()"
+      [subtitle]="subtitle()"
+      [viewMode]="viewMode()"
+      [showIcon]="showIcon()"
+    />
+  `
+            }]
+    }], () => [], { itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], confettiIntensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "confettiIntensity", required: false }] }], enableConfetti: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableConfetti", required: false }] }], confettiDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "confettiDelay", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressWithConfettiComponent, { className: "ContentGenerationProgressWithConfettiComponent", filePath: "lib/components/shared/content-generation-progress-with-confetti.component.ts", lineNumber: 29 }); })();
+
 const _c0$w = ["dashboardContainer"];
 const _c1$d = () => ({});
 const _c2$8 = () => [1, 2, 3, 4, 5, 6];
@@ -45732,35 +46054,53 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_49_Template(rf, ctx
 } }
 function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-journey-progress-indicator", 77);
+    i0.ɵɵelementStart(0, "symphiq-journey-progress-indicator", 67);
     i0.ɵɵlistener("stepClick", function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_0_Template_symphiq_journey_progress_indicator_stepClick_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.stepClick.emit($event)); })("nextStepClick", function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_0_Template_symphiq_journey_progress_indicator_nextStepClick_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.nextStepClick.emit()); });
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("viewMode", ctx_r2.isLightMode() ? ctx_r2.ViewModeEnum.LIGHT : ctx_r2.ViewModeEnum.DARK)("currentStepId", ctx_r2.JourneyStepIdEnum.FUNNEL_ANALYSIS)("showNextStepAction", false)("forDemo", ctx_r2.forDemo())("maxAccessibleStepId", ctx_r2.maxAccessibleStepId());
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_0_Template, 1, 5, "symphiq-journey-progress-indicator", 65);
+    i0.ɵɵelement(1, "symphiq-content-generation-progress-with-confetti", 66);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(!ctx_r2.isOnboarded() ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r2.isLightMode() ? ctx_r2.ViewModeEnum.LIGHT : ctx_r2.ViewModeEnum.DARK)("itemStatus", ctx_r2.itemStatus())("funnelAnalysis", ctx_r2.funnelAnalysis())("confettiIntensity", "celebration")("title", "We are generating a new Funnel Analysis for you.")("subtitle", "It will appear here when ready. You can check back later as this will take a few minutes to complete.");
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-journey-progress-indicator", 67);
+    i0.ɵɵlistener("stepClick", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_0_Template_symphiq_journey_progress_indicator_stepClick_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.stepClick.emit($event)); })("nextStepClick", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_0_Template_symphiq_journey_progress_indicator_nextStepClick_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.nextStepClick.emit()); });
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("viewMode", ctx_r2.isLightMode() ? ctx_r2.ViewModeEnum.LIGHT : ctx_r2.ViewModeEnum.DARK)("currentStepId", ctx_r2.JourneyStepIdEnum.FUNNEL_ANALYSIS)("showNextStepAction", true)("forDemo", ctx_r2.forDemo())("maxAccessibleStepId", ctx_r2.maxAccessibleStepId());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_5_For_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-funnel-analysis-insight-card", 84);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-funnel-analysis-insight-card", 85);
 } if (rf & 2) {
-    const insight_r16 = ctx.$implicit;
+    const insight_r17 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("insight", insight_r16)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r16))("allCharts", ctx_r2.allCharts())("allBusinessInsights", ctx_r2.allBusinessInsights())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true)("isLoading", ctx_r2.isDataLoading());
+    i0.ɵɵproperty("insight", insight_r17)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r17))("allCharts", ctx_r2.allCharts())("allBusinessInsights", ctx_r2.allBusinessInsights())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true)("isLoading", ctx_r2.isDataLoading());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 69)(1, "div", 78)(2, "div", 9)(3, "div", 79)(4, "div", 9);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 71)(1, "div", 79)(2, "div", 9)(3, "div", 80)(4, "div", 9);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 80);
-    i0.ɵɵelement(6, "path", 81);
+    i0.ɵɵelementStart(5, "svg", 81);
+    i0.ɵɵelement(6, "path", 82);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(7, "h2", 82);
+    i0.ɵɵelementStart(7, "h2", 83);
     i0.ɵɵtext(8, "Key Insights");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(9, "span", 23);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 83);
-    i0.ɵɵrepeaterCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_5_For_13_Template, 1, 9, "symphiq-funnel-analysis-insight-card", 84, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementStart(11, "div", 84);
+    i0.ɵɵrepeaterCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_13_Template, 1, 9, "symphiq-funnel-analysis-insight-card", 85, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -45777,87 +46117,87 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_5_Te
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r2.insights());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-skeleton-loader", 85);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-skeleton-loader", 86);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-funnel-analysis-overall-assessment", 87);
-    i0.ɵɵlistener("scrollToSection", function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_8_Conditional_2_Template_symphiq_funnel_analysis_overall_assessment_scrollToSection_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.scrollToSection($event)); });
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-funnel-analysis-overall-assessment", 88);
+    i0.ɵɵlistener("scrollToSection", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_8_Conditional_2_Template_symphiq_funnel_analysis_overall_assessment_scrollToSection_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.scrollToSection($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("assessment", ctx_r2.performanceOverview().overallAssessment || i0.ɵɵpureFunction0(11, _c1$d))("revenueMetric", ctx_r2.revenueMetric())("charts", ctx_r2.chartsForItem("OVERALL_ASSESSMENT"))("metrics", ctx_r2.allMetrics())("isLightMode", ctx_r2.isLightMode())("isLoading", ctx_r2.isOverallAssessmentLoading())("isCompactMode", true)("isChartsLoading", ctx_r2.areChartsLoading())("strengths", ctx_r2.strengths())("weaknesses", ctx_r2.weaknesses())("currencySymbol", ctx_r2.currencySymbol());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72);
-    i0.ɵɵconditionalCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_8_Conditional_1_Template, 1, 3, "symphiq-skeleton-loader", 85)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_8_Conditional_2_Template, 1, 12, "symphiq-funnel-analysis-overall-assessment", 86);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵconditionalCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_8_Conditional_1_Template, 1, 3, "symphiq-skeleton-loader", 86)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_8_Conditional_2_Template, 1, 12, "symphiq-funnel-analysis-overall-assessment", 87);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.isDataLoading() ? 1 : 2);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_10_For_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-funnel-analysis-metric-card", 89);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_10_For_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-funnel-analysis-metric-card", 90);
 } if (rf & 2) {
-    const metric_r18 = ctx.$implicit;
+    const metric_r19 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("metric", metric_r18)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(metric_r18))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true)("currencySymbol", ctx_r2.currencySymbol());
+    i0.ɵɵproperty("metric", metric_r19)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(metric_r19))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true)("currencySymbol", ctx_r2.currencySymbol());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_10_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_10_For_2_Conditional_2_For_2_Template, 1, 9, "symphiq-funnel-analysis-metric-card", 89, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_10_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 91);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_10_For_2_Conditional_2_For_2_Template, 1, 9, "symphiq-funnel-analysis-metric-card", 90, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const funnelGroup_r19 = i0.ɵɵnextContext().$implicit;
+    const funnelGroup_r20 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(funnelGroup_r19.relatedMetrics);
+    i0.ɵɵrepeater(funnelGroup_r20.relatedMetrics);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 89);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 90);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_10_For_2_Conditional_2_Template, 3, 0, "div", 90);
+    i0.ɵɵconditionalCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_10_For_2_Conditional_2_Template, 3, 0, "div", 91);
 } if (rf & 2) {
-    const funnelGroup_r19 = ctx.$implicit;
+    const funnelGroup_r20 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("metric", funnelGroup_r19.funnelMetric)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(funnelGroup_r19.funnelMetric))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true)("currencySymbol", ctx_r2.currencySymbol());
+    i0.ɵɵproperty("metric", funnelGroup_r20.funnelMetric)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(funnelGroup_r20.funnelMetric))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true)("currencySymbol", ctx_r2.currencySymbol());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(funnelGroup_r19.relatedMetrics.length > 0 ? 2 : -1);
+    i0.ɵɵconditional(funnelGroup_r20.relatedMetrics.length > 0 ? 2 : -1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_10_For_2_Template, 3, 10, null, null, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_10_For_2_Template, 3, 10, null, null, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.groupedMetrics());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-funnel-analysis-breakdown-section", 91);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-funnel-analysis-breakdown-section", 92);
 } if (rf & 2) {
-    const breakdown_r20 = ctx.$implicit;
+    const breakdown_r21 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("breakdown", breakdown_r20)("charts", ctx_r2.chartsForBreakdown(breakdown_r20))("isLightMode", ctx_r2.isLightMode())("isLoading", ctx_r2.isDataLoading())("isCompactMode", true)("currencySymbol", ctx_r2.currencySymbol());
+    i0.ɵɵproperty("breakdown", breakdown_r21)("charts", ctx_r2.chartsForBreakdown(breakdown_r21))("isLightMode", ctx_r2.isLightMode())("isLoading", ctx_r2.isDataLoading())("isCompactMode", true)("currencySymbol", ctx_r2.currencySymbol());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_12_For_2_Template, 1, 6, "symphiq-funnel-analysis-breakdown-section", 91, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_12_For_2_Template, 1, 6, "symphiq-funnel-analysis-breakdown-section", 92, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.breakdowns());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 72);
-    i0.ɵɵelement(1, "symphiq-competitive-intelligence-view", 92);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵelement(1, "symphiq-competitive-intelligence-view", 93);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_7_0;
@@ -45865,23 +46205,23 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_14_T
     i0.ɵɵadvance();
     i0.ɵɵproperty("metrics", ctx_r2.competitiveMetrics())("allCharts", ctx_r2.allCharts())("isLightMode", ctx_r2.isLightMode())("isCompactMode", true)("competitiveBenchmark", (tmp_7_0 = ctx_r2.performanceOverview().overallAssessment) == null ? null : tmp_7_0.competitiveBenchmark)("currencySymbol", ctx_r2.currencySymbol());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_0_Template, 1, 5, "symphiq-journey-progress-indicator", 65);
-    i0.ɵɵelementStart(1, "main", 36)(2, "div", 66)(3, "div", 67);
-    i0.ɵɵelement(4, "symphiq-funnel-welcome-banner", 68);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_0_Template, 1, 5, "symphiq-journey-progress-indicator", 65);
+    i0.ɵɵelementStart(1, "main", 36)(2, "div", 68)(3, "div", 69);
+    i0.ɵɵelement(4, "symphiq-funnel-welcome-banner", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_5_Template, 14, 7, "section", 69);
-    i0.ɵɵelementStart(6, "symphiq-collapsible-funnel-section-group", 70)(7, "div", 71);
-    i0.ɵɵconditionalCreate(8, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_8_Template, 3, 1, "div", 72);
+    i0.ɵɵconditionalCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template, 14, 7, "section", 71);
+    i0.ɵɵelementStart(6, "symphiq-collapsible-funnel-section-group", 72)(7, "div", 73);
+    i0.ɵɵconditionalCreate(8, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_8_Template, 3, 1, "div", 74);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 73);
-    i0.ɵɵconditionalCreate(10, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_10_Template, 3, 0, "div", 74);
+    i0.ɵɵelementStart(9, "div", 75);
+    i0.ɵɵconditionalCreate(10, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_10_Template, 3, 0, "div", 76);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 75);
-    i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_12_Template, 3, 0, "div", 74);
+    i0.ɵɵelementStart(11, "div", 77);
+    i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_12_Template, 3, 0, "div", 76);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 76);
-    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Conditional_14_Template, 2, 6, "div", 72);
+    i0.ɵɵelementStart(13, "div", 78);
+    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_14_Template, 2, 6, "div", 74);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -45901,17 +46241,17 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Template(rf, ctx
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.showCompetitiveIntelligence() ? 14 : -1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 94)(1, "div", 95)(2, "div", 9);
-    i0.ɵɵelement(3, "symphiq-skeleton-loader", 85);
-    i0.ɵɵelementStart(4, "div", 96);
-    i0.ɵɵelement(5, "symphiq-skeleton-loader", 85)(6, "symphiq-skeleton-loader", 85);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 95)(1, "div", 96)(2, "div", 9);
+    i0.ɵɵelement(3, "symphiq-skeleton-loader", 86);
+    i0.ɵɵelementStart(4, "div", 97);
+    i0.ɵɵelement(5, "symphiq-skeleton-loader", 86)(6, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 97);
-    i0.ɵɵelement(8, "symphiq-skeleton-loader", 85)(9, "symphiq-skeleton-loader", 85)(10, "symphiq-skeleton-loader", 85);
+    i0.ɵɵelementStart(7, "div", 98);
+    i0.ɵɵelement(8, "symphiq-skeleton-loader", 86)(9, "symphiq-skeleton-loader", 86)(10, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 98);
-    i0.ɵɵelement(12, "symphiq-skeleton-loader", 85)(13, "symphiq-skeleton-loader", 85);
+    i0.ɵɵelementStart(11, "div", 99);
+    i0.ɵɵelement(12, "symphiq-skeleton-loader", 86)(13, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -45933,40 +46273,40 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_2_Co
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-funnel-analysis-overall-assessment", 87);
-    i0.ɵɵlistener("scrollToSection", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_2_Conditional_2_Template_symphiq_funnel_analysis_overall_assessment_scrollToSection_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.scrollToSection($event)); });
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-funnel-analysis-overall-assessment", 88);
+    i0.ɵɵlistener("scrollToSection", function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_2_Conditional_2_Template_symphiq_funnel_analysis_overall_assessment_scrollToSection_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.scrollToSection($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("assessment", ctx_r2.performanceOverview().overallAssessment || i0.ɵɵpureFunction0(11, _c1$d))("revenueMetric", ctx_r2.revenueMetric())("charts", ctx_r2.chartsForItem("OVERALL_ASSESSMENT"))("metrics", ctx_r2.allMetrics())("isLightMode", ctx_r2.isLightMode())("isLoading", ctx_r2.isOverallAssessmentLoading())("isCompactMode", ctx_r2.viewModeService.isCompact())("isChartsLoading", ctx_r2.areChartsLoading())("strengths", ctx_r2.strengths())("weaknesses", ctx_r2.weaknesses())("currencySymbol", ctx_r2.currencySymbol());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 93);
-    i0.ɵɵconditionalCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_2_Conditional_1_Template, 14, 25, "div", 94)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_2_Conditional_2_Template, 1, 12, "symphiq-funnel-analysis-overall-assessment", 86);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵconditionalCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_2_Conditional_1_Template, 14, 25, "div", 95)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_2_Conditional_2_Template, 1, 12, "symphiq-funnel-analysis-overall-assessment", 87);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.isDataLoading() ? 1 : 2);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-section-divider", 99);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-section-divider", 100);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("viewMode", ctx_r2.viewMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106)(1, "div", 107)(2, "div", 108);
-    i0.ɵɵelement(3, "symphiq-skeleton-loader", 85)(4, "symphiq-skeleton-loader", 85);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 107)(1, "div", 108)(2, "div", 109);
+    i0.ɵɵelement(3, "symphiq-skeleton-loader", 86)(4, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-skeleton-loader", 85)(6, "symphiq-skeleton-loader", 85)(7, "symphiq-skeleton-loader", 85);
-    i0.ɵɵelementStart(8, "div", 109);
-    i0.ɵɵelement(9, "symphiq-skeleton-loader", 85)(10, "symphiq-skeleton-loader", 85);
+    i0.ɵɵelement(5, "symphiq-skeleton-loader", 86)(6, "symphiq-skeleton-loader", 86)(7, "symphiq-skeleton-loader", 86);
+    i0.ɵɵelementStart(8, "div", 110);
+    i0.ɵɵelement(9, "symphiq-skeleton-loader", 86)(10, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 110);
-    i0.ɵɵelement(12, "symphiq-skeleton-loader", 85)(13, "symphiq-skeleton-loader", 85);
+    i0.ɵɵelementStart(11, "div", 111);
+    i0.ɵɵelement(12, "symphiq-skeleton-loader", 86)(13, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -45990,76 +46330,76 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Co
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "80px")("height", "28px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 104);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_14_For_2_Template, 14, 28, "div", 106, i0.ɵɵrepeaterTrackByIdentity);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 105);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_14_For_2_Template, 14, 28, "div", 107, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c2$8));
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 112);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-insight-card", 113);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 113);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-insight-card", 114);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const insight_r22 = ctx.$implicit;
-    const $index_r23 = ctx.$index;
+    const insight_r23 = ctx.$implicit;
+    const $index_r24 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassMap(ctx_r2.getInsightCardClass(insight_r22));
-    i0.ɵɵstyleProp("animation-delay", 0.3 + $index_r23 * 0.1 + "s");
-    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "insight-" + $index_r23);
+    i0.ɵɵclassMap(ctx_r2.getInsightCardClass(insight_r23));
+    i0.ɵɵstyleProp("animation-delay", 0.3 + $index_r24 * 0.1 + "s");
+    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "insight-" + $index_r24);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("insight", insight_r22)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r22))("allCharts", ctx_r2.allCharts())("allBusinessInsights", ctx_r2.allBusinessInsights())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", false);
+    i0.ɵɵproperty("insight", insight_r23)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r23))("allCharts", ctx_r2.allCharts())("allBusinessInsights", ctx_r2.allBusinessInsights())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", false);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 104);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_15_For_2_Template, 2, 14, "div", 111, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 105);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_15_For_2_Template, 2, 14, "div", 112, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.insights());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 112);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-insight-card", 113);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 113);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-insight-card", 114);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const insight_r24 = ctx.$implicit;
-    const $index_r25 = ctx.$index;
+    const insight_r25 = ctx.$implicit;
+    const $index_r26 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("animation-delay", 0.3 + $index_r25 * 0.1 + "s");
-    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "insight-" + $index_r25);
+    i0.ɵɵstyleProp("animation-delay", 0.3 + $index_r26 * 0.1 + "s");
+    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "insight-" + $index_r26);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("insight", insight_r24)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r24))("allCharts", ctx_r2.allCharts())("allBusinessInsights", ctx_r2.allBusinessInsights())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true);
+    i0.ɵɵproperty("insight", insight_r25)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r25))("allCharts", ctx_r2.allCharts())("allBusinessInsights", ctx_r2.allBusinessInsights())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_16_For_2_Template, 2, 12, "div", 114, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 106);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_16_For_2_Template, 2, 12, "div", 115, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.insights());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_0_Template, 1, 1, "symphiq-section-divider", 99);
-    i0.ɵɵelementStart(1, "section", 100);
-    i0.ɵɵelement(2, "div", 101);
-    i0.ɵɵelementStart(3, "div", 102)(4, "div", 103)(5, "div", 9)(6, "div", 79)(7, "div", 9);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_0_Template, 1, 1, "symphiq-section-divider", 100);
+    i0.ɵɵelementStart(1, "section", 101);
+    i0.ɵɵelement(2, "div", 102);
+    i0.ɵɵelementStart(3, "div", 103)(4, "div", 104)(5, "div", 9)(6, "div", 80)(7, "div", 9);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(8, "svg", 80);
-    i0.ɵɵelement(9, "path", 81);
+    i0.ɵɵelementStart(8, "svg", 81);
+    i0.ɵɵelement(9, "path", 82);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(10, "h2", 82);
+    i0.ɵɵelementStart(10, "h2", 83);
     i0.ɵɵtext(11, "Key Insights");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(12, "span", 23);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_14_Template, 3, 1, "div", 104)(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_15_Template, 3, 0, "div", 104)(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Conditional_16_Template, 3, 0, "div", 105);
+    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_14_Template, 3, 1, "div", 105)(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_15_Template, 3, 0, "div", 105)(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Conditional_16_Template, 3, 0, "div", 106);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -46079,14 +46419,14 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Te
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.isDataLoading() || ctx_r2.viewModeService.isExpanded() && ctx_r2.viewModeService.getIsTransitioning() ? 14 : ctx_r2.viewModeService.isExpanded() ? 15 : 16);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 115)(1, "div", 131);
-    i0.ɵɵelement(2, "div", 132);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 116)(1, "div", 132);
+    i0.ɵɵelement(2, "div", 133);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 133)(4, "div", 134);
+    i0.ɵɵelementStart(3, "div", 134)(4, "div", 135);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 135);
-    i0.ɵɵelement(6, "path", 136);
+    i0.ɵɵelementStart(5, "svg", 136);
+    i0.ɵɵelement(6, "path", 137);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -46097,81 +46437,81 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Co
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-emerald-500" : "text-emerald-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 122);
-    i0.ɵɵelement(1, "div", 137);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 123);
+    i0.ɵɵelement(1, "div", 138);
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 138);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 139);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cat_r27 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", cat_r27.value);
+    const cat_r28 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", cat_r28.value);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cat_r27.label);
+    i0.ɵɵtextInterpolate(cat_r28.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 49);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cat_r27 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", cat_r27.value);
+    const cat_r28 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", cat_r28.value);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(cat_r27.label);
+    i0.ɵɵtextInterpolate(cat_r28.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Conditional_0_Template, 2, 2, "option", 138)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Conditional_1_Template, 2, 2, "option", 49);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_17_Conditional_0_Template, 2, 2, "option", 139)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_17_Conditional_1_Template, 2, 2, "option", 49);
 } if (rf & 2) {
-    const cat_r27 = ctx.$implicit;
-    i0.ɵɵconditional(cat_r27.divider ? 0 : 1);
+    const cat_r28 = ctx.$implicit;
+    i0.ɵɵconditional(cat_r28.divider ? 0 : 1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "path", 125);
+    i0.ɵɵelement(0, "path", 126);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "path", 126);
+    i0.ɵɵelement(0, "path", 127);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 140);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const cat_r29 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter(cat_r29.value)); });
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 141);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_27_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r29); const cat_r30 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter(cat_r30.value)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const cat_r29 = i0.ɵɵnextContext().$implicit;
+    const cat_r30 = i0.ɵɵnextContext().$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵclassProp("opacity-70", ctx_r2.isCategoryTransitioning());
-    i0.ɵɵproperty("ngClass", ctx_r2.getCategoryPillClass(cat_r29.value));
+    i0.ɵɵproperty("ngClass", ctx_r2.getCategoryPillClass(cat_r30.value));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", cat_r29.label, " ");
+    i0.ɵɵtextInterpolate1(" ", cat_r30.label, " ");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Conditional_0_Template, 2, 4, "button", 139);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_27_Conditional_0_Template, 2, 4, "button", 140);
 } if (rf & 2) {
-    const cat_r29 = ctx.$implicit;
-    i0.ɵɵconditional(!cat_r29.divider ? 0 : -1);
+    const cat_r30 = ctx.$implicit;
+    i0.ɵɵconditional(!cat_r30.divider ? 0 : -1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_28_For_2_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-skeleton-loader", 85);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_28_For_2_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-skeleton-loader", 86);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵproperty("width", "100%")("height", "120px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_28_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 141)(1, "div", 142)(2, "div", 9);
-    i0.ɵɵelement(3, "symphiq-skeleton-loader", 85);
-    i0.ɵɵelementStart(4, "div", 97);
-    i0.ɵɵelement(5, "symphiq-skeleton-loader", 85)(6, "symphiq-skeleton-loader", 85);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_28_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 142)(1, "div", 143)(2, "div", 9);
+    i0.ɵɵelement(3, "symphiq-skeleton-loader", 86);
+    i0.ɵɵelementStart(4, "div", 98);
+    i0.ɵɵelement(5, "symphiq-skeleton-loader", 86)(6, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(7, "symphiq-skeleton-loader", 85);
+    i0.ɵɵelement(7, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 143);
-    i0.ɵɵrepeaterCreate(9, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_28_For_2_For_10_Template, 1, 3, "symphiq-skeleton-loader", 85, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(8, "div", 144);
+    i0.ɵɵrepeaterCreate(9, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_28_For_2_For_10_Template, 1, 3, "symphiq-skeleton-loader", 86, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -46187,70 +46527,70 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Co
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(13, _c4$3));
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 129);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_28_For_2_Template, 11, 14, "div", 141, i0.ɵɵrepeaterTrackByIdentity);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_28_For_2_Template, 11, 14, "div", 142, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c3$5));
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 149);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 150);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 150);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 151);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const metric_r30 = ctx.$implicit;
-    const ɵ$index_502_r31 = ctx.$index;
-    const ɵ$index_493_r32 = i0.ɵɵnextContext(3).$index;
+    const metric_r31 = ctx.$implicit;
+    const ɵ$index_508_r32 = ctx.$index;
+    const ɵ$index_499_r33 = i0.ɵɵnextContext(3).$index;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassMap(ctx_r2.getBentoCardClass(metric_r30, ɵ$index_502_r31));
-    i0.ɵɵstyleProp("animation-delay", 0.6 + ɵ$index_493_r32 * 0.15 + ɵ$index_502_r31 * 0.08 + "s");
+    i0.ɵɵclassMap(ctx_r2.getBentoCardClass(metric_r31, ɵ$index_508_r32));
+    i0.ɵɵstyleProp("animation-delay", 0.6 + ɵ$index_499_r33 * 0.15 + ɵ$index_508_r32 * 0.08 + "s");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("metric", metric_r30)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(metric_r30))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", false)("currencySymbol", ctx_r2.currencySymbol());
+    i0.ɵɵproperty("metric", metric_r31)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(metric_r31))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", false)("currencySymbol", ctx_r2.currencySymbol());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 146);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_0_For_2_Template, 2, 13, "div", 148, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 147);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_0_For_2_Template, 2, 13, "div", 149, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const funnelGroup_r33 = i0.ɵɵnextContext(2).$implicit;
+    const funnelGroup_r34 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(funnelGroup_r33.relatedMetrics);
+    i0.ɵɵrepeater(funnelGroup_r34.relatedMetrics);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 149);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 89);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 150);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 90);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const metric_r34 = ctx.$implicit;
-    const ɵ$index_510_r35 = ctx.$index;
-    const ɵ$index_493_r32 = i0.ɵɵnextContext(3).$index;
+    const metric_r35 = ctx.$implicit;
+    const ɵ$index_516_r36 = ctx.$index;
+    const ɵ$index_499_r33 = i0.ɵɵnextContext(3).$index;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("animation-delay", 0.6 + ɵ$index_493_r32 * 0.15 + ɵ$index_510_r35 * 0.08 + "s");
+    i0.ɵɵstyleProp("animation-delay", 0.6 + ɵ$index_499_r33 * 0.15 + ɵ$index_516_r36 * 0.08 + "s");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("metric", metric_r34)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(metric_r34))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true)("currencySymbol", ctx_r2.currencySymbol());
+    i0.ɵɵproperty("metric", metric_r35)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(metric_r35))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true)("currencySymbol", ctx_r2.currencySymbol());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 147);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_1_For_2_Template, 2, 11, "div", 151, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 148);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_1_For_2_Template, 2, 11, "div", 152, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const funnelGroup_r33 = i0.ɵɵnextContext(2).$implicit;
+    const funnelGroup_r34 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(funnelGroup_r33.relatedMetrics);
+    i0.ɵɵrepeater(funnelGroup_r34.relatedMetrics);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 152)(1, "div", 107)(2, "div", 119);
-    i0.ɵɵelement(3, "symphiq-skeleton-loader", 85)(4, "symphiq-skeleton-loader", 85);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 153)(1, "div", 108)(2, "div", 120);
+    i0.ɵɵelement(3, "symphiq-skeleton-loader", 86)(4, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-skeleton-loader", 85);
-    i0.ɵɵelementStart(6, "div", 153);
-    i0.ɵɵelement(7, "symphiq-skeleton-loader", 85)(8, "symphiq-skeleton-loader", 85);
+    i0.ɵɵelement(5, "symphiq-skeleton-loader", 86);
+    i0.ɵɵelementStart(6, "div", 154);
+    i0.ɵɵelement(7, "symphiq-skeleton-loader", 86)(8, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(9, "symphiq-skeleton-loader", 85)(10, "symphiq-skeleton-loader", 85);
-    i0.ɵɵelementStart(11, "div", 154);
-    i0.ɵɵelement(12, "symphiq-skeleton-loader", 85);
+    i0.ɵɵelement(9, "symphiq-skeleton-loader", 86)(10, "symphiq-skeleton-loader", 86);
+    i0.ɵɵelementStart(11, "div", 155);
+    i0.ɵɵelement(12, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(7);
@@ -46272,47 +46612,47 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Co
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100%")("height", "120px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 146);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_2_For_2_Template, 13, 25, "div", 152, i0.ɵɵrepeaterTrackByIdentity);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 147);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_2_For_2_Template, 13, 25, "div", 153, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c4$3));
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_0_Template, 3, 0, "div", 146)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_1_Template, 3, 0, "div", 147)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_2_Template, 3, 1, "div", 146);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_0_Template, 3, 0, "div", 147)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_1_Template, 3, 0, "div", 148)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_2_Template, 3, 1, "div", 147);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵconditional(ctx_r2.viewModeService.isExpanded() ? 0 : !ctx_r2.viewModeService.isExpanded() ? 1 : 2);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 145);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 89);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 146);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 90);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Conditional_2_Template, 3, 1);
+    i0.ɵɵconditionalCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Conditional_2_Template, 3, 1);
 } if (rf & 2) {
-    const funnelGroup_r33 = ctx.$implicit;
-    const ɵ$index_493_r32 = ctx.$index;
+    const funnelGroup_r34 = ctx.$implicit;
+    const ɵ$index_499_r33 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("animation-delay", 0.5 + ɵ$index_493_r32 * 0.15 + "s");
-    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "metric-" + ɵ$index_493_r32);
+    i0.ɵɵstyleProp("animation-delay", 0.5 + ɵ$index_499_r33 * 0.15 + "s");
+    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "metric-" + ɵ$index_499_r33);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("metric", funnelGroup_r33.funnelMetric)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(funnelGroup_r33.funnelMetric))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", ctx_r2.viewModeService.isCompact())("currencySymbol", ctx_r2.currencySymbol());
+    i0.ɵɵproperty("metric", funnelGroup_r34.funnelMetric)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(funnelGroup_r34.funnelMetric))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.analysisData())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", ctx_r2.viewModeService.isCompact())("currencySymbol", ctx_r2.currencySymbol());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(funnelGroup_r33.relatedMetrics.length > 0 ? 2 : -1);
+    i0.ɵɵconditional(funnelGroup_r34.relatedMetrics.length > 0 ? 2 : -1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_ForEmpty_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 144);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_ForEmpty_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 145);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 155);
-    i0.ɵɵelement(2, "path", 120);
+    i0.ɵɵelementStart(1, "svg", 156);
+    i0.ɵɵelement(2, "path", 121);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "h3", 156);
+    i0.ɵɵelementStart(3, "h3", 157);
     i0.ɵɵtext(4, "No Metrics Found");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 157);
+    i0.ɵɵelementStart(5, "p", 158);
     i0.ɵɵtext(6, "No performance metrics match your current filter selection. Try adjusting your filters to see more results.");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -46325,9 +46665,9 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Co
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-slate-600" : "text-slate-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 129);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_For_2_Template, 3, 14, null, null, i0.ɵɵrepeaterTrackByIndex, false, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_ForEmpty_3_Template, 7, 4, "div", 144);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_For_2_Template, 3, 14, null, null, i0.ɵɵrepeaterTrackByIndex, false, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_ForEmpty_3_Template, 7, 4, "div", 145);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -46335,41 +46675,41 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Co
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.groupedMetrics());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_0_Template, 7, 3, "div", 115);
-    i0.ɵɵelementStart(1, "section", 116);
-    i0.ɵɵelement(2, "div", 117);
-    i0.ɵɵelementStart(3, "div", 102)(4, "div", 118)(5, "div", 119)(6, "div", 9)(7, "div", 79)(8, "div", 9);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_0_Template, 7, 3, "div", 116);
+    i0.ɵɵelementStart(1, "section", 117);
+    i0.ɵɵelement(2, "div", 118);
+    i0.ɵɵelementStart(3, "div", 103)(4, "div", 119)(5, "div", 120)(6, "div", 9)(7, "div", 80)(8, "div", 9);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(9, "svg", 80);
-    i0.ɵɵelement(10, "path", 120);
+    i0.ɵɵelementStart(9, "svg", 81);
+    i0.ɵɵelement(10, "path", 121);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(11, "h2", 82);
+    i0.ɵɵelementStart(11, "h2", 83);
     i0.ɵɵtext(12, "Performance Metrics");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(13, "div", 121);
-    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_14_Template, 2, 0, "div", 122);
-    i0.ɵɵelementStart(15, "select", 123);
-    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template_select_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter($event)); });
-    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$p);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 124);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleSortOrder()); });
+    i0.ɵɵelementStart(13, "div", 122);
+    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_14_Template, 2, 0, "div", 123);
+    i0.ɵɵelementStart(15, "select", 124);
+    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Template_select_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter($event)); });
+    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$p);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 125);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleSortOrder()); });
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(19, "svg", 17);
-    i0.ɵɵconditionalCreate(20, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_20_Template, 1, 0, ":svg:path", 125);
-    i0.ɵɵconditionalCreate(21, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_21_Template, 1, 0, ":svg:path", 126);
+    i0.ɵɵconditionalCreate(20, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_20_Template, 1, 0, ":svg:path", 126);
+    i0.ɵɵconditionalCreate(21, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_21_Template, 1, 0, ":svg:path", 127);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(22, "span");
     i0.ɵɵtext(23, "Sort");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(24, "div", 127)(25, "div", 128);
-    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$p);
+    i0.ɵɵelementStart(24, "div", 128)(25, "div", 129);
+    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$p);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(28, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_28_Template, 3, 1, "div", 129)(29, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_Template, 4, 5, "div", 130);
+    i0.ɵɵconditionalCreate(28, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_28_Template, 3, 1, "div", 130)(29, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Conditional_29_Template, 4, 5, "div", 131);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -46402,49 +46742,49 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Te
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.isDataLoading() ? 28 : 29);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 158);
-    i0.ɵɵelement(1, "symphiq-section-divider", 166);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 159);
+    i0.ɵɵelement(1, "symphiq-section-divider", 167);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r2.viewMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 122);
-    i0.ɵɵelement(1, "div", 167);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 123);
+    i0.ɵɵelement(1, "div", 168);
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 138);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 139);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filter_r37 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", filter_r37.value);
+    const filter_r38 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", filter_r38.value);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(filter_r37.label);
+    i0.ɵɵtextInterpolate(filter_r38.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_For_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 49);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filter_r37 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", filter_r37.value);
+    const filter_r38 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", filter_r38.value);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(filter_r37.label);
+    i0.ɵɵtextInterpolate(filter_r38.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Conditional_0_Template, 2, 2, "option", 138)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Conditional_1_Template, 2, 2, "option", 49);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_For_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_For_15_Conditional_0_Template, 2, 2, "option", 139)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_For_15_Conditional_1_Template, 2, 2, "option", 49);
 } if (rf & 2) {
-    const filter_r37 = ctx.$implicit;
-    i0.ɵɵconditional(filter_r37.divider ? 0 : 1);
+    const filter_r38 = ctx.$implicit;
+    i0.ɵɵconditional(filter_r38.divider ? 0 : 1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_16_For_2_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 169);
-    i0.ɵɵelement(1, "symphiq-skeleton-loader", 85)(2, "symphiq-skeleton-loader", 85);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_16_For_2_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 170);
+    i0.ɵɵelement(1, "symphiq-skeleton-loader", 86)(2, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(5);
@@ -46454,12 +46794,12 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Co
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "80px")("height", "18px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 141)(1, "div", 142);
-    i0.ɵɵelement(2, "symphiq-skeleton-loader", 85)(3, "symphiq-skeleton-loader", 85);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 142)(1, "div", 143);
+    i0.ɵɵelement(2, "symphiq-skeleton-loader", 86)(3, "symphiq-skeleton-loader", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 168);
-    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_16_For_2_For_6_Template, 3, 7, "div", 169, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(4, "div", 169);
+    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_16_For_2_For_6_Template, 3, 7, "div", 170, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -46471,38 +46811,38 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Co
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(7, _c4$3));
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_16_For_2_Template, 7, 8, "div", 141, i0.ɵɵrepeaterTrackByIdentity);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_16_For_2_Template, 7, 8, "div", 142, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c5$2));
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 112);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-breakdown-section", 170);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 113);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-breakdown-section", 171);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const breakdown_r38 = ctx.$implicit;
-    const $index_r39 = ctx.$index;
+    const breakdown_r39 = ctx.$implicit;
+    const $index_r40 = ctx.$index;
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("animation-delay", 0.8 + $index_r39 * 0.1 + "s");
-    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "breakdown-" + $index_r39);
+    i0.ɵɵstyleProp("animation-delay", 0.8 + $index_r40 * 0.1 + "s");
+    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "breakdown-" + $index_r40);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("breakdown", breakdown_r38)("charts", ctx_r2.chartsForBreakdown(breakdown_r38))("isLightMode", ctx_r2.isLightMode())("isCompactMode", ctx_r2.viewModeService.isCompact())("currencySymbol", ctx_r2.currencySymbol());
+    i0.ɵɵproperty("breakdown", breakdown_r39)("charts", ctx_r2.chartsForBreakdown(breakdown_r39))("isLightMode", ctx_r2.isLightMode())("isCompactMode", ctx_r2.viewModeService.isCompact())("currencySymbol", ctx_r2.currencySymbol());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_17_ForEmpty_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 144);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_17_ForEmpty_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 145);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 155);
-    i0.ɵɵelement(2, "path", 171);
+    i0.ɵɵelementStart(1, "svg", 156);
+    i0.ɵɵelement(2, "path", 172);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "h3", 156);
+    i0.ɵɵelementStart(3, "h3", 157);
     i0.ɵɵtext(4, "No Breakdowns Found");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 157);
+    i0.ɵɵelementStart(5, "p", 158);
     i0.ɵɵtext(6, "No performance breakdowns match your current filter selection. Try adjusting your filters to see more results.");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -46515,9 +46855,9 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Co
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-slate-600" : "text-slate-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_17_For_2_Template, 2, 9, "div", 114, i0.ɵɵrepeaterTrackByIndex, false, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_17_ForEmpty_3_Template, 7, 4, "div", 144);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_17_For_2_Template, 2, 9, "div", 115, i0.ɵɵrepeaterTrackByIndex, false, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_17_ForEmpty_3_Template, 7, 4, "div", 145);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -46525,28 +46865,28 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Co
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.breakdowns());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_0_Template, 2, 1, "div", 158);
-    i0.ɵɵelementStart(1, "section", 159);
-    i0.ɵɵelement(2, "div", 160);
-    i0.ɵɵelementStart(3, "div", 102)(4, "div", 161)(5, "div", 79)(6, "div", 9);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_0_Template, 2, 1, "div", 159);
+    i0.ɵɵelementStart(1, "section", 160);
+    i0.ɵɵelement(2, "div", 161);
+    i0.ɵɵelementStart(3, "div", 103)(4, "div", 162)(5, "div", 80)(6, "div", 9);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(7, "svg", 80);
-    i0.ɵɵelement(8, "path", 162);
+    i0.ɵɵelementStart(7, "svg", 81);
+    i0.ɵɵelement(8, "path", 163);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(9, "h2", 82);
+    i0.ɵɵelementStart(9, "h2", 83);
     i0.ɵɵtext(10, "Performance Breakdowns");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 163);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template_div_click_11_listener($event) { i0.ɵɵrestoreView(_r36); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template_div_mousedown_11_listener($event) { i0.ɵɵrestoreView(_r36); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template_div_pointerdown_11_listener($event) { i0.ɵɵrestoreView(_r36); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_12_Template, 2, 0, "div", 122);
-    i0.ɵɵelementStart(13, "select", 164);
-    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeBreakdownFilter($event)); });
-    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$p);
+    i0.ɵɵelementStart(11, "div", 164);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Template_div_click_11_listener($event) { i0.ɵɵrestoreView(_r37); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Template_div_mousedown_11_listener($event) { i0.ɵɵrestoreView(_r37); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Template_div_pointerdown_11_listener($event) { i0.ɵɵrestoreView(_r37); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_12_Template, 2, 0, "div", 123);
+    i0.ɵɵelementStart(13, "select", 165);
+    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeBreakdownFilter($event)); });
+    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$p);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_16_Template, 3, 1, "div", 95)(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_17_Template, 4, 5, "div", 165);
+    i0.ɵɵconditionalCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_16_Template, 3, 1, "div", 96)(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Conditional_17_Template, 4, 5, "div", 166);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -46569,57 +46909,57 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Te
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.isDataLoading() ? 16 : 17);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 158);
-    i0.ɵɵelement(1, "symphiq-section-divider", 176);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 159);
+    i0.ɵɵelement(1, "symphiq-section-divider", 177);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r2.viewMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 122);
-    i0.ɵɵelement(1, "div", 177);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 123);
+    i0.ɵɵelement(1, "div", 178);
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 138);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_For_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 139);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filter_r41 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", filter_r41.value);
+    const filter_r42 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", filter_r42.value);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(filter_r41.label);
+    i0.ɵɵtextInterpolate(filter_r42.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_For_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 49);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const filter_r41 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("value", filter_r41.value);
+    const filter_r42 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("value", filter_r42.value);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(filter_r41.label);
+    i0.ɵɵtextInterpolate(filter_r42.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Conditional_0_Template, 2, 2, "option", 138)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Conditional_1_Template, 2, 2, "option", 49);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_For_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_For_16_Conditional_0_Template, 2, 2, "option", 139)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_For_16_Conditional_1_Template, 2, 2, "option", 49);
 } if (rf & 2) {
-    const filter_r41 = ctx.$implicit;
-    i0.ɵɵconditional(filter_r41.divider ? 0 : 1);
+    const filter_r42 = ctx.$implicit;
+    i0.ɵɵconditional(filter_r42.divider ? 0 : 1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-skeleton-loader", 85);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-skeleton-loader", 86);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("width", "100%")("height", "140px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95)(1, "div", 141);
-    i0.ɵɵelement(2, "symphiq-skeleton-loader", 85);
-    i0.ɵɵelementStart(3, "div", 178);
-    i0.ɵɵrepeaterCreate(4, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_17_For_5_Template, 1, 3, "symphiq-skeleton-loader", 85, i0.ɵɵrepeaterTrackByIdentity);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96)(1, "div", 142);
+    i0.ɵɵelement(2, "symphiq-skeleton-loader", 86);
+    i0.ɵɵelementStart(3, "div", 179);
+    i0.ɵɵrepeaterCreate(4, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_17_For_5_Template, 1, 3, "symphiq-skeleton-loader", 86, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -46630,34 +46970,34 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Co
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(4, _c3$5));
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-competitive-intelligence-view", 92);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-competitive-intelligence-view", 93);
 } if (rf & 2) {
     let tmp_8_0;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("metrics", ctx_r2.competitiveMetrics())("allCharts", ctx_r2.allCharts())("isLightMode", ctx_r2.isLightMode())("isCompactMode", ctx_r2.viewModeService.isCompact())("competitiveBenchmark", (tmp_8_0 = ctx_r2.performanceOverview().overallAssessment) == null ? null : tmp_8_0.competitiveBenchmark)("currencySymbol", ctx_r2.currencySymbol());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r40 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_0_Template, 2, 1, "div", 158);
-    i0.ɵɵelementStart(1, "section", 172);
-    i0.ɵɵelement(2, "div", 101);
-    i0.ɵɵelementStart(3, "div", 102)(4, "div", 173)(5, "div", 9)(6, "div", 79)(7, "div", 9);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r41 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_0_Template, 2, 1, "div", 159);
+    i0.ɵɵelementStart(1, "section", 173);
+    i0.ɵɵelement(2, "div", 102);
+    i0.ɵɵelementStart(3, "div", 103)(4, "div", 174)(5, "div", 9)(6, "div", 80)(7, "div", 9);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(8, "svg", 80);
-    i0.ɵɵelement(9, "path", 174);
+    i0.ɵɵelementStart(8, "svg", 81);
+    i0.ɵɵelement(9, "path", 175);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(10, "h2", 82);
+    i0.ɵɵelementStart(10, "h2", 83);
     i0.ɵɵtext(11, "Competitive Intelligence");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(12, "div", 175);
-    i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_13_Template, 2, 0, "div", 122);
-    i0.ɵɵelementStart(14, "select", 123);
-    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCompetitiveFilter($event)); });
-    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$p);
+    i0.ɵɵelementStart(12, "div", 176);
+    i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_13_Template, 2, 0, "div", 123);
+    i0.ɵɵelementStart(14, "select", 124);
+    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCompetitiveFilter($event)); });
+    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$p);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_17_Template, 6, 5, "div", 95)(18, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_18_Template, 1, 6, "symphiq-competitive-intelligence-view", 92);
+    i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_17_Template, 6, 5, "div", 96)(18, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Conditional_18_Template, 1, 6, "symphiq-competitive-intelligence-view", 93);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -46681,13 +47021,13 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Te
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.isDataLoading() ? 17 : 18);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "main", 36)(1, "div", 66);
-    i0.ɵɵconditionalCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_2_Template, 3, 1, "div", 93);
-    i0.ɵɵconditionalCreate(3, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_3_Template, 17, 10);
-    i0.ɵɵconditionalCreate(4, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template, 30, 18);
-    i0.ɵɵconditionalCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template, 18, 12);
-    i0.ɵɵconditionalCreate(6, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Template, 19, 13);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "main", 36)(1, "div", 68);
+    i0.ɵɵconditionalCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_2_Template, 3, 1, "div", 94);
+    i0.ɵɵconditionalCreate(3, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_3_Template, 17, 10);
+    i0.ɵɵconditionalCreate(4, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_4_Template, 30, 18);
+    i0.ɵɵconditionalCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_5_Template, 18, 12);
+    i0.ɵɵconditionalCreate(6, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Conditional_6_Template, 19, 13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -46723,9 +47063,15 @@ class SymphiqFunnelAnalysisDashboardComponent {
         this.isOnboarded = input(false, ...(ngDevMode ? [{ debugName: "isOnboarded" }] : []));
         this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
         this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
+        this.itemStatus = input(...(ngDevMode ? [undefined, { debugName: "itemStatus" }] : []));
         this.stepClick = output();
         this.nextStepClick = output();
         this.JourneyStepIdEnum = JourneyStepIdEnum;
+        this.AiDynamicContentStatusEnum = AiDynamicContentStatusEnum;
+        this.isContentGenerating = computed(() => {
+            const status = this.funnelAnalysis()?.selfContentStatus;
+            return status === AiDynamicContentStatusEnum.REQUESTED || status === AiDynamicContentStatusEnum.GENERATING;
+        }, ...(ngDevMode ? [{ debugName: "isContentGenerating" }] : []));
         // State signals
         this.selectedCategory = signal('ALL', ...(ngDevMode ? [{ debugName: "selectedCategory" }] : []));
         this.reverseSortOrder = signal(false, ...(ngDevMode ? [{ debugName: "reverseSortOrder" }] : []));
@@ -47750,7 +48096,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dashboardContainer = _t.first);
         } }, hostBindings: function SymphiqFunnelAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqFunnelAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], funnelAnalysis: [1, "funnelAnalysis"], businessProfile: [1, "businessProfile"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 60, vars: 89, consts: [["dashboardContainer", ""], [1, "bg-transparent"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "sticky", "top-0", "z-50", "animate-fade-in", 2, "animation-delay", "0s"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8", "py-6", "sm:py-8"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "sm:items-center", "justify-between", "gap-3", "sm:gap-0"], [1, "flex-1"], [1, "flex", "items-center", "gap-3"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-2", "bg-gradient-to-r", "from-blue-600", "via-purple-600", "to-indigo-600", "bg-clip-text", "text-transparent"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "flex-wrap", "items-center", "justify-between", "gap-3", "sm:gap-4"], [1, "text-sm", "sm:text-base"], [1, "flex", "items-center", "gap-4"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "class"], ["type", "button", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "flex", "items-center", "gap-2", "sm:gap-3", "whitespace-nowrap"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8", "py-3"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex", "items-center", "gap-4", "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "truncate", "bg-gradient-to-r", "from-blue-600", "via-purple-600", "to-indigo-600", "bg-clip-text", "text-transparent"], [1, "hidden", "lg:flex", "items-center", "gap-3", "px-4", "py-1.5", "rounded-lg", 3, "ngClass"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "class"], ["type", "button", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click", "title"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], [1, "sticky", "top-[var(--header-height)]", "z-40", "border-b", "backdrop-blur-md", "animate-slide-up-fade", 3, "ngClass"], [3, "sections", "viewMode", "embedded", "scrollElement"], [1, "fixed", "right-6", "top-1/2", "-translate-y-1/2", "z-40", "hidden", "xl:flex", "flex-col", "gap-4"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts", "currencySymbol", "businessProfile"], [3, "isLightMode", "allMetrics"], [3, "isLightMode"], [3, "resultSelected", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [3, "expandedChange", "scrollToTop", "toggleView", "isLightMode", "isCompactMode", "isExpanded"], [3, "navigate", "isLightMode", "sections", "activeSection"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"], [1, "text-xs", "sm:text-sm", "font-medium"], [3, "click", "mousedown", "pointerdown"], [1, "px-3", "sm:px-4", "py-1.5", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [3, "value"], [1, "text-xs", "font-medium"], [1, "text-sm", "font-bold"], [1, "text-xs", "font-semibold", 3, "ngClass"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click"], [1, "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "flex-1", "min-w-0"], [1, "text-sm", "font-medium", 3, "ngClass"], [1, "text-sm", "font-semibold", "truncate", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-medium", "uppercase", "border", "flex-shrink-0", 3, "ngClass"], ["title", "Clear search", 1, "p-2", "rounded-lg", "transition-colors", "flex-shrink-0", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", "cursor-pointer", 3, "libSymphiqTooltip", "tooltipPosition", "ngClass"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", "cursor-pointer", 3, "click", "libSymphiqTooltip", "tooltipPosition", "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "pt-8", "sm:pt-12", "pb-16", "sm:pb-24"], [1, "mb-8"], [3, "viewMode", "isOnboarded"], ["id", "section-insights", 1, "mb-8"], [3, "viewMode"], ["slot", "overall-performance"], [1, "p-6"], ["slot", "performance-metrics"], [1, "p-6", "space-y-8"], ["slot", "performance-breakdowns"], ["slot", "competitive-intelligence"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "pl-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"], [1, "text-xl", "sm:text-2xl", "font-bold"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-6"], [3, "insight", "allMetrics", "charts", "allCharts", "allBusinessInsights", "isLightMode", "viewMode", "isCompactMode", "isLoading"], [3, "width", "height", "isLightMode"], [3, "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading", "strengths", "weaknesses", "currencySymbol"], [3, "scrollToSection", "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading", "strengths", "weaknesses", "currencySymbol"], [1, "w-full"], [3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode", "currencySymbol"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6", "mt-4"], [3, "breakdown", "charts", "isLightMode", "isLoading", "isCompactMode", "currencySymbol"], [3, "metrics", "allCharts", "isLightMode", "isCompactMode", "competitiveBenchmark", "currencySymbol"], ["id", "section-overall", 1, "animate-fade-in-up", "mb-20", "sm:mb-28", 2, "animation-delay", "0.1s"], [1, "rounded-xl", "border", "p-6", "sm:p-8", "animate-pulse", 3, "ngClass"], [1, "space-y-6"], [1, "flex-1", "space-y-2"], [1, "space-y-2"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", "mt-6"], ["animationDelay", "0.15s", 3, "viewMode"], ["id", "section-insights", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at center, black 0%, transparent 70%)", 3, "ngClass"], [1, "relative"], [1, "flex", "items-center", "justify-between", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.2s"], [1, "masonry-grid"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "rounded-xl", "border", "p-6", "animate-pulse", "min-h-[280px]", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-center", "gap-3", "mb-4"], [1, "mt-6", "space-y-2"], [1, "flex", "gap-2", "mt-4"], [1, "animate-fade-in-up", 3, "class", "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [1, "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [3, "insight", "allMetrics", "charts", "allCharts", "allBusinessInsights", "isLightMode", "viewMode", "isCompactMode"], [1, "animate-fade-in-up", 3, "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [1, "relative", "mb-14", "sm:mb-24", "mt-24", "sm:mt-32", "animate-fade-in", 2, "animation-delay", "0.35s"], ["id", "section-metrics", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at top right, black 0%, transparent 70%)", 3, "ngClass"], [1, "flex", "flex-col", "gap-4", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.4s"], [1, "flex", "items-center", "justify-between"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "hidden", "sm:flex", "gap-2", "sm:gap-3", "items-center", "relative"], [1, "absolute", "-right-2", "top-1/2", "-translate-y-1/2", "z-10"], [1, "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-all", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [1, "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "transition-all", "flex", "items-center", "gap-2", "cursor-pointer", "hover:scale-105", "active:scale-95", 3, "click", "title"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"], [1, "sm:hidden", "-mx-6", "px-6"], [1, "flex", "gap-2", "overflow-x-auto", "pb-2", "snap-x", "snap-mandatory", "scrollbar-hide"], [1, "space-y-8", "sm:space-y-10"], [1, "space-y-8", "sm:space-y-10", 3, "animate-content-change", "transition-opacity-slow"], ["aria-hidden", "true", 1, "absolute", "inset-0", "flex", "items-center"], [1, "w-full", "h-px", "bg-gradient-to-r", 3, "ngClass"], [1, "relative", "flex", "justify-center"], [1, "px-4", "py-2", "rounded-full", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"], [1, "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full", "animate-spin"], ["disabled", "", 1, "font-semibold", 3, "value"], [1, "px-4", "py-2", "rounded-full", "text-xs", "font-medium", "whitespace-nowrap", "transition-all", "duration-200", "flex-shrink-0", "snap-start", "active:scale-95", 3, "ngClass", "opacity-70"], [1, "px-4", "py-2", "rounded-full", "text-xs", "font-medium", "whitespace-nowrap", "transition-all", "duration-200", "flex-shrink-0", "snap-start", "active:scale-95", 3, "click", "ngClass"], [1, "rounded-xl", "border", "p-6", "animate-pulse", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-4"], [1, "grid", "grid-cols-2", "md:grid-cols-4", "gap-4", "mt-6"], [1, "rounded-xl", "p-12", "border", "text-center", "animate-fade-in", 3, "ngClass"], [1, "w-full", "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [1, "bento-grid", "mt-4"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-4", "gap-3", "sm:gap-4", "mt-4"], [1, "animate-fade-in-up", 3, "class", "animation-delay"], [1, "animate-fade-in-up"], [1, "h-full", 3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode", "currencySymbol"], [1, "animate-fade-in-up", 3, "animation-delay"], [1, "rounded-xl", "border", "p-6", "animate-pulse", "min-h-[240px]", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "mt-4"], [1, "mt-4"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "mt-28", "sm:mt-36"], ["id", "section-breakdowns", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at bottom left, black 0%, transparent 70%)", 3, "ngClass"], [1, "flex", "flex-col", "sm:flex-row", "sm:items-center", "justify-between", "gap-4", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.7s"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], [1, "relative", "inline-block", 3, "click", "mousedown", "pointerdown"], [1, "px-3", "py-2", "text-sm", "rounded-lg", "border", "transition-all", "duration-200", "cursor-pointer", "focus:ring-2", "focus:ring-blue-500", "focus:outline-none", 3, "ngModelChange", "ngModel", "ngClass"], [1, "space-y-6", 3, "animate-content-change", "transition-opacity-slow"], ["animationDelay", "0.65s", 3, "viewMode"], [1, "w-4", "h-4", "border-2", "border-purple-500/30", "border-t-purple-500", "rounded-full", "animate-spin"], [1, "space-y-3"], [1, "flex", "items-center", "justify-between", "p-3", "rounded-lg", 3, "ngClass"], [3, "breakdown", "charts", "isLightMode", "isCompactMode", "currencySymbol"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], ["id", "section-competitive", 1, "relative"], [1, "flex", "items-center", "justify-between", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.9s"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], [1, "hidden", "sm:block", "relative"], ["animationDelay", "0.85s", 3, "viewMode"], [1, "w-4", "h-4", "border-2", "border-indigo-500/30", "border-t-indigo-500", "rounded-full", "animate-spin"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4", "mt-6"]], template: function SymphiqFunnelAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], funnelAnalysis: [1, "funnelAnalysis"], businessProfile: [1, "businessProfile"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], itemStatus: [1, "itemStatus"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 61, vars: 89, consts: [["dashboardContainer", ""], [1, "bg-transparent"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "sticky", "top-0", "z-50", "animate-fade-in", 2, "animation-delay", "0s"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8", "py-6", "sm:py-8"], [1, "flex", "flex-col", "sm:flex-row", "items-start", "sm:items-center", "justify-between", "gap-3", "sm:gap-0"], [1, "flex-1"], [1, "flex", "items-center", "gap-3"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-2", "bg-gradient-to-r", "from-blue-600", "via-purple-600", "to-indigo-600", "bg-clip-text", "text-transparent"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "flex-wrap", "items-center", "justify-between", "gap-3", "sm:gap-4"], [1, "text-sm", "sm:text-base"], [1, "flex", "items-center", "gap-4"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "class"], ["type", "button", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "flex", "items-center", "gap-2", "sm:gap-3", "whitespace-nowrap"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8", "py-3"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex", "items-center", "gap-4", "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "truncate", "bg-gradient-to-r", "from-blue-600", "via-purple-600", "to-indigo-600", "bg-clip-text", "text-transparent"], [1, "hidden", "lg:flex", "items-center", "gap-3", "px-4", "py-1.5", "rounded-lg", 3, "ngClass"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "class"], ["type", "button", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click", "title"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], [1, "sticky", "top-[var(--header-height)]", "z-40", "border-b", "backdrop-blur-md", "animate-slide-up-fade", 3, "ngClass"], [3, "sections", "viewMode", "embedded", "scrollElement"], [1, "fixed", "right-6", "top-1/2", "-translate-y-1/2", "z-40", "hidden", "xl:flex", "flex-col", "gap-4"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts", "currencySymbol", "businessProfile"], [3, "isLightMode", "allMetrics"], [3, "isLightMode"], [3, "resultSelected", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [3, "expandedChange", "scrollToTop", "toggleView", "isLightMode", "isCompactMode", "isExpanded"], [3, "navigate", "isLightMode", "sections", "activeSection"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"], [1, "text-xs", "sm:text-sm", "font-medium"], [3, "click", "mousedown", "pointerdown"], [1, "px-3", "sm:px-4", "py-1.5", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [3, "value"], [1, "text-xs", "font-medium"], [1, "text-sm", "font-bold"], [1, "text-xs", "font-semibold", 3, "ngClass"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click"], [1, "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "flex-1", "min-w-0"], [1, "text-sm", "font-medium", 3, "ngClass"], [1, "text-sm", "font-semibold", "truncate", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-medium", "uppercase", "border", "flex-shrink-0", 3, "ngClass"], ["title", "Clear search", 1, "p-2", "rounded-lg", "transition-colors", "flex-shrink-0", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", "cursor-pointer", 3, "libSymphiqTooltip", "tooltipPosition", "ngClass"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", "cursor-pointer", 3, "click", "libSymphiqTooltip", "tooltipPosition", "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "itemStatus", "funnelAnalysis", "confettiIntensity", "title", "subtitle"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "pt-8", "sm:pt-12", "pb-16", "sm:pb-24"], [1, "mb-8"], [3, "viewMode", "isOnboarded"], ["id", "section-insights", 1, "mb-8"], [3, "viewMode"], ["slot", "overall-performance"], [1, "p-6"], ["slot", "performance-metrics"], [1, "p-6", "space-y-8"], ["slot", "performance-breakdowns"], ["slot", "competitive-intelligence"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "pl-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"], [1, "text-xl", "sm:text-2xl", "font-bold"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-6"], [3, "insight", "allMetrics", "charts", "allCharts", "allBusinessInsights", "isLightMode", "viewMode", "isCompactMode", "isLoading"], [3, "width", "height", "isLightMode"], [3, "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading", "strengths", "weaknesses", "currencySymbol"], [3, "scrollToSection", "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading", "strengths", "weaknesses", "currencySymbol"], [1, "w-full"], [3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode", "currencySymbol"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6", "mt-4"], [3, "breakdown", "charts", "isLightMode", "isLoading", "isCompactMode", "currencySymbol"], [3, "metrics", "allCharts", "isLightMode", "isCompactMode", "competitiveBenchmark", "currencySymbol"], ["id", "section-overall", 1, "animate-fade-in-up", "mb-20", "sm:mb-28", 2, "animation-delay", "0.1s"], [1, "rounded-xl", "border", "p-6", "sm:p-8", "animate-pulse", 3, "ngClass"], [1, "space-y-6"], [1, "flex-1", "space-y-2"], [1, "space-y-2"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", "mt-6"], ["animationDelay", "0.15s", 3, "viewMode"], ["id", "section-insights", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at center, black 0%, transparent 70%)", 3, "ngClass"], [1, "relative"], [1, "flex", "items-center", "justify-between", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.2s"], [1, "masonry-grid"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "rounded-xl", "border", "p-6", "animate-pulse", "min-h-[280px]", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-center", "gap-3", "mb-4"], [1, "mt-6", "space-y-2"], [1, "flex", "gap-2", "mt-4"], [1, "animate-fade-in-up", 3, "class", "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [1, "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [3, "insight", "allMetrics", "charts", "allCharts", "allBusinessInsights", "isLightMode", "viewMode", "isCompactMode"], [1, "animate-fade-in-up", 3, "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [1, "relative", "mb-14", "sm:mb-24", "mt-24", "sm:mt-32", "animate-fade-in", 2, "animation-delay", "0.35s"], ["id", "section-metrics", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at top right, black 0%, transparent 70%)", 3, "ngClass"], [1, "flex", "flex-col", "gap-4", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.4s"], [1, "flex", "items-center", "justify-between"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "hidden", "sm:flex", "gap-2", "sm:gap-3", "items-center", "relative"], [1, "absolute", "-right-2", "top-1/2", "-translate-y-1/2", "z-10"], [1, "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-all", "duration-200", "cursor-pointer", 3, "ngModelChange", "ngModel"], [1, "px-3", "sm:px-4", "py-2", "rounded-lg", "text-xs", "sm:text-sm", "font-medium", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "transition-all", "flex", "items-center", "gap-2", "cursor-pointer", "hover:scale-105", "active:scale-95", 3, "click", "title"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"], [1, "sm:hidden", "-mx-6", "px-6"], [1, "flex", "gap-2", "overflow-x-auto", "pb-2", "snap-x", "snap-mandatory", "scrollbar-hide"], [1, "space-y-8", "sm:space-y-10"], [1, "space-y-8", "sm:space-y-10", 3, "animate-content-change", "transition-opacity-slow"], ["aria-hidden", "true", 1, "absolute", "inset-0", "flex", "items-center"], [1, "w-full", "h-px", "bg-gradient-to-r", 3, "ngClass"], [1, "relative", "flex", "justify-center"], [1, "px-4", "py-2", "rounded-full", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"], [1, "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full", "animate-spin"], ["disabled", "", 1, "font-semibold", 3, "value"], [1, "px-4", "py-2", "rounded-full", "text-xs", "font-medium", "whitespace-nowrap", "transition-all", "duration-200", "flex-shrink-0", "snap-start", "active:scale-95", 3, "ngClass", "opacity-70"], [1, "px-4", "py-2", "rounded-full", "text-xs", "font-medium", "whitespace-nowrap", "transition-all", "duration-200", "flex-shrink-0", "snap-start", "active:scale-95", 3, "click", "ngClass"], [1, "rounded-xl", "border", "p-6", "animate-pulse", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-4"], [1, "grid", "grid-cols-2", "md:grid-cols-4", "gap-4", "mt-6"], [1, "rounded-xl", "p-12", "border", "text-center", "animate-fade-in", 3, "ngClass"], [1, "w-full", "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [1, "bento-grid", "mt-4"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-4", "gap-3", "sm:gap-4", "mt-4"], [1, "animate-fade-in-up", 3, "class", "animation-delay"], [1, "animate-fade-in-up"], [1, "h-full", 3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode", "currencySymbol"], [1, "animate-fade-in-up", 3, "animation-delay"], [1, "rounded-xl", "border", "p-6", "animate-pulse", "min-h-[240px]", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "mt-4"], [1, "mt-4"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "mt-28", "sm:mt-36"], ["id", "section-breakdowns", 1, "relative"], [1, "absolute", "inset-0", "-mx-6", "sm:-mx-8", "-mt-8", "rounded-3xl", "opacity-30", "backdrop-blur-sm", 2, "mask-image", "radial-gradient(ellipse at bottom left, black 0%, transparent 70%)", 3, "ngClass"], [1, "flex", "flex-col", "sm:flex-row", "sm:items-center", "justify-between", "gap-4", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.7s"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], [1, "relative", "inline-block", 3, "click", "mousedown", "pointerdown"], [1, "px-3", "py-2", "text-sm", "rounded-lg", "border", "transition-all", "duration-200", "cursor-pointer", "focus:ring-2", "focus:ring-blue-500", "focus:outline-none", 3, "ngModelChange", "ngModel", "ngClass"], [1, "space-y-6", 3, "animate-content-change", "transition-opacity-slow"], ["animationDelay", "0.65s", 3, "viewMode"], [1, "w-4", "h-4", "border-2", "border-purple-500/30", "border-t-purple-500", "rounded-full", "animate-spin"], [1, "space-y-3"], [1, "flex", "items-center", "justify-between", "p-3", "rounded-lg", 3, "ngClass"], [3, "breakdown", "charts", "isLightMode", "isCompactMode", "currencySymbol"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"], ["id", "section-competitive", 1, "relative"], [1, "flex", "items-center", "justify-between", "mb-6", "sm:mb-8", "animate-fade-in", 2, "animation-delay", "0.9s"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"], [1, "hidden", "sm:block", "relative"], ["animationDelay", "0.85s", 3, "viewMode"], [1, "w-4", "h-4", "border-2", "border-indigo-500/30", "border-t-indigo-500", "rounded-full", "animate-spin"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4", "mt-6"]], template: function SymphiqFunnelAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1, 0);
             i0.ɵɵelement(2, "div", 2);
@@ -47805,20 +48151,20 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵconditionalCreate(47, SymphiqFunnelAnalysisDashboardComponent_Conditional_47_Template, 16, 8, "div", 33);
             i0.ɵɵconditionalCreate(48, SymphiqFunnelAnalysisDashboardComponent_Conditional_48_Template, 1, 4, "symphiq-floating-toc", 34);
             i0.ɵɵconditionalCreate(49, SymphiqFunnelAnalysisDashboardComponent_Conditional_49_Template, 6, 5, "div", 35);
-            i0.ɵɵconditionalCreate(50, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Template, 15, 9)(51, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Template, 7, 5, "main", 36);
+            i0.ɵɵconditionalCreate(50, SymphiqFunnelAnalysisDashboardComponent_Conditional_50_Template, 2, 7)(51, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Template, 15, 9)(52, SymphiqFunnelAnalysisDashboardComponent_Conditional_52_Template, 7, 5, "main", 36);
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelement(52, "symphiq-funnel-analysis-modal", 37)(53, "symphiq-profile-analysis-modal", 38)(54, "symphiq-business-analysis-modal", 39)(55, "symphiq-tooltip-container");
-            i0.ɵɵelementStart(56, "symphiq-search-bar", 40);
-            i0.ɵɵlistener("resultSelected", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_search_bar_resultSelected_56_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleSearchResult($event)); });
+            i0.ɵɵelement(53, "symphiq-funnel-analysis-modal", 37)(54, "symphiq-profile-analysis-modal", 38)(55, "symphiq-business-analysis-modal", 39)(56, "symphiq-tooltip-container");
+            i0.ɵɵelementStart(57, "symphiq-search-bar", 40);
+            i0.ɵɵlistener("resultSelected", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_search_bar_resultSelected_57_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleSearchResult($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(57, "symphiq-view-mode-switcher-modal", 41);
-            i0.ɵɵlistener("close", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_view_mode_switcher_modal_close_57_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeViewModeSwitcher()); })("modeSelected", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_view_mode_switcher_modal_modeSelected_57_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleDisplayModeChange($event)); });
+            i0.ɵɵelementStart(58, "symphiq-view-mode-switcher-modal", 41);
+            i0.ɵɵlistener("close", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_view_mode_switcher_modal_close_58_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeViewModeSwitcher()); })("modeSelected", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_view_mode_switcher_modal_modeSelected_58_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleDisplayModeChange($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(58, "symphiq-mobile-fab", 42);
-            i0.ɵɵlistener("expandedChange", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_expandedChange_58_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fabExpanded.set($event)); })("scrollToTop", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_scrollToTop_58_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.scrollToTop()); })("toggleView", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_toggleView_58_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.viewModeService.toggleViewMode()); });
+            i0.ɵɵelementStart(59, "symphiq-mobile-fab", 42);
+            i0.ɵɵlistener("expandedChange", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_expandedChange_59_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fabExpanded.set($event)); })("scrollToTop", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_scrollToTop_59_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.scrollToTop()); })("toggleView", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_toggleView_59_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.viewModeService.toggleViewMode()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(59, "symphiq-mobile-bottom-nav", 43);
-            i0.ɵɵlistener("navigate", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_bottom_nav_navigate_59_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleMobileNavigation($event)); });
+            i0.ɵɵelementStart(60, "symphiq-mobile-bottom-nav", 43);
+            i0.ɵɵlistener("navigate", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_bottom_nav_navigate_60_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleMobileNavigation($event)); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             let tmp_16_0;
@@ -47883,8 +48229,8 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isSimplifiedView() ? 49 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isSimplifiedView() ? 50 : 51);
-            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isContentGenerating() ? 50 : ctx.isSimplifiedView() ? 51 : 52);
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("viewMode", ctx.viewMode())("allMetrics", ctx.allMetrics())("allInsights", ctx.insights())("allCharts", ctx.allCharts())("currencySymbol", ctx.currencySymbol())("businessProfile", ctx.businessProfile());
             i0.ɵɵadvance();
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("allMetrics", ctx.allMetrics());
@@ -47918,7 +48264,8 @@ class SymphiqFunnelAnalysisDashboardComponent {
             CollapsibleFunnelSectionGroupComponent,
             ViewModeSwitcherModalComponent,
             ProfileAnalysisModalComponent,
-            BusinessAnalysisModalComponent], styles: ["[_nghost-%COMP%]{display:block;min-height:100%}.bg-gradient-radial[_ngcontent-%COMP%]{background:radial-gradient(circle,var(--tw-gradient-stops))}.bento-grid[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;grid-auto-flow:dense}@media (min-width: 768px){.bento-grid[_ngcontent-%COMP%]{grid-template-columns:repeat(6,1fr)}}.bento-small[_ngcontent-%COMP%]{grid-column:span 2;grid-row:span 1}.bento-medium[_ngcontent-%COMP%]{grid-column:span 3;grid-row:span 1}.bento-large[_ngcontent-%COMP%]{grid-column:span 4;grid-row:span 1}.bento-featured[_ngcontent-%COMP%]{grid-column:span 6;grid-row:span 1}@media (max-width: 767px){.bento-small[_ngcontent-%COMP%], .bento-medium[_ngcontent-%COMP%], .bento-large[_ngcontent-%COMP%], .bento-featured[_ngcontent-%COMP%]{grid-column:span 1}}.masonry-grid[_ngcontent-%COMP%]{column-count:1;column-gap:1.5rem}@media (min-width: 768px){.masonry-grid[_ngcontent-%COMP%]{column-count:2}}@media (min-width: 1280px){.masonry-grid[_ngcontent-%COMP%]{column-count:3}}.masonry-grid[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{break-inside:avoid;margin-bottom:1.5rem}.masonry-featured[_ngcontent-%COMP%]{column-span:all}.scrollbar-hide[_ngcontent-%COMP%]{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}@media (max-width: 640px){.animate-fade-in-up[_ngcontent-%COMP%]{animation-duration:.4s}}"], changeDetection: 0 }); }
+            BusinessAnalysisModalComponent,
+            ContentGenerationProgressWithConfettiComponent], styles: ["[_nghost-%COMP%]{display:block;min-height:100%}.bg-gradient-radial[_ngcontent-%COMP%]{background:radial-gradient(circle,var(--tw-gradient-stops))}.bento-grid[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;grid-auto-flow:dense}@media (min-width: 768px){.bento-grid[_ngcontent-%COMP%]{grid-template-columns:repeat(6,1fr)}}.bento-small[_ngcontent-%COMP%]{grid-column:span 2;grid-row:span 1}.bento-medium[_ngcontent-%COMP%]{grid-column:span 3;grid-row:span 1}.bento-large[_ngcontent-%COMP%]{grid-column:span 4;grid-row:span 1}.bento-featured[_ngcontent-%COMP%]{grid-column:span 6;grid-row:span 1}@media (max-width: 767px){.bento-small[_ngcontent-%COMP%], .bento-medium[_ngcontent-%COMP%], .bento-large[_ngcontent-%COMP%], .bento-featured[_ngcontent-%COMP%]{grid-column:span 1}}.masonry-grid[_ngcontent-%COMP%]{column-count:1;column-gap:1.5rem}@media (min-width: 768px){.masonry-grid[_ngcontent-%COMP%]{column-count:2}}@media (min-width: 1280px){.masonry-grid[_ngcontent-%COMP%]{column-count:3}}.masonry-grid[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{break-inside:avoid;margin-bottom:1.5rem}.masonry-featured[_ngcontent-%COMP%]{column-span:all}.scrollbar-hide[_ngcontent-%COMP%]{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide[_ngcontent-%COMP%]::-webkit-scrollbar{display:none}@media (max-width: 640px){.animate-fade-in-up[_ngcontent-%COMP%]{animation-duration:.4s}}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqFunnelAnalysisDashboardComponent, [{
         type: Component,
@@ -47946,1001 +48293,1025 @@ class SymphiqFunnelAnalysisDashboardComponent {
                     ViewModeSwitcherModalComponent,
                     ProfileAnalysisModalComponent,
                     BusinessAnalysisModalComponent,
-                ], template: `
-    <div
-      class="bg-transparent"
-      [class.min-h-screen]="!embedded()"
-      [class.relative]="!embedded()"
-      [style.display]="embedded() ? 'block' : null"
-      [style.min-height]="embedded() ? 'auto' : null"
-      #dashboardContainer>
-      <!-- Animated Background Bubbles -->
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
-
-      <!-- Scroll Progress Bar -->
-      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-          [style.width.%]="scrollProgress()"
-          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-          class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-
-      <header [class]="headerClass()" class="sticky top-0 z-50 animate-fade-in" style="animation-delay: 0s;">
-        <!-- Expanded Header (default state) -->
-        <div
-          class="transition-all duration-300 ease-in-out overflow-hidden"
-          [class.max-h-0]="isScrolled()"
-          [class.opacity-0]="isScrolled()"
-          [class.max-h-96]="!isScrolled()"
-          [class.opacity-100]="!isScrolled()">
-          <div
-            class="max-w-7xl mx-auto px-6 sm:px-8 py-6 sm:py-8"
-            [class.pointer-events-none]="isScrolled()"
-            [class.pointer-events-auto]="!isScrolled()">
-          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0">
-            <div class="flex-1">
-              <div class="flex items-center gap-3">
-                <h1 class="text-2xl sm:text-3xl font-bold mb-2 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">{{analysisData()?.title}}</h1>
-                @if (isLoading() && !isShowingLoader()) {
-                  <!-- Subtle refresh indicator -->
-                  <div class="animate-spin w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full" title="Refreshing data..."></div>
-                }
-              </div>
-              <div class="flex flex-wrap items-center justify-between gap-3 sm:gap-4">
-                <p [class]="headerSubtitleClass()" class="text-sm sm:text-base">Revenue Orchestration & Funnel Analysis</p>
-                <div class="flex items-center gap-4">
-                  @if (!isSimplifiedView()) {
-                    <!-- Search Button -->
-                    <button
-                      type="button"
-                      (click)="searchService.openSearch(); $event.preventDefault()"
-                      [class]="buttonClass()"
-                      class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105"
-                      title="Search (/ or Cmd+K)">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                      </svg>
-                      <span>Search</span>
-                    </button>
-                  }
-                  <!-- View Mode Switcher Button -->
-                  <button
-                    type="button"
-                    (click)="openViewModeSwitcher(); $event.preventDefault()"
-                    [class]="buttonClass()"
-                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                    </svg>
-                    <span>{{ displayModeLabel() }}</span>
-                  </button>
-                  @if (!isSimplifiedView()) {
-                    <div class="flex items-center gap-2 sm:gap-3 whitespace-nowrap">
-                      <label [class]="metaLabelClass()" class="text-xs sm:text-sm font-medium">View:</label>
-                      <div (click)="$event.stopPropagation()" (mousedown)="$event.stopPropagation()" (pointerdown)="$event.stopPropagation()">
-                      <select
-                        [ngModel]="selectedSectionFilter()"
-                        (ngModelChange)="changeSectionFilter($event)"
-                        [class]="selectClass()"
-                        class="px-3 sm:px-4 py-1.5 rounded-lg text-xs sm:text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 cursor-pointer">
-                        @for (section of sectionFilters; track section.value) {
-                          <option [value]="section.value">{{ section.label }}</option>
-                        }
-                      </select>
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            </div>
-            <div class="flex flex-col gap-4 min-w-[180px]">
-              @if (formattedGeneratedDate()) {
-                <div class="text-left sm:text-right">
-                  <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Generated At</div>
-                  <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ formattedGeneratedDate() }}</div>
-                </div>
-              }
-              <div class="text-left sm:text-right">
-                <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Requested by</div>
-                <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
-              </div>
-            </div>
-          </div>
-          </div>
-        </div>
-
-        <!-- Condensed Header (scrolled state) -->
-        <div
-          class="transition-all duration-300 ease-in-out overflow-hidden"
-          [class.max-h-0]="!isScrolled()"
-          [class.opacity-0]="!isScrolled()"
-          [class.max-h-20]="isScrolled()"
-          [class.opacity-100]="isScrolled()">
-          <div
-            class="max-w-7xl mx-auto px-6 sm:px-8 py-3"
-            [class.pointer-events-none]="!isScrolled()"
-            [class.pointer-events-auto]="isScrolled()">
-          <div class="flex items-center justify-between gap-4">
-            <div class="flex items-center gap-4 flex-1 min-w-0">
-              <h1 class="text-lg font-bold truncate bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">{{analysisData()?.title}}</h1>
-              @if (revenueMetric()) {
-                <div class="hidden lg:flex items-center gap-3 px-4 py-1.5 rounded-lg" [ngClass]="isLightMode() ? 'bg-emerald-50 border border-emerald-200' : 'bg-emerald-500/10 border border-emerald-500/20'">
-                  <span [class]="metaLabelClass()" class="text-xs font-medium">Revenue:</span>
-                  <span [class]="headerTitleClass()" class="text-sm font-bold">{{ formatValue(revenueValue()) }}</span>
-                  <span class="text-xs font-semibold" [ngClass]="revenueTrend() >= 0 ? 'text-emerald-600' : 'text-red-600'">
-                    {{ revenueTrend() >= 0 ? '+' : '' }}{{ revenueTrend().toFixed(1) }}%
-                  </span>
-                </div>
-              }
-            </div>
-            <div class="flex items-center gap-3">
-              @if (!isSimplifiedView()) {
-                <!-- Search Button (Icon Only in Sticky Header) -->
-                <button
-                  type="button"
-                  (click)="searchService.openSearch(); $event.preventDefault()"
-                  [class]="buttonClass()"
-                  title="Search (/ or Cmd+K)"
-                  class="p-2 rounded-lg transition-all duration-200 hover:scale-110">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                  </svg>
-                </button>
-              }
-              <!-- View Mode Switcher (Icon Only in Sticky Header) -->
-              <button
-                type="button"
-                (click)="openViewModeSwitcher(); $event.preventDefault()"
-                [class]="buttonClass()"
-                [title]="'Change View Mode: ' + displayModeLabel()"
-                class="p-2 rounded-lg transition-all duration-200 hover:scale-110">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                </svg>
-              </button>
-              @if (!isSimplifiedView()) {
-                <div (click)="$event.stopPropagation()" (mousedown)="$event.stopPropagation()" (pointerdown)="$event.stopPropagation()">
-                <select
-                  [ngModel]="selectedSectionFilter()"
-                  (ngModelChange)="changeSectionFilter($event)"
-                  [class]="selectClass()"
-                  class="px-3 py-1.5 rounded-lg text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 cursor-pointer">
-                  @for (section of sectionFilters; track section.value) {
-                    <option [value]="section.value">{{ section.label }}</option>
-                  }
-                </select>
-                </div>
-              }
-            </div>
-          </div>
-          </div>
-        </div>
-      </header>
-
-      <!-- Search Breadcrumb -->
-      @if (searchService.activeSearchResult()) {
-        <div [ngClass]="isLightMode() ? 'bg-blue-50/95 border-blue-200' : 'bg-blue-900/20 border-blue-800/30'" class="sticky top-[var(--header-height)] z-40 border-b backdrop-blur-md animate-slide-up-fade">
-          <div class="max-w-7xl mx-auto px-6 sm:px-8 py-3">
-            <div class="flex items-center justify-between gap-4">
-              <div class="flex items-center gap-3 flex-1 min-w-0">
-                <svg [ngClass]="isLightMode() ? 'text-blue-600' : 'text-blue-400'" class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                </svg>
-                <div class="flex items-center gap-2 flex-1 min-w-0">
-                  <span [ngClass]="isLightMode() ? 'text-blue-900' : 'text-blue-100'" class="text-sm font-medium">Showing:</span>
-                  <span [ngClass]="isLightMode() ? 'text-blue-700' : 'text-blue-300'" class="text-sm font-semibold truncate">
-                    {{ searchService.activeSearchResult()!.title }}
-                  </span>
-                  <span [ngClass]="isLightMode() ? 'bg-blue-100 text-blue-700 border-blue-200' : 'bg-blue-800/50 text-blue-300 border-blue-700/50'" class="px-2 py-0.5 rounded text-xs font-medium uppercase border flex-shrink-0">
-                    {{ searchService.activeSearchResult()!.type }}
-                  </span>
-                </div>
-              </div>
-              <button
-                (click)="clearSearchResult(); $event.stopPropagation()"
-                [ngClass]="isLightMode() ? 'text-blue-600 hover:text-blue-800 hover:bg-blue-100' : 'text-blue-400 hover:text-blue-200 hover:bg-blue-800/50'"
-                class="p-2 rounded-lg transition-colors flex-shrink-0"
-                title="Clear search">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      }
-
-      <!-- Floating Table of Contents -->
-      @if (!isSimplifiedView()) {
-        <symphiq-floating-toc
-          [sections]="tocSections()"
-          [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
-          [embedded]="embedded()"
-          [scrollElement]="scrollElement() ?? undefined"
-        />
-      }
-
-      <!-- Quick Navigation Dots -->
-      @if (!isSimplifiedView()) {
-        <div class="fixed right-6 top-1/2 -translate-y-1/2 z-40 hidden xl:flex flex-col gap-4">
-        @if (showOverallPerformance()) {
-          <button
-            (click)="scrollToTop()"
-            [libSymphiqTooltip]="'Scroll to Top'"
-            [tooltipPosition]="'left'"
-            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-blue-500' : 'bg-slate-600 hover:bg-blue-400'"
-            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
-          </button>
-        }
-        @if (showKeyInsights()) {
-          <button
-            (click)="scrollToSection('section-insights')"
-            [libSymphiqTooltip]="'Key Insights'"
-            [tooltipPosition]="'left'"
-            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-blue-500' : 'bg-slate-600 hover:bg-blue-400'"
-            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
-          </button>
-        }
-        @if (showPerformanceMetrics()) {
-          <button
-            (click)="scrollToSection('section-metrics')"
-            [libSymphiqTooltip]="'Performance Metrics'"
-            [tooltipPosition]="'left'"
-            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-blue-500' : 'bg-slate-600 hover:bg-blue-400'"
-            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
-          </button>
-        }
-        @if (showPerformanceBreakdowns()) {
-          <button
-            (click)="scrollToSection('section-breakdowns')"
-            [libSymphiqTooltip]="'Performance Breakdowns'"
-            [tooltipPosition]="'left'"
-            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-blue-500' : 'bg-slate-600 hover:bg-blue-400'"
-            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
-          </button>
-        }
-        @if (showCompetitiveIntelligence()) {
-          <button
-            (click)="scrollToSection('section-competitive')"
-            [libSymphiqTooltip]="'Competitive Intelligence'"
-            [tooltipPosition]="'left'"
-            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-indigo-500' : 'bg-slate-600 hover:bg-indigo-400'"
-            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
-          </button>
-        }
-      </div>
-      }
-
-      @if (isSimplifiedView()) {
-        <!-- Journey Progress Banner -->
-        @if (!isOnboarded()) {
-          <symphiq-journey-progress-indicator
-            [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
-            [currentStepId]="JourneyStepIdEnum.FUNNEL_ANALYSIS"
-            [showNextStepAction]="true"
-            [forDemo]="forDemo()"
-            [maxAccessibleStepId]="maxAccessibleStepId()"
-            (stepClick)="stepClick.emit($event)"
-            (nextStepClick)="nextStepClick.emit()"
-          />
-        }
-
-        <main class="max-w-7xl mx-auto px-6 sm:px-8">
-          <div class="pt-8 sm:pt-12 pb-16 sm:pb-24">
-            <!-- Welcome Banner -->
-            <div class="mb-8">
-              <symphiq-funnel-welcome-banner
-                [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
-                [isOnboarded]="isOnboarded()"
-              />
-            </div>
-
-            <!-- Key Insights Section -->
-            @if (showKeyInsights()) {
-              <section id="section-insights" class="mb-8">
-                <div class="flex items-center justify-between mb-6">
-                  <div class="flex items-center gap-3">
-                    <div [ngClass]="isLightMode() ? 'border-l-4 border-blue-500' : 'border-l-4 border-blue-400'" class="pl-4">
-                      <div class="flex items-center gap-3">
-                        <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-blue-500' : 'text-blue-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
-                        </svg>
-                        <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Key Insights</h2>
-                      </div>
-                    </div>
-                  </div>
-                  <span [class]="metaLabelClass()" class="text-xs sm:text-sm">{{ insights().length }} insights</span>
-                </div>
-
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  @for (insight of insights(); track $index) {
-                    <symphiq-funnel-analysis-insight-card
-                      [insight]="insight"
-                      [allMetrics]="allMetrics()"
-                      [charts]="chartsForInsight(insight)"
-                      [allCharts]="allCharts()"
-                      [allBusinessInsights]="allBusinessInsights()"
-                      [isLightMode]="isLightMode()"
-                      [viewMode]="viewMode()"
-                      [isCompactMode]="true"
-                      [isLoading]="isDataLoading()" />
-                  }
-                </div>
-              </section>
-            }
-
-            <!-- Supporting Data Section -->
-            <symphiq-collapsible-funnel-section-group
-              [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK">
-              <!-- Overall Performance Slot -->
-              <div slot="overall-performance">
-                @if (showOverallPerformance()) {
-                  <div class="p-6">
-                    @if (isDataLoading()) {
-                      <symphiq-skeleton-loader [width]="'100%'" [height]="'200px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                    } @else {
-                      <symphiq-funnel-analysis-overall-assessment
-                        [assessment]="performanceOverview().overallAssessment || {}"
-                        [revenueMetric]="revenueMetric()"
-                        [charts]="chartsForItem('OVERALL_ASSESSMENT')"
-                        [metrics]="allMetrics()"
-                        [isLightMode]="isLightMode()"
-                        [isLoading]="isOverallAssessmentLoading()"
-                        [isCompactMode]="true"
-                        [isChartsLoading]="areChartsLoading()"
-                        [strengths]="strengths()"
-                        [weaknesses]="weaknesses()"
-                        [currencySymbol]="currencySymbol()"
-                        (scrollToSection)="scrollToSection($event)" />
-                    }
-                  </div>
-                }
-              </div>
-
-              <!-- Performance Metrics Slot -->
-              <div slot="performance-metrics">
-                @if (showPerformanceMetrics()) {
-                  <div class="p-6 space-y-8">
-                    @for (funnelGroup of groupedMetrics(); track $index; let groupIdx = $index) {
-                      <!-- Funnel Stage Metric (Full Width) -->
-                      <div class="w-full">
-                        <symphiq-funnel-analysis-metric-card
-                          [metric]="funnelGroup.funnelMetric"
-                          [insights]="insights()"
-                          [charts]="chartsForMetric(funnelGroup.funnelMetric)"
-                          [allCharts]="allCharts()"
-                          [analysis]="analysisData()"
-                          [isLightMode]="isLightMode()"
-                          [viewMode]="viewMode()"
-                          [isCompactMode]="true"
-                          [currencySymbol]="currencySymbol()" />
-                      </div>
-                      <!-- Related Metrics (Grid Layout) -->
-                      @if (funnelGroup.relatedMetrics.length > 0) {
-                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
-                          @for (metric of funnelGroup.relatedMetrics; track $index) {
-                            <symphiq-funnel-analysis-metric-card
-                              [metric]="metric"
-                              [insights]="insights()"
-                              [charts]="chartsForMetric(metric)"
-                              [allCharts]="allCharts()"
-                              [analysis]="analysisData()"
-                              [isLightMode]="isLightMode()"
-                              [viewMode]="viewMode()"
-                              [isCompactMode]="true"
-                              [currencySymbol]="currencySymbol()" />
-                          }
-                        </div>
-                      }
-                    }
-                  </div>
-                }
-              </div>
-
-              <!-- Performance Breakdowns Slot -->
-              <div slot="performance-breakdowns">
-                @if (showPerformanceBreakdowns()) {
-                  <div class="p-6 space-y-8">
-                    @for (breakdown of breakdowns(); track $index) {
-                      <symphiq-funnel-analysis-breakdown-section
-                        [breakdown]="breakdown"
-                        [charts]="chartsForBreakdown(breakdown)"
-                        [isLightMode]="isLightMode()"
-                        [isLoading]="isDataLoading()"
-                        [isCompactMode]="true"
-                        [currencySymbol]="currencySymbol()" />
-                    }
-                  </div>
-                }
-              </div>
-
-              <!-- Competitive Intelligence Slot -->
-              <div slot="competitive-intelligence">
-                @if (showCompetitiveIntelligence()) {
-                  <div class="p-6">
-                    <symphiq-competitive-intelligence-view
-                      [metrics]="competitiveMetrics()"
-                      [allCharts]="allCharts()"
-                      [isLightMode]="isLightMode()"
-                      [isCompactMode]="true"
-                      [competitiveBenchmark]="performanceOverview().overallAssessment?.competitiveBenchmark"
-                      [currencySymbol]="currencySymbol()" />
-                  </div>
-                }
-              </div>
-            </symphiq-collapsible-funnel-section-group>
-          </div>
-        </main>
-      } @else {
-        <main class="max-w-7xl mx-auto px-6 sm:px-8">
-          <div class="pt-8 sm:pt-12 pb-16 sm:pb-24">
-          @if (showOverallPerformance()) {
-            <div id="section-overall" class="animate-fade-in-up mb-20 sm:mb-28" style="animation-delay: 0.1s;">
-              @if (isDataLoading()) {
-                <!-- Overall Assessment Skeleton -->
-                <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 sm:p-8 animate-pulse">
-                  <div class="space-y-6">
-                    <!-- Header -->
-                    <div class="flex items-center gap-3">
-                      <symphiq-skeleton-loader [width]="'48px'" [height]="'48px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                      <div class="flex-1 space-y-2">
-                        <symphiq-skeleton-loader [width]="'40%'" [height]="'32px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        <symphiq-skeleton-loader [width]="'60%'" [height]="'20px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                      </div>
-                    </div>
-                    <!-- Summary text -->
-                    <div class="space-y-2">
-                      <symphiq-skeleton-loader [width]="'100%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                      <symphiq-skeleton-loader [width]="'95%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                      <symphiq-skeleton-loader [width]="'90%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                    </div>
-                    <!-- Chart placeholder -->
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
-                      <symphiq-skeleton-loader [width]="'100%'" [height]="'200px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                      <symphiq-skeleton-loader [width]="'100%'" [height]="'200px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                    </div>
-                  </div>
-                </div>
-              } @else {
-                <symphiq-funnel-analysis-overall-assessment
-                  [assessment]="performanceOverview().overallAssessment || {}"
-                  [revenueMetric]="revenueMetric()"
-                  [charts]="chartsForItem('OVERALL_ASSESSMENT')"
-                  [metrics]="allMetrics()"
-                  [isLightMode]="isLightMode()"
-                  [isLoading]="isOverallAssessmentLoading()"
-                  [isCompactMode]="viewModeService.isCompact()"
-                  [isChartsLoading]="areChartsLoading()"
-                  [strengths]="strengths()"
-                  [weaknesses]="weaknesses()"
-                  [currencySymbol]="currencySymbol()"
-                  (scrollToSection)="scrollToSection($event)" />
-              }
-            </div>
-          }
-
-          @if (showKeyInsights()) {
-            @if (selectedSectionFilter() === 'ALL') {
-              <!-- Section Divider -->
-              <symphiq-section-divider [viewMode]="viewMode()" animationDelay="0.15s"></symphiq-section-divider>
-            }
-
-            <section id="section-insights" class="relative">
-              <!-- Background Pattern -->
-              <div class="absolute inset-0 -mx-6 sm:-mx-8 -mt-8 rounded-3xl opacity-30 backdrop-blur-sm" [ngClass]="isLightMode() ? 'bg-gradient-to-br from-blue-50/50 to-transparent' : 'bg-gradient-to-br from-blue-950/20 to-transparent'" style="mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);"></div>
-              <div class="relative">
-              <div class="flex items-center justify-between mb-6 sm:mb-8 animate-fade-in" style="animation-delay: 0.2s;">
-                <div class="flex items-center gap-3">
-                  <div [ngClass]="isLightMode() ? 'border-l-4 border-blue-500' : 'border-l-4 border-blue-400'" class="pl-4">
-                    <div class="flex items-center gap-3">
-                      <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-blue-500' : 'text-blue-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
-                      </svg>
-                      <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Key Insights</h2>
-                    </div>
-                  </div>
-                </div>
-                <span [class]="metaLabelClass()" class="text-xs sm:text-sm">{{ insights().length }} insights</span>
-              </div>
-              <!-- Masonry Layout for Insights -->
-              @if (isDataLoading() || (viewModeService.isExpanded() && viewModeService.getIsTransitioning())) {
-                <!-- Skeleton loaders during data loading or transition to expanded view -->
-                <div class="masonry-grid">
-                  @for (i of [1,2,3,4,5,6]; track i) {
-                    <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse min-h-[280px]">
-                      <div class="space-y-4">
-                        <div class="flex items-center gap-3 mb-4">
-                          <symphiq-skeleton-loader [width]="'48px'" [height]="'48px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                          <symphiq-skeleton-loader [width]="'60%'" [height]="'28px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        </div>
-                        <symphiq-skeleton-loader [width]="'100%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        <symphiq-skeleton-loader [width]="'95%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        <symphiq-skeleton-loader [width]="'85%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        <div class="mt-6 space-y-2">
-                          <symphiq-skeleton-loader [width]="'40%'" [height]="'14px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                          <symphiq-skeleton-loader [width]="'50%'" [height]="'36px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        </div>
-                        <div class="flex gap-2 mt-4">
-                          <symphiq-skeleton-loader [width]="'80px'" [height]="'28px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                          <symphiq-skeleton-loader [width]="'80px'" [height]="'28px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        </div>
-                      </div>
-                    </div>
-                  }
-                </div>
-              } @else if (viewModeService.isExpanded()) {
-                <div class="masonry-grid">
-                  @for (insight of insights(); track $index) {
-                    <div
-                      [class]="getInsightCardClass(insight)"
-                      class="animate-fade-in-up"
-                      [style.animation-delay]="(0.3 + $index * 0.1) + 's'"
-                      [libSymphiqSearchHighlight]="searchService.highlightedResultId()"
-                      [highlightId]="'insight-' + $index">
-                      <symphiq-funnel-analysis-insight-card
-                        [insight]="insight"
-                        [allMetrics]="allMetrics()"
-                        [charts]="chartsForInsight(insight)"
-                        [allCharts]="allCharts()"
-                        [allBusinessInsights]="allBusinessInsights()"
-                        [isLightMode]="isLightMode()"
-                        [viewMode]="viewMode()"
-                        [isCompactMode]="false" />
-                    </div>
-                  }
-                </div>
-              } @else {
-                <!-- Compact Grid for Insights -->
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                  @for (insight of insights(); track $index) {
-                    <div class="animate-fade-in-up" [style.animation-delay]="(0.3 + $index * 0.1) + 's'"
-                      [libSymphiqSearchHighlight]="searchService.highlightedResultId()"
-                      [highlightId]="'insight-' + $index">
-                      <symphiq-funnel-analysis-insight-card
-                        [insight]="insight"
-                        [allMetrics]="allMetrics()"
-                        [charts]="chartsForInsight(insight)"
-                        [allCharts]="allCharts()"
-                        [allBusinessInsights]="allBusinessInsights()"
-                        [isLightMode]="isLightMode()"
-                        [viewMode]="viewMode()"
-                        [isCompactMode]="true" />
-                    </div>
-                  }
-                </div>
-              }
-              </div>
-            </section>
-          }
-
-          @if (showPerformanceMetrics()) {
-            @if (selectedSectionFilter() === 'ALL') {
-              <!-- Section Divider -->
-              <div class="relative mb-14 sm:mb-24 mt-24 sm:mt-32 animate-fade-in" style="animation-delay: 0.35s;">
-                <div class="absolute inset-0 flex items-center" aria-hidden="true">
-                  <div class="w-full h-px bg-gradient-to-r" [ngClass]="isLightMode() ? 'from-transparent via-emerald-500/30 to-transparent' : 'from-transparent via-emerald-400/20 to-transparent'"></div>
-                </div>
-                <div class="relative flex justify-center">
-                <div class="px-4 py-2 rounded-full" [ngClass]="isLightMode() ? 'bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-200/50 shadow-lg shadow-emerald-500/10' : 'bg-gradient-to-br from-slate-900 to-slate-800 border border-emerald-500/20 shadow-lg shadow-emerald-500/5'">
-                  <svg class="w-5 h-5" [ngClass]="isLightMode() ? 'text-emerald-500' : 'text-emerald-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
-                  </svg>
-                </div>
-              </div>
-            </div>
-            }
-
-            <section id="section-metrics" class="relative">
-              <!-- Background Pattern -->
-              <div class="absolute inset-0 -mx-6 sm:-mx-8 -mt-8 rounded-3xl opacity-30 backdrop-blur-sm" [ngClass]="isLightMode() ? 'bg-gradient-to-tl from-emerald-50/50 to-transparent' : 'bg-gradient-to-tl from-emerald-950/20 to-transparent'" style="mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);"></div>
-              <div class="relative">
-              <div class="flex flex-col gap-4 mb-6 sm:mb-8 animate-fade-in" style="animation-delay: 0.4s;">
-                <div class="flex items-center justify-between">
-                  <div class="flex items-center gap-3">
-                    <div [ngClass]="isLightMode() ? 'border-l-4 border-emerald-500' : 'border-l-4 border-emerald-400'" class="pl-4">
-                      <div class="flex items-center gap-3">
-                        <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-emerald-500' : 'text-emerald-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
-                        </svg>
-                        <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Performance Metrics</h2>
-                      </div>
-                    </div>
-                  </div>
-                  <!-- Desktop controls -->
-                  <div class="hidden sm:flex gap-2 sm:gap-3 items-center relative">
-                    @if (isCategoryTransitioning()) {
-                      <div class="absolute -right-2 top-1/2 -translate-y-1/2 z-10">
-                        <div class="w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin"></div>
-                      </div>
-                    }
-                    <select
-                      [ngModel]="selectedCategory()"
-                      (ngModelChange)="changeCategoryFilter($event)"
-                      [class]="selectClass()"
-                      [class.opacity-70]="isCategoryTransitioning()"
-                      class="px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 cursor-pointer">
-                      @for (cat of categories; track cat.value) {
-                        @if (cat.divider) {
-                          <option [value]="cat.value" disabled class="font-semibold">{{ cat.label }}</option>
-                        } @else {
-                          <option [value]="cat.value">{{ cat.label }}</option>
-                        }
-                      }
-                    </select>
-                    <button
-                      (click)="toggleSortOrder()"
-                      [class]="sortButtonClass()"
-                      class="px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all flex items-center gap-2 cursor-pointer hover:scale-105 active:scale-95"
-                      [title]="reverseSortOrder() ? 'Sort: Revenue to Views' : 'Sort: Views to Revenue'">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        @if (!reverseSortOrder()) {
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
-                        }
-                        @if (reverseSortOrder()) {
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
-                        }
-                      </svg>
-                      <span>Sort</span>
-                    </button>
-                  </div>
-                </div>
-
-                <!-- Mobile horizontal scrolling category pills -->
-                <div class="sm:hidden -mx-6 px-6">
-                  <div class="flex gap-2 overflow-x-auto pb-2 snap-x snap-mandatory scrollbar-hide">
-                    @for (cat of categories; track cat.value) {
-                      @if (!cat.divider) {
-                        <button
-                          (click)="changeCategoryFilter(cat.value)"
-                          [ngClass]="getCategoryPillClass(cat.value)"
-                          [class.opacity-70]="isCategoryTransitioning()"
-                          class="px-4 py-2 rounded-full text-xs font-medium whitespace-nowrap transition-all duration-200 flex-shrink-0 snap-start active:scale-95">
-                          {{ cat.label }}
-                        </button>
-                      }
-                    }
-                  </div>
-                </div>
-              </div>
-              @if (isDataLoading()) {
-                <!-- Metrics Skeleton -->
-                <div class="space-y-8 sm:space-y-10">
-                  @for (i of [1,2,3]; track i) {
-                    <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse">
-                      <div class="flex items-center justify-between mb-4">
-                        <div class="flex items-center gap-3">
-                          <symphiq-skeleton-loader [width]="'40px'" [height]="'40px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                          <div class="space-y-2">
-                            <symphiq-skeleton-loader [width]="'150px'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                            <symphiq-skeleton-loader [width]="'100px'" [height]="'16px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                          </div>
-                        </div>
-                        <symphiq-skeleton-loader [width]="'80px'" [height]="'36px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                      </div>
-                      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
-                        @for (j of [1,2,3,4]; track j) {
-                          <symphiq-skeleton-loader [width]="'100%'" [height]="'120px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        }
-                      </div>
-                    </div>
-                  }
-                </div>
-              } @else {
-                <div class="space-y-8 sm:space-y-10" [class.animate-content-change]="isCategoryTransitioning()" [class.transition-opacity-slow]="isCategoryTransitioning()">
-                  @for (funnelGroup of groupedMetrics(); track $index; let groupIdx = $index) {
-                  <div class="w-full animate-fade-in-up" [style.animation-delay]="(0.5 + groupIdx * 0.15) + 's'"
-                    [libSymphiqSearchHighlight]="searchService.highlightedResultId()"
-                    [highlightId]="'metric-' + groupIdx">
-                    <symphiq-funnel-analysis-metric-card
-                      [metric]="funnelGroup.funnelMetric"
-                      [insights]="insights()"
-                      [charts]="chartsForMetric(funnelGroup.funnelMetric)"
-                      [allCharts]="allCharts()"
-                      [analysis]="analysisData()"
-                      [isLightMode]="isLightMode()"
-                      [viewMode]="viewMode()"
-                      [isCompactMode]="viewModeService.isCompact()"
-                      [currencySymbol]="currencySymbol()" />
-                  </div>
-                  @if (funnelGroup.relatedMetrics.length > 0) {
-                    <!-- Bento Box Grid Layout -->
-                    @if (viewModeService.isExpanded()) {
-                      <div class="bento-grid mt-4">
-                        @for (metric of funnelGroup.relatedMetrics; track $index; let metricIdx = $index) {
-                          <div
-                            [class]="getBentoCardClass(metric, metricIdx)"
-                            class="animate-fade-in-up"
-                            [style.animation-delay]="(0.6 + groupIdx * 0.15 + metricIdx * 0.08) + 's'">
-                            <symphiq-funnel-analysis-metric-card
-                              class="h-full"
-                              [metric]="metric"
-                              [insights]="insights()"
-                              [charts]="chartsForMetric(metric)"
-                              [allCharts]="allCharts()"
-                              [analysis]="analysisData()"
-                              [isLightMode]="isLightMode()"
-                              [viewMode]="viewMode()"
-                              [isCompactMode]="false"
-                              [currencySymbol]="currencySymbol()" />
-                          </div>
-                        }
-                      </div>
-                    } @else if (!viewModeService.isExpanded()) {
-                      <!-- Compact Grid Layout -->
-                      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mt-4">
-                        @for (metric of funnelGroup.relatedMetrics; track $index; let metricIdx = $index) {
-                          <div class="animate-fade-in-up" [style.animation-delay]="(0.6 + groupIdx * 0.15 + metricIdx * 0.08) + 's'">
-                            <symphiq-funnel-analysis-metric-card
-                              [metric]="metric"
-                              [insights]="insights()"
-                              [charts]="chartsForMetric(metric)"
-                              [allCharts]="allCharts()"
-                              [analysis]="analysisData()"
-                              [isLightMode]="isLightMode()"
-                              [viewMode]="viewMode()"
-                              [isCompactMode]="true"
-                              [currencySymbol]="currencySymbol()" />
-                          </div>
-                        }
-                      </div>
-                    } @else {
-                      <!-- Skeleton loaders during transition to expanded view -->
-                      <div class="bento-grid mt-4">
-                        @for (i of [1,2,3,4]; track i) {
-                          <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse min-h-[240px]">
-                            <div class="space-y-4">
-                              <div class="flex items-center justify-between">
-                                <symphiq-skeleton-loader [width]="'60%'" [height]="'22px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                                <symphiq-skeleton-loader [width]="'60px'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                              </div>
-                              <symphiq-skeleton-loader [width]="'45%'" [height]="'42px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                              <div class="flex items-center gap-3 mt-4">
-                                <symphiq-skeleton-loader [width]="'24px'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                                <symphiq-skeleton-loader [width]="'30%'" [height]="'20px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                              </div>
-                              <symphiq-skeleton-loader [width]="'100%'" [height]="'16px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                              <symphiq-skeleton-loader [width]="'85%'" [height]="'16px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                              <div class="mt-4">
-                                <symphiq-skeleton-loader [width]="'100%'" [height]="'120px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                              </div>
-                            </div>
-                          </div>
-                        }
-                      </div>
-                    }
-                  }
-                  } @empty {
-                    <div [ngClass]="isLightMode() ? 'bg-slate-50 border-slate-200' : 'bg-slate-800/50 border-slate-700'" class="rounded-xl p-12 border text-center animate-fade-in">
-                      <svg class="w-16 h-16 mx-auto mb-4" [ngClass]="isLightMode() ? 'text-slate-300' : 'text-slate-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
-                      </svg>
-                      <h3 [ngClass]="isLightMode() ? 'text-slate-900' : 'text-white'" class="text-lg font-semibold mb-2">No Metrics Found</h3>
-                      <p [ngClass]="isLightMode() ? 'text-slate-600' : 'text-slate-400'" class="text-sm">No performance metrics match your current filter selection. Try adjusting your filters to see more results.</p>
-                    </div>
-                  }
-                </div>
-              }
-              </div>
-            </section>
-          }
-
-          @if (showPerformanceBreakdowns()) {
-            @if (selectedSectionFilter() === 'ALL') {
-              <!-- Section Divider -->
-              <div class="mt-28 sm:mt-36">
-                <symphiq-section-divider [viewMode]="viewMode()" animationDelay="0.65s"></symphiq-section-divider>
-              </div>
-            }
-
-            <section id="section-breakdowns" class="relative">
-              <!-- Background Pattern -->
-              <div class="absolute inset-0 -mx-6 sm:-mx-8 -mt-8 rounded-3xl opacity-30 backdrop-blur-sm" [ngClass]="isLightMode() ? 'bg-gradient-to-tr from-purple-50/50 to-transparent' : 'bg-gradient-to-tr from-purple-950/20 to-transparent'" style="mask-image: radial-gradient(ellipse at bottom left, black 0%, transparent 70%);"></div>
-              <div class="relative">
-              <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 sm:mb-8 animate-fade-in" style="animation-delay: 0.7s;">
-                <div [ngClass]="isLightMode() ? 'border-l-4 border-purple-500' : 'border-l-4 border-purple-400'" class="pl-4">
-                  <div class="flex items-center gap-3">
-                    <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-purple-500' : 'text-purple-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
-                    </svg>
-                    <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Performance Breakdowns</h2>
-                  </div>
-                </div>
-                <div (click)="$event.stopPropagation()" (mousedown)="$event.stopPropagation()" (pointerdown)="$event.stopPropagation()" class="relative inline-block">
-                  @if (isBreakdownTransitioning()) {
-                    <div class="absolute -right-2 top-1/2 -translate-y-1/2 z-10">
-                      <div class="w-4 h-4 border-2 border-purple-500/30 border-t-purple-500 rounded-full animate-spin"></div>
-                    </div>
-                  }
-                  <select
-                    [ngModel]="selectedBreakdownFilter()"
-                    (ngModelChange)="changeBreakdownFilter($event)"
-                    [ngClass]="isLightMode()
-                      ? 'bg-white border-slate-300 text-slate-900 hover:border-blue-400 focus:border-blue-500'
-                      : 'bg-slate-700 border-slate-600 text-white hover:border-slate-500 focus:border-blue-500'"
-                    [class.opacity-70]="isBreakdownTransitioning()"
-                    class="px-3 py-2 text-sm rounded-lg border transition-all duration-200 cursor-pointer focus:ring-2 focus:ring-blue-500 focus:outline-none">
-                  @for (filter of breakdownFilters; track filter.value) {
-                    @if (filter.divider) {
-                      <option [value]="filter.value" disabled class="font-semibold">{{ filter.label }}</option>
-                    } @else {
-                      <option [value]="filter.value">{{ filter.label }}</option>
-                    }
-                  }
-                </select>
-                </div>
-              </div>
-              @if (isDataLoading()) {
-                <!-- Breakdowns Skeleton -->
-                <div class="space-y-6">
-                  @for (i of [1,2]; track i) {
-                    <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse">
-                      <div class="flex items-center justify-between mb-4">
-                        <symphiq-skeleton-loader [width]="'200px'" [height]="'28px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        <symphiq-skeleton-loader [width]="'100px'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                      </div>
-                      <div class="space-y-3">
-                        @for (j of [1,2,3,4]; track j) {
-                          <div class="flex items-center justify-between p-3 rounded-lg" [ngClass]="isLightMode() ? 'bg-slate-50' : 'bg-slate-700/50'">
-                            <symphiq-skeleton-loader [width]="'150px'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                            <symphiq-skeleton-loader [width]="'80px'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                          </div>
-                        }
-                      </div>
-                    </div>
-                  }
-                </div>
-              } @else {
-                <div class="space-y-6" [class.animate-content-change]="isBreakdownTransitioning()" [class.transition-opacity-slow]="isBreakdownTransitioning()">
-                  @for (breakdown of breakdowns(); track $index) {
-                    <div class="animate-fade-in-up" [style.animation-delay]="(0.8 + $index * 0.1) + 's'"
-                      [libSymphiqSearchHighlight]="searchService.highlightedResultId()"
-                      [highlightId]="'breakdown-' + $index">
-                      <symphiq-funnel-analysis-breakdown-section
-                        [breakdown]="breakdown"
-                        [charts]="chartsForBreakdown(breakdown)"
-                        [isLightMode]="isLightMode()"
-                        [isCompactMode]="viewModeService.isCompact()"
-                        [currencySymbol]="currencySymbol()" />
-                    </div>
-                  } @empty {
-                    <div [ngClass]="isLightMode() ? 'bg-slate-50 border-slate-200' : 'bg-slate-800/50 border-slate-700'" class="rounded-xl p-12 border text-center animate-fade-in">
-                      <svg class="w-16 h-16 mx-auto mb-4" [ngClass]="isLightMode() ? 'text-slate-300' : 'text-slate-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
-                      </svg>
-                      <h3 [ngClass]="isLightMode() ? 'text-slate-900' : 'text-white'" class="text-lg font-semibold mb-2">No Breakdowns Found</h3>
-                      <p [ngClass]="isLightMode() ? 'text-slate-600' : 'text-slate-400'" class="text-sm">No performance breakdowns match your current filter selection. Try adjusting your filters to see more results.</p>
-                    </div>
-                  }
-                </div>
-              }
-              </div>
-            </section>
-          }
-
-          @if (showCompetitiveIntelligence()) {
-            @if (selectedSectionFilter() === 'ALL') {
-              <!-- Section Divider -->
-              <div class="mt-28 sm:mt-36">
-                <symphiq-section-divider [viewMode]="viewMode()" animationDelay="0.85s"></symphiq-section-divider>
-              </div>
-            }
-
-            <!-- Competitive Intelligence Section -->
-            <section id="section-competitive" class="relative">
-              <!-- Background Pattern -->
-              <div class="absolute inset-0 -mx-6 sm:-mx-8 -mt-8 rounded-3xl opacity-30 backdrop-blur-sm" [ngClass]="isLightMode() ? 'bg-gradient-to-br from-indigo-50/50 to-transparent' : 'bg-gradient-to-br from-indigo-950/20 to-transparent'" style="mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);"></div>
-              <div class="relative">
-                <div class="flex items-center justify-between mb-6 sm:mb-8 animate-fade-in" style="animation-delay: 0.9s;">
-                  <div class="flex items-center gap-3">
-                    <div [ngClass]="isLightMode() ? 'border-l-4 border-indigo-500' : 'border-l-4 border-indigo-400'" class="pl-4">
-                      <div class="flex items-center gap-3">
-                        <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-indigo-500' : 'text-indigo-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                        </svg>
-                        <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Competitive Intelligence</h2>
-                      </div>
-                    </div>
-                  </div>
-                  <!-- Filter Dropdown -->
-                  <div class="hidden sm:block relative">
-                    @if (isCompetitiveTransitioning()) {
-                      <div class="absolute -right-2 top-1/2 -translate-y-1/2 z-10">
-                        <div class="w-4 h-4 border-2 border-indigo-500/30 border-t-indigo-500 rounded-full animate-spin"></div>
-                      </div>
-                    }
-                    <select
-                      [ngModel]="selectedCompetitiveFilter()"
-                      (ngModelChange)="changeCompetitiveFilter($event)"
-                      [class]="selectClass()"
-                      [class.opacity-70]="isCompetitiveTransitioning()"
-                      class="px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 cursor-pointer">
-                      @for (filter of competitiveFilters; track filter.value) {
-                        @if (filter.divider) {
-                          <option [value]="filter.value" disabled class="font-semibold">{{ filter.label }}</option>
-                        } @else {
-                          <option [value]="filter.value">{{ filter.label }}</option>
-                        }
-                      }
-                    </select>
-                  </div>
-                </div>
-
-                @if (isDataLoading()) {
-                  <!-- Competitive Intelligence Skeleton -->
-                  <div class="space-y-6">
-                    <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse">
-                      <symphiq-skeleton-loader [width]="'60%'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
-                        @for (i of [1,2,3]; track i) {
-                          <symphiq-skeleton-loader [width]="'100%'" [height]="'140px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
-                        }
-                      </div>
-                    </div>
-                  </div>
-                } @else {
-                  <symphiq-competitive-intelligence-view
-                    [metrics]="competitiveMetrics()"
-                    [allCharts]="allCharts()"
-                    [isLightMode]="isLightMode()"
-                    [isCompactMode]="viewModeService.isCompact()"
-                    [competitiveBenchmark]="performanceOverview().overallAssessment?.competitiveBenchmark"
-                    [currencySymbol]="currencySymbol()" />
-                }
-              </div>
-            </section>
-          }
-        </div>
-      </main>
-      }
-
-      <symphiq-funnel-analysis-modal
-        [isLightMode]="isLightMode()"
-        [viewMode]="viewMode()"
-        [allMetrics]="allMetrics()"
-        [allInsights]="insights()"
-        [allCharts]="allCharts()"
-        [currencySymbol]="currencySymbol()"
-        [businessProfile]="businessProfile()"></symphiq-funnel-analysis-modal>
-      <symphiq-profile-analysis-modal
-        [isLightMode]="isLightMode()"
-        [allMetrics]="allMetrics()"
-      ></symphiq-profile-analysis-modal>
-      <symphiq-business-analysis-modal [isLightMode]="isLightMode()" />
-      <symphiq-tooltip-container></symphiq-tooltip-container>
-      <symphiq-search-bar
-        [isLightMode]="isLightMode()"
-        (resultSelected)="handleSearchResult($event)" />
-
-      <!-- View Mode Switcher Modal -->
-      <symphiq-view-mode-switcher-modal
-        [isOpen]="isViewModeSwitcherOpen()"
-        [currentMode]="displayMode()"
-        [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
-        [isLoading]="isViewModeSwitching()"
-        (close)="closeViewModeSwitcher()"
-        (modeSelected)="handleDisplayModeChange($event)"
-      />
-
-      <!-- Mobile FAB -->
-      <symphiq-mobile-fab
-        [isLightMode]="isLightMode()"
-        [isCompactMode]="viewModeService.isCompact()"
-        [isExpanded]="fabExpanded()"
-        (expandedChange)="fabExpanded.set($event)"
-        (scrollToTop)="scrollToTop()"
-        (toggleView)="viewModeService.toggleViewMode()" />
-
-      <!-- Mobile Bottom Navigation -->
-      <symphiq-mobile-bottom-nav
-        [isLightMode]="isLightMode()"
-        [sections]="navSections"
-        [activeSection]="activeNavSection()"
-        (navigate)="handleMobileNavigation($event)" />
-
-    </div>
+                    ContentGenerationProgressWithConfettiComponent,
+                ], template: `
+    <div
+      class="bg-transparent"
+      [class.min-h-screen]="!embedded()"
+      [class.relative]="!embedded()"
+      [style.display]="embedded() ? 'block' : null"
+      [style.min-height]="embedded() ? 'auto' : null"
+      #dashboardContainer>
+      <!-- Animated Background Bubbles -->
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+
+      <!-- Scroll Progress Bar -->
+      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+          [style.width.%]="scrollProgress()"
+          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+          class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+
+      <header [class]="headerClass()" class="sticky top-0 z-50 animate-fade-in" style="animation-delay: 0s;">
+        <!-- Expanded Header (default state) -->
+        <div
+          class="transition-all duration-300 ease-in-out overflow-hidden"
+          [class.max-h-0]="isScrolled()"
+          [class.opacity-0]="isScrolled()"
+          [class.max-h-96]="!isScrolled()"
+          [class.opacity-100]="!isScrolled()">
+          <div
+            class="max-w-7xl mx-auto px-6 sm:px-8 py-6 sm:py-8"
+            [class.pointer-events-none]="isScrolled()"
+            [class.pointer-events-auto]="!isScrolled()">
+          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0">
+            <div class="flex-1">
+              <div class="flex items-center gap-3">
+                <h1 class="text-2xl sm:text-3xl font-bold mb-2 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">{{analysisData()?.title}}</h1>
+                @if (isLoading() && !isShowingLoader()) {
+                  <!-- Subtle refresh indicator -->
+                  <div class="animate-spin w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full" title="Refreshing data..."></div>
+                }
+              </div>
+              <div class="flex flex-wrap items-center justify-between gap-3 sm:gap-4">
+                <p [class]="headerSubtitleClass()" class="text-sm sm:text-base">Revenue Orchestration & Funnel Analysis</p>
+                <div class="flex items-center gap-4">
+                  @if (!isSimplifiedView()) {
+                    <!-- Search Button -->
+                    <button
+                      type="button"
+                      (click)="searchService.openSearch(); $event.preventDefault()"
+                      [class]="buttonClass()"
+                      class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105"
+                      title="Search (/ or Cmd+K)">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                      </svg>
+                      <span>Search</span>
+                    </button>
+                  }
+                  <!-- View Mode Switcher Button -->
+                  <button
+                    type="button"
+                    (click)="openViewModeSwitcher(); $event.preventDefault()"
+                    [class]="buttonClass()"
+                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                    </svg>
+                    <span>{{ displayModeLabel() }}</span>
+                  </button>
+                  @if (!isSimplifiedView()) {
+                    <div class="flex items-center gap-2 sm:gap-3 whitespace-nowrap">
+                      <label [class]="metaLabelClass()" class="text-xs sm:text-sm font-medium">View:</label>
+                      <div (click)="$event.stopPropagation()" (mousedown)="$event.stopPropagation()" (pointerdown)="$event.stopPropagation()">
+                      <select
+                        [ngModel]="selectedSectionFilter()"
+                        (ngModelChange)="changeSectionFilter($event)"
+                        [class]="selectClass()"
+                        class="px-3 sm:px-4 py-1.5 rounded-lg text-xs sm:text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 cursor-pointer">
+                        @for (section of sectionFilters; track section.value) {
+                          <option [value]="section.value">{{ section.label }}</option>
+                        }
+                      </select>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            </div>
+            <div class="flex flex-col gap-4 min-w-[180px]">
+              @if (formattedGeneratedDate()) {
+                <div class="text-left sm:text-right">
+                  <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Generated At</div>
+                  <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ formattedGeneratedDate() }}</div>
+                </div>
+              }
+              <div class="text-left sm:text-right">
+                <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Requested by</div>
+                <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
+              </div>
+            </div>
+          </div>
+          </div>
+        </div>
+
+        <!-- Condensed Header (scrolled state) -->
+        <div
+          class="transition-all duration-300 ease-in-out overflow-hidden"
+          [class.max-h-0]="!isScrolled()"
+          [class.opacity-0]="!isScrolled()"
+          [class.max-h-20]="isScrolled()"
+          [class.opacity-100]="isScrolled()">
+          <div
+            class="max-w-7xl mx-auto px-6 sm:px-8 py-3"
+            [class.pointer-events-none]="!isScrolled()"
+            [class.pointer-events-auto]="isScrolled()">
+          <div class="flex items-center justify-between gap-4">
+            <div class="flex items-center gap-4 flex-1 min-w-0">
+              <h1 class="text-lg font-bold truncate bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">{{analysisData()?.title}}</h1>
+              @if (revenueMetric()) {
+                <div class="hidden lg:flex items-center gap-3 px-4 py-1.5 rounded-lg" [ngClass]="isLightMode() ? 'bg-emerald-50 border border-emerald-200' : 'bg-emerald-500/10 border border-emerald-500/20'">
+                  <span [class]="metaLabelClass()" class="text-xs font-medium">Revenue:</span>
+                  <span [class]="headerTitleClass()" class="text-sm font-bold">{{ formatValue(revenueValue()) }}</span>
+                  <span class="text-xs font-semibold" [ngClass]="revenueTrend() >= 0 ? 'text-emerald-600' : 'text-red-600'">
+                    {{ revenueTrend() >= 0 ? '+' : '' }}{{ revenueTrend().toFixed(1) }}%
+                  </span>
+                </div>
+              }
+            </div>
+            <div class="flex items-center gap-3">
+              @if (!isSimplifiedView()) {
+                <!-- Search Button (Icon Only in Sticky Header) -->
+                <button
+                  type="button"
+                  (click)="searchService.openSearch(); $event.preventDefault()"
+                  [class]="buttonClass()"
+                  title="Search (/ or Cmd+K)"
+                  class="p-2 rounded-lg transition-all duration-200 hover:scale-110">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                  </svg>
+                </button>
+              }
+              <!-- View Mode Switcher (Icon Only in Sticky Header) -->
+              <button
+                type="button"
+                (click)="openViewModeSwitcher(); $event.preventDefault()"
+                [class]="buttonClass()"
+                [title]="'Change View Mode: ' + displayModeLabel()"
+                class="p-2 rounded-lg transition-all duration-200 hover:scale-110">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                </svg>
+              </button>
+              @if (!isSimplifiedView()) {
+                <div (click)="$event.stopPropagation()" (mousedown)="$event.stopPropagation()" (pointerdown)="$event.stopPropagation()">
+                <select
+                  [ngModel]="selectedSectionFilter()"
+                  (ngModelChange)="changeSectionFilter($event)"
+                  [class]="selectClass()"
+                  class="px-3 py-1.5 rounded-lg text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200 cursor-pointer">
+                  @for (section of sectionFilters; track section.value) {
+                    <option [value]="section.value">{{ section.label }}</option>
+                  }
+                </select>
+                </div>
+              }
+            </div>
+          </div>
+          </div>
+        </div>
+      </header>
+
+      <!-- Search Breadcrumb -->
+      @if (searchService.activeSearchResult()) {
+        <div [ngClass]="isLightMode() ? 'bg-blue-50/95 border-blue-200' : 'bg-blue-900/20 border-blue-800/30'" class="sticky top-[var(--header-height)] z-40 border-b backdrop-blur-md animate-slide-up-fade">
+          <div class="max-w-7xl mx-auto px-6 sm:px-8 py-3">
+            <div class="flex items-center justify-between gap-4">
+              <div class="flex items-center gap-3 flex-1 min-w-0">
+                <svg [ngClass]="isLightMode() ? 'text-blue-600' : 'text-blue-400'" class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                </svg>
+                <div class="flex items-center gap-2 flex-1 min-w-0">
+                  <span [ngClass]="isLightMode() ? 'text-blue-900' : 'text-blue-100'" class="text-sm font-medium">Showing:</span>
+                  <span [ngClass]="isLightMode() ? 'text-blue-700' : 'text-blue-300'" class="text-sm font-semibold truncate">
+                    {{ searchService.activeSearchResult()!.title }}
+                  </span>
+                  <span [ngClass]="isLightMode() ? 'bg-blue-100 text-blue-700 border-blue-200' : 'bg-blue-800/50 text-blue-300 border-blue-700/50'" class="px-2 py-0.5 rounded text-xs font-medium uppercase border flex-shrink-0">
+                    {{ searchService.activeSearchResult()!.type }}
+                  </span>
+                </div>
+              </div>
+              <button
+                (click)="clearSearchResult(); $event.stopPropagation()"
+                [ngClass]="isLightMode() ? 'text-blue-600 hover:text-blue-800 hover:bg-blue-100' : 'text-blue-400 hover:text-blue-200 hover:bg-blue-800/50'"
+                class="p-2 rounded-lg transition-colors flex-shrink-0"
+                title="Clear search">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- Floating Table of Contents -->
+      @if (!isSimplifiedView()) {
+        <symphiq-floating-toc
+          [sections]="tocSections()"
+          [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
+          [embedded]="embedded()"
+          [scrollElement]="scrollElement() ?? undefined"
+        />
+      }
+
+      <!-- Quick Navigation Dots -->
+      @if (!isSimplifiedView()) {
+        <div class="fixed right-6 top-1/2 -translate-y-1/2 z-40 hidden xl:flex flex-col gap-4">
+        @if (showOverallPerformance()) {
+          <button
+            (click)="scrollToTop()"
+            [libSymphiqTooltip]="'Scroll to Top'"
+            [tooltipPosition]="'left'"
+            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-blue-500' : 'bg-slate-600 hover:bg-blue-400'"
+            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
+          </button>
+        }
+        @if (showKeyInsights()) {
+          <button
+            (click)="scrollToSection('section-insights')"
+            [libSymphiqTooltip]="'Key Insights'"
+            [tooltipPosition]="'left'"
+            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-blue-500' : 'bg-slate-600 hover:bg-blue-400'"
+            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
+          </button>
+        }
+        @if (showPerformanceMetrics()) {
+          <button
+            (click)="scrollToSection('section-metrics')"
+            [libSymphiqTooltip]="'Performance Metrics'"
+            [tooltipPosition]="'left'"
+            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-blue-500' : 'bg-slate-600 hover:bg-blue-400'"
+            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
+          </button>
+        }
+        @if (showPerformanceBreakdowns()) {
+          <button
+            (click)="scrollToSection('section-breakdowns')"
+            [libSymphiqTooltip]="'Performance Breakdowns'"
+            [tooltipPosition]="'left'"
+            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-blue-500' : 'bg-slate-600 hover:bg-blue-400'"
+            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
+          </button>
+        }
+        @if (showCompetitiveIntelligence()) {
+          <button
+            (click)="scrollToSection('section-competitive')"
+            [libSymphiqTooltip]="'Competitive Intelligence'"
+            [tooltipPosition]="'left'"
+            [ngClass]="isLightMode() ? 'bg-slate-300 hover:bg-indigo-500' : 'bg-slate-600 hover:bg-indigo-400'"
+            class="w-3 h-3 rounded-full transition-all duration-200 hover:scale-150 active:scale-100 cursor-pointer">
+          </button>
+        }
+      </div>
+      }
+
+      @if (isContentGenerating()) {
+        <!-- Journey Progress Banner (always show when not onboarded) -->
+        @if (!isOnboarded()) {
+          <symphiq-journey-progress-indicator
+            [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
+            [currentStepId]="JourneyStepIdEnum.FUNNEL_ANALYSIS"
+            [showNextStepAction]="false"
+            [forDemo]="forDemo()"
+            [maxAccessibleStepId]="maxAccessibleStepId()"
+            (stepClick)="stepClick.emit($event)"
+            (nextStepClick)="nextStepClick.emit()"
+          />
+        }
+
+        <!-- Content Generation Progress Component -->
+        <symphiq-content-generation-progress-with-confetti
+          [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
+          [itemStatus]="itemStatus()"
+          [funnelAnalysis]="funnelAnalysis()"
+          [confettiIntensity]="'celebration'"
+          [title]="'We are generating a new Funnel Analysis for you.'"
+          [subtitle]="'It will appear here when ready. You can check back later as this will take a few minutes to complete.'"
+        />
+      } @else if (isSimplifiedView()) {
+        <!-- Journey Progress Banner -->
+        @if (!isOnboarded()) {
+          <symphiq-journey-progress-indicator
+            [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
+            [currentStepId]="JourneyStepIdEnum.FUNNEL_ANALYSIS"
+            [showNextStepAction]="true"
+            [forDemo]="forDemo()"
+            [maxAccessibleStepId]="maxAccessibleStepId()"
+            (stepClick)="stepClick.emit($event)"
+            (nextStepClick)="nextStepClick.emit()"
+          />
+        }
+
+        <main class="max-w-7xl mx-auto px-6 sm:px-8">
+          <div class="pt-8 sm:pt-12 pb-16 sm:pb-24">
+            <!-- Welcome Banner -->
+            <div class="mb-8">
+              <symphiq-funnel-welcome-banner
+                [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
+                [isOnboarded]="isOnboarded()"
+              />
+            </div>
+
+            <!-- Key Insights Section -->
+            @if (showKeyInsights()) {
+              <section id="section-insights" class="mb-8">
+                <div class="flex items-center justify-between mb-6">
+                  <div class="flex items-center gap-3">
+                    <div [ngClass]="isLightMode() ? 'border-l-4 border-blue-500' : 'border-l-4 border-blue-400'" class="pl-4">
+                      <div class="flex items-center gap-3">
+                        <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-blue-500' : 'text-blue-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+                        </svg>
+                        <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Key Insights</h2>
+                      </div>
+                    </div>
+                  </div>
+                  <span [class]="metaLabelClass()" class="text-xs sm:text-sm">{{ insights().length }} insights</span>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  @for (insight of insights(); track $index) {
+                    <symphiq-funnel-analysis-insight-card
+                      [insight]="insight"
+                      [allMetrics]="allMetrics()"
+                      [charts]="chartsForInsight(insight)"
+                      [allCharts]="allCharts()"
+                      [allBusinessInsights]="allBusinessInsights()"
+                      [isLightMode]="isLightMode()"
+                      [viewMode]="viewMode()"
+                      [isCompactMode]="true"
+                      [isLoading]="isDataLoading()" />
+                  }
+                </div>
+              </section>
+            }
+
+            <!-- Supporting Data Section -->
+            <symphiq-collapsible-funnel-section-group
+              [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK">
+              <!-- Overall Performance Slot -->
+              <div slot="overall-performance">
+                @if (showOverallPerformance()) {
+                  <div class="p-6">
+                    @if (isDataLoading()) {
+                      <symphiq-skeleton-loader [width]="'100%'" [height]="'200px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                    } @else {
+                      <symphiq-funnel-analysis-overall-assessment
+                        [assessment]="performanceOverview().overallAssessment || {}"
+                        [revenueMetric]="revenueMetric()"
+                        [charts]="chartsForItem('OVERALL_ASSESSMENT')"
+                        [metrics]="allMetrics()"
+                        [isLightMode]="isLightMode()"
+                        [isLoading]="isOverallAssessmentLoading()"
+                        [isCompactMode]="true"
+                        [isChartsLoading]="areChartsLoading()"
+                        [strengths]="strengths()"
+                        [weaknesses]="weaknesses()"
+                        [currencySymbol]="currencySymbol()"
+                        (scrollToSection)="scrollToSection($event)" />
+                    }
+                  </div>
+                }
+              </div>
+
+              <!-- Performance Metrics Slot -->
+              <div slot="performance-metrics">
+                @if (showPerformanceMetrics()) {
+                  <div class="p-6 space-y-8">
+                    @for (funnelGroup of groupedMetrics(); track $index; let groupIdx = $index) {
+                      <!-- Funnel Stage Metric (Full Width) -->
+                      <div class="w-full">
+                        <symphiq-funnel-analysis-metric-card
+                          [metric]="funnelGroup.funnelMetric"
+                          [insights]="insights()"
+                          [charts]="chartsForMetric(funnelGroup.funnelMetric)"
+                          [allCharts]="allCharts()"
+                          [analysis]="analysisData()"
+                          [isLightMode]="isLightMode()"
+                          [viewMode]="viewMode()"
+                          [isCompactMode]="true"
+                          [currencySymbol]="currencySymbol()" />
+                      </div>
+                      <!-- Related Metrics (Grid Layout) -->
+                      @if (funnelGroup.relatedMetrics.length > 0) {
+                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-4">
+                          @for (metric of funnelGroup.relatedMetrics; track $index) {
+                            <symphiq-funnel-analysis-metric-card
+                              [metric]="metric"
+                              [insights]="insights()"
+                              [charts]="chartsForMetric(metric)"
+                              [allCharts]="allCharts()"
+                              [analysis]="analysisData()"
+                              [isLightMode]="isLightMode()"
+                              [viewMode]="viewMode()"
+                              [isCompactMode]="true"
+                              [currencySymbol]="currencySymbol()" />
+                          }
+                        </div>
+                      }
+                    }
+                  </div>
+                }
+              </div>
+
+              <!-- Performance Breakdowns Slot -->
+              <div slot="performance-breakdowns">
+                @if (showPerformanceBreakdowns()) {
+                  <div class="p-6 space-y-8">
+                    @for (breakdown of breakdowns(); track $index) {
+                      <symphiq-funnel-analysis-breakdown-section
+                        [breakdown]="breakdown"
+                        [charts]="chartsForBreakdown(breakdown)"
+                        [isLightMode]="isLightMode()"
+                        [isLoading]="isDataLoading()"
+                        [isCompactMode]="true"
+                        [currencySymbol]="currencySymbol()" />
+                    }
+                  </div>
+                }
+              </div>
+
+              <!-- Competitive Intelligence Slot -->
+              <div slot="competitive-intelligence">
+                @if (showCompetitiveIntelligence()) {
+                  <div class="p-6">
+                    <symphiq-competitive-intelligence-view
+                      [metrics]="competitiveMetrics()"
+                      [allCharts]="allCharts()"
+                      [isLightMode]="isLightMode()"
+                      [isCompactMode]="true"
+                      [competitiveBenchmark]="performanceOverview().overallAssessment?.competitiveBenchmark"
+                      [currencySymbol]="currencySymbol()" />
+                  </div>
+                }
+              </div>
+            </symphiq-collapsible-funnel-section-group>
+          </div>
+        </main>
+      } @else {
+        <main class="max-w-7xl mx-auto px-6 sm:px-8">
+          <div class="pt-8 sm:pt-12 pb-16 sm:pb-24">
+          @if (showOverallPerformance()) {
+            <div id="section-overall" class="animate-fade-in-up mb-20 sm:mb-28" style="animation-delay: 0.1s;">
+              @if (isDataLoading()) {
+                <!-- Overall Assessment Skeleton -->
+                <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 sm:p-8 animate-pulse">
+                  <div class="space-y-6">
+                    <!-- Header -->
+                    <div class="flex items-center gap-3">
+                      <symphiq-skeleton-loader [width]="'48px'" [height]="'48px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                      <div class="flex-1 space-y-2">
+                        <symphiq-skeleton-loader [width]="'40%'" [height]="'32px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        <symphiq-skeleton-loader [width]="'60%'" [height]="'20px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                      </div>
+                    </div>
+                    <!-- Summary text -->
+                    <div class="space-y-2">
+                      <symphiq-skeleton-loader [width]="'100%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                      <symphiq-skeleton-loader [width]="'95%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                      <symphiq-skeleton-loader [width]="'90%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                    </div>
+                    <!-- Chart placeholder -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
+                      <symphiq-skeleton-loader [width]="'100%'" [height]="'200px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                      <symphiq-skeleton-loader [width]="'100%'" [height]="'200px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                    </div>
+                  </div>
+                </div>
+              } @else {
+                <symphiq-funnel-analysis-overall-assessment
+                  [assessment]="performanceOverview().overallAssessment || {}"
+                  [revenueMetric]="revenueMetric()"
+                  [charts]="chartsForItem('OVERALL_ASSESSMENT')"
+                  [metrics]="allMetrics()"
+                  [isLightMode]="isLightMode()"
+                  [isLoading]="isOverallAssessmentLoading()"
+                  [isCompactMode]="viewModeService.isCompact()"
+                  [isChartsLoading]="areChartsLoading()"
+                  [strengths]="strengths()"
+                  [weaknesses]="weaknesses()"
+                  [currencySymbol]="currencySymbol()"
+                  (scrollToSection)="scrollToSection($event)" />
+              }
+            </div>
+          }
+
+          @if (showKeyInsights()) {
+            @if (selectedSectionFilter() === 'ALL') {
+              <!-- Section Divider -->
+              <symphiq-section-divider [viewMode]="viewMode()" animationDelay="0.15s"></symphiq-section-divider>
+            }
+
+            <section id="section-insights" class="relative">
+              <!-- Background Pattern -->
+              <div class="absolute inset-0 -mx-6 sm:-mx-8 -mt-8 rounded-3xl opacity-30 backdrop-blur-sm" [ngClass]="isLightMode() ? 'bg-gradient-to-br from-blue-50/50 to-transparent' : 'bg-gradient-to-br from-blue-950/20 to-transparent'" style="mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);"></div>
+              <div class="relative">
+              <div class="flex items-center justify-between mb-6 sm:mb-8 animate-fade-in" style="animation-delay: 0.2s;">
+                <div class="flex items-center gap-3">
+                  <div [ngClass]="isLightMode() ? 'border-l-4 border-blue-500' : 'border-l-4 border-blue-400'" class="pl-4">
+                    <div class="flex items-center gap-3">
+                      <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-blue-500' : 'text-blue-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+                      </svg>
+                      <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Key Insights</h2>
+                    </div>
+                  </div>
+                </div>
+                <span [class]="metaLabelClass()" class="text-xs sm:text-sm">{{ insights().length }} insights</span>
+              </div>
+              <!-- Masonry Layout for Insights -->
+              @if (isDataLoading() || (viewModeService.isExpanded() && viewModeService.getIsTransitioning())) {
+                <!-- Skeleton loaders during data loading or transition to expanded view -->
+                <div class="masonry-grid">
+                  @for (i of [1,2,3,4,5,6]; track i) {
+                    <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse min-h-[280px]">
+                      <div class="space-y-4">
+                        <div class="flex items-center gap-3 mb-4">
+                          <symphiq-skeleton-loader [width]="'48px'" [height]="'48px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                          <symphiq-skeleton-loader [width]="'60%'" [height]="'28px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        </div>
+                        <symphiq-skeleton-loader [width]="'100%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        <symphiq-skeleton-loader [width]="'95%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        <symphiq-skeleton-loader [width]="'85%'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        <div class="mt-6 space-y-2">
+                          <symphiq-skeleton-loader [width]="'40%'" [height]="'14px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                          <symphiq-skeleton-loader [width]="'50%'" [height]="'36px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        </div>
+                        <div class="flex gap-2 mt-4">
+                          <symphiq-skeleton-loader [width]="'80px'" [height]="'28px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                          <symphiq-skeleton-loader [width]="'80px'" [height]="'28px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                </div>
+              } @else if (viewModeService.isExpanded()) {
+                <div class="masonry-grid">
+                  @for (insight of insights(); track $index) {
+                    <div
+                      [class]="getInsightCardClass(insight)"
+                      class="animate-fade-in-up"
+                      [style.animation-delay]="(0.3 + $index * 0.1) + 's'"
+                      [libSymphiqSearchHighlight]="searchService.highlightedResultId()"
+                      [highlightId]="'insight-' + $index">
+                      <symphiq-funnel-analysis-insight-card
+                        [insight]="insight"
+                        [allMetrics]="allMetrics()"
+                        [charts]="chartsForInsight(insight)"
+                        [allCharts]="allCharts()"
+                        [allBusinessInsights]="allBusinessInsights()"
+                        [isLightMode]="isLightMode()"
+                        [viewMode]="viewMode()"
+                        [isCompactMode]="false" />
+                    </div>
+                  }
+                </div>
+              } @else {
+                <!-- Compact Grid for Insights -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  @for (insight of insights(); track $index) {
+                    <div class="animate-fade-in-up" [style.animation-delay]="(0.3 + $index * 0.1) + 's'"
+                      [libSymphiqSearchHighlight]="searchService.highlightedResultId()"
+                      [highlightId]="'insight-' + $index">
+                      <symphiq-funnel-analysis-insight-card
+                        [insight]="insight"
+                        [allMetrics]="allMetrics()"
+                        [charts]="chartsForInsight(insight)"
+                        [allCharts]="allCharts()"
+                        [allBusinessInsights]="allBusinessInsights()"
+                        [isLightMode]="isLightMode()"
+                        [viewMode]="viewMode()"
+                        [isCompactMode]="true" />
+                    </div>
+                  }
+                </div>
+              }
+              </div>
+            </section>
+          }
+
+          @if (showPerformanceMetrics()) {
+            @if (selectedSectionFilter() === 'ALL') {
+              <!-- Section Divider -->
+              <div class="relative mb-14 sm:mb-24 mt-24 sm:mt-32 animate-fade-in" style="animation-delay: 0.35s;">
+                <div class="absolute inset-0 flex items-center" aria-hidden="true">
+                  <div class="w-full h-px bg-gradient-to-r" [ngClass]="isLightMode() ? 'from-transparent via-emerald-500/30 to-transparent' : 'from-transparent via-emerald-400/20 to-transparent'"></div>
+                </div>
+                <div class="relative flex justify-center">
+                <div class="px-4 py-2 rounded-full" [ngClass]="isLightMode() ? 'bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-200/50 shadow-lg shadow-emerald-500/10' : 'bg-gradient-to-br from-slate-900 to-slate-800 border border-emerald-500/20 shadow-lg shadow-emerald-500/5'">
+                  <svg class="w-5 h-5" [ngClass]="isLightMode() ? 'text-emerald-500' : 'text-emerald-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
+                  </svg>
+                </div>
+              </div>
+            </div>
+            }
+
+            <section id="section-metrics" class="relative">
+              <!-- Background Pattern -->
+              <div class="absolute inset-0 -mx-6 sm:-mx-8 -mt-8 rounded-3xl opacity-30 backdrop-blur-sm" [ngClass]="isLightMode() ? 'bg-gradient-to-tl from-emerald-50/50 to-transparent' : 'bg-gradient-to-tl from-emerald-950/20 to-transparent'" style="mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);"></div>
+              <div class="relative">
+              <div class="flex flex-col gap-4 mb-6 sm:mb-8 animate-fade-in" style="animation-delay: 0.4s;">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-3">
+                    <div [ngClass]="isLightMode() ? 'border-l-4 border-emerald-500' : 'border-l-4 border-emerald-400'" class="pl-4">
+                      <div class="flex items-center gap-3">
+                        <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-emerald-500' : 'text-emerald-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                        </svg>
+                        <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Performance Metrics</h2>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- Desktop controls -->
+                  <div class="hidden sm:flex gap-2 sm:gap-3 items-center relative">
+                    @if (isCategoryTransitioning()) {
+                      <div class="absolute -right-2 top-1/2 -translate-y-1/2 z-10">
+                        <div class="w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin"></div>
+                      </div>
+                    }
+                    <select
+                      [ngModel]="selectedCategory()"
+                      (ngModelChange)="changeCategoryFilter($event)"
+                      [class]="selectClass()"
+                      [class.opacity-70]="isCategoryTransitioning()"
+                      class="px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 cursor-pointer">
+                      @for (cat of categories; track cat.value) {
+                        @if (cat.divider) {
+                          <option [value]="cat.value" disabled class="font-semibold">{{ cat.label }}</option>
+                        } @else {
+                          <option [value]="cat.value">{{ cat.label }}</option>
+                        }
+                      }
+                    </select>
+                    <button
+                      (click)="toggleSortOrder()"
+                      [class]="sortButtonClass()"
+                      class="px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all flex items-center gap-2 cursor-pointer hover:scale-105 active:scale-95"
+                      [title]="reverseSortOrder() ? 'Sort: Revenue to Views' : 'Sort: Views to Revenue'">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        @if (!reverseSortOrder()) {
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
+                        }
+                        @if (reverseSortOrder()) {
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
+                        }
+                      </svg>
+                      <span>Sort</span>
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Mobile horizontal scrolling category pills -->
+                <div class="sm:hidden -mx-6 px-6">
+                  <div class="flex gap-2 overflow-x-auto pb-2 snap-x snap-mandatory scrollbar-hide">
+                    @for (cat of categories; track cat.value) {
+                      @if (!cat.divider) {
+                        <button
+                          (click)="changeCategoryFilter(cat.value)"
+                          [ngClass]="getCategoryPillClass(cat.value)"
+                          [class.opacity-70]="isCategoryTransitioning()"
+                          class="px-4 py-2 rounded-full text-xs font-medium whitespace-nowrap transition-all duration-200 flex-shrink-0 snap-start active:scale-95">
+                          {{ cat.label }}
+                        </button>
+                      }
+                    }
+                  </div>
+                </div>
+              </div>
+              @if (isDataLoading()) {
+                <!-- Metrics Skeleton -->
+                <div class="space-y-8 sm:space-y-10">
+                  @for (i of [1,2,3]; track i) {
+                    <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse">
+                      <div class="flex items-center justify-between mb-4">
+                        <div class="flex items-center gap-3">
+                          <symphiq-skeleton-loader [width]="'40px'" [height]="'40px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                          <div class="space-y-2">
+                            <symphiq-skeleton-loader [width]="'150px'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                            <symphiq-skeleton-loader [width]="'100px'" [height]="'16px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                          </div>
+                        </div>
+                        <symphiq-skeleton-loader [width]="'80px'" [height]="'36px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                      </div>
+                      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
+                        @for (j of [1,2,3,4]; track j) {
+                          <symphiq-skeleton-loader [width]="'100%'" [height]="'120px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              } @else {
+                <div class="space-y-8 sm:space-y-10" [class.animate-content-change]="isCategoryTransitioning()" [class.transition-opacity-slow]="isCategoryTransitioning()">
+                  @for (funnelGroup of groupedMetrics(); track $index; let groupIdx = $index) {
+                  <div class="w-full animate-fade-in-up" [style.animation-delay]="(0.5 + groupIdx * 0.15) + 's'"
+                    [libSymphiqSearchHighlight]="searchService.highlightedResultId()"
+                    [highlightId]="'metric-' + groupIdx">
+                    <symphiq-funnel-analysis-metric-card
+                      [metric]="funnelGroup.funnelMetric"
+                      [insights]="insights()"
+                      [charts]="chartsForMetric(funnelGroup.funnelMetric)"
+                      [allCharts]="allCharts()"
+                      [analysis]="analysisData()"
+                      [isLightMode]="isLightMode()"
+                      [viewMode]="viewMode()"
+                      [isCompactMode]="viewModeService.isCompact()"
+                      [currencySymbol]="currencySymbol()" />
+                  </div>
+                  @if (funnelGroup.relatedMetrics.length > 0) {
+                    <!-- Bento Box Grid Layout -->
+                    @if (viewModeService.isExpanded()) {
+                      <div class="bento-grid mt-4">
+                        @for (metric of funnelGroup.relatedMetrics; track $index; let metricIdx = $index) {
+                          <div
+                            [class]="getBentoCardClass(metric, metricIdx)"
+                            class="animate-fade-in-up"
+                            [style.animation-delay]="(0.6 + groupIdx * 0.15 + metricIdx * 0.08) + 's'">
+                            <symphiq-funnel-analysis-metric-card
+                              class="h-full"
+                              [metric]="metric"
+                              [insights]="insights()"
+                              [charts]="chartsForMetric(metric)"
+                              [allCharts]="allCharts()"
+                              [analysis]="analysisData()"
+                              [isLightMode]="isLightMode()"
+                              [viewMode]="viewMode()"
+                              [isCompactMode]="false"
+                              [currencySymbol]="currencySymbol()" />
+                          </div>
+                        }
+                      </div>
+                    } @else if (!viewModeService.isExpanded()) {
+                      <!-- Compact Grid Layout -->
+                      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mt-4">
+                        @for (metric of funnelGroup.relatedMetrics; track $index; let metricIdx = $index) {
+                          <div class="animate-fade-in-up" [style.animation-delay]="(0.6 + groupIdx * 0.15 + metricIdx * 0.08) + 's'">
+                            <symphiq-funnel-analysis-metric-card
+                              [metric]="metric"
+                              [insights]="insights()"
+                              [charts]="chartsForMetric(metric)"
+                              [allCharts]="allCharts()"
+                              [analysis]="analysisData()"
+                              [isLightMode]="isLightMode()"
+                              [viewMode]="viewMode()"
+                              [isCompactMode]="true"
+                              [currencySymbol]="currencySymbol()" />
+                          </div>
+                        }
+                      </div>
+                    } @else {
+                      <!-- Skeleton loaders during transition to expanded view -->
+                      <div class="bento-grid mt-4">
+                        @for (i of [1,2,3,4]; track i) {
+                          <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse min-h-[240px]">
+                            <div class="space-y-4">
+                              <div class="flex items-center justify-between">
+                                <symphiq-skeleton-loader [width]="'60%'" [height]="'22px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                                <symphiq-skeleton-loader [width]="'60px'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                              </div>
+                              <symphiq-skeleton-loader [width]="'45%'" [height]="'42px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                              <div class="flex items-center gap-3 mt-4">
+                                <symphiq-skeleton-loader [width]="'24px'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                                <symphiq-skeleton-loader [width]="'30%'" [height]="'20px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                              </div>
+                              <symphiq-skeleton-loader [width]="'100%'" [height]="'16px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                              <symphiq-skeleton-loader [width]="'85%'" [height]="'16px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                              <div class="mt-4">
+                                <symphiq-skeleton-loader [width]="'100%'" [height]="'120px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                              </div>
+                            </div>
+                          </div>
+                        }
+                      </div>
+                    }
+                  }
+                  } @empty {
+                    <div [ngClass]="isLightMode() ? 'bg-slate-50 border-slate-200' : 'bg-slate-800/50 border-slate-700'" class="rounded-xl p-12 border text-center animate-fade-in">
+                      <svg class="w-16 h-16 mx-auto mb-4" [ngClass]="isLightMode() ? 'text-slate-300' : 'text-slate-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                      </svg>
+                      <h3 [ngClass]="isLightMode() ? 'text-slate-900' : 'text-white'" class="text-lg font-semibold mb-2">No Metrics Found</h3>
+                      <p [ngClass]="isLightMode() ? 'text-slate-600' : 'text-slate-400'" class="text-sm">No performance metrics match your current filter selection. Try adjusting your filters to see more results.</p>
+                    </div>
+                  }
+                </div>
+              }
+              </div>
+            </section>
+          }
+
+          @if (showPerformanceBreakdowns()) {
+            @if (selectedSectionFilter() === 'ALL') {
+              <!-- Section Divider -->
+              <div class="mt-28 sm:mt-36">
+                <symphiq-section-divider [viewMode]="viewMode()" animationDelay="0.65s"></symphiq-section-divider>
+              </div>
+            }
+
+            <section id="section-breakdowns" class="relative">
+              <!-- Background Pattern -->
+              <div class="absolute inset-0 -mx-6 sm:-mx-8 -mt-8 rounded-3xl opacity-30 backdrop-blur-sm" [ngClass]="isLightMode() ? 'bg-gradient-to-tr from-purple-50/50 to-transparent' : 'bg-gradient-to-tr from-purple-950/20 to-transparent'" style="mask-image: radial-gradient(ellipse at bottom left, black 0%, transparent 70%);"></div>
+              <div class="relative">
+              <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 sm:mb-8 animate-fade-in" style="animation-delay: 0.7s;">
+                <div [ngClass]="isLightMode() ? 'border-l-4 border-purple-500' : 'border-l-4 border-purple-400'" class="pl-4">
+                  <div class="flex items-center gap-3">
+                    <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-purple-500' : 'text-purple-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
+                    </svg>
+                    <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Performance Breakdowns</h2>
+                  </div>
+                </div>
+                <div (click)="$event.stopPropagation()" (mousedown)="$event.stopPropagation()" (pointerdown)="$event.stopPropagation()" class="relative inline-block">
+                  @if (isBreakdownTransitioning()) {
+                    <div class="absolute -right-2 top-1/2 -translate-y-1/2 z-10">
+                      <div class="w-4 h-4 border-2 border-purple-500/30 border-t-purple-500 rounded-full animate-spin"></div>
+                    </div>
+                  }
+                  <select
+                    [ngModel]="selectedBreakdownFilter()"
+                    (ngModelChange)="changeBreakdownFilter($event)"
+                    [ngClass]="isLightMode()
+                      ? 'bg-white border-slate-300 text-slate-900 hover:border-blue-400 focus:border-blue-500'
+                      : 'bg-slate-700 border-slate-600 text-white hover:border-slate-500 focus:border-blue-500'"
+                    [class.opacity-70]="isBreakdownTransitioning()"
+                    class="px-3 py-2 text-sm rounded-lg border transition-all duration-200 cursor-pointer focus:ring-2 focus:ring-blue-500 focus:outline-none">
+                  @for (filter of breakdownFilters; track filter.value) {
+                    @if (filter.divider) {
+                      <option [value]="filter.value" disabled class="font-semibold">{{ filter.label }}</option>
+                    } @else {
+                      <option [value]="filter.value">{{ filter.label }}</option>
+                    }
+                  }
+                </select>
+                </div>
+              </div>
+              @if (isDataLoading()) {
+                <!-- Breakdowns Skeleton -->
+                <div class="space-y-6">
+                  @for (i of [1,2]; track i) {
+                    <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse">
+                      <div class="flex items-center justify-between mb-4">
+                        <symphiq-skeleton-loader [width]="'200px'" [height]="'28px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        <symphiq-skeleton-loader [width]="'100px'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                      </div>
+                      <div class="space-y-3">
+                        @for (j of [1,2,3,4]; track j) {
+                          <div class="flex items-center justify-between p-3 rounded-lg" [ngClass]="isLightMode() ? 'bg-slate-50' : 'bg-slate-700/50'">
+                            <symphiq-skeleton-loader [width]="'150px'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                            <symphiq-skeleton-loader [width]="'80px'" [height]="'18px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  }
+                </div>
+              } @else {
+                <div class="space-y-6" [class.animate-content-change]="isBreakdownTransitioning()" [class.transition-opacity-slow]="isBreakdownTransitioning()">
+                  @for (breakdown of breakdowns(); track $index) {
+                    <div class="animate-fade-in-up" [style.animation-delay]="(0.8 + $index * 0.1) + 's'"
+                      [libSymphiqSearchHighlight]="searchService.highlightedResultId()"
+                      [highlightId]="'breakdown-' + $index">
+                      <symphiq-funnel-analysis-breakdown-section
+                        [breakdown]="breakdown"
+                        [charts]="chartsForBreakdown(breakdown)"
+                        [isLightMode]="isLightMode()"
+                        [isCompactMode]="viewModeService.isCompact()"
+                        [currencySymbol]="currencySymbol()" />
+                    </div>
+                  } @empty {
+                    <div [ngClass]="isLightMode() ? 'bg-slate-50 border-slate-200' : 'bg-slate-800/50 border-slate-700'" class="rounded-xl p-12 border text-center animate-fade-in">
+                      <svg class="w-16 h-16 mx-auto mb-4" [ngClass]="isLightMode() ? 'text-slate-300' : 'text-slate-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
+                      </svg>
+                      <h3 [ngClass]="isLightMode() ? 'text-slate-900' : 'text-white'" class="text-lg font-semibold mb-2">No Breakdowns Found</h3>
+                      <p [ngClass]="isLightMode() ? 'text-slate-600' : 'text-slate-400'" class="text-sm">No performance breakdowns match your current filter selection. Try adjusting your filters to see more results.</p>
+                    </div>
+                  }
+                </div>
+              }
+              </div>
+            </section>
+          }
+
+          @if (showCompetitiveIntelligence()) {
+            @if (selectedSectionFilter() === 'ALL') {
+              <!-- Section Divider -->
+              <div class="mt-28 sm:mt-36">
+                <symphiq-section-divider [viewMode]="viewMode()" animationDelay="0.85s"></symphiq-section-divider>
+              </div>
+            }
+
+            <!-- Competitive Intelligence Section -->
+            <section id="section-competitive" class="relative">
+              <!-- Background Pattern -->
+              <div class="absolute inset-0 -mx-6 sm:-mx-8 -mt-8 rounded-3xl opacity-30 backdrop-blur-sm" [ngClass]="isLightMode() ? 'bg-gradient-to-br from-indigo-50/50 to-transparent' : 'bg-gradient-to-br from-indigo-950/20 to-transparent'" style="mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);"></div>
+              <div class="relative">
+                <div class="flex items-center justify-between mb-6 sm:mb-8 animate-fade-in" style="animation-delay: 0.9s;">
+                  <div class="flex items-center gap-3">
+                    <div [ngClass]="isLightMode() ? 'border-l-4 border-indigo-500' : 'border-l-4 border-indigo-400'" class="pl-4">
+                      <div class="flex items-center gap-3">
+                        <svg class="w-6 h-6" [ngClass]="isLightMode() ? 'text-indigo-500' : 'text-indigo-400'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                        </svg>
+                        <h2 [class]="sectionTitleClass()" class="text-xl sm:text-2xl font-bold">Competitive Intelligence</h2>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- Filter Dropdown -->
+                  <div class="hidden sm:block relative">
+                    @if (isCompetitiveTransitioning()) {
+                      <div class="absolute -right-2 top-1/2 -translate-y-1/2 z-10">
+                        <div class="w-4 h-4 border-2 border-indigo-500/30 border-t-indigo-500 rounded-full animate-spin"></div>
+                      </div>
+                    }
+                    <select
+                      [ngModel]="selectedCompetitiveFilter()"
+                      (ngModelChange)="changeCompetitiveFilter($event)"
+                      [class]="selectClass()"
+                      [class.opacity-70]="isCompetitiveTransitioning()"
+                      class="px-3 sm:px-4 py-2 rounded-lg text-xs sm:text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 cursor-pointer">
+                      @for (filter of competitiveFilters; track filter.value) {
+                        @if (filter.divider) {
+                          <option [value]="filter.value" disabled class="font-semibold">{{ filter.label }}</option>
+                        } @else {
+                          <option [value]="filter.value">{{ filter.label }}</option>
+                        }
+                      }
+                    </select>
+                  </div>
+                </div>
+
+                @if (isDataLoading()) {
+                  <!-- Competitive Intelligence Skeleton -->
+                  <div class="space-y-6">
+                    <div [ngClass]="isLightMode() ? 'bg-white border-slate-200' : 'bg-slate-800 border-slate-700'" class="rounded-xl border p-6 animate-pulse">
+                      <symphiq-skeleton-loader [width]="'60%'" [height]="'24px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+                        @for (i of [1,2,3]; track i) {
+                          <symphiq-skeleton-loader [width]="'100%'" [height]="'140px'" [isLightMode]="isLightMode()"></symphiq-skeleton-loader>
+                        }
+                      </div>
+                    </div>
+                  </div>
+                } @else {
+                  <symphiq-competitive-intelligence-view
+                    [metrics]="competitiveMetrics()"
+                    [allCharts]="allCharts()"
+                    [isLightMode]="isLightMode()"
+                    [isCompactMode]="viewModeService.isCompact()"
+                    [competitiveBenchmark]="performanceOverview().overallAssessment?.competitiveBenchmark"
+                    [currencySymbol]="currencySymbol()" />
+                }
+              </div>
+            </section>
+          }
+        </div>
+      </main>
+      }
+
+      <symphiq-funnel-analysis-modal
+        [isLightMode]="isLightMode()"
+        [viewMode]="viewMode()"
+        [allMetrics]="allMetrics()"
+        [allInsights]="insights()"
+        [allCharts]="allCharts()"
+        [currencySymbol]="currencySymbol()"
+        [businessProfile]="businessProfile()"></symphiq-funnel-analysis-modal>
+      <symphiq-profile-analysis-modal
+        [isLightMode]="isLightMode()"
+        [allMetrics]="allMetrics()"
+      ></symphiq-profile-analysis-modal>
+      <symphiq-business-analysis-modal [isLightMode]="isLightMode()" />
+      <symphiq-tooltip-container></symphiq-tooltip-container>
+      <symphiq-search-bar
+        [isLightMode]="isLightMode()"
+        (resultSelected)="handleSearchResult($event)" />
+
+      <!-- View Mode Switcher Modal -->
+      <symphiq-view-mode-switcher-modal
+        [isOpen]="isViewModeSwitcherOpen()"
+        [currentMode]="displayMode()"
+        [viewMode]="isLightMode() ? ViewModeEnum.LIGHT : ViewModeEnum.DARK"
+        [isLoading]="isViewModeSwitching()"
+        (close)="closeViewModeSwitcher()"
+        (modeSelected)="handleDisplayModeChange($event)"
+      />
+
+      <!-- Mobile FAB -->
+      <symphiq-mobile-fab
+        [isLightMode]="isLightMode()"
+        [isCompactMode]="viewModeService.isCompact()"
+        [isExpanded]="fabExpanded()"
+        (expandedChange)="fabExpanded.set($event)"
+        (scrollToTop)="scrollToTop()"
+        (toggleView)="viewModeService.toggleViewMode()" />
+
+      <!-- Mobile Bottom Navigation -->
+      <symphiq-mobile-bottom-nav
+        [isLightMode]="isLightMode()"
+        [sections]="navSections"
+        [activeSection]="activeNavSection()"
+        (navigate)="handleMobileNavigation($event)" />
+
+    </div>
   `, styles: [":host{display:block;min-height:100%}.bg-gradient-radial{background:radial-gradient(circle,var(--tw-gradient-stops))}.bento-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;grid-auto-flow:dense}@media (min-width: 768px){.bento-grid{grid-template-columns:repeat(6,1fr)}}.bento-small{grid-column:span 2;grid-row:span 1}.bento-medium{grid-column:span 3;grid-row:span 1}.bento-large{grid-column:span 4;grid-row:span 1}.bento-featured{grid-column:span 6;grid-row:span 1}@media (max-width: 767px){.bento-small,.bento-medium,.bento-large,.bento-featured{grid-column:span 1}}.masonry-grid{column-count:1;column-gap:1.5rem}@media (min-width: 768px){.masonry-grid{column-count:2}}@media (min-width: 1280px){.masonry-grid{column-count:3}}.masonry-grid>div{break-inside:avoid;margin-bottom:1.5rem}.masonry-featured{column-span:all}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}@media (max-width: 640px){.animate-fade-in-up{animation-duration:.4s}}\n"] }]
     }], () => [{ type: FunnelOrderService }, { type: ViewModeService }, { type: SearchService }, { type: TooltipService }, { type: ProfileContextService }, { type: ProfileItemLookupService }], { modalComponent: [{
             type: ViewChild,
@@ -48948,11 +49319,11 @@ class SymphiqFunnelAnalysisDashboardComponent {
         }], dashboardContainer: [{
             type: ViewChild,
             args: ['dashboardContainer', { static: false }]
-        }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], businessProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "businessProfile", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
+        }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], businessProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "businessProfile", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisDashboardComponent, { className: "SymphiqFunnelAnalysisDashboardComponent", filePath: "lib/components/funnel-analysis-dashboard/symphiq-funnel-analysis-dashboard.component.ts", lineNumber: 1199 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisDashboardComponent, { className: "SymphiqFunnelAnalysisDashboardComponent", filePath: "lib/components/funnel-analysis-dashboard/symphiq-funnel-analysis-dashboard.component.ts", lineNumber: 1226 }); })();
 
 /**
  * Shared Theme Color Utilities
@@ -66589,326 +66960,6 @@ class CollapsibleSectionGroupComponent {
     }], null, { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsibleSectionGroupComponent, { className: "CollapsibleSectionGroupComponent", filePath: "lib/components/business-analysis-dashboard/collapsible-section-group.component.ts", lineNumber: 100 }); })();
 
-function ContentGenerationProgressComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵelement(1, "div", 21)(2, "div", 22)(3, "div", 23)(4, "div", 24)(5, "div", 25)(6, "div", 26);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
-} }
-function ContentGenerationProgressComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 27);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
-    i0.ɵɵproperty("ngClass", ctx_r0.progressGlowClasses());
-} }
-class ContentGenerationProgressComponent {
-    constructor() {
-        this.itemStatus = input(...(ngDevMode ? [undefined, { debugName: "itemStatus" }] : []));
-        this.title = input('Generating Your Analysis', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.subtitle = input('This will appear when ready. You can check back later as this will take a few minutes to complete.', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
-        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-        this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.progressPercentage = computed(() => {
-            const status = this.itemStatus();
-            if (!status?.percentageComplete) {
-                return 0;
-            }
-            return Math.round(Math.min(100, Math.max(0, status.percentageComplete)));
-        }, ...(ngDevMode ? [{ debugName: "progressPercentage" }] : []));
-        this.progressMessage = computed(() => {
-            const status = this.itemStatus();
-            return status?.message || 'Initializing';
-        }, ...(ngDevMode ? [{ debugName: "progressMessage" }] : []));
-        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
-        this.containerClasses = computed(() => {
-            return this.isLightMode()
-                ? 'bg-gradient-to-br from-slate-50 to-white'
-                : 'bg-gradient-to-br from-slate-900 to-slate-800';
-        }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
-        this.iconContainerClasses = computed(() => {
-            if (this.isLightMode()) {
-                return 'bg-gradient-to-br from-blue-500 to-purple-500 text-white shadow-lg shadow-blue-500/30';
-            }
-            return 'bg-gradient-to-br from-blue-400 to-purple-400 text-white shadow-lg shadow-blue-400/30';
-        }, ...(ngDevMode ? [{ debugName: "iconContainerClasses" }] : []));
-        this.titleClasses = computed(() => {
-            if (this.isLightMode()) {
-                return 'bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent';
-            }
-            return 'bg-gradient-to-r from-blue-400 via-purple-400 to-blue-400 bg-clip-text text-transparent';
-        }, ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
-        this.subtitleClasses = computed(() => {
-            return this.isLightMode()
-                ? 'text-slate-600'
-                : 'text-slate-400';
-        }, ...(ngDevMode ? [{ debugName: "subtitleClasses" }] : []));
-        this.progressMessageClasses = computed(() => {
-            return this.isLightMode()
-                ? 'text-slate-700'
-                : 'text-slate-300';
-        }, ...(ngDevMode ? [{ debugName: "progressMessageClasses" }] : []));
-        this.progressBarContainerClasses = computed(() => {
-            return 'w-full';
-        }, ...(ngDevMode ? [{ debugName: "progressBarContainerClasses" }] : []));
-        this.progressBarBackgroundClasses = computed(() => {
-            return this.isLightMode()
-                ? 'bg-slate-200'
-                : 'bg-slate-700';
-        }, ...(ngDevMode ? [{ debugName: "progressBarBackgroundClasses" }] : []));
-        this.progressBarFillClasses = computed(() => {
-            if (this.isLightMode()) {
-                return 'bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-600 shadow-lg shadow-blue-500/40';
-            }
-            return 'bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-500 shadow-lg shadow-blue-400/40';
-        }, ...(ngDevMode ? [{ debugName: "progressBarFillClasses" }] : []));
-        this.dotClasses = computed(() => {
-            return this.isLightMode()
-                ? 'bg-blue-400 shadow-lg shadow-blue-400/60'
-                : 'bg-cyan-300 shadow-lg shadow-cyan-300/60';
-        }, ...(ngDevMode ? [{ debugName: "dotClasses" }] : []));
-        this.dotColor = computed(() => {
-            return this.isLightMode() ? '#60a5fa' : '#67e8f9';
-        }, ...(ngDevMode ? [{ debugName: "dotColor" }] : []));
-        this.progressGlowClasses = computed(() => {
-            return this.isLightMode()
-                ? 'bg-blue-400 shadow-xl'
-                : 'bg-cyan-300 shadow-xl';
-        }, ...(ngDevMode ? [{ debugName: "progressGlowClasses" }] : []));
-        this.percentageClasses = computed(() => {
-            return this.isLightMode()
-                ? 'text-slate-600'
-                : 'text-slate-400';
-        }, ...(ngDevMode ? [{ debugName: "percentageClasses" }] : []));
-    }
-    static { this.ɵfac = function ContentGenerationProgressComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContentGenerationProgressComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContentGenerationProgressComponent, selectors: [["symphiq-content-generation-progress"]], inputs: { itemStatus: [1, "itemStatus"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], showIcon: [1, "showIcon"] }, decls: 25, vars: 17, consts: [[1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "max-w-3xl", "w-full", "space-y-8"], [1, "text-center", "space-y-3"], [1, "flex", "items-center", "justify-center", "mb-4"], [1, "relative", "w-20", "h-20", "rounded-2xl", "flex", "items-center", "justify-center", "icon-pulse", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "absolute", "inset-0", "rounded-2xl", "icon-glow"], [1, "text-3xl", "sm:text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", "sm:text-lg", "max-w-2xl", "mx-auto", 3, "ngClass"], [1, "space-y-4"], [1, "text-center"], [1, "text-lg", "sm:text-xl", "font-medium", "message-fade", 3, "ngClass"], [1, "relative", "h-3", "rounded-full", 2, "overflow", "visible", 3, "ngClass"], [1, "absolute", "inset-0", "rounded-full", 3, "ngClass"], [1, "absolute", "inset-y-0", "left-0", "rounded-full", "transition-all", "duration-700", "ease-out", "overflow-hidden", 3, "ngClass"], [1, "absolute", "inset-0", "shimmer-effect"], [1, "absolute", "pointer-events-none", 2, "right", "0", "top", "-4px", "bottom", "-4px", "overflow", "visible", 3, "left"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass", "left"], [1, "text-sm", "font-medium", "tabular-nums", 3, "ngClass"], [1, "absolute", "pointer-events-none", 2, "right", "0", "top", "-4px", "bottom", "-4px", "overflow", "visible"], [1, "animated-dot", "animated-dot-1"], [1, "animated-dot", "animated-dot-2"], [1, "animated-dot", "animated-dot-3"], [1, "animated-dot", "animated-dot-4"], [1, "animated-dot", "animated-dot-5"], [1, "animated-dot", "animated-dot-6"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass"]], template: function ContentGenerationProgressComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(5, "svg", 5);
-            i0.ɵɵelement(6, "path", 6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵnamespaceHTML();
-            i0.ɵɵelement(7, "div", 7);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(8, "h2", 8);
-            i0.ɵɵtext(9);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "p", 9);
-            i0.ɵɵtext(11);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "div", 10)(13, "div", 11)(14, "p", 12);
-            i0.ɵɵtext(15);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(16, "div", 13);
-            i0.ɵɵelement(17, "div", 14);
-            i0.ɵɵelementStart(18, "div", 15);
-            i0.ɵɵelement(19, "div", 16);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_20_Template, 7, 14, "div", 17);
-            i0.ɵɵconditionalCreate(21, ContentGenerationProgressComponent_Conditional_21_Template, 1, 3, "div", 18);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "div", 11)(23, "span", 19);
-            i0.ɵɵtext(24);
-            i0.ɵɵelementEnd()()()()();
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", ctx.containerClasses());
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", ctx.titleClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.subtitleClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.subtitle(), " ");
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", ctx.progressMessageClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.progressMessage(), " ");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.progressBarContainerClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.progressBarBackgroundClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵstyleProp("width", ctx.progressPercentage(), "%");
-            i0.ɵɵproperty("ngClass", ctx.progressBarFillClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.progressPercentage() > 0 && ctx.progressPercentage() < 100 ? 20 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.progressPercentage() > 0 && ctx.progressPercentage() < 100 ? 21 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.percentageClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.progressPercentage(), "% complete ");
-        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["@keyframes _ngcontent-%COMP%_icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes _ngcontent-%COMP%_icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes _ngcontent-%COMP%_dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes _ngcontent-%COMP%_dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes _ngcontent-%COMP%_message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-pulse 2s ease-in-out infinite}.icon-glow[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect[_ngcontent-%COMP%]{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:_ngcontent-%COMP%_shimmer 2s ease-in-out infinite}.message-fade[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_message-fade 3s ease-in-out infinite}.animated-dot[_ngcontent-%COMP%]{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:_ngcontent-%COMP%_dots-move 6s linear infinite,_ngcontent-%COMP%_dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1[_ngcontent-%COMP%]{animation-delay:0s,0s}.animated-dot-2[_ngcontent-%COMP%]{animation-delay:1s,0s}.animated-dot-3[_ngcontent-%COMP%]{animation-delay:2s,0s}.animated-dot-4[_ngcontent-%COMP%]{animation-delay:3s,0s}.animated-dot-5[_ngcontent-%COMP%]{animation-delay:4s,0s}.animated-dot-6[_ngcontent-%COMP%]{animation-delay:5s,0s}"], changeDetection: 0 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressComponent, [{
-        type: Component,
-        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
-      <div class="max-w-3xl w-full space-y-8">
-        <!-- Title Section -->
-        <div class="text-center space-y-3">
-          <div class="flex items-center justify-center mb-4">
-            <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
-              <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-              </svg>
-              <div class="absolute inset-0 rounded-2xl icon-glow"></div>
-            </div>
-          </div>
-
-          <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
-            {{ title() }}
-          </h2>
-
-          <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
-            {{ subtitle() }}
-          </p>
-        </div>
-
-        <!-- Progress Section -->
-        <div class="space-y-4">
-          <!-- Progress Message -->
-          <div class="text-center">
-            <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
-              {{ progressMessage() }}
-            </p>
-          </div>
-
-          <!-- Progress Bar Container -->
-          <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
-            <!-- Background Track -->
-            <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
-
-            <!-- Solid Fill with Gradient -->
-            <div
-              [ngClass]="progressBarFillClasses()"
-              [style.width.%]="progressPercentage()"
-              class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
-              <!-- Inner shimmer effect -->
-              <div class="absolute inset-0 shimmer-effect"></div>
-            </div>
-
-            <!-- Animated Dots Overlay (container positioned at progress edge, dots animate within) -->
-            @if (progressPercentage() > 0 && progressPercentage() < 100) {
-              <div
-                class="absolute pointer-events-none"
-                [style.left.%]="progressPercentage()"
-                style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
-                <div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
-              </div>
-            }
-
-            <!-- Glow effect at the progress edge -->
-            @if (progressPercentage() > 0 && progressPercentage() < 100) {
-              <div
-                [ngClass]="progressGlowClasses()"
-                [style.left.%]="progressPercentage()"
-                class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
-                style="margin-left: -8px;">
-              </div>
-            }
-          </div>
-
-          <!-- Progress Percentage -->
-          <div class="text-center">
-            <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
-              {{ progressPercentage() }}% complete
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, styles: ["@keyframes icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse{animation:icon-pulse 2s ease-in-out infinite}.icon-glow{animation:icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s ease-in-out infinite}.message-fade{animation:message-fade 3s ease-in-out infinite}.animated-dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:dots-move 6s linear infinite,dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1{animation-delay:0s,0s}.animated-dot-2{animation-delay:1s,0s}.animated-dot-3{animation-delay:2s,0s}.animated-dot-4{animation-delay:3s,0s}.animated-dot-5{animation-delay:4s,0s}.animated-dot-6{animation-delay:5s,0s}\n"] }]
-    }], null, { itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 222 }); })();
-
-class ContentGenerationProgressWithConfettiComponent {
-    constructor() {
-        this.itemStatus = input(...(ngDevMode ? [undefined, { debugName: "itemStatus" }] : []));
-        this.title = input('Generating Your Analysis', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.subtitle = input('This will appear when ready. You can check back later as this will take a few minutes to complete.', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
-        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-        this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
-        this.profile = input(...(ngDevMode ? [undefined, { debugName: "profile" }] : []));
-        this.confettiIntensity = input('normal', ...(ngDevMode ? [{ debugName: "confettiIntensity" }] : []));
-        this.enableConfetti = input(true, ...(ngDevMode ? [{ debugName: "enableConfetti" }] : []));
-        this.confettiDelay = input(200, ...(ngDevMode ? [{ debugName: "confettiDelay" }] : []));
-        this.confettiService = inject(ConfettiService);
-        this.hasCelebrated = signal(false, ...(ngDevMode ? [{ debugName: "hasCelebrated" }] : []));
-        effect(() => {
-            const currentProfile = this.profile();
-            const currentStatus = currentProfile?.selfContentStatus;
-            if (!this.enableConfetti()) {
-                return;
-            }
-            if (currentStatus === AiDynamicContentStatusEnum.GENERATED && !this.hasCelebrated()) {
-                untracked(() => {
-                    this.confettiService.trigger({
-                        intensity: this.confettiIntensity(),
-                        delay: this.confettiDelay(),
-                        viewMode: this.viewMode(),
-                    });
-                    this.hasCelebrated.set(true);
-                });
-            }
-            if (currentStatus === AiDynamicContentStatusEnum.REQUESTED ||
-                currentStatus === AiDynamicContentStatusEnum.GENERATING) {
-                untracked(() => {
-                    this.hasCelebrated.set(false);
-                });
-            }
-        });
-    }
-    static { this.ɵfac = function ContentGenerationProgressWithConfettiComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContentGenerationProgressWithConfettiComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContentGenerationProgressWithConfettiComponent, selectors: [["symphiq-content-generation-progress-with-confetti"]], inputs: { itemStatus: [1, "itemStatus"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], showIcon: [1, "showIcon"], profile: [1, "profile"], confettiIntensity: [1, "confettiIntensity"], enableConfetti: [1, "enableConfetti"], confettiDelay: [1, "confettiDelay"] }, decls: 1, vars: 5, consts: [[3, "itemStatus", "title", "subtitle", "viewMode", "showIcon"]], template: function ContentGenerationProgressWithConfettiComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelement(0, "symphiq-content-generation-progress", 0);
-        } if (rf & 2) {
-            i0.ɵɵproperty("itemStatus", ctx.itemStatus())("title", ctx.title())("subtitle", ctx.subtitle())("viewMode", ctx.viewMode())("showIcon", ctx.showIcon());
-        } }, dependencies: [ContentGenerationProgressComponent], encapsulation: 2, changeDetection: 0 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressWithConfettiComponent, [{
-        type: Component,
-        args: [{
-                selector: 'symphiq-content-generation-progress-with-confetti',
-                standalone: true,
-                imports: [ContentGenerationProgressComponent],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <symphiq-content-generation-progress
-      [itemStatus]="itemStatus()"
-      [title]="title()"
-      [subtitle]="subtitle()"
-      [viewMode]="viewMode()"
-      [showIcon]="showIcon()"
-    />
-  `
-            }]
-    }], () => [], { itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], confettiIntensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "confettiIntensity", required: false }] }], enableConfetti: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableConfetti", required: false }] }], confettiDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "confettiDelay", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressWithConfettiComponent, { className: "ContentGenerationProgressWithConfettiComponent", filePath: "lib/components/shared/content-generation-progress-with-confetti.component.ts", lineNumber: 29 }); })();
-
 const _c0$l = () => [];
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();