@eric-emg/symphiq-components 1.2.35 → 1.2.37

package/fesm2022/symphiq-components.mjs

@@ -5,7 +5,7 @@ import { Injectable, signal, input, ChangeDetectionStrategy, Component, output,
 import { BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/common';
 import { NgClass, CommonModule } from '@angular/common';
-import * as i5 from '@angular/forms';
+import * as i6 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -163,23 +163,45 @@ class TooltipService {
             content: null,
             position: 'top',
             targetRect: null,
-            visible: false
+            visible: false,
+            scrollContainer: null,
+            checkHideCallback: undefined
         });
         this.tooltipState$ = this.tooltipState.asObservable();
+        this.scrollContainer = null;
+        this.isTooltipHovered = false;
     }
-    show(type, content, targetRect, position = 'top', mousePosition) {
+    setScrollContainer(container) {
+        this.scrollContainer = container;
+    }
+    setTooltipHovered(hovered) {
+        this.isTooltipHovered = hovered;
+    }
+    isHoveredOverTooltip() {
+        return this.isTooltipHovered;
+    }
+    triggerHideCheck() {
+        const callback = this.tooltipState.value.checkHideCallback;
+        if (callback) {
+            callback();
+        }
+    }
+    show(type, content, targetRect, position = 'top', mousePosition, checkHideCallback) {
         // Auto-adjust position if too close to screen edges
         let adjustedPosition = position;
         // Use different thresholds based on tooltip type
         // Insight tooltips can be quite tall, so need more space
         const HORIZONTAL_THRESHOLD = 200;
         const VERTICAL_THRESHOLD = type === 'insight' ? 350 : 200;
+        // Get viewport dimensions - use scroll container if available, otherwise window
+        const viewportWidth = this.scrollContainer?.clientWidth || window.innerWidth;
+        const viewportHeight = this.scrollContainer?.clientHeight || window.innerHeight;
         // Check left edge
         if (position === 'left' && targetRect.left < HORIZONTAL_THRESHOLD) {
             adjustedPosition = 'right';
         }
         // Check right edge
-        if (position === 'right' && (window.innerWidth - targetRect.right) < HORIZONTAL_THRESHOLD) {
+        if (position === 'right' && (viewportWidth - targetRect.right) < HORIZONTAL_THRESHOLD) {
             adjustedPosition = 'left';
         }
         // Check top edge
@@ -187,12 +209,12 @@ class TooltipService {
             adjustedPosition = 'bottom';
         }
         // Check bottom edge - prioritize flipping to top if not enough space
-        if (position === 'bottom' && (window.innerHeight - targetRect.bottom) < VERTICAL_THRESHOLD) {
+        if (position === 'bottom' && (viewportHeight - targetRect.bottom) < VERTICAL_THRESHOLD) {
             adjustedPosition = 'top';
         }
         // Smart auto-detection for 'top' position tooltips near bottom
         if (position === 'top') {
-            const spaceBelow = window.innerHeight - targetRect.bottom;
+            const spaceBelow = viewportHeight - targetRect.bottom;
             const spaceAbove = targetRect.top;
             // If more space above and not enough space below, keep it on top
             // If more space below, switch to bottom
@@ -203,15 +225,27 @@ class TooltipService {
                 adjustedPosition = 'bottom';
             }
         }
-        this.tooltipState.next({ type, content, position: adjustedPosition, targetRect, mousePosition, visible: true });
+        this.tooltipState.next({
+            type,
+            content,
+            position: adjustedPosition,
+            targetRect,
+            mousePosition,
+            visible: true,
+            scrollContainer: this.scrollContainer,
+            checkHideCallback
+        });
     }
     hide() {
+        this.isTooltipHovered = false;
         this.tooltipState.next({
             type: null,
             content: null,
             position: 'top',
             targetRect: null,
-            visible: false
+            visible: false,
+            scrollContainer: this.scrollContainer,
+            checkHideCallback: undefined
         });
     }
     updatePosition(targetRect) {
@@ -1456,6 +1490,11 @@ class TooltipDirective {
         this.isHovered.set(false);
         this.scheduleHide();
     }
+    onMouseEnterAgain() {
+        // If user returns to element while tooltip is still visible, cancel hide
+        this.clearHideTimeout();
+        this.isHovered.set(true);
+    }
     onFocus() {
         this.clearHideTimeout();
         this.isHovered.set(true);
@@ -1475,14 +1514,17 @@ class TooltipDirective {
             const position = this.tooltipPosition();
             if (content && this.isHovered()) {
                 const mousePos = position === 'auto' ? { x: this.mouseX, y: this.mouseY } : undefined;
-                this.tooltipService.show(type, content, rect, position, mousePos);
+                // Pass a callback that the tooltip can use to trigger hide checks
+                const checkHideCallback = () => this.scheduleHide();
+                this.tooltipService.show(type, content, rect, position, mousePos, checkHideCallback);
             }
         }, this.tooltipDelay());
     }
     scheduleHide() {
         this.clearHideTimeout();
         this.hideTimeout = setTimeout(() => {
-            if (!this.isHovered()) {
+            // Only hide if neither the element nor the tooltip is hovered
+            if (!this.isHovered() && !this.tooltipService.isHoveredOverTooltip()) {
                 this.tooltipService.hide();
             }
         }, 100);
@@ -1506,7 +1548,7 @@ class TooltipDirective {
     }
     static { this.ɵfac = function TooltipDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TooltipDirective)(); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TooltipDirective, selectors: [["", "libSymphiqTooltip", ""]], hostBindings: function TooltipDirective_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("mouseenter", function TooltipDirective_mouseenter_HostBindingHandler($event) { return ctx.onMouseEnter($event); })("mousemove", function TooltipDirective_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); })("mouseleave", function TooltipDirective_mouseleave_HostBindingHandler() { return ctx.onMouseLeave(); })("focus", function TooltipDirective_focus_HostBindingHandler() { return ctx.onFocus(); })("blur", function TooltipDirective_blur_HostBindingHandler() { return ctx.onBlur(); });
+            i0.ɵɵlistener("mouseenter", function TooltipDirective_mouseenter_HostBindingHandler() { return ctx.onMouseEnterAgain(); })("mousemove", function TooltipDirective_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); })("mouseleave", function TooltipDirective_mouseleave_HostBindingHandler() { return ctx.onMouseLeave(); })("focus", function TooltipDirective_focus_HostBindingHandler() { return ctx.onFocus(); })("blur", function TooltipDirective_blur_HostBindingHandler() { return ctx.onBlur(); });
         } }, inputs: { symphiqTooltip: [1, "libSymphiqTooltip", "symphiqTooltip"], tooltipType: [1, "tooltipType"], tooltipPosition: [1, "tooltipPosition"], tooltipDelay: [1, "tooltipDelay"] } }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TooltipDirective, [{
@@ -1524,6 +1566,9 @@ class TooltipDirective {
         }], onMouseLeave: [{
             type: HostListener,
             args: ['mouseleave']
+        }], onMouseEnterAgain: [{
+            type: HostListener,
+            args: ['mouseenter']
         }], onFocus: [{
             type: HostListener,
             args: ['focus']
@@ -10778,110 +10823,110 @@ const _c0$6 = () => [];
 function TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.metricContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.metricContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_3_Conditional_0_Template, 1, 2, "symphiq-metric-value-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.metricContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.metricContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-status-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.statusContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.statusContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_4_Conditional_0_Template, 1, 2, "symphiq-status-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.statusContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.statusContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-trend-indicator-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.trendContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.trendContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_5_Conditional_0_Template, 1, 2, "symphiq-trend-indicator-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.trendContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.trendContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-priority-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.priorityContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.priorityContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_6_Conditional_0_Template, 1, 2, "symphiq-priority-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.priorityContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.priorityContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.badgeContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.badgeContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_7_Conditional_0_Template, 1, 2, "symphiq-badge-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.badgeContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.badgeContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-breakdown-row-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.breakdownContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.breakdownContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_8_Conditional_0_Template, 1, 2, "symphiq-breakdown-row-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.breakdownContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.breakdownContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-competitive-benchmark-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.competitiveContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.competitiveContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_9_Conditional_0_Template, 1, 2, "symphiq-competitive-benchmark-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.competitiveContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.competitiveContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-insights-list-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.insightsListContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.insightsListContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_10_Conditional_0_Template, 1, 2, "symphiq-insights-list-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.insightsListContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.insightsListContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-narrative-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("content", ctx_r0.narrativeContent())("isLightMode", ctx_r0.isLightMode());
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("content", ctx_r1.narrativeContent())("isLightMode", ctx_r1.isLightMode());
 } }
 function TooltipContainerComponent_Conditional_0_Case_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Case_11_Conditional_0_Template, 1, 2, "symphiq-narrative-tooltip", 6);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r0.narrativeContent() ? 0 : -1);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.narrativeContent() ? 0 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "div", 8);
@@ -10891,18 +10936,18 @@ function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Tem
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const section_r2 = ctx.$implicit;
+    const section_r3 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(section_r2.title);
+    i0.ɵɵtextInterpolate(section_r3.title);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(section_r2.content);
+    i0.ɵɵtextInterpolate(section_r3.content);
 } }
 function TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, TooltipContainerComponent_Conditional_0_Case_12_Conditional_1_For_1_Template, 5, 2, "div", 7, i0.ɵɵrepeaterTrackByIndex);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵrepeater(content_r3["sections"] || i0.ɵɵpureFunction0(0, _c0$6));
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵrepeater(content_r4["sections"] || i0.ɵɵpureFunction0(0, _c0$6));
 } }
 function TooltipContainerComponent_Conditional_0_Case_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
@@ -10910,25 +10955,25 @@ function TooltipContainerComponent_Conditional_0_Case_12_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.textClass());
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.textClass());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(content_r3 && typeof content_r3 === "object" && "sections" in content_r3 ? 1 : -1);
+    i0.ɵɵconditional(content_r4 && typeof content_r4 === "object" && "sections" in content_r4 ? 1 : -1);
 } }
 function TooltipContainerComponent_Conditional_0_Case_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵtextInterpolate1(" ", content_r3["text"], " ");
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵtextInterpolate1(" ", content_r4["text"], " ");
 } }
 function TooltipContainerComponent_Conditional_0_Case_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    i0.ɵɵtextInterpolate1(" ", content_r3, " ");
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵtextInterpolate1(" ", content_r4, " ");
 } }
 function TooltipContainerComponent_Conditional_0_Case_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -10936,11 +10981,11 @@ function TooltipContainerComponent_Conditional_0_Case_13_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.textClass());
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.textClass());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(content_r3 && typeof content_r3 === "object" && "text" in content_r3 ? 1 : 2);
+    i0.ɵɵconditional(content_r4 && typeof content_r4 === "object" && "text" in content_r4 ? 1 : 2);
 } }
 function TooltipContainerComponent_Conditional_0_Case_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
@@ -10948,28 +10993,30 @@ function TooltipContainerComponent_Conditional_0_Case_14_Template(rf, ctx) { if
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext();
-    const content_r3 = i0.ɵɵreadContextLet(2);
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.textClass());
+    const content_r4 = i0.ɵɵreadContextLet(2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.textClass());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", content_r3, " ");
+    i0.ɵɵtextInterpolate1(" ", content_r4, " ");
 } }
 function TooltipContainerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+    i0.ɵɵlistener("mouseenter", function TooltipContainerComponent_Conditional_0_Template_div_mouseenter_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseEnter()); })("mouseleave", function TooltipContainerComponent_Conditional_0_Template_div_mouseleave_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTooltipMouseLeave()); });
     i0.ɵɵdeclareLet(2);
     i0.ɵɵconditionalCreate(3, TooltipContainerComponent_Conditional_0_Case_3_Template, 1, 1)(4, TooltipContainerComponent_Conditional_0_Case_4_Template, 1, 1)(5, TooltipContainerComponent_Conditional_0_Case_5_Template, 1, 1)(6, TooltipContainerComponent_Conditional_0_Case_6_Template, 1, 1)(7, TooltipContainerComponent_Conditional_0_Case_7_Template, 1, 1)(8, TooltipContainerComponent_Conditional_0_Case_8_Template, 1, 1)(9, TooltipContainerComponent_Conditional_0_Case_9_Template, 1, 1)(10, TooltipContainerComponent_Conditional_0_Case_10_Template, 1, 1)(11, TooltipContainerComponent_Conditional_0_Case_11_Template, 1, 1)(12, TooltipContainerComponent_Conditional_0_Case_12_Template, 2, 2, "div", 3)(13, TooltipContainerComponent_Conditional_0_Case_13_Template, 3, 2, "div", 4)(14, TooltipContainerComponent_Conditional_0_Case_14_Template, 2, 2, "div", 5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     let tmp_7_0;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("left", ctx_r0.tooltipLeft(), "px")("top", ctx_r0.tooltipTop(), "px");
-    i0.ɵɵproperty("ngClass", ctx_r0.containerClass())("@fadeInScale", undefined);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r1.tooltipLeft(), "px")("top", ctx_r1.tooltipTop(), "px");
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClass())("@fadeInScale", undefined);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.contentClass());
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClass());
     i0.ɵɵadvance();
-    i0.ɵɵstoreLet(ctx_r0.tooltipContent());
+    i0.ɵɵstoreLet(ctx_r1.tooltipContent());
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_7_0 = ctx_r0.tooltipType()) === "metric" ? 3 : tmp_7_0 === "status" ? 4 : tmp_7_0 === "trend" ? 5 : tmp_7_0 === "priority" ? 6 : tmp_7_0 === "badge" ? 7 : tmp_7_0 === "breakdown" ? 8 : tmp_7_0 === "competitive" ? 9 : tmp_7_0 === "insightsList" ? 10 : tmp_7_0 === "narrative" ? 11 : tmp_7_0 === "insight" ? 12 : tmp_7_0 === "text" ? 13 : 14);
+    i0.ɵɵconditional((tmp_7_0 = ctx_r1.tooltipType()) === "metric" ? 3 : tmp_7_0 === "status" ? 4 : tmp_7_0 === "trend" ? 5 : tmp_7_0 === "priority" ? 6 : tmp_7_0 === "badge" ? 7 : tmp_7_0 === "breakdown" ? 8 : tmp_7_0 === "competitive" ? 9 : tmp_7_0 === "insightsList" ? 10 : tmp_7_0 === "narrative" ? 11 : tmp_7_0 === "insight" ? 12 : tmp_7_0 === "text" ? 13 : 14);
 } }
 class TooltipContainerComponent {
     constructor() {
@@ -10983,7 +11030,8 @@ class TooltipContainerComponent {
             position: 'top',
             targetRect: null,
             mousePosition: undefined,
-            visible: false
+            visible: false,
+            scrollContainer: null
         }, ...(ngDevMode ? [{ debugName: "tooltipStateSignal" }] : []));
         this.isVisible = computed(() => this.tooltipStateSignal().visible, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
         this.tooltipType = computed(() => this.tooltipStateSignal().type, ...(ngDevMode ? [{ debugName: "tooltipType" }] : []));
@@ -10991,6 +11039,7 @@ class TooltipContainerComponent {
         this.tooltipPosition = computed(() => this.tooltipStateSignal().position, ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
         this.targetRect = computed(() => this.tooltipStateSignal().targetRect, ...(ngDevMode ? [{ debugName: "targetRect" }] : []));
         this.mousePosition = computed(() => this.tooltipStateSignal().mousePosition, ...(ngDevMode ? [{ debugName: "mousePosition" }] : []));
+        this.scrollContainer = computed(() => this.tooltipStateSignal().scrollContainer, ...(ngDevMode ? [{ debugName: "scrollContainer" }] : []));
         // Type-safe content accessors for each tooltip type
         this.metricContent = computed(() => {
             const content = this.tooltipContent();
@@ -11036,6 +11085,8 @@ class TooltipContainerComponent {
                 return true;
             const position = this.tooltipPosition();
             const tooltipWidth = 384;
+            const container = this.scrollContainer();
+            const viewportWidth = container?.clientWidth || window.innerWidth;
             // For 'auto' positioning, always center horizontally
             if (position === 'auto') {
                 return true;
@@ -11044,7 +11095,7 @@ class TooltipContainerComponent {
                 const centerPosition = rect.left + rect.width / 2;
                 const halfWidth = tooltipWidth / 2;
                 const wouldGoOffLeft = centerPosition - halfWidth < 10;
-                const wouldGoOffRight = centerPosition + halfWidth > window.innerWidth - 10;
+                const wouldGoOffRight = centerPosition + halfWidth > viewportWidth - 10;
                 return !wouldGoOffLeft && !wouldGoOffRight;
             }
             return false;
@@ -11066,7 +11117,8 @@ class TooltipContainerComponent {
             this.tooltipStateSignal.set({
                 ...state,
                 mousePosition: state.mousePosition || undefined,
-                content: state.content ?? undefined
+                content: state.content ?? undefined,
+                scrollContainer: state.scrollContainer || null
             });
         });
         effect(() => {
@@ -11078,6 +11130,14 @@ class TooltipContainerComponent {
             }
         });
     }
+    onTooltipMouseEnter() {
+        this.tooltipService.setTooltipHovered(true);
+    }
+    onTooltipMouseLeave() {
+        this.tooltipService.setTooltipHovered(false);
+        // Trigger the hide check callback from the directive
+        this.tooltipService.triggerHideCheck();
+    }
     calculateLeft() {
         const rect = this.targetRect();
         if (!rect)
@@ -11085,6 +11145,8 @@ class TooltipContainerComponent {
         const position = this.tooltipPosition();
         const mousePos = this.mousePosition();
         const tooltipWidth = 384;
+        const container = this.scrollContainer();
+        const viewportWidth = container?.clientWidth || window.innerWidth;
         // Handle 'auto' positioning with mouse coordinates
         if (position === 'auto' && mousePos) {
             const halfWidth = tooltipWidth / 2;
@@ -11093,8 +11155,8 @@ class TooltipContainerComponent {
             if (leftPos - halfWidth < 10) {
                 leftPos = halfWidth + 10;
             }
-            else if (leftPos + halfWidth > window.innerWidth - 10) {
-                leftPos = window.innerWidth - halfWidth - 10;
+            else if (leftPos + halfWidth > viewportWidth - 10) {
+                leftPos = viewportWidth - halfWidth - 10;
             }
             return leftPos;
         }
@@ -11105,14 +11167,14 @@ class TooltipContainerComponent {
                 const halfWidth = tooltipWidth / 2;
                 // Check if centered tooltip would go off screen
                 const wouldGoOffLeft = centerPosition - halfWidth < 10;
-                const wouldGoOffRight = centerPosition + halfWidth > window.innerWidth - 10;
+                const wouldGoOffRight = centerPosition + halfWidth > viewportWidth - 10;
                 if (wouldGoOffLeft) {
                     // Align to left edge with padding
                     return 10;
                 }
                 else if (wouldGoOffRight) {
                     // Align to right edge with padding
-                    return window.innerWidth - tooltipWidth - 10;
+                    return viewportWidth - tooltipWidth - 10;
                 }
                 else {
                     // Center normally (transform will be applied)
@@ -11130,7 +11192,7 @@ class TooltipContainerComponent {
             case 'right': {
                 const rightPosition = rect.right + 8;
                 // If tooltip would go off right edge, position it to the left instead
-                if (rightPosition + tooltipWidth > window.innerWidth - 10) {
+                if (rightPosition + tooltipWidth > viewportWidth - 10) {
                     return rect.left - tooltipWidth - 8;
                 }
                 return rightPosition;
@@ -11146,6 +11208,8 @@ class TooltipContainerComponent {
         const position = this.tooltipPosition();
         const mousePos = this.mousePosition();
         const type = this.tooltipType();
+        const container = this.scrollContainer();
+        const viewportHeight = container?.clientHeight || window.innerHeight;
         // Estimate tooltip height based on type
         let estimatedHeight = 100;
         if (type === 'insight') {
@@ -11159,7 +11223,7 @@ class TooltipContainerComponent {
             const offset = 20; // Offset from mouse cursor
             let topPos = mousePos.y + offset;
             // If tooltip would go off bottom of screen, position above cursor
-            if (topPos + estimatedHeight > window.innerHeight - 10) {
+            if (topPos + estimatedHeight > viewportHeight - 10) {
                 topPos = mousePos.y - estimatedHeight - offset;
             }
             // Ensure it doesn't go off top
@@ -11180,7 +11244,7 @@ class TooltipContainerComponent {
             case 'bottom': {
                 const bottomPosition = rect.bottom + 8;
                 // If tooltip would go off bottom of screen, position it above instead
-                if (bottomPosition + estimatedHeight > window.innerHeight - 10) {
+                if (bottomPosition + estimatedHeight > viewportHeight - 10) {
                     return rect.top - estimatedHeight - 8;
                 }
                 return bottomPosition;
@@ -11189,7 +11253,7 @@ class TooltipContainerComponent {
             case 'right': {
                 const centerPosition = rect.top + rect.height / 2 - estimatedHeight / 2;
                 // Keep within viewport
-                const maxTop = window.innerHeight - estimatedHeight - 10;
+                const maxTop = viewportHeight - estimatedHeight - 10;
                 return Math.max(10, Math.min(centerPosition, maxTop));
             }
             default:
@@ -11197,7 +11261,7 @@ class TooltipContainerComponent {
         }
     }
     static { this.ɵfac = function TooltipContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TooltipContainerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TooltipContainerComponent, selectors: [["symphiq-tooltip-container"]], decls: 1, vars: 1, consts: [[1, "fixed", "z-[100]", "pointer-events-none", 3, "left", "top", "ngClass"], [1, "fixed", "z-[100]", "pointer-events-none", 3, "ngClass"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "max-w-sm", 3, "ngClass"], [1, "text-sm", "space-y-3", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", "leading-relaxed", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", 3, "ngClass"], [3, "content", "isLightMode"], [1, "space-y-2"], [1, "font-semibold"], [1, "whitespace-pre-line", "leading-relaxed"]], template: function TooltipContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TooltipContainerComponent, selectors: [["symphiq-tooltip-container"]], decls: 1, vars: 1, consts: [[1, "fixed", "z-[100]", "pointer-events-none", 3, "left", "top", "ngClass"], [1, "fixed", "z-[100]", "pointer-events-none", 3, "ngClass"], [1, "rounded-lg", "shadow-2xl", "border", "backdrop-blur-xl", "px-4", "py-3", "max-w-sm", "pointer-events-auto", 3, "mouseenter", "mouseleave", "ngClass"], [1, "text-sm", "space-y-3", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", "leading-relaxed", 3, "ngClass"], [1, "text-sm", "whitespace-pre-line", 3, "ngClass"], [3, "content", "isLightMode"], [1, "space-y-2"], [1, "font-semibold"], [1, "whitespace-pre-line", "leading-relaxed"]], template: function TooltipContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, TooltipContainerComponent_Conditional_0_Template, 15, 9, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible() ? 0 : -1);
@@ -11258,7 +11322,11 @@ class TooltipContainerComponent {
         [ngClass]="containerClass()"
         class="fixed z-[100] pointer-events-none"
         @fadeInScale>
-        <div [ngClass]="contentClass()" class="rounded-lg shadow-2xl border backdrop-blur-xl px-4 py-3 max-w-sm">
+        <div
+          [ngClass]="contentClass()"
+          class="rounded-lg shadow-2xl border backdrop-blur-xl px-4 py-3 max-w-sm pointer-events-auto"
+          (mouseenter)="onTooltipMouseEnter()"
+          (mouseleave)="onTooltipMouseLeave()">
           @let content = tooltipContent();
           @switch (tooltipType()) {
             @case ('metric') {
@@ -11357,7 +11425,7 @@ class TooltipContainerComponent {
   `
             }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 169 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TooltipContainerComponent, { className: "TooltipContainerComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/tooltip-container.component.ts", lineNumber: 173 }); })();
 
 function MobileFABComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
@@ -19172,7 +19240,7 @@ class SearchBarComponent {
             i0.ɵɵconditionalCreate(0, SearchBarComponent_Conditional_0_Template, 17, 10, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.searchService.isSearchOpen() ? 0 : -1);
-        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel], styles: ["[_nghost-%COMP%]{display:contents}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i6.DefaultValueAccessor, i6.NgControlStatus, i6.NgModel], styles: ["[_nghost-%COMP%]{display:contents}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchBarComponent, [{
         type: Component,
@@ -20191,30 +20259,35 @@ class CompetitiveIntelligenceViewComponent {
 const _c0$4 = ["dashboardContainer"];
 const _c1 = () => ({});
 const _c2 = () => [1, 2, 3, 4, 5, 6];
-const _c3 = () => [1, 2, 3, 4];
+const _c3 = () => [1, 2, 3];
+const _c4 = () => [1, 2, 3, 4];
+const _c5 = () => [1, 2];
 const _forTrack0$1 = ($index, $item) => $item.value;
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 16);
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 19);
-    i0.ɵɵelement(1, "path", 52);
+    i0.ɵɵelementStart(0, "svg", 21);
+    i0.ɵɵelement(1, "path", 53);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Compact");
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 19);
-    i0.ɵɵelement(1, "path", 53);
+    i0.ɵɵelementStart(0, "svg", 21);
+    i0.ɵɵelement(1, "path", 54);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Expanded");
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_For_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 27);
+function SymphiqFunnelAnalysisDashboardComponent_For_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20223,14 +20296,14 @@ function SymphiqFunnelAnalysisDashboardComponent_For_37_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(section_r2.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_55_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36)(1, "span", 54);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_57_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "span", 55);
     i0.ɵɵtext(2, "Revenue:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 55);
+    i0.ɵɵelementStart(3, "span", 56);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 56);
+    i0.ɵɵelementStart(5, "span", 57);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -20247,20 +20320,20 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_55_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" ", ctx_r2.revenueTrend() >= 0 ? "+" : "", "", ctx_r2.revenueTrend().toFixed(1), "% ");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_61_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_63_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 39);
-    i0.ɵɵelement(1, "path", 52);
+    i0.ɵɵelementStart(0, "svg", 40);
+    i0.ɵɵelement(1, "path", 53);
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_62_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_64_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 39);
-    i0.ɵɵelement(1, "path", 53);
+    i0.ɵɵelementStart(0, "svg", 40);
+    i0.ɵɵelement(1, "path", 54);
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_For_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 27);
+function SymphiqFunnelAnalysisDashboardComponent_For_68_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20269,28 +20342,28 @@ function SymphiqFunnelAnalysisDashboardComponent_For_66_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(section_r4.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_67_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_69_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 42)(1, "div", 32)(2, "div", 33)(3, "div", 57);
+    i0.ɵɵelementStart(0, "div", 43)(1, "div", 34)(2, "div", 35)(3, "div", 58);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(4, "svg", 58);
-    i0.ɵɵelement(5, "path", 20);
+    i0.ɵɵelementStart(4, "svg", 59);
+    i0.ɵɵelement(5, "path", 22);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(6, "div", 59)(7, "span", 60);
+    i0.ɵɵelementStart(6, "div", 60)(7, "span", 61);
     i0.ɵɵtext(8, "Showing:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 61);
+    i0.ɵɵelementStart(9, "span", 62);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 62);
+    i0.ɵɵelementStart(11, "span", 63);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "button", 63);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_67_Template_button_click_13_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.clearSearchResult(); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(13, "button", 64);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_69_Template_button_click_13_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.clearSearchResult(); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(14, "svg", 39);
-    i0.ɵɵelement(15, "path", 64);
+    i0.ɵɵelementStart(14, "svg", 40);
+    i0.ɵɵelement(15, "path", 65);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -20310,133 +20383,126 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_67_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-blue-600 hover:text-blue-800 hover:bg-blue-100" : "text-blue-400 hover:text-blue-200 hover:bg-blue-800/50");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_69_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_71_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_69_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToTop()); });
+    i0.ɵɵelementStart(0, "button", 66);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_71_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToTop()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("title", "Scroll to Top")("ngClass", ctx_r2.isLightMode() ? "bg-slate-300 hover:bg-blue-500" : "bg-slate-600 hover:bg-blue-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_70_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_72_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_70_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToSection("insights-section")); });
+    i0.ɵɵelementStart(0, "button", 66);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_72_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToSection("insights-section")); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("title", "Key Insights")("ngClass", ctx_r2.isLightMode() ? "bg-slate-300 hover:bg-blue-500" : "bg-slate-600 hover:bg-blue-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_71_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_73_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_71_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToSection("metrics-section")); });
+    i0.ɵɵelementStart(0, "button", 66);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_73_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToSection("metrics-section")); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("title", "Performance Metrics")("ngClass", ctx_r2.isLightMode() ? "bg-slate-300 hover:bg-blue-500" : "bg-slate-600 hover:bg-blue-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_72_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_74_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_72_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToSection("breakdowns-section")); });
+    i0.ɵɵelementStart(0, "button", 66);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_74_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToSection("breakdowns-section")); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("title", "Performance Breakdowns")("ngClass", ctx_r2.isLightMode() ? "bg-slate-300 hover:bg-blue-500" : "bg-slate-600 hover:bg-blue-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_73_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_75_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_73_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToSection("competitive-section")); });
+    i0.ɵɵelementStart(0, "button", 66);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_75_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.scrollToSection("competitive-section")); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("title", "Competitive Intelligence")("ngClass", ctx_r2.isLightMode() ? "bg-slate-300 hover:bg-indigo-500" : "bg-slate-600 hover:bg-indigo-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_76_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-overall-assessment", 66);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("assessment", ctx_r2.performanceOverview().overallAssessment || i0.ɵɵpureFunction0(8, _c1))("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());
-} }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 78);
-    i0.ɵɵelement(2, "div", 79);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 67)(1, "div", 69)(2, "div", 14);
+    i0.ɵɵelement(3, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementStart(4, "div", 71);
+    i0.ɵɵelement(5, "symphiq-skeleton-loader", 70)(6, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 72);
+    i0.ɵɵelement(8, "symphiq-skeleton-loader", 70)(9, "symphiq-skeleton-loader", 70)(10, "symphiq-skeleton-loader", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 80)(4, "div", 81);
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 82);
-    i0.ɵɵelement(6, "path", 83);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(11, "div", 73);
+    i0.ɵɵelement(12, "symphiq-skeleton-loader", 70)(13, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-white border-slate-200" : "bg-slate-800 border-slate-700");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("width", "48px")("height", "48px")("isLightMode", ctx_r2.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "from-transparent via-blue-500/30 to-transparent" : "from-transparent via-blue-400/20 to-transparent");
+    i0.ɵɵproperty("width", "40%")("height", "32px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", "60%")("height", "20px")("isLightMode", ctx_r2.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200/50 shadow-lg shadow-blue-500/10" : "bg-gradient-to-br from-slate-900 to-slate-800 border border-blue-500/20 shadow-lg shadow-blue-500/5");
+    i0.ɵɵproperty("width", "100%")("height", "18px")("isLightMode", ctx_r2.isLightMode());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-blue-500" : "text-blue-400");
-} }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-insight-card", 86);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const insight_r11 = ctx.$implicit;
-    const $index_r12 = ctx.$index;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassMap(ctx_r2.getInsightCardClass(insight_r11));
-    i0.ɵɵstyleProp("animation-delay", 0.3 + $index_r12 * 0.1 + "s");
-    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "insight-" + $index_r12);
+    i0.ɵɵproperty("width", "95%")("height", "18px")("isLightMode", ctx_r2.isLightMode());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("insight", insight_r11)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r11))("allCharts", ctx_r2.allCharts())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", false);
+    i0.ɵɵproperty("width", "90%")("height", "18px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", "100%")("height", "200px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_14_For_2_Template, 2, 13, "div", 84, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵelementEnd();
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-funnel-analysis-overall-assessment", 68);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.insights());
+    i0.ɵɵproperty("assessment", ctx_r2.performanceOverview().overallAssessment || i0.ɵɵpureFunction0(8, _c1))("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());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-insight-card", 86);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵconditionalCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_1_Template, 14, 25, "div", 67)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_2_Template, 1, 9, "symphiq-funnel-analysis-overall-assessment", 68);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const insight_r13 = ctx.$implicit;
-    const $index_r14 = ctx.$index;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵstyleProp("animation-delay", 0.3 + $index_r14 * 0.1 + "s");
-    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "insight-" + $index_r14);
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("insight", insight_r13)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r13))("allCharts", ctx_r2.allCharts())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true);
+    i0.ɵɵconditional(ctx_r2.isDataLoading() ? 1 : 2);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 77);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_15_For_2_Template, 2, 11, "div", 87, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74)(1, "div", 85);
+    i0.ɵɵelement(2, "div", 86);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 87)(4, "div", 88);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(5, "svg", 89);
+    i0.ɵɵelement(6, "path", 90);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "from-transparent via-blue-500/30 to-transparent" : "from-transparent via-blue-400/20 to-transparent");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200/50 shadow-lg shadow-blue-500/10" : "bg-gradient-to-br from-slate-900 to-slate-800 border border-blue-500/20 shadow-lg shadow-blue-500/5");
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.insights());
+    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-blue-500" : "text-blue-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88)(1, "div", 89)(2, "div", 90);
-    i0.ɵɵelement(3, "symphiq-skeleton-loader", 91)(4, "symphiq-skeleton-loader", 91);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 91)(1, "div", 92)(2, "div", 93);
+    i0.ɵɵelement(3, "symphiq-skeleton-loader", 70)(4, "symphiq-skeleton-loader", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-skeleton-loader", 91)(6, "symphiq-skeleton-loader", 91)(7, "symphiq-skeleton-loader", 91);
-    i0.ɵɵelementStart(8, "div", 92);
-    i0.ɵɵelement(9, "symphiq-skeleton-loader", 91)(10, "symphiq-skeleton-loader", 91);
+    i0.ɵɵelement(5, "symphiq-skeleton-loader", 70)(6, "symphiq-skeleton-loader", 70)(7, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementStart(8, "div", 94);
+    i0.ɵɵelement(9, "symphiq-skeleton-loader", 70)(10, "symphiq-skeleton-loader", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 93);
-    i0.ɵɵelement(12, "symphiq-skeleton-loader", 91)(13, "symphiq-skeleton-loader", 91);
+    i0.ɵɵelementStart(11, "div", 95);
+    i0.ɵɵelement(12, "symphiq-skeleton-loader", 70)(13, "symphiq-skeleton-loader", 70);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -20460,31 +20526,76 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_16_F
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "80px")("height", "28px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_16_For_2_Template, 14, 28, "div", 88, i0.ɵɵrepeaterTrackByIdentity);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_14_For_2_Template, 14, 28, "div", 91, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c2));
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_0_Template, 7, 3, "div", 67);
-    i0.ɵɵelementStart(1, "section", 68);
-    i0.ɵɵelement(2, "div", 69);
-    i0.ɵɵelementStart(3, "div", 70)(4, "div", 71)(5, "div", 37)(6, "div", 72)(7, "div", 37);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-insight-card", 98);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const insight_r11 = ctx.$implicit;
+    const $index_r12 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(ctx_r2.getInsightCardClass(insight_r11));
+    i0.ɵɵstyleProp("animation-delay", 0.3 + $index_r12 * 0.1 + "s");
+    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "insight-" + $index_r12);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("insight", insight_r11)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r11))("allCharts", ctx_r2.allCharts())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", false);
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_15_For_2_Template, 2, 13, "div", 96, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.insights());
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-insight-card", 98);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const insight_r13 = ctx.$implicit;
+    const $index_r14 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("animation-delay", 0.3 + $index_r14 * 0.1 + "s");
+    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "insight-" + $index_r14);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("insight", insight_r13)("allMetrics", ctx_r2.allMetrics())("charts", ctx_r2.chartsForInsight(insight_r13))("allCharts", ctx_r2.allCharts())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true);
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_16_For_2_Template, 2, 11, "div", 99, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.insights());
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_0_Template, 7, 3, "div", 74);
+    i0.ɵɵelementStart(1, "section", 75);
+    i0.ɵɵelement(2, "div", 76);
+    i0.ɵɵelementStart(3, "div", 77)(4, "div", 78)(5, "div", 14)(6, "div", 79)(7, "div", 14);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(8, "svg", 73);
-    i0.ɵɵelement(9, "path", 74);
+    i0.ɵɵelementStart(8, "svg", 80);
+    i0.ɵɵelement(9, "path", 81);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(10, "h2", 75);
+    i0.ɵɵelementStart(10, "h2", 82);
     i0.ɵɵtext(11, "Key Insights");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(12, "span", 30);
+    i0.ɵɵelementStart(12, "span", 32);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_14_Template, 3, 0, "div", 76)(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_15_Template, 3, 0, "div", 77)(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Conditional_16_Template, 3, 1, "div", 76);
+    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_14_Template, 3, 1, "div", 83)(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_15_Template, 3, 0, "div", 83)(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_16_Template, 3, 0, "div", 84);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -20502,16 +20613,16 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", ctx_r2.insights().length, " insights");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.viewModeService.isExpanded() ? 14 : !ctx_r2.viewModeService.isExpanded() ? 15 : 16);
+    i0.ɵɵconditional(ctx_r2.isDataLoading() || ctx_r2.viewModeService.isExpanded() && ctx_r2.viewModeService.getIsTransitioning() ? 14 : ctx_r2.viewModeService.isExpanded() ? 15 : 16);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 94)(1, "div", 78);
-    i0.ɵɵelement(2, "div", 79);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 100)(1, "div", 85);
+    i0.ɵɵelement(2, "div", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 80)(4, "div", 81);
+    i0.ɵɵelementStart(3, "div", 87)(4, "div", 88);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 82);
-    i0.ɵɵelement(6, "path", 110);
+    i0.ɵɵelementStart(5, "svg", 89);
+    i0.ɵɵelement(6, "path", 116);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -20522,13 +20633,13 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_0_Te
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-emerald-500" : "text-emerald-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵelement(1, "div", 111);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 107);
+    i0.ɵɵelement(1, "div", 117);
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 112);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_17_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 118);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20537,8 +20648,8 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_17_Condition
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cat_r16.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 27);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20547,24 +20658,24 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_17_Condition
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cat_r16.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_17_Conditional_0_Template, 2, 2, "option", 112)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_17_Conditional_1_Template, 2, 2, "option", 27);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_17_Conditional_0_Template, 2, 2, "option", 118)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_17_Conditional_1_Template, 2, 2, "option", 29);
 } if (rf & 2) {
     const cat_r16 = ctx.$implicit;
     i0.ɵɵconditional(cat_r16.divider ? 0 : 1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "path", 104);
+    i0.ɵɵelement(0, "path", 110);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "path", 105);
+    i0.ɵɵelement(0, "path", 111);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 114);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_27_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const cat_r18 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter(cat_r18.value)); });
+    i0.ɵɵelementStart(0, "button", 120);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_27_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const cat_r18 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter(cat_r18.value)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20575,71 +20686,110 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_27_Condition
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", cat_r18.label, " ");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_27_Conditional_0_Template, 2, 4, "button", 113);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_27_Conditional_0_Template, 2, 4, "button", 119);
 } if (rf & 2) {
     const cat_r18 = ctx.$implicit;
     i0.ɵɵconditional(!cat_r18.divider ? 0 : -1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 120);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 121);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_28_For_2_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-skeleton-loader", 70);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("width", "100%")("height", "120px")("isLightMode", ctx_r2.isLightMode());
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_28_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 121)(1, "div", 122)(2, "div", 14);
+    i0.ɵɵelement(3, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementStart(4, "div", 72);
+    i0.ɵɵelement(5, "symphiq-skeleton-loader", 70)(6, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(7, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 123);
+    i0.ɵɵrepeaterCreate(9, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_28_For_2_For_10_Template, 1, 3, "symphiq-skeleton-loader", 70, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-white border-slate-200" : "bg-slate-800 border-slate-700");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("width", "40px")("height", "40px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("width", "150px")("height", "24px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", "100px")("height", "16px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", "80px")("height", "36px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(13, _c4));
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 114);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_28_For_2_Template, 11, 14, "div", 121, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c3));
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 131);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const metric_r19 = ctx.$implicit;
-    const ɵ$index_386_r20 = ctx.$index;
-    const ɵ$index_377_r21 = i0.ɵɵnextContext(3).$index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(ctx_r2.getBentoCardClass(metric_r19, ɵ$index_386_r20));
-    i0.ɵɵstyleProp("animation-delay", 0.6 + ɵ$index_377_r21 * 0.15 + ɵ$index_386_r20 * 0.08 + "s");
+    const ɵ$index_447_r20 = ctx.$index;
+    const ɵ$index_438_r21 = i0.ɵɵnextContext(3).$index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(ctx_r2.getBentoCardClass(metric_r19, ɵ$index_447_r20));
+    i0.ɵɵstyleProp("animation-delay", 0.6 + ɵ$index_438_r21 * 0.15 + ɵ$index_447_r20 * 0.08 + "s");
     i0.ɵɵadvance();
     i0.ɵɵproperty("metric", metric_r19)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(metric_r19))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.funnelAnalysis())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", false);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 117);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_0_For_2_Template, 2, 12, "div", 119, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 127);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_0_For_2_Template, 2, 12, "div", 129, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const funnelGroup_r22 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
     i0.ɵɵrepeater(funnelGroup_r22.relatedMetrics);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 120);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 116);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 126);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const metric_r23 = ctx.$implicit;
-    const ɵ$index_394_r24 = ctx.$index;
-    const ɵ$index_377_r21 = i0.ɵɵnextContext(3).$index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("animation-delay", 0.6 + ɵ$index_377_r21 * 0.15 + ɵ$index_394_r24 * 0.08 + "s");
+    const ɵ$index_455_r24 = ctx.$index;
+    const ɵ$index_438_r21 = i0.ɵɵnextContext(3).$index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("animation-delay", 0.6 + ɵ$index_438_r21 * 0.15 + ɵ$index_455_r24 * 0.08 + "s");
     i0.ɵɵadvance();
     i0.ɵɵproperty("metric", metric_r23)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(metric_r23))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.funnelAnalysis())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", true);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 118);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_1_For_2_Template, 2, 10, "div", 122, i0.ɵɵrepeaterTrackByIndex);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 128);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_1_For_2_Template, 2, 10, "div", 132, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const funnelGroup_r22 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
     i0.ɵɵrepeater(funnelGroup_r22.relatedMetrics);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 123)(1, "div", 89)(2, "div", 98);
-    i0.ɵɵelement(3, "symphiq-skeleton-loader", 91)(4, "symphiq-skeleton-loader", 91);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 133)(1, "div", 92)(2, "div", 104);
+    i0.ɵɵelement(3, "symphiq-skeleton-loader", 70)(4, "symphiq-skeleton-loader", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "symphiq-skeleton-loader", 91);
-    i0.ɵɵelementStart(6, "div", 124);
-    i0.ɵɵelement(7, "symphiq-skeleton-loader", 91)(8, "symphiq-skeleton-loader", 91);
+    i0.ɵɵelement(5, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementStart(6, "div", 134);
+    i0.ɵɵelement(7, "symphiq-skeleton-loader", 70)(8, "symphiq-skeleton-loader", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(9, "symphiq-skeleton-loader", 91)(10, "symphiq-skeleton-loader", 91);
-    i0.ɵɵelementStart(11, "div", 125);
-    i0.ɵɵelement(12, "symphiq-skeleton-loader", 91);
+    i0.ɵɵelement(9, "symphiq-skeleton-loader", 70)(10, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementStart(11, "div", 135);
+    i0.ɵɵelement(12, "symphiq-skeleton-loader", 70);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(5);
+    const ctx_r2 = i0.ɵɵnextContext(6);
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-white border-slate-200" : "bg-slate-800 border-slate-700");
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("width", "60%")("height", "22px")("isLightMode", ctx_r2.isLightMode());
@@ -20658,51 +20808,51 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Condition
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("width", "100%")("height", "120px")("isLightMode", ctx_r2.isLightMode());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 117);
-    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_2_For_2_Template, 13, 25, "div", 123, i0.ɵɵrepeaterTrackByIdentity);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 127);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_2_For_2_Template, 13, 25, "div", 133, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c3));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c4));
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_0_Template, 3, 0, "div", 117)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_1_Template, 3, 0, "div", 118)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Conditional_2_Template, 3, 1, "div", 117);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_0_Template, 3, 0, "div", 127)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_1_Template, 3, 0, "div", 128)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Conditional_2_Template, 3, 1, "div", 127);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵconditional(ctx_r2.viewModeService.isExpanded() ? 0 : !ctx_r2.viewModeService.isExpanded() ? 1 : 2);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 115);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 116);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 125);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-metric-card", 126);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Conditional_2_Template, 3, 1);
+    i0.ɵɵconditionalCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Conditional_2_Template, 3, 1);
 } if (rf & 2) {
     const funnelGroup_r22 = ctx.$implicit;
-    const ɵ$index_377_r21 = ctx.$index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("animation-delay", 0.5 + ɵ$index_377_r21 * 0.15 + "s");
-    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "metric-" + ɵ$index_377_r21);
+    const ɵ$index_438_r21 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("animation-delay", 0.5 + ɵ$index_438_r21 * 0.15 + "s");
+    i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "metric-" + ɵ$index_438_r21);
     i0.ɵɵadvance();
     i0.ɵɵproperty("metric", funnelGroup_r22.funnelMetric)("insights", ctx_r2.insights())("charts", ctx_r2.chartsForMetric(funnelGroup_r22.funnelMetric))("allCharts", ctx_r2.allCharts())("analysis", ctx_r2.funnelAnalysis())("isLightMode", ctx_r2.isLightMode())("viewMode", ctx_r2.viewMode())("isCompactMode", ctx_r2.viewModeService.isCompact());
     i0.ɵɵadvance();
     i0.ɵɵconditional(funnelGroup_r22.relatedMetrics.length > 0 ? 2 : -1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_ForEmpty_31_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 109);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_ForEmpty_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 124);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 126);
-    i0.ɵɵelement(2, "path", 99);
+    i0.ɵɵelementStart(1, "svg", 136);
+    i0.ɵɵelement(2, "path", 105);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "h3", 127);
+    i0.ɵɵelementStart(3, "h3", 137);
     i0.ɵɵtext(4, "No Metrics Found");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 128);
+    i0.ɵɵelementStart(5, "p", 138);
     i0.ɵɵtext(6, "No performance metrics match your current filter selection. Try adjusting your filters to see more results.");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-slate-50 border-slate-200" : "bg-slate-800/50 border-slate-700");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-slate-300" : "text-slate-600");
@@ -20711,43 +20861,52 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_ForEmpty_31_Temp
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-slate-600" : "text-slate-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 114);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_For_2_Template, 3, 13, null, null, i0.ɵɵrepeaterTrackByIndex, false, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_ForEmpty_3_Template, 7, 4, "div", 124);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("animate-content-change", ctx_r2.isCategoryTransitioning())("transition-opacity-slow", ctx_r2.isCategoryTransitioning());
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.groupedMetrics());
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_0_Template, 7, 3, "div", 94);
-    i0.ɵɵelementStart(1, "section", 95);
-    i0.ɵɵelement(2, "div", 96);
-    i0.ɵɵelementStart(3, "div", 70)(4, "div", 97)(5, "div", 98)(6, "div", 37)(7, "div", 72)(8, "div", 37);
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_0_Template, 7, 3, "div", 100);
+    i0.ɵɵelementStart(1, "section", 101);
+    i0.ɵɵelement(2, "div", 102);
+    i0.ɵɵelementStart(3, "div", 77)(4, "div", 103)(5, "div", 104)(6, "div", 14)(7, "div", 79)(8, "div", 14);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(9, "svg", 73);
-    i0.ɵɵelement(10, "path", 99);
+    i0.ɵɵelementStart(9, "svg", 80);
+    i0.ɵɵelement(10, "path", 105);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(11, "h2", 75);
+    i0.ɵɵelementStart(11, "h2", 82);
     i0.ɵɵtext(12, "Performance Metrics");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(13, "div", 100);
-    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_14_Template, 2, 0, "div", 101);
-    i0.ɵɵelementStart(15, "select", 102);
-    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Template_select_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter($event)); });
-    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_17_Template, 2, 1, null, null, _forTrack0$1);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 103);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSortOrder()); });
+    i0.ɵɵelementStart(13, "div", 106);
+    i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_14_Template, 2, 0, "div", 107);
+    i0.ɵɵelementStart(15, "select", 108);
+    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Template_select_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter($event)); });
+    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_17_Template, 2, 1, null, null, _forTrack0$1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 109);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleSortOrder()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(19, "svg", 19);
-    i0.ɵɵconditionalCreate(20, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_20_Template, 1, 0, ":svg:path", 104);
-    i0.ɵɵconditionalCreate(21, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Conditional_21_Template, 1, 0, ":svg:path", 105);
+    i0.ɵɵelementStart(19, "svg", 21);
+    i0.ɵɵconditionalCreate(20, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_20_Template, 1, 0, ":svg:path", 110);
+    i0.ɵɵconditionalCreate(21, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_21_Template, 1, 0, ":svg:path", 111);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(22, "span");
     i0.ɵɵtext(23, "Sort");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(24, "div", 106)(25, "div", 107);
-    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_27_Template, 1, 1, null, null, _forTrack0$1);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(28, "div", 108);
-    i0.ɵɵrepeaterCreate(29, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_For_30_Template, 3, 13, null, null, i0.ɵɵrepeaterTrackByIndex, false, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_ForEmpty_31_Template, 7, 4, "div", 109);
+    i0.ɵɵelementStart(24, "div", 112)(25, "div", 113);
+    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_27_Template, 1, 1, null, null, _forTrack0$1);
     i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(28, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_28_Template, 3, 1, "div", 114)(29, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_29_Template, 4, 5, "div", 115);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r2.selectedSectionFilter() === "ALL" ? 0 : -1);
@@ -20777,18 +20936,16 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Template(rf, ctx
     i0.ɵɵadvance(5);
     i0.ɵɵrepeater(ctx_r2.categories);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("animate-content-change", ctx_r2.isCategoryTransitioning())("transition-opacity-slow", ctx_r2.isCategoryTransitioning());
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.groupedMetrics());
+    i0.ɵɵconditional(ctx_r2.isDataLoading() ? 28 : 29);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 129)(1, "div", 78);
-    i0.ɵɵelement(2, "div", 79);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 139)(1, "div", 85);
+    i0.ɵɵelement(2, "div", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 80)(4, "div", 81);
+    i0.ɵɵelementStart(3, "div", 87)(4, "div", 88);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 82);
-    i0.ɵɵelement(6, "path", 99);
+    i0.ɵɵelementStart(5, "svg", 89);
+    i0.ɵɵelement(6, "path", 105);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -20799,13 +20956,13 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_0_Te
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-purple-500" : "text-purple-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵelement(1, "div", 137);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 107);
+    i0.ɵɵelement(1, "div", 147);
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 112);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 118);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20814,8 +20971,8 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_15_Condition
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(filter_r26.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 27);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_For_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20824,40 +20981,77 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_15_Condition
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(filter_r26.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_15_Conditional_0_Template, 2, 2, "option", 112)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_15_Conditional_1_Template, 2, 2, "option", 27);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_For_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_For_15_Conditional_0_Template, 2, 2, "option", 118)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_For_15_Conditional_1_Template, 2, 2, "option", 29);
 } if (rf & 2) {
     const filter_r26 = ctx.$implicit;
     i0.ɵɵconditional(filter_r26.divider ? 0 : 1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 85);
-    i0.ɵɵelement(1, "symphiq-funnel-analysis-breakdown-section", 138);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_16_For_2_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 149);
+    i0.ɵɵelement(1, "symphiq-skeleton-loader", 70)(2, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-slate-50" : "bg-slate-700/50");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", "150px")("height", "18px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", "80px")("height", "18px")("isLightMode", ctx_r2.isLightMode());
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 121)(1, "div", 122);
+    i0.ɵɵelement(2, "symphiq-skeleton-loader", 70)(3, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 148);
+    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_16_For_2_For_6_Template, 3, 7, "div", 149, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-white border-slate-200" : "bg-slate-800 border-slate-700");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("width", "200px")("height", "28px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", "100px")("height", "24px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(7, _c4));
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_16_For_2_Template, 7, 8, "div", 121, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c5));
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵelement(1, "symphiq-funnel-analysis-breakdown-section", 150);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const breakdown_r27 = ctx.$implicit;
     const $index_r28 = ctx.$index;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵstyleProp("animation-delay", 0.8 + $index_r28 * 0.1 + "s");
     i0.ɵɵproperty("libSymphiqSearchHighlight", ctx_r2.searchService.highlightedResultId())("highlightId", "breakdown-" + $index_r28);
     i0.ɵɵadvance();
     i0.ɵɵproperty("breakdown", breakdown_r27)("charts", ctx_r2.chartsForBreakdown(breakdown_r27))("isLightMode", ctx_r2.isLightMode())("isCompactMode", ctx_r2.viewModeService.isCompact());
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_ForEmpty_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 109);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_17_ForEmpty_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 124);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 126);
-    i0.ɵɵelement(2, "path", 139);
+    i0.ɵɵelementStart(1, "svg", 136);
+    i0.ɵɵelement(2, "path", 151);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "h3", 127);
+    i0.ɵɵelementStart(3, "h3", 137);
     i0.ɵɵtext(4, "No Breakdowns Found");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 128);
+    i0.ɵɵelementStart(5, "p", 138);
     i0.ɵɵtext(6, "No performance breakdowns match your current filter selection. Try adjusting your filters to see more results.");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-slate-50 border-slate-200" : "bg-slate-800/50 border-slate-700");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-slate-300" : "text-slate-600");
@@ -20866,30 +21060,39 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_ForEmpty_19_Temp
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-slate-600" : "text-slate-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵrepeaterCreate(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_17_For_2_Template, 2, 8, "div", 99, i0.ɵɵrepeaterTrackByIndex, false, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_17_ForEmpty_3_Template, 7, 4, "div", 124);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("animate-content-change", ctx_r2.isBreakdownTransitioning())("transition-opacity-slow", ctx_r2.isBreakdownTransitioning());
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.breakdowns());
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_0_Template, 7, 3, "div", 129);
-    i0.ɵɵelementStart(1, "section", 130);
-    i0.ɵɵelement(2, "div", 131);
-    i0.ɵɵelementStart(3, "div", 70)(4, "div", 132)(5, "div", 72)(6, "div", 37);
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_0_Template, 7, 3, "div", 139);
+    i0.ɵɵelementStart(1, "section", 140);
+    i0.ɵɵelement(2, "div", 141);
+    i0.ɵɵelementStart(3, "div", 77)(4, "div", 142)(5, "div", 79)(6, "div", 14);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(7, "svg", 73);
-    i0.ɵɵelement(8, "path", 133);
+    i0.ɵɵelementStart(7, "svg", 80);
+    i0.ɵɵelement(8, "path", 143);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(9, "h2", 75);
+    i0.ɵɵelementStart(9, "h2", 82);
     i0.ɵɵtext(10, "Performance Breakdowns");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 134);
-    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Template_div_click_11_listener($event) { i0.ɵɵrestoreView(_r25); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Template_div_mousedown_11_listener($event) { i0.ɵɵrestoreView(_r25); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Template_div_pointerdown_11_listener($event) { i0.ɵɵrestoreView(_r25); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Conditional_12_Template, 2, 0, "div", 101);
-    i0.ɵɵelementStart(13, "select", 135);
-    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeBreakdownFilter($event)); });
-    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_15_Template, 2, 1, null, null, _forTrack0$1);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(16, "div", 136);
-    i0.ɵɵrepeaterCreate(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_For_18_Template, 2, 8, "div", 87, i0.ɵɵrepeaterTrackByIndex, false, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_ForEmpty_19_Template, 7, 4, "div", 109);
+    i0.ɵɵelementStart(11, "div", 144);
+    i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Template_div_click_11_listener($event) { i0.ɵɵrestoreView(_r25); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Template_div_mousedown_11_listener($event) { i0.ɵɵrestoreView(_r25); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Template_div_pointerdown_11_listener($event) { i0.ɵɵrestoreView(_r25); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_12_Template, 2, 0, "div", 107);
+    i0.ɵɵelementStart(13, "select", 145);
+    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeBreakdownFilter($event)); });
+    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_For_15_Template, 2, 1, null, null, _forTrack0$1);
     i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_16_Template, 3, 1, "div", 69)(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Conditional_17_Template, 4, 5, "div", 146);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r2.selectedSectionFilter() === "ALL" ? 0 : -1);
@@ -20909,18 +21112,16 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.breakdownFilters);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("animate-content-change", ctx_r2.isBreakdownTransitioning())("transition-opacity-slow", ctx_r2.isBreakdownTransitioning());
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.breakdowns());
+    i0.ɵɵconditional(ctx_r2.isDataLoading() ? 16 : 17);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 140)(1, "div", 78);
-    i0.ɵɵelement(2, "div", 79);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 152)(1, "div", 85);
+    i0.ɵɵelement(2, "div", 86);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 80)(4, "div", 81);
+    i0.ɵɵelementStart(3, "div", 87)(4, "div", 88);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 82);
-    i0.ɵɵelement(6, "path", 143);
+    i0.ɵɵelementStart(5, "svg", 89);
+    i0.ɵɵelement(6, "path", 155);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -20931,13 +21132,13 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_0_Te
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "text-indigo-500" : "text-indigo-400");
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵelement(1, "div", 146);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 107);
+    i0.ɵɵelement(1, "div", 158);
     i0.ɵɵelementEnd();
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 112);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_For_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 118);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20946,8 +21147,8 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_16_Condition
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(filter_r30.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 27);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_For_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20956,33 +21157,60 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_16_Condition
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(filter_r30.label);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_16_Conditional_0_Template, 2, 2, "option", 112)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_16_Conditional_1_Template, 2, 2, "option", 27);
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_For_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_82_For_16_Conditional_0_Template, 2, 2, "option", 118)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_82_For_16_Conditional_1_Template, 2, 2, "option", 29);
 } if (rf & 2) {
     const filter_r30 = ctx.$implicit;
     i0.ɵɵconditional(filter_r30.divider ? 0 : 1);
 } }
-function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-skeleton-loader", 70);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("width", "100%")("height", "140px")("isLightMode", ctx_r2.isLightMode());
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69)(1, "div", 121);
+    i0.ɵɵelement(2, "symphiq-skeleton-loader", 70);
+    i0.ɵɵelementStart(3, "div", 159);
+    i0.ɵɵrepeaterCreate(4, SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_17_For_5_Template, 1, 3, "symphiq-skeleton-loader", 70, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r2.isLightMode() ? "bg-white border-slate-200" : "bg-slate-800 border-slate-700");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", "60%")("height", "24px")("isLightMode", ctx_r2.isLightMode());
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(4, _c3));
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-competitive-intelligence-view", 157);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("metrics", ctx_r2.competitiveMetrics())("allCharts", ctx_r2.allCharts())("isLightMode", ctx_r2.isLightMode())("isCompactMode", ctx_r2.viewModeService.isCompact());
+} }
+function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_0_Template, 7, 3, "div", 140);
-    i0.ɵɵelementStart(1, "section", 141);
-    i0.ɵɵelement(2, "div", 69);
-    i0.ɵɵelementStart(3, "div", 70)(4, "div", 142)(5, "div", 37)(6, "div", 72)(7, "div", 37);
+    i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_0_Template, 7, 3, "div", 152);
+    i0.ɵɵelementStart(1, "section", 153);
+    i0.ɵɵelement(2, "div", 76);
+    i0.ɵɵelementStart(3, "div", 77)(4, "div", 154)(5, "div", 14)(6, "div", 79)(7, "div", 14);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(8, "svg", 73);
-    i0.ɵɵelement(9, "path", 143);
+    i0.ɵɵelementStart(8, "svg", 80);
+    i0.ɵɵelement(9, "path", 155);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(10, "h2", 75);
+    i0.ɵɵelementStart(10, "h2", 82);
     i0.ɵɵtext(11, "Competitive Intelligence");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(12, "div", 144);
-    i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Conditional_13_Template, 2, 0, "div", 101);
-    i0.ɵɵelementStart(14, "select", 102);
-    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeCompetitiveFilter($event)); });
-    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_For_16_Template, 2, 1, null, null, _forTrack0$1);
+    i0.ɵɵelementStart(12, "div", 156);
+    i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_13_Template, 2, 0, "div", 107);
+    i0.ɵɵelementStart(14, "select", 108);
+    i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeCompetitiveFilter($event)); });
+    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_82_For_16_Template, 2, 1, null, null, _forTrack0$1);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(17, "symphiq-competitive-intelligence-view", 145);
+    i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_17_Template, 6, 5, "div", 69)(18, SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Conditional_18_Template, 1, 4, "symphiq-competitive-intelligence-view", 157);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -21004,19 +21232,21 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Template(rf, ctx
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.competitiveFilters);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("metrics", ctx_r2.competitiveMetrics())("allCharts", ctx_r2.allCharts())("isLightMode", ctx_r2.isLightMode())("isCompactMode", ctx_r2.viewModeService.isCompact());
+    i0.ɵɵconditional(ctx_r2.isDataLoading() ? 17 : 18);
 } }
 class SymphiqFunnelAnalysisDashboardComponent {
-    constructor(funnelOrderService, viewModeService, searchService) {
+    constructor(funnelOrderService, viewModeService, searchService, tooltipService) {
         this.funnelOrderService = funnelOrderService;
         this.viewModeService = viewModeService;
         this.searchService = searchService;
+        this.tooltipService = tooltipService;
         // Input signals (Angular 20 signal-based inputs)
         this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.funnelAnalysis = input(FUNNEL_ANALYSIS, ...(ngDevMode ? [{ debugName: "funnelAnalysis" }] : []));
         this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
         this.scrollContainerId = input(...(ngDevMode ? [undefined, { debugName: "scrollContainerId" }] : []));
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         // State signals
         this.selectedCategory = signal('ALL', ...(ngDevMode ? [{ debugName: "selectedCategory" }] : []));
         this.reverseSortOrder = signal(false, ...(ngDevMode ? [{ debugName: "reverseSortOrder" }] : []));
@@ -21035,11 +21265,20 @@ class SymphiqFunnelAnalysisDashboardComponent {
         this.areChartsLoading = computed(() => {
             return this.viewModeService.getIsTransitioning() && this.viewModeService.isExpanded();
         }, ...(ngDevMode ? [{ debugName: "areChartsLoading" }] : []));
+        // Loading state management
+        this.loadingStartTime = signal(null, ...(ngDevMode ? [{ debugName: "loadingStartTime" }] : []));
+        this.minLoadingDisplayTime = 300; // milliseconds
+        this.loadingTimeoutId = null;
+        this.isShowingLoader = signal(false, ...(ngDevMode ? [{ debugName: "isShowingLoader" }] : []));
+        // Computed loading states that combine external input with internal states
+        this.isDataLoading = computed(() => this.isLoading() || this.isShowingLoader(), ...(ngDevMode ? [{ debugName: "isDataLoading" }] : []));
+        this.isContentReady = computed(() => !this.isDataLoading(), ...(ngDevMode ? [{ debugName: "isContentReady" }] : []));
         this.scrollTimeout = null;
         this.lastScrollPosition = 0;
         this.isProgrammaticScroll = false;
         this.lastStateChangeTime = 0;
         this.STATE_CHANGE_COOLDOWN = 500; // milliseconds
+        this.embeddedScrollContainer = null;
         // Mobile navigation sections
         this.navSections = [
             { id: 'overview', label: 'Overview', icon: 'overview' },
@@ -21350,6 +21589,35 @@ class SymphiqFunnelAnalysisDashboardComponent {
         effect(() => {
             this.searchService.setData(this.allMetrics(), this.insights(), this.allBreakdowns());
         });
+        // Manage loading state with minimum display time
+        effect(() => {
+            const loading = this.isLoading();
+            if (loading) {
+                // Starting to load
+                if (!this.loadingStartTime()) {
+                    this.loadingStartTime.set(Date.now());
+                    this.isShowingLoader.set(true);
+                }
+            }
+            else {
+                // Finished loading
+                const startTime = this.loadingStartTime();
+                if (startTime !== null) {
+                    const elapsedTime = Date.now() - startTime;
+                    const remainingTime = Math.max(0, this.minLoadingDisplayTime - elapsedTime);
+                    // Clear any existing timeout
+                    if (this.loadingTimeoutId !== null) {
+                        clearTimeout(this.loadingTimeoutId);
+                    }
+                    // Hide loader after minimum display time
+                    this.loadingTimeoutId = setTimeout(() => {
+                        this.isShowingLoader.set(false);
+                        this.loadingStartTime.set(null);
+                        this.loadingTimeoutId = null;
+                    }, remainingTime);
+                }
+            }
+        });
         // Manage overall assessment loading state during view mode transitions
     }
     ngAfterViewInit() {
@@ -21360,169 +21628,80 @@ class SymphiqFunnelAnalysisDashboardComponent {
         // Set up container scroll listener when in embedded mode
         if (this.embedded()) {
             let container = null;
-            console.log('[Scroll Debug v6] Embedded mode detected, setting up scroll listener');
-            console.log('[Scroll Debug v6] scrollContainerId:', this.scrollContainerId());
             // If a scroll container ID is provided, use that element
             if (this.scrollContainerId()) {
-                const element = document.getElementById(this.scrollContainerId());
-                if (!element) {
-                    console.warn(`[Scroll Debug] Scroll container with id "${this.scrollContainerId()}" not found. Scroll tracking will not work.`);
-                }
-                else {
-                    console.log('[Scroll Debug] Found external scroll container:', element);
-                    console.log('[Scroll Debug] Container tag name:', element.tagName);
+                const setupScrollContainer = () => {
+                    const element = document.getElementById(this.scrollContainerId());
+                    if (!element) {
+                        return false;
+                    }
                     // Check if this is an Ionic ion-content element
                     if (element.tagName.toLowerCase() === 'ion-content') {
-                        console.log('[Scroll Debug] Detected Ionic ion-content, attempting to get scrollable element');
-                        // Try to get the scroll element from Ionic's ion-content
-                        // Ionic stores the scrollable element in the component itself
                         const ionContent = element;
-                        // Method 1: Try getScrollElement() method (Ionic 4+)
+                        // Get the scrollable element from Ionic
                         if (typeof ionContent.getScrollElement === 'function') {
-                            console.log('[Scroll Debug] Using getScrollElement() method');
                             ionContent.getScrollElement().then((scrollElement) => {
-                                console.log('[Scroll Debug] Got Ionic scroll element:', scrollElement);
-                                const dimensions = {
-                                    clientHeight: scrollElement.clientHeight,
-                                    scrollHeight: scrollElement.scrollHeight,
-                                    scrollTop: scrollElement.scrollTop,
-                                    hasOverflow: scrollElement.scrollHeight > scrollElement.clientHeight
-                                };
-                                console.log('[Scroll Debug] Ionic scroll element dimensions:', dimensions);
-                                if (!dimensions.hasOverflow) {
-                                    console.warn('[Scroll Debug] ⚠️ WARNING: Scroll element has no overflow! Content may still be loading.');
-                                    console.warn('[Scroll Debug] The dashboard content needs to be taller than', dimensions.clientHeight, 'px to enable scrolling');
-                                    // Diagnostic: Check the dashboard component's actual rendered height
-                                    setTimeout(() => {
-                                        const dashboardEl = this.dashboardContainer?.nativeElement;
-                                        if (dashboardEl) {
-                                            const styles = window.getComputedStyle(dashboardEl);
-                                            console.log('[Scroll Debug] Dashboard container computed styles:', {
-                                                height: styles.height,
-                                                minHeight: styles.minHeight,
-                                                maxHeight: styles.maxHeight,
-                                                display: styles.display,
-                                                position: styles.position,
-                                                overflow: styles.overflow,
-                                                scrollHeight: dashboardEl.scrollHeight,
-                                                clientHeight: dashboardEl.clientHeight,
-                                                offsetHeight: dashboardEl.offsetHeight
-                                            });
-                                            // Check children
-                                            const children = Array.from(dashboardEl.children);
-                                            console.log('[Scroll Debug] Dashboard has', children.length, 'direct children');
-                                            children.forEach((child, idx) => {
-                                                const childStyles = window.getComputedStyle(child);
-                                                console.log(`[Scroll Debug] Child ${idx}:`, {
-                                                    tagName: child.tagName,
-                                                    height: childStyles.height,
-                                                    display: childStyles.display,
-                                                    clientHeight: child.clientHeight,
-                                                    scrollHeight: child.scrollHeight
-                                                });
-                                            });
-                                            // Check if content is actually rendering
-                                            const hasVisibleContent = dashboardEl.scrollHeight > 100;
-                                            if (!hasVisibleContent) {
-                                                console.error('[Scroll Debug] ⚠️ CRITICAL: Dashboard has minimal content! Check if funnelAnalysis data is loaded.');
-                                            }
-                                        }
-                                    }, 100);
-                                    // Set up a MutationObserver to detect when content becomes scrollable
-                                    const observer = new MutationObserver(() => {
-                                        const newScrollHeight = scrollElement.scrollHeight;
-                                        const newClientHeight = scrollElement.clientHeight;
-                                        if (newScrollHeight > newClientHeight) {
-                                            console.log('[Scroll Debug] ✓ Content is now scrollable!', {
-                                                clientHeight: newClientHeight,
-                                                scrollHeight: newScrollHeight,
-                                                hasOverflow: true
-                                            });
-                                            observer.disconnect();
-                                        }
-                                    });
-                                    observer.observe(scrollElement, {
-                                        childList: true,
-                                        subtree: true,
-                                        attributes: true
-                                    });
-                                    console.log('[Scroll Debug] Monitoring for content changes...');
-                                }
-                                // Attach to BOTH the inner scroll element AND the ion-content itself
+                                // Store reference for use in scrollToSection and tooltips
+                                this.embeddedScrollContainer = scrollElement;
+                                this.tooltipService.setScrollContainer(scrollElement);
+                                // Attach scroll listeners
                                 scrollElement.addEventListener('scroll', () => this.onContainerScroll(scrollElement), { passive: true });
-                                console.log('[Scroll Debug] Attached scroll listener to Ionic inner scroll element');
-                                // ALSO listen to ion-content's ionScroll event (Ionic's custom scroll event)
-                                ionContent.addEventListener('ionScroll', (event) => {
-                                    console.log('[Scroll Debug] ionScroll event fired:', event.detail?.scrollTop);
-                                    this.onContainerScroll(scrollElement);
-                                }, { passive: true });
-                                console.log('[Scroll Debug] Attached ionScroll listener to ion-content');
-                                // FALLBACK: Poll scroll position directly from scrollElement
-                                // This ensures we catch scroll events even if neither 'scroll' nor 'ionScroll' fire
+                                ionContent.addEventListener('ionScroll', () => this.onContainerScroll(scrollElement), { passive: true });
+                                // Polling fallback for reliable scroll detection
                                 let lastScrollTop = 0;
-                                let pollCount = 0;
                                 const pollScroll = () => {
-                                    pollCount++;
                                     const currentScrollTop = scrollElement.scrollTop;
                                     if (currentScrollTop !== lastScrollTop) {
-                                        console.log('[Scroll Debug v6] Poll #', pollCount, '- Scroll detected:', lastScrollTop, '->', currentScrollTop);
                                         lastScrollTop = currentScrollTop;
                                         this.onContainerScroll(scrollElement);
                                     }
                                     requestAnimationFrame(pollScroll);
                                 };
                                 requestAnimationFrame(pollScroll);
-                                console.log('[Scroll Debug v6] Started polling scrollElement.scrollTop directly');
-                                // Test if scroll event fires by manually triggering a test
-                                console.log('[Scroll Debug] Testing scroll event by programmatically scrolling to 1px...');
-                                scrollElement.scrollTop = 1;
-                                setTimeout(() => {
-                                    if (scrollElement.scrollTop === 1) {
-                                        console.log('[Scroll Debug] ✓ Scroll position changed successfully');
-                                        scrollElement.scrollTop = 0; // Reset
-                                    }
-                                    else {
-                                        console.warn('[Scroll Debug] ⚠️ Could not change scroll position - element may not be scrollable');
-                                    }
-                                }, 50);
                             }).catch((error) => {
-                                console.error('[Scroll Debug] Error getting Ionic scroll element:', error);
+                                console.error('Error getting Ionic scroll element:', error);
                             });
+                            return true;
                         }
                         else {
-                            console.warn('[Scroll Debug] ion-content does not have getScrollElement() method');
-                            // Fallback: attach to ion-content itself (may not work)
-                            container = element;
+                            // Fallback for older Ionic versions
+                            this.embeddedScrollContainer = element;
+                            this.tooltipService.setScrollContainer(element);
+                            element.addEventListener('scroll', () => this.onContainerScroll(element), { passive: true });
+                            return true;
                         }
                     }
                     else {
                         // Regular HTML element
-                        container = element;
-                        console.log('[Scroll Debug] Container dimensions:', {
-                            clientHeight: container.clientHeight,
-                            scrollHeight: container.scrollHeight,
-                            scrollTop: container.scrollTop,
-                            hasOverflow: container.scrollHeight > container.clientHeight
-                        });
+                        this.embeddedScrollContainer = element;
+                        this.tooltipService.setScrollContainer(element);
+                        element.addEventListener('scroll', () => this.onContainerScroll(element), { passive: true });
+                        return true;
                     }
+                };
+                // Try to set up immediately
+                if (!setupScrollContainer()) {
+                    // If not found, retry with delays (element might not be in DOM yet)
+                    let retries = 0;
+                    const maxRetries = 10;
+                    const retryInterval = setInterval(() => {
+                        retries++;
+                        if (setupScrollContainer() || retries >= maxRetries) {
+                            clearInterval(retryInterval);
+                            if (retries >= maxRetries) {
+                                console.warn(`Scroll container with id "${this.scrollContainerId()}" not found after ${maxRetries} retries.`);
+                            }
+                        }
+                    }, 100);
                 }
             }
             else if (this.dashboardContainer) {
                 // Fall back to internal dashboard container
                 container = this.dashboardContainer.nativeElement;
-                console.log('[Scroll Debug] Using internal dashboard container:', container);
-            }
-            // Only attach listener for non-Ionic elements (Ionic handled above)
-            if (container) {
-                console.log('[Scroll Debug] Attaching scroll listener to container');
+                this.embeddedScrollContainer = container;
+                this.tooltipService.setScrollContainer(container);
                 container.addEventListener('scroll', () => this.onContainerScroll(container), { passive: true });
             }
-            else if (!this.scrollContainerId() || document.getElementById(this.scrollContainerId())?.tagName.toLowerCase() !== 'ion-content') {
-                console.warn('[Scroll Debug] No scroll container found!');
-            }
-        }
-        else {
-            console.log('[Scroll Debug] Not in embedded mode, using window scroll');
         }
     }
     handleSearchResult(result) {
@@ -21732,66 +21911,42 @@ class SymphiqFunnelAnalysisDashboardComponent {
     }
     onContainerScroll(container) {
         if (!this.embedded()) {
-            console.log('[Scroll Debug] onContainerScroll called but not in embedded mode, returning');
             return;
         }
         const scrollPosition = container.scrollTop;
-        // Update scroll progress immediately for smooth bar animation
+        // Update scroll progress for smooth bar animation
         const containerHeight = container.clientHeight;
         const scrollHeight = container.scrollHeight;
         const maxScroll = scrollHeight - containerHeight;
         const progress = maxScroll > 0 ? (scrollPosition / maxScroll) * 100 : 0;
-        console.log('[Scroll Debug] Container scroll event:', {
-            scrollPosition,
-            containerHeight,
-            scrollHeight,
-            maxScroll,
-            progress: progress.toFixed(2) + '%',
-            currentScrollProgress: this.scrollProgress(),
-            isScrolled: this.isScrolled()
-        });
         this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
-        // Skip header state updates during programmatic scrolling
+        // Skip header state updates during programmatic scrolling or cooldown
         if (this.isProgrammaticScroll) {
-            console.log('[Scroll Debug] Skipping header update - programmatic scroll');
             return;
         }
-        // Check if we're in cooldown period after a recent state change
         const now = Date.now();
         const timeSinceLastChange = now - this.lastStateChangeTime;
         if (timeSinceLastChange < this.STATE_CHANGE_COOLDOWN) {
-            console.log('[Scroll Debug] Skipping header update - in cooldown period', timeSinceLastChange + 'ms');
             return;
         }
-        // Clear any pending timeout
         if (this.scrollTimeout) {
             clearTimeout(this.scrollTimeout);
         }
-        // Use hysteresis (two different thresholds) to prevent bounce loop
+        // Use hysteresis to prevent bounce
         const COLLAPSE_THRESHOLD = 50;
         const EXPAND_THRESHOLD = 30;
         const currentState = this.isScrolled();
-        // Determine new state based on current position and hysteresis logic
         let newState = currentState;
-        // If currently expanded and we scroll past collapse threshold, collapse
         if (!currentState && scrollPosition > COLLAPSE_THRESHOLD) {
             newState = true;
-            console.log('[Scroll Debug] Triggering COLLAPSE - scrollPosition:', scrollPosition, '> threshold:', COLLAPSE_THRESHOLD);
         }
-        // If currently collapsed and we scroll back above expand threshold, expand
         else if (currentState && scrollPosition < EXPAND_THRESHOLD) {
             newState = false;
-            console.log('[Scroll Debug] Triggering EXPAND - scrollPosition:', scrollPosition, '< threshold:', EXPAND_THRESHOLD);
         }
-        // Only update state if it actually changed
         if (newState !== currentState) {
-            console.log('[Scroll Debug] State change detected:', currentState, '->', newState);
             this.isScrolled.set(newState);
             this.lastStateChangeTime = Date.now();
         }
-        else {
-            console.log('[Scroll Debug] No state change needed. Current state:', currentState, 'Position:', scrollPosition);
-        }
         this.lastScrollPosition = scrollPosition;
     }
     onScroll() {
@@ -21859,48 +22014,60 @@ class SymphiqFunnelAnalysisDashboardComponent {
         this.lastScrollPosition = scrollPosition;
     }
     scrollToTop() {
-        // Set flag to prevent header state changes during smooth scroll
         this.isProgrammaticScroll = true;
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
-        // Clear flag after smooth scroll completes
+        if (this.embedded() && this.embeddedScrollContainer) {
+            this.embeddedScrollContainer.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
+        else {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        }
         setTimeout(() => {
             this.isProgrammaticScroll = false;
-            // At top of page, header should be expanded
             this.isScrolled.set(false);
         }, 800);
     }
     scrollToSection(sectionId) {
         const element = document.getElementById(sectionId);
-        if (element) {
-            // Use smaller offset for overall-section to stay below expand threshold
-            // Other sections use larger offset to stay above collapse threshold
-            const offset = sectionId === 'overall-section' ? 50 : 100;
+        if (!element)
+            return;
+        const offset = sectionId === 'overall-section' ? 50 : 100;
+        this.isProgrammaticScroll = true;
+        if (this.embedded() && this.embeddedScrollContainer) {
+            // For embedded mode: calculate relative scroll position
+            const elementTop = element.offsetTop;
+            const scrollTop = elementTop - offset;
+            this.embeddedScrollContainer.scrollTo({
+                top: scrollTop,
+                behavior: 'smooth'
+            });
+        }
+        else {
+            // For window mode: use getBoundingClientRect
             const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
             const offsetPosition = elementPosition - offset;
-            // Set flag to prevent header state changes during smooth scroll
-            this.isProgrammaticScroll = true;
             window.scrollTo({
                 top: offsetPosition,
                 behavior: 'smooth'
             });
-            // Clear flag after smooth scroll completes (approximate duration)
-            setTimeout(() => {
-                this.isProgrammaticScroll = false;
-                // Manually set the correct header state after scroll completes
-                // Use hysteresis thresholds: collapse at 150px, expand below 100px
-                const finalPosition = window.scrollY;
-                if (finalPosition > 150) {
-                    this.isScrolled.set(true);
-                }
-                else if (finalPosition < 100) {
-                    this.isScrolled.set(false);
-                }
-                // If between 100-150, leave current state unchanged
-            }, 800);
         }
+        setTimeout(() => {
+            this.isProgrammaticScroll = false;
+            const finalPosition = this.embedded() && this.embeddedScrollContainer
+                ? this.embeddedScrollContainer.scrollTop
+                : window.scrollY;
+            if (finalPosition > 50) {
+                this.isScrolled.set(true);
+            }
+            else if (finalPosition < 30) {
+                this.isScrolled.set(false);
+            }
+        }, 800);
     }
     handleMobileNavigation(sectionId) {
         this.activeNavSection.set(sectionId);
@@ -21943,7 +22110,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
         }
         return value.toLocaleString('en-US', { maximumFractionDigits: 0 });
     }
-    static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService)); }; }
+    static { this.ɵfac = function SymphiqFunnelAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqFunnelAnalysisDashboardComponent)(i0.ɵɵdirectiveInject(FunnelOrderService), i0.ɵɵdirectiveInject(ViewModeService), i0.ɵɵdirectiveInject(SearchService), i0.ɵɵdirectiveInject(TooltipService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqFunnelAnalysisDashboardComponent, selectors: [["symphiq-funnel-analysis-dashboard"]], viewQuery: function SymphiqFunnelAnalysisDashboardComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(ModalComponent, 5);
             i0.ɵɵviewQuery(_c0$4, 5);
@@ -21953,7 +22120,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"], embedded: [1, "embedded"], scrollContainerId: [1, "scrollContainerId"] }, decls: 86, vars: 101, 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, "absolute", "inset-0", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-[0.03]", "z-20", 2, "background-image", "url('data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')"], [1, "absolute", "top-0", "right-0", "w-[800px]", "h-[800px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "absolute", "bottom-0", "left-0", "w-[600px]", "h-[600px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "absolute", "top-1/2", "left-1/2", "-translate-x-1/2", "-translate-y-1/2", "w-[700px]", "h-[700px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [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, "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"], [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, "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", "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"], [1, "flex", "items-center", "gap-2"], ["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"], [1, "flex", "items-center", "gap-2", "sm:gap-3", "whitespace-nowrap"], [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, "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"], [1, "flex", "items-center", "gap-3"], ["type", "button", "title", "Search (/ or Cmd+K)", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["type", "button", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click", "title"], [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, "sticky", "top-[var(--header-height)]", "z-40", "border-b", "backdrop-blur-md", "animate-slide-up-fade", 3, "ngClass"], [1, "fixed", "right-6", "top-1/2", "-translate-y-1/2", "z-40", "hidden", "xl:flex", "flex-col", "gap-3"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", 3, "title", "ngClass"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8"], [1, "pt-8", "sm:pt-12", "pb-16", "sm:pb-24"], ["id", "overall-section", 1, "animate-fade-in-up", "mb-20", "sm:mb-28", 2, "animation-delay", "0.1s"], [3, "isLightMode"], [3, "resultSelected", "isLightMode"], [3, "expandedChange", "scrollToTop", "toggleView", "isLightMode", "isCompactMode", "isExpanded"], [3, "navigate", "isLightMode", "sections", "activeSection"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6h16M4 12h16M4 18h16"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"], [1, "text-xs", "font-medium"], [1, "text-sm", "font-bold"], [1, "text-xs", "font-semibold", 3, "ngClass"], [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", 3, "click", "title", "ngClass"], [3, "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading"], [1, "relative", "mb-16", "sm:mb-20", "animate-fade-in", 2, "animation-delay", "0.15s"], ["id", "insights-section", 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, "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, "masonry-grid"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-4"], ["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", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "animate-fade-in-up", 3, "class", "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [1, "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [3, "insight", "allMetrics", "charts", "allCharts", "isLightMode", "viewMode", "isCompactMode"], [1, "animate-fade-in-up", 3, "animation-delay", "libSymphiqSearchHighlight", "highlightId"], [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"], [3, "width", "height", "isLightMode"], [1, "mt-6", "space-y-2"], [1, "flex", "gap-2", "mt-4"], [1, "relative", "mb-14", "sm:mb-24", "mt-24", "sm:mt-32", "animate-fade-in", 2, "animation-delay", "0.35s"], ["id", "metrics-section", 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, "rounded-xl", "p-12", "border", "text-center", "animate-fade-in", 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, "w-full", "animate-fade-in-up", 3, "libSymphiqSearchHighlight", "highlightId"], [3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode"], [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"], [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, "relative", "mb-16", "sm:mb-20", "mt-28", "sm:mt-36", "animate-fade-in", 2, "animation-delay", "0.65s"], ["id", "breakdowns-section", 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"], [1, "w-4", "h-4", "border-2", "border-purple-500/30", "border-t-purple-500", "rounded-full", "animate-spin"], [3, "breakdown", "charts", "isLightMode", "isCompactMode"], ["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"], [1, "relative", "mb-16", "sm:mb-20", "mt-28", "sm:mt-36", "animate-fade-in", 2, "animation-delay", "0.85s"], ["id", "competitive-section", 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"], [3, "metrics", "allCharts", "isLightMode", "isCompactMode"], [1, "w-4", "h-4", "border-2", "border-indigo-500/30", "border-t-indigo-500", "rounded-full", "animate-spin"]], template: function SymphiqFunnelAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], funnelAnalysis: [1, "funnelAnalysis"], embedded: [1, "embedded"], scrollContainerId: [1, "scrollContainerId"], isLoading: [1, "isLoading"] }, decls: 88, vars: 102, 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, "absolute", "inset-0", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-[0.03]", "z-20", 2, "background-image", "url('data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')"], [1, "absolute", "top-0", "right-0", "w-[800px]", "h-[800px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "absolute", "bottom-0", "left-0", "w-[600px]", "h-[600px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [1, "absolute", "top-1/2", "left-1/2", "-translate-x-1/2", "-translate-y-1/2", "w-[700px]", "h-[700px]", "rounded-full", "blur-3xl", "z-0", 3, "ngClass"], [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, "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", "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"], [1, "flex", "items-center", "gap-2"], ["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"], [1, "flex", "items-center", "gap-2", "sm:gap-3", "whitespace-nowrap"], [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, "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, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["type", "button", 1, "p-2", "rounded-lg", "transition-all", "duration-200", "hover:scale-110", 3, "click", "title"], [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, "sticky", "top-[var(--header-height)]", "z-40", "border-b", "backdrop-blur-md", "animate-slide-up-fade", 3, "ngClass"], [1, "fixed", "right-6", "top-1/2", "-translate-y-1/2", "z-40", "hidden", "xl:flex", "flex-col", "gap-3"], [1, "w-3", "h-3", "rounded-full", "transition-all", "duration-200", "hover:scale-150", "active:scale-100", 3, "title", "ngClass"], [1, "max-w-7xl", "mx-auto", "px-6", "sm:px-8"], [1, "pt-8", "sm:pt-12", "pb-16", "sm:pb-24"], ["id", "overall-section", 1, "animate-fade-in-up", "mb-20", "sm:mb-28", 2, "animation-delay", "0.1s"], [3, "isLightMode"], [3, "resultSelected", "isLightMode"], [3, "expandedChange", "scrollToTop", "toggleView", "isLightMode", "isCompactMode", "isExpanded"], [3, "navigate", "isLightMode", "sections", "activeSection"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6h16M4 12h16M4 18h16"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"], [1, "text-xs", "font-medium"], [1, "text-sm", "font-bold"], [1, "text-xs", "font-semibold", 3, "ngClass"], [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", 3, "click", "title", "ngClass"], [1, "rounded-xl", "border", "p-6", "sm:p-8", "animate-pulse", 3, "ngClass"], [3, "assessment", "revenueMetric", "charts", "metrics", "isLightMode", "isLoading", "isCompactMode", "isChartsLoading"], [1, "space-y-6"], [3, "width", "height", "isLightMode"], [1, "flex-1", "space-y-2"], [1, "space-y-2"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4", "mt-6"], [1, "relative", "mb-16", "sm:mb-20", "animate-fade-in", 2, "animation-delay", "0.15s"], ["id", "insights-section", 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, "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, "masonry-grid"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-4"], ["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", "M13 10V3L4 14h7v7l9-11h-7z"], [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", "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", "metrics-section", 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"], ["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"], [3, "metric", "insights", "charts", "allCharts", "analysis", "isLightMode", "viewMode", "isCompactMode"], [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"], [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, "relative", "mb-16", "sm:mb-20", "mt-28", "sm:mt-36", "animate-fade-in", 2, "animation-delay", "0.65s"], ["id", "breakdowns-section", 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"], [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"], ["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"], [1, "relative", "mb-16", "sm:mb-20", "mt-28", "sm:mt-36", "animate-fade-in", 2, "animation-delay", "0.85s"], ["id", "competitive-section", 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"], [3, "metrics", "allCharts", "isLightMode", "isCompactMode"], [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);
@@ -21963,96 +22130,98 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵelementStart(9, "div");
             i0.ɵɵelement(10, "div", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "header", 9)(12, "div", 10)(13, "div", 11)(14, "div", 12)(15, "div", 13)(16, "h1", 14);
-            i0.ɵɵtext(17);
+            i0.ɵɵelementStart(11, "header", 9)(12, "div", 10)(13, "div", 11)(14, "div", 12)(15, "div", 13)(16, "div", 14)(17, "h1", 15);
+            i0.ɵɵtext(18);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 15)(19, "p", 16);
-            i0.ɵɵtext(20, "Revenue Orchestration & Funnel Analysis");
+            i0.ɵɵconditionalCreate(19, SymphiqFunnelAnalysisDashboardComponent_Conditional_19_Template, 1, 0, "div", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "div", 17)(22, "button", 18);
-            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_22_listener($event) { i0.ɵɵrestoreView(_r1); ctx.searchService.openSearch(); return i0.ɵɵresetView($event.preventDefault()); });
+            i0.ɵɵelementStart(20, "div", 17)(21, "p", 18);
+            i0.ɵɵtext(22, "Revenue Orchestration & Funnel Analysis");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "div", 19)(24, "button", 20);
+            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_24_listener($event) { i0.ɵɵrestoreView(_r1); ctx.searchService.openSearch(); return i0.ɵɵresetView($event.preventDefault()); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(23, "svg", 19);
-            i0.ɵɵelement(24, "path", 20);
+            i0.ɵɵelementStart(25, "svg", 21);
+            i0.ɵɵelement(26, "path", 22);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(25, "span");
-            i0.ɵɵtext(26, "Search");
+            i0.ɵɵelementStart(27, "span");
+            i0.ɵɵtext(28, "Search");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(27, "div", 21)(28, "button", 22);
-            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_28_listener($event) { i0.ɵɵrestoreView(_r1); ctx.viewModeService.toggleViewMode(); return i0.ɵɵresetView($event.preventDefault()); });
-            i0.ɵɵconditionalCreate(29, SymphiqFunnelAnalysisDashboardComponent_Conditional_29_Template, 4, 0)(30, SymphiqFunnelAnalysisDashboardComponent_Conditional_30_Template, 4, 0);
+            i0.ɵɵelementStart(29, "div", 23)(30, "button", 24);
+            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_30_listener($event) { i0.ɵɵrestoreView(_r1); ctx.viewModeService.toggleViewMode(); return i0.ɵɵresetView($event.preventDefault()); });
+            i0.ɵɵconditionalCreate(31, SymphiqFunnelAnalysisDashboardComponent_Conditional_31_Template, 4, 0)(32, SymphiqFunnelAnalysisDashboardComponent_Conditional_32_Template, 4, 0);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(31, "div", 23)(32, "label", 24);
-            i0.ɵɵtext(33, "View:");
+            i0.ɵɵelementStart(33, "div", 25)(34, "label", 26);
+            i0.ɵɵtext(35, "View:");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "div", 25);
-            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_div_click_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Template_div_mousedown_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Template_div_pointerdown_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
-            i0.ɵɵelementStart(35, "select", 26);
-            i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Template_select_ngModelChange_35_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeSectionFilter($event)); });
-            i0.ɵɵrepeaterCreate(36, SymphiqFunnelAnalysisDashboardComponent_For_37_Template, 2, 2, "option", 27, _forTrack0$1);
+            i0.ɵɵelementStart(36, "div", 27);
+            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_div_click_36_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Template_div_mousedown_36_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Template_div_pointerdown_36_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+            i0.ɵɵelementStart(37, "select", 28);
+            i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Template_select_ngModelChange_37_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeSectionFilter($event)); });
+            i0.ɵɵrepeaterCreate(38, SymphiqFunnelAnalysisDashboardComponent_For_39_Template, 2, 2, "option", 29, _forTrack0$1);
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(38, "div", 28)(39, "div", 29)(40, "div", 30);
-            i0.ɵɵtext(41, "Generated At");
+            i0.ɵɵelementStart(40, "div", 30)(41, "div", 31)(42, "div", 32);
+            i0.ɵɵtext(43, "Generated At");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(42, "div", 31);
-            i0.ɵɵtext(43);
+            i0.ɵɵelementStart(44, "div", 33);
+            i0.ɵɵtext(45);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(44, "div", 29)(45, "div", 30);
-            i0.ɵɵtext(46, "Requested by");
+            i0.ɵɵelementStart(46, "div", 31)(47, "div", 32);
+            i0.ɵɵtext(48, "Requested by");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(47, "div", 31);
-            i0.ɵɵtext(48);
+            i0.ɵɵelementStart(49, "div", 33);
+            i0.ɵɵtext(50);
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(49, "div", 10)(50, "div", 32)(51, "div", 33)(52, "div", 34)(53, "h1", 35);
-            i0.ɵɵtext(54);
+            i0.ɵɵelementStart(51, "div", 10)(52, "div", 34)(53, "div", 35)(54, "div", 36)(55, "h1", 37);
+            i0.ɵɵtext(56);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(55, SymphiqFunnelAnalysisDashboardComponent_Conditional_55_Template, 7, 9, "div", 36);
+            i0.ɵɵconditionalCreate(57, SymphiqFunnelAnalysisDashboardComponent_Conditional_57_Template, 7, 9, "div", 38);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(56, "div", 37)(57, "button", 38);
-            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_57_listener($event) { i0.ɵɵrestoreView(_r1); ctx.searchService.openSearch(); return i0.ɵɵresetView($event.preventDefault()); });
+            i0.ɵɵelementStart(58, "div", 14)(59, "button", 39);
+            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_59_listener($event) { i0.ɵɵrestoreView(_r1); ctx.searchService.openSearch(); return i0.ɵɵresetView($event.preventDefault()); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(58, "svg", 39);
-            i0.ɵɵelement(59, "path", 20);
+            i0.ɵɵelementStart(60, "svg", 40);
+            i0.ɵɵelement(61, "path", 22);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(60, "button", 40);
-            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_60_listener($event) { i0.ɵɵrestoreView(_r1); ctx.viewModeService.toggleViewMode(); return i0.ɵɵresetView($event.preventDefault()); });
-            i0.ɵɵconditionalCreate(61, SymphiqFunnelAnalysisDashboardComponent_Conditional_61_Template, 2, 0, ":svg:svg", 39)(62, SymphiqFunnelAnalysisDashboardComponent_Conditional_62_Template, 2, 0, ":svg:svg", 39);
+            i0.ɵɵelementStart(62, "button", 41);
+            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_button_click_62_listener($event) { i0.ɵɵrestoreView(_r1); ctx.viewModeService.toggleViewMode(); return i0.ɵɵresetView($event.preventDefault()); });
+            i0.ɵɵconditionalCreate(63, SymphiqFunnelAnalysisDashboardComponent_Conditional_63_Template, 2, 0, ":svg:svg", 40)(64, SymphiqFunnelAnalysisDashboardComponent_Conditional_64_Template, 2, 0, ":svg:svg", 40);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(63, "div", 25);
-            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_div_click_63_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Template_div_mousedown_63_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Template_div_pointerdown_63_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
-            i0.ɵɵelementStart(64, "select", 41);
-            i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Template_select_ngModelChange_64_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeSectionFilter($event)); });
-            i0.ɵɵrepeaterCreate(65, SymphiqFunnelAnalysisDashboardComponent_For_66_Template, 2, 2, "option", 27, _forTrack0$1);
+            i0.ɵɵelementStart(65, "div", 27);
+            i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Template_div_click_65_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Template_div_mousedown_65_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Template_div_pointerdown_65_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+            i0.ɵɵelementStart(66, "select", 42);
+            i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Template_select_ngModelChange_66_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.changeSectionFilter($event)); });
+            i0.ɵɵrepeaterCreate(67, SymphiqFunnelAnalysisDashboardComponent_For_68_Template, 2, 2, "option", 29, _forTrack0$1);
             i0.ɵɵelementEnd()()()()()()();
-            i0.ɵɵconditionalCreate(67, SymphiqFunnelAnalysisDashboardComponent_Conditional_67_Template, 16, 8, "div", 42);
-            i0.ɵɵelementStart(68, "div", 43);
-            i0.ɵɵconditionalCreate(69, SymphiqFunnelAnalysisDashboardComponent_Conditional_69_Template, 1, 2, "button", 44);
-            i0.ɵɵconditionalCreate(70, SymphiqFunnelAnalysisDashboardComponent_Conditional_70_Template, 1, 2, "button", 44);
-            i0.ɵɵconditionalCreate(71, SymphiqFunnelAnalysisDashboardComponent_Conditional_71_Template, 1, 2, "button", 44);
-            i0.ɵɵconditionalCreate(72, SymphiqFunnelAnalysisDashboardComponent_Conditional_72_Template, 1, 2, "button", 44);
-            i0.ɵɵconditionalCreate(73, SymphiqFunnelAnalysisDashboardComponent_Conditional_73_Template, 1, 2, "button", 44);
+            i0.ɵɵconditionalCreate(69, SymphiqFunnelAnalysisDashboardComponent_Conditional_69_Template, 16, 8, "div", 43);
+            i0.ɵɵelementStart(70, "div", 44);
+            i0.ɵɵconditionalCreate(71, SymphiqFunnelAnalysisDashboardComponent_Conditional_71_Template, 1, 2, "button", 45);
+            i0.ɵɵconditionalCreate(72, SymphiqFunnelAnalysisDashboardComponent_Conditional_72_Template, 1, 2, "button", 45);
+            i0.ɵɵconditionalCreate(73, SymphiqFunnelAnalysisDashboardComponent_Conditional_73_Template, 1, 2, "button", 45);
+            i0.ɵɵconditionalCreate(74, SymphiqFunnelAnalysisDashboardComponent_Conditional_74_Template, 1, 2, "button", 45);
+            i0.ɵɵconditionalCreate(75, SymphiqFunnelAnalysisDashboardComponent_Conditional_75_Template, 1, 2, "button", 45);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(74, "main", 45)(75, "div", 46);
-            i0.ɵɵconditionalCreate(76, SymphiqFunnelAnalysisDashboardComponent_Conditional_76_Template, 2, 9, "div", 47);
-            i0.ɵɵconditionalCreate(77, SymphiqFunnelAnalysisDashboardComponent_Conditional_77_Template, 17, 10);
-            i0.ɵɵconditionalCreate(78, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Template, 32, 22);
-            i0.ɵɵconditionalCreate(79, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Template, 20, 16);
-            i0.ɵɵconditionalCreate(80, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Template, 18, 16);
+            i0.ɵɵelementStart(76, "main", 46)(77, "div", 47);
+            i0.ɵɵconditionalCreate(78, SymphiqFunnelAnalysisDashboardComponent_Conditional_78_Template, 3, 1, "div", 48);
+            i0.ɵɵconditionalCreate(79, SymphiqFunnelAnalysisDashboardComponent_Conditional_79_Template, 17, 10);
+            i0.ɵɵconditionalCreate(80, SymphiqFunnelAnalysisDashboardComponent_Conditional_80_Template, 30, 18);
+            i0.ɵɵconditionalCreate(81, SymphiqFunnelAnalysisDashboardComponent_Conditional_81_Template, 18, 12);
+            i0.ɵɵconditionalCreate(82, SymphiqFunnelAnalysisDashboardComponent_Conditional_82_Template, 19, 13);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelement(81, "symphiq-funnel-analysis-modal", 48)(82, "symphiq-tooltip-container");
-            i0.ɵɵelementStart(83, "symphiq-search-bar", 49);
-            i0.ɵɵlistener("resultSelected", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_search_bar_resultSelected_83_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleSearchResult($event)); });
+            i0.ɵɵelement(83, "symphiq-funnel-analysis-modal", 49)(84, "symphiq-tooltip-container");
+            i0.ɵɵelementStart(85, "symphiq-search-bar", 50);
+            i0.ɵɵlistener("resultSelected", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_search_bar_resultSelected_85_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleSearchResult($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(84, "symphiq-mobile-fab", 50);
-            i0.ɵɵlistener("expandedChange", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_expandedChange_84_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fabExpanded.set($event)); })("scrollToTop", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_scrollToTop_84_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.scrollToTop()); })("toggleView", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_toggleView_84_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.viewModeService.toggleViewMode()); });
+            i0.ɵɵelementStart(86, "symphiq-mobile-fab", 51);
+            i0.ɵɵlistener("expandedChange", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_expandedChange_86_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fabExpanded.set($event)); })("scrollToTop", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_scrollToTop_86_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.scrollToTop()); })("toggleView", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_fab_toggleView_86_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.viewModeService.toggleViewMode()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(85, "symphiq-mobile-bottom-nav", 51);
-            i0.ɵɵlistener("navigate", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_bottom_nav_navigate_85_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleMobileNavigation($event)); });
+            i0.ɵɵelementStart(87, "symphiq-mobile-bottom-nav", 52);
+            i0.ɵɵlistener("navigate", function SymphiqFunnelAnalysisDashboardComponent_Template_symphiq_mobile_bottom_nav_navigate_87_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleMobileNavigation($event)); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            let tmp_35_0;
+            let tmp_36_0;
             i0.ɵɵstyleProp("display", ctx.embedded() ? "block" : null)("min-height", ctx.embedded() ? "auto" : null);
             i0.ɵɵclassProp("min-h-screen", !ctx.embedded())("relative", !ctx.embedded());
             i0.ɵɵadvance(2);
@@ -22078,8 +22247,10 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵclassProp("max-h-0", ctx.isScrolled())("opacity-0", ctx.isScrolled())("max-h-96", !ctx.isScrolled())("opacity-100", !ctx.isScrolled());
             i0.ɵɵadvance();
             i0.ɵɵclassProp("pointer-events-none", ctx.isScrolled())("pointer-events-auto", !ctx.isScrolled());
-            i0.ɵɵadvance(4);
+            i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate(ctx.funnelAnalysis().title);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading() && !ctx.isShowingLoader() ? 19 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵclassMap(ctx.headerSubtitleClass());
             i0.ɵɵadvance(3);
@@ -22087,7 +22258,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵadvance(6);
             i0.ɵɵclassMap(ctx.buttonClass());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.viewModeService.isCompact() ? 29 : 30);
+            i0.ɵɵconditional(ctx.viewModeService.isCompact() ? 31 : 32);
             i0.ɵɵadvance(3);
             i0.ɵɵclassMap(ctx.metaLabelClass());
             i0.ɵɵadvance(3);
@@ -22106,7 +22277,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵclassMap(ctx.headerTitleClass());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate2("", (tmp_35_0 = ctx.requestedByUser()) == null ? null : tmp_35_0.firstName, " ", (tmp_35_0 = ctx.requestedByUser()) == null ? null : tmp_35_0.lastName);
+            i0.ɵɵtextInterpolate2("", (tmp_36_0 = ctx.requestedByUser()) == null ? null : tmp_36_0.firstName, " ", (tmp_36_0 = ctx.requestedByUser()) == null ? null : tmp_36_0.lastName);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("max-h-0", !ctx.isScrolled())("opacity-0", !ctx.isScrolled())("max-h-20", ctx.isScrolled())("opacity-100", ctx.isScrolled());
             i0.ɵɵadvance();
@@ -22114,41 +22285,41 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.funnelAnalysis().title);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.revenueMetric() ? 55 : -1);
+            i0.ɵɵconditional(ctx.revenueMetric() ? 57 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵclassMap(ctx.buttonClass());
             i0.ɵɵadvance(3);
             i0.ɵɵclassMap(ctx.buttonClass());
             i0.ɵɵproperty("title", ctx.viewModeService.isCompact() ? "Compact View (Click to Expand)" : "Expanded View (Click to Compact)");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.viewModeService.isCompact() ? 61 : 62);
+            i0.ɵɵconditional(ctx.viewModeService.isCompact() ? 63 : 64);
             i0.ɵɵadvance(3);
             i0.ɵɵclassMap(ctx.selectClass());
             i0.ɵɵproperty("ngModel", ctx.selectedSectionFilter());
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.sectionFilters);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.searchService.activeSearchResult() ? 67 : -1);
+            i0.ɵɵconditional(ctx.searchService.activeSearchResult() ? 69 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.showOverallPerformance() ? 69 : -1);
+            i0.ɵɵconditional(ctx.showOverallPerformance() ? 71 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showKeyInsights() ? 70 : -1);
+            i0.ɵɵconditional(ctx.showKeyInsights() ? 72 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showPerformanceMetrics() ? 71 : -1);
+            i0.ɵɵconditional(ctx.showPerformanceMetrics() ? 73 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showPerformanceBreakdowns() ? 72 : -1);
+            i0.ɵɵconditional(ctx.showPerformanceBreakdowns() ? 74 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCompetitiveIntelligence() ? 73 : -1);
+            i0.ɵɵconditional(ctx.showCompetitiveIntelligence() ? 75 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.showOverallPerformance() ? 76 : -1);
+            i0.ɵɵconditional(ctx.showOverallPerformance() ? 78 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showKeyInsights() ? 77 : -1);
+            i0.ɵɵconditional(ctx.showKeyInsights() ? 79 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showPerformanceMetrics() ? 78 : -1);
+            i0.ɵɵconditional(ctx.showPerformanceMetrics() ? 80 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showPerformanceBreakdowns() ? 79 : -1);
+            i0.ɵɵconditional(ctx.showPerformanceBreakdowns() ? 81 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCompetitiveIntelligence() ? 80 : -1);
+            i0.ɵɵconditional(ctx.showCompetitiveIntelligence() ? 82 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("isLightMode", ctx.isLightMode());
             i0.ɵɵadvance(2);
@@ -22157,7 +22328,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("isCompactMode", ctx.viewModeService.isCompact())("isExpanded", ctx.fabExpanded());
             i0.ɵɵadvance();
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("sections", ctx.navSections)("activeSection", ctx.activeNavSection());
-        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.NgModel, OverallAssessmentComponent,
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i6.NgSelectOption, i6.ɵNgSelectMultipleOption, i6.SelectControlValueAccessor, i6.NgControlStatus, i6.NgModel, OverallAssessmentComponent,
             InsightCardComponent,
             MetricCardComponent,
             BreakdownSectionComponent,
@@ -22257,7 +22428,13 @@ class SymphiqFunnelAnalysisDashboardComponent {
             [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">
-              <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">{{funnelAnalysis().title}}</h1>
+              <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">{{funnelAnalysis().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">
@@ -22475,15 +22652,42 @@ class SymphiqFunnelAnalysisDashboardComponent {
         <div class="pt-8 sm:pt-12 pb-16 sm:pb-24">
           @if (showOverallPerformance()) {
             <div id="overall-section" class="animate-fade-in-up mb-20 sm:mb-28" style="animation-delay: 0.1s;">
-              <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()" />
+              @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()" />
+              }
             </div>
           }
 
@@ -22522,7 +22726,32 @@ class SymphiqFunnelAnalysisDashboardComponent {
                 <span [class]="metaLabelClass()" class="text-xs sm:text-sm">{{ insights().length }} insights</span>
               </div>
               <!-- Masonry Layout for Insights -->
-              @if (viewModeService.isExpanded()) {
+              @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
@@ -22542,7 +22771,7 @@ class SymphiqFunnelAnalysisDashboardComponent {
                     </div>
                   }
                 </div>
-              } @else if (!viewModeService.isExpanded()) {
+              } @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) {
@@ -22560,31 +22789,6 @@ class SymphiqFunnelAnalysisDashboardComponent {
                     </div>
                   }
                 </div>
-              } @else {
-                <!-- Skeleton loaders during 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>
               }
               </div>
             </section>
@@ -22679,8 +22883,32 @@ class SymphiqFunnelAnalysisDashboardComponent {
                   </div>
                 </div>
               </div>
-              <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) {
+              @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">
@@ -22759,16 +22987,17 @@ class SymphiqFunnelAnalysisDashboardComponent {
                       </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>
+                  } @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>
           }
@@ -22827,27 +23056,49 @@ class SymphiqFunnelAnalysisDashboardComponent {
                 </select>
                 </div>
               </div>
-              <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()" />
-                  </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>
+              @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()" />
+                    </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>
           }
@@ -22909,11 +23160,25 @@ class SymphiqFunnelAnalysisDashboardComponent {
                   </div>
                 </div>
 
-                <symphiq-competitive-intelligence-view
-                  [metrics]="competitiveMetrics()"
-                  [allCharts]="allCharts()"
-                  [isLightMode]="isLightMode()"
-                  [isCompactMode]="viewModeService.isCompact()" />
+                @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()" />
+                }
               </div>
             </section>
           }
@@ -22944,17 +23209,17 @@ class SymphiqFunnelAnalysisDashboardComponent {
 
     </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 }], { modalComponent: [{
+    }], () => [{ type: FunnelOrderService }, { type: ViewModeService }, { type: SearchService }, { type: TooltipService }], { modalComponent: [{
             type: ViewChild,
             args: [ModalComponent]
         }], 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 }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], 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 }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollContainerId", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], 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: 915 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisDashboardComponent, { className: "SymphiqFunnelAnalysisDashboardComponent", filePath: "lib/components/funnel-analysis-dashboard/symphiq-funnel-analysis-dashboard.component.ts", lineNumber: 1010 }); })();
 
 /**
  * Shared Theme Color Utilities