@eric-emg/symphiq-components 1.2.517 → 1.2.518

package/fesm2022/symphiq-components.mjs

@@ -65843,63 +65843,6 @@ class FloatingBackButtonComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FloatingBackButtonComponent, { className: "FloatingBackButtonComponent", filePath: "lib/components/business-analysis-dashboard/floating-back-button.component.ts", lineNumber: 70 }); })();
 
-function SearchButtonComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span");
-    i0.ɵɵtext(1, "Search");
-    i0.ɵɵelementEnd();
-} }
-class SearchButtonComponent {
-    constructor() {
-        this.isLightMode = input(false, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
-        this.minimized = input(false, ...(ngDevMode ? [{ debugName: "minimized" }] : []));
-        this.title = input('Search (/ or Cmd+K)', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.searchClick = output();
-        this.buttonClass = computed(() => {
-            if (this.isLightMode()) {
-                return 'bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900';
-            }
-            return 'bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white';
-        }, ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
-    }
-    static { this.ɵfac = function SearchButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchButtonComponent, selectors: [["symphiq-search-button"]], inputs: { isLightMode: [1, "isLightMode"], minimized: [1, "minimized"], title: [1, "title"] }, outputs: { searchClick: "searchClick" }, decls: 4, vars: 9, consts: [["type", "button", 3, "click", "ngClass", "title"], ["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"]], template: function SearchButtonComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "button", 0);
-            i0.ɵɵlistener("click", function SearchButtonComponent_Template_button_click_0_listener() { return ctx.searchClick.emit(); });
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(1, "svg", 1);
-            i0.ɵɵelement(2, "path", 2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(3, SearchButtonComponent_Conditional_3_Template, 2, 0, "span");
-            i0.ɵɵelementEnd();
-        } if (rf & 2) {
-            i0.ɵɵclassMap(ctx.minimized() ? "cursor-pointer p-2 rounded-lg transition-all duration-200 hover:scale-110" : "cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105");
-            i0.ɵɵproperty("ngClass", ctx.buttonClass())("title", ctx.title());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("w-5", ctx.minimized())("h-5", ctx.minimized());
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.minimized() ? 3 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["[_nghost-%COMP%]{display:contents}"], changeDetection: 0 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchButtonComponent, [{
-        type: Component,
-        args: [{ selector: 'symphiq-search-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: `
-    <button
-      type="button"
-      (click)="searchClick.emit()"
-      [ngClass]="buttonClass()"
-      [title]="title()"
-      [class]="minimized() ? 'cursor-pointer p-2 rounded-lg transition-all duration-200 hover:scale-110' : 'cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105'">
-      <svg class="w-4 h-4" [class.w-5]="minimized()" [class.h-5]="minimized()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-      </svg>
-      @if (!minimized()) {
-        <span>Search</span>
-      }
-    </button>
-  `, styles: [":host{display:contents}\n"] }]
-    }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchButtonComponent, { className: "SearchButtonComponent", filePath: "lib/components/shared/search-button.component.ts", lineNumber: 30 }); })();
-
 const _c0$w = ["searchInput"];
 const _forTrack0$w = ($index, $item) => $item.id;
 function SearchModalComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
@@ -67830,17 +67773,76 @@ class CollapsibleSectionGroupComponent {
     }], null, { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsibleSectionGroupComponent, { className: "CollapsibleSectionGroupComponent", filePath: "lib/components/business-analysis-dashboard/collapsible-section-group.component.ts", lineNumber: 100 }); })();
 
-const _c0$u = () => [];
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function SearchButtonComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Search");
+    i0.ɵɵelementEnd();
+} }
+class SearchButtonComponent {
+    constructor() {
+        this.isLightMode = input(false, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.minimized = input(false, ...(ngDevMode ? [{ debugName: "minimized" }] : []));
+        this.title = input('Search (/ or Cmd+K)', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.searchClick = output();
+        this.buttonClass = computed(() => {
+            if (this.isLightMode()) {
+                return 'bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900';
+            }
+            return 'bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white';
+        }, ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
+    }
+    static { this.ɵfac = function SearchButtonComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchButtonComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchButtonComponent, selectors: [["symphiq-search-button"]], inputs: { isLightMode: [1, "isLightMode"], minimized: [1, "minimized"], title: [1, "title"] }, outputs: { searchClick: "searchClick" }, decls: 4, vars: 9, consts: [["type", "button", 3, "click", "ngClass", "title"], ["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"]], template: function SearchButtonComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 0);
+            i0.ɵɵlistener("click", function SearchButtonComponent_Template_button_click_0_listener() { return ctx.searchClick.emit(); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(1, "svg", 1);
+            i0.ɵɵelement(2, "path", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(3, SearchButtonComponent_Conditional_3_Template, 2, 0, "span");
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassMap(ctx.minimized() ? "cursor-pointer p-2 rounded-lg transition-all duration-200 hover:scale-110" : "cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105");
+            i0.ɵɵproperty("ngClass", ctx.buttonClass())("title", ctx.title());
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("w-5", ctx.minimized())("h-5", ctx.minimized());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.minimized() ? 3 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["[_nghost-%COMP%]{display:contents}"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchButtonComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-search-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: `
+    <button
+      type="button"
+      (click)="searchClick.emit()"
+      [ngClass]="buttonClass()"
+      [title]="title()"
+      [class]="minimized() ? 'cursor-pointer p-2 rounded-lg transition-all duration-200 hover:scale-110' : 'cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105'">
+      <svg class="w-4 h-4" [class.w-5]="minimized()" [class.h-5]="minimized()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+      </svg>
+      @if (!minimized()) {
+        <span>Search</span>
+      }
+    </button>
+  `, styles: [":host{display:contents}\n"] }]
+    }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchButtonComponent, { className: "SearchButtonComponent", filePath: "lib/components/shared/search-button.component.ts", lineNumber: 30 }); })();
+
+function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 6);
+} }
+function DashboardHeaderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "symphiq-search-button", 21);
-    i0.ɵɵlistener("searchClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template_symphiq_search_button_searchClick_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openSearch()); });
+    i0.ɵɵelementStart(0, "div", 7)(1, "symphiq-search-button", 15);
+    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_11_Template_symphiq_search_button_searchClick_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 22);
-    i0.ɵɵlistener("click", function SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openViewModeSwitcher()); });
+    i0.ɵɵelementStart(2, "button", 16);
+    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_11_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 23);
-    i0.ɵɵelement(4, "path", 24)(5, "path", 25);
+    i0.ɵɵelementStart(3, "svg", 17);
+    i0.ɵɵelement(4, "path", 18)(5, "path", 19);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(6, "span");
@@ -67853,422 +67855,713 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.displayModeLabel());
+    i0.ɵɵtextInterpolate(ctx_r1.viewModeLabel());
 } }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_22_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
-    i0.ɵɵtext(1, "\u203A");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 26);
-    i0.ɵɵtext(3);
+function DashboardHeaderComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
+    i0.ɵɵtext(2, "Generated At");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 22);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("opacity-0", ctx_r1.subsectionTitleFading())("opacity-100", !ctx_r1.subsectionTitleFading());
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-400" : "text-slate-500");
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("opacity-0", ctx_r1.subsectionTitleFading())("opacity-100", !ctx_r1.subsectionTitleFading());
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-500" : "text-slate-500");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSubsectionTitle(), " ");
-} }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12)(1, "span", 26);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, SymphiqBusinessAnalysisDashboardComponent_Conditional_22_Conditional_3_Template, 4, 11);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("opacity-0", ctx_r1.sectionTitleFading())("opacity-100", !ctx_r1.sectionTitleFading());
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-600 font-medium" : "text-slate-400 font-medium");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSectionTitle(), " ");
+    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.currentSubsectionTitle() ? 3 : -1);
+    i0.ɵɵtextInterpolate(ctx_r1.formattedGeneratedDate());
 } }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-search-button", 27);
-    i0.ɵɵlistener("searchClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_23_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openSearch()); });
+function DashboardHeaderComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
+    i0.ɵɵtext(2, "Requested by");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "button", 28);
-    i0.ɵɵlistener("click", function SymphiqBusinessAnalysisDashboardComponent_Conditional_23_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openViewModeSwitcher()); });
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 23);
-    i0.ɵɵelement(3, "path", 24)(4, "path", 25);
+    i0.ɵɵelementStart(3, "div", 22);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode())("minimized", true);
+    let tmp_4_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
-} }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 29);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode());
+    i0.ɵɵtextInterpolate2("", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.firstName, " ", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.lastName);
 } }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-journey-progress-indicator", 32);
-    i0.ɵɵlistener("stepClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Conditional_0_Template_symphiq_journey_progress_indicator_stepClick_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.stepClick.emit($event)); })("nextStepClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Conditional_0_Template_symphiq_journey_progress_indicator_nextStepClick_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.nextStepClick.emit()); });
+function DashboardHeaderComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵconditionalCreate(1, DashboardHeaderComponent_Conditional_12_Conditional_1_Template, 5, 5, "div", 20);
+    i0.ɵɵconditionalCreate(2, DashboardHeaderComponent_Conditional_12_Conditional_2_Template, 5, 6, "div", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("currentStepId", ctx_r1.JourneyStepIdEnum.BUSINESS_ANALYSIS)("showNextStepAction", false)("forDemo", ctx_r1.forDemo())("maxAccessibleStepId", ctx_r1.maxAccessibleStepId());
-} }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Conditional_0_Template, 1, 5, "symphiq-journey-progress-indicator", 30);
-    i0.ɵɵelement(1, "symphiq-content-generation-progress-with-confetti", 31);
-} if (rf & 2) {
-    let tmp_4_0;
-    let tmp_6_0;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(!ctx_r1.isOnboarded() ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("itemStatus", ctx_r1.itemStatus())("currentStatus", (tmp_4_0 = ctx_r1.profile()) == null ? null : tmp_4_0.selfContentStatus)("confettiIntensity", "celebration")("title", "We are generating a new Business Analysis for " + (((tmp_6_0 = ctx_r1.currentProfile()) == null ? null : tmp_6_0.profileStructured == null ? null : tmp_6_0.profileStructured.businessName) || "your business") + ".")("subtitle", "It will appear here when ready. You can check back later as this will take a few minutes to complete.");
+    i0.ɵɵconditional(ctx_r1.formattedGeneratedDate() ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.requestedByUser() ? 2 : -1);
 } }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-journey-progress-indicator", 32);
-    i0.ɵɵlistener("stepClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_0_Conditional_0_Template_symphiq_journey_progress_indicator_stepClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.stepClick.emit($event)); })("nextStepClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_0_Conditional_0_Template_symphiq_journey_progress_indicator_nextStepClick_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.nextStepClick.emit()); });
+function DashboardHeaderComponent_Conditional_20_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 23);
+    i0.ɵɵtext(1, "\u203A");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("currentStepId", ctx_r1.JourneyStepIdEnum.BUSINESS_ANALYSIS)("showNextStepAction", ctx_r1.showNextStepAction())("forDemo", ctx_r1.forDemo())("maxAccessibleStepId", ctx_r1.maxAccessibleStepId());
-} }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_0_Conditional_0_Template, 1, 5, "symphiq-journey-progress-indicator", 30);
-    i0.ɵɵelementStart(1, "div", 6)(2, "div", 33);
-    i0.ɵɵelement(3, "symphiq-welcome-banner", 34);
+    i0.ɵɵelementStart(2, "span", 23);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 33)(5, "symphiq-recommendations-tiled-grid", 35);
-    i0.ɵɵlistener("viewMoreClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_0_Template_symphiq_recommendations_tiled_grid_viewMoreClick_5_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openRecommendationDetailsModal($event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div");
-    i0.ɵɵelement(7, "symphiq-collapsible-section-group", 36);
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_4_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(!ctx_r1.isOnboarded() ? 0 : -1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("businessName", ((tmp_4_0 = ctx_r1.currentProfile()) == null ? null : tmp_4_0.profileStructured == null ? null : tmp_4_0.profileStructured.businessName) || "your business")("isOnboarded", ctx_r1.isOnboarded());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("recommendations", ctx_r1.recommendationItems())("viewMode", ctx_r1.viewMode());
+    i0.ɵɵclassProp("opacity-0", ctx_r1.subsectionFading())("opacity-100", !ctx_r1.subsectionFading());
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-400" : "text-slate-500");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("sections", ctx_r1.nonRecommendationSections())("viewMode", ctx_r1.viewMode());
+    i0.ɵɵclassProp("opacity-0", ctx_r1.subsectionFading())("opacity-100", !ctx_r1.subsectionFading());
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-500" : "text-slate-500");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSubsection(), " ");
 } }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_1_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵelement(1, "symphiq-section-divider", 39);
+function DashboardHeaderComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14)(1, "span", 23);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_20_Conditional_3_Template, 4, 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ɵ$index_113_r7 = i0.ɵɵnextContext().$index;
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("subsections", ctx_r1.sections()[ɵ$index_113_r7 + 1].subsections || i0.ɵɵpureFunction0(2, _c0$u));
-} }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-profile-section", 37);
-    i0.ɵɵconditionalCreate(1, SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_1_For_1_Conditional_1_Template, 2, 3, "div", 38);
-} if (rf & 2) {
-    const section_r8 = ctx.$implicit;
-    const ɵ$index_113_r7 = ctx.$index;
-    const ɵ$count_113_r9 = ctx.$count;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("section", section_r8)("viewMode", ctx_r1.viewMode())("forceExpanded", !ctx_r1.isCompactView());
+    i0.ɵɵclassProp("opacity-0", ctx_r1.sectionFading())("opacity-100", !ctx_r1.sectionFading());
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-600 font-medium" : "text-slate-400 font-medium");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!(ɵ$index_113_r7 === ɵ$count_113_r9 - 1) ? 1 : -1);
-} }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_1_For_1_Template, 2, 4, null, null, i0.ɵɵcomponentInstance().trackBySectionId, true);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵrepeater(ctx_r1.sections());
-} }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_0_Template, 8, 8)(1, SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Conditional_1_Template, 2, 0);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(ctx_r1.isSimplifiedView() ? 0 : 1);
-} }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-section-navigation", 15);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sections", ctx_r1.sections())("viewMode", ctx_r1.viewMode())("embedded", ctx_r1.embedded())("scrollElement", ctx_r1.scrollElement() ?? undefined);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSection(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.currentSubsection() ? 3 : -1);
 } }
-function SymphiqBusinessAnalysisDashboardComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-floating-toc", 15);
+function DashboardHeaderComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-search-button", 24);
+    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_21_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "button", 25);
+    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_21_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 17);
+    i0.ɵɵelement(3, "path", 18)(4, "path", 19);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sections", ctx_r1.sections())("viewMode", ctx_r1.viewMode())("embedded", ctx_r1.embedded())("scrollElement", ctx_r1.scrollElement() ?? undefined);
+    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode())("minimized", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
 } }
-class SymphiqBusinessAnalysisDashboardComponent {
-    sectionHasContent(section) {
-        if (!section?.subsections || section.subsections.length === 0) {
-            return false;
-        }
-        return section.subsections.some((subsection) => this.subsectionHasContent(subsection));
-    }
-    subsectionHasContent(subsection) {
-        const hasItems = !!(subsection?.items && subsection.items.length > 0);
-        const hasContent = !!(subsection?.content && subsection.content.trim().length > 0);
-        const hasVisual = !!(subsection?.visual && subsection.visual.enabled);
-        return hasItems || hasContent || hasVisual;
-    }
+class DashboardHeaderComponent {
     constructor() {
-        this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
-        this.profile = input(...(ngDevMode ? [undefined, { debugName: "profile" }] : []));
-        this.parentHeaderOffset = input(0, ...(ngDevMode ? [{ debugName: "parentHeaderOffset" }] : []));
         this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
+        this.createdDate = input(...(ngDevMode ? [undefined, { debugName: "createdDate" }] : []));
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-        this.scrollEvent = input(...(ngDevMode ? [undefined, { debugName: "scrollEvent" }] : []));
-        this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
-        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        this.isOnboarded = input(false, ...(ngDevMode ? [{ debugName: "isOnboarded" }] : []));
-        this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
-        this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
-        this.itemStatus = input(...(ngDevMode ? [undefined, { debugName: "itemStatus" }] : []));
-        this.isMarkingAsReviewed = input(false, ...(ngDevMode ? [{ debugName: "isMarkingAsReviewed" }] : []));
-        this.stepClick = output();
-        this.nextStepClick = output();
-        this.markAsReviewedClick = output();
-        this.JourneyStepIdEnum = JourneyStepIdEnum;
-        this.AiDynamicContentStatusEnum = AiDynamicContentStatusEnum;
-        this.showNextStepAction = computed(() => {
-            const profile = this.profile();
-            if (!profile)
-                return false;
-            const contentGenerated = profile.selfContentStatus === AiDynamicContentStatusEnum.GENERATED;
-            const isReviewed = profile.reviewStatus === ProfileAnalysisReviewStatusEnum.REVIEWED;
-            return contentGenerated && isReviewed;
-        }, ...(ngDevMode ? [{ debugName: "showNextStepAction" }] : []));
-        this.isContentGenerating = computed(() => {
-            const status = this.profile()?.selfContentStatus;
-            return status === AiDynamicContentStatusEnum.REQUESTED || status === AiDynamicContentStatusEnum.GENERATING;
-        }, ...(ngDevMode ? [{ debugName: "isContentGenerating" }] : []));
-        this.shouldShowReviewFooter = computed(() => {
-            const profile = this.profile();
-            if (!profile)
-                return false;
-            return profile.selfContentStatus === AiDynamicContentStatusEnum.GENERATED &&
-                profile.reviewStatus === ProfileAnalysisReviewStatusEnum.NOT_REVIEWED;
-        }, ...(ngDevMode ? [{ debugName: "shouldShowReviewFooter" }] : []));
+        this.viewModeLabel = input('View Mode', ...(ngDevMode ? [{ debugName: "viewModeLabel" }] : []));
+        this.currentSection = input(...(ngDevMode ? [undefined, { debugName: "currentSection" }] : []));
+        this.currentSubsection = input(...(ngDevMode ? [undefined, { debugName: "currentSubsection" }] : []));
+        this.sectionFading = input(false, ...(ngDevMode ? [{ debugName: "sectionFading" }] : []));
+        this.subsectionFading = input(false, ...(ngDevMode ? [{ debugName: "subsectionFading" }] : []));
+        this.isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
+        this.showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
+        this.searchClick = output();
+        this.viewModeClick = output();
         this.headerScrollService = inject(HeaderScrollService);
-        this.lookupService = inject(ProfileItemLookupService);
-        this.navigationService = inject(NavigationStateService);
-        this.profileContextService = inject(ProfileContextService);
-        this.searchService = inject(BusinessProfileSearchService);
-        this.modalService = inject(ModalService);
-        this.confettiService = inject(ConfettiService);
-        this.currentProfile = signal(undefined, ...(ngDevMode ? [{ debugName: "currentProfile" }] : []));
-        this.previousContentStatus = signal(undefined, ...(ngDevMode ? [{ debugName: "previousContentStatus" }] : []));
-        this.COLLAPSE_THRESHOLD = 20;
-        this.EXPAND_THRESHOLD = 10;
-        this.embeddedScrollEffect = effect(() => {
-            const scrollEvent = this.scrollEvent();
-            const isEmbedded = this.embedded();
-            if (isEmbedded && !scrollEvent) {
-                return;
-            }
-            if (!scrollEvent || !isEmbedded) {
-                return;
-            }
-            const detail = scrollEvent.detail;
-            if (!detail) {
-                return;
-            }
-            const scrollTop = detail.scrollTop || 0;
-            const currentState = this.headerScrollService.isScrolled();
-            if (!currentState && scrollTop > this.COLLAPSE_THRESHOLD) {
-                this.headerScrollService.isScrolled.set(true);
-            }
-            else if (currentState && scrollTop < this.EXPAND_THRESHOLD) {
-                this.headerScrollService.isScrolled.set(false);
-            }
-            const scrollElement = this.scrollElement();
-            if (scrollElement) {
-                const scrollHeight = scrollElement.scrollHeight || 0;
-                const clientHeight = scrollElement.clientHeight || 0;
-                const maxScroll = scrollHeight - clientHeight;
-                if (maxScroll > 0) {
-                    const progress = (scrollTop / maxScroll) * 100;
-                    this.headerScrollService.scrollProgress.set(Math.min(100, Math.max(0, progress)));
-                }
-            }
-        }, ...(ngDevMode ? [{ debugName: "embeddedScrollEffect" }] : []));
-        this.scrollProgress = computed(() => this.headerScrollService.scrollProgress(), ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
-        this.displayMode = signal(DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
-        this.isCompactView = computed(() => this.displayMode() === DisplayModeEnum.COMPACT, ...(ngDevMode ? [{ debugName: "isCompactView" }] : []));
-        this.isSimplifiedView = computed(() => this.displayMode() === DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "isSimplifiedView" }] : []));
-        this.currentSectionTitle = signal('', ...(ngDevMode ? [{ debugName: "currentSectionTitle" }] : []));
-        this.currentSubsectionTitle = signal('', ...(ngDevMode ? [{ debugName: "currentSubsectionTitle" }] : []));
-        this.sectionTitleFading = signal(false, ...(ngDevMode ? [{ debugName: "sectionTitleFading" }] : []));
-        this.subsectionTitleFading = signal(false, ...(ngDevMode ? [{ debugName: "subsectionTitleFading" }] : []));
-        this.selectedSearchIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedSearchIndex" }] : []));
-        this.isViewModeSwitcherOpen = signal(false, ...(ngDevMode ? [{ debugName: "isViewModeSwitcherOpen" }] : []));
-        this.isViewModeSwitching = signal(false, ...(ngDevMode ? [{ debugName: "isViewModeSwitching" }] : []));
-        this.sections = computed(() => {
-            const profile = this.currentProfile();
-            const allSections = profile?.profileStructured?.sections || [];
-            return allSections
-                .filter(section => this.sectionHasContent(section))
-                .sort((a, b) => (a.order || 0) - (b.order || 0));
-        }, ...(ngDevMode ? [{ debugName: "sections" }] : []));
-        this.recommendationItems = computed(() => {
-            const profile = this.currentProfile();
-            return profile?.profileStructured?.recommendations || [];
-        }, ...(ngDevMode ? [{ debugName: "recommendationItems" }] : []));
-        this.nonRecommendationSections = computed(() => {
-            return this.sections().filter(section => section.id !== 'strategic-insights');
-        }, ...(ngDevMode ? [{ debugName: "nonRecommendationSections" }] : []));
-        this.displayModeLabel = computed(() => {
-            const mode = this.displayMode();
-            switch (mode) {
-                case DisplayModeEnum.SIMPLIFIED:
-                    return 'Simplified';
-                case DisplayModeEnum.COMPACT:
-                    return 'Compact';
-                case DisplayModeEnum.EXPANDED:
-                    return 'Expanded';
-                default:
-                    return 'View';
-            }
-        }, ...(ngDevMode ? [{ debugName: "displayModeLabel" }] : []));
-        this.lastSectionTitle = '';
-        this.lastSubsectionTitle = '';
-        this.lastScrollY = 0;
-        this.scrollDirection = 'down';
-        effect(() => {
-            const profile = this.profile();
-            this.currentProfile.set(profile);
-            this.lookupService.setProfile(profile);
-            if (profile) {
-                this.searchService.setProfile(profile);
-            }
-            if (profile?.profileStructured?.sections) {
-                const recommendations = profile.profileStructured?.recommendations;
-                this.profileContextService.indexProfile(profile.profileStructured.sections, recommendations);
-            }
-        });
-        effect(() => {
-            const currentStatus = this.profile()?.selfContentStatus;
-            const prevStatus = this.previousContentStatus();
-            if (prevStatus === AiDynamicContentStatusEnum.GENERATING &&
-                currentStatus === AiDynamicContentStatusEnum.GENERATED) {
-                this.confettiService.trigger({
-                    intensity: 'celebration',
-                    delay: 200,
-                    viewMode: this.viewMode(),
-                });
+        this.dateFormatCache = new StringMemoizeCache();
+        this.formattedGeneratedDate = computed(() => {
+            let formatted = '';
+            const createdDate = this.createdDate();
+            if (createdDate) {
+                formatted = this.formatDate(createdDate.toISOString());
             }
-            this.previousContentStatus.set(currentStatus);
-        });
+            return formatted;
+        }, ...(ngDevMode ? [{ debugName: "formattedGeneratedDate" }] : []));
+        this.headerTitleClass = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : []));
+        this.metaLabelClass = computed(() => this.isLightMode() ? 'text-slate-600' : 'text-slate-500', ...(ngDevMode ? [{ debugName: "metaLabelClass" }] : []));
     }
-    onScroll() {
-        this.headerScrollService.handleScroll(this.embedded());
-        const navState = this.navigationService.getNavigationState()();
-        if (navState.sourceElementId && navState.targetElementId && !navState.isBackButtonVisible) {
-            const currentScrollPosition = window.scrollY;
-            const scrollDifference = Math.abs(currentScrollPosition - navState.targetScrollPosition);
-            if (scrollDifference > 100) {
-                this.navigationService.showBackButton();
-            }
-        }
+    onSearchClick() {
+        this.searchClick.emit();
     }
-    toggleExpandedView() {
-        const current = this.displayMode();
-        if (current === DisplayModeEnum.COMPACT) {
-            this.displayMode.set(DisplayModeEnum.EXPANDED);
-        }
-        else if (current === DisplayModeEnum.EXPANDED) {
-            this.displayMode.set(DisplayModeEnum.COMPACT);
-        }
+    onViewModeClick() {
+        this.viewModeClick.emit();
     }
-    openViewModeSwitcher() {
-        this.isViewModeSwitcherOpen.set(true);
+    formatDate(dateString) {
+        // Cache date formatting operations
+        return this.dateFormatCache.get(dateString, (date) => new Date(date).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }));
     }
-    closeViewModeSwitcher() {
-        this.isViewModeSwitcherOpen.set(false);
+    getHeaderClasses() {
+        return this.isLightMode()
+            ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200'
+            : 'bg-slate-900/95 backdrop-blur-md shadow-sm border-b border-slate-800';
     }
-    handleDisplayModeChange(mode) {
-        this.isViewModeSwitching.set(true);
-        // Add a small delay to show the spinner
-        setTimeout(() => {
-            this.displayMode.set(mode);
-            this.isViewModeSwitching.set(false);
-            this.closeViewModeSwitcher();
-        }, 500);
+    getMainTitleClasses() {
+        return this.isLightMode()
+            ? 'text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
+            : 'text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
     }
-    handleMarkAsReviewedClick() {
-        this.markAsReviewedClick.emit();
+    getSubtitleClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600 mt-1 text-sm'
+            : 'text-slate-400 mt-1 text-sm';
     }
-    openRecommendationDetailsModal(recommendation) {
-        const itemAdapter = {
-            ...recommendation,
-            type: 'RECOMMENDATION',
-            label: recommendation.title,
-            value: recommendation.description
-        };
-        this.modalService.openItemDetailModal(itemAdapter, this.viewMode(), 'recommendation', 'Strategic Insights', recommendation.title, undefined, this.isSimplifiedView() || this.isCompactView());
+    getCondensedTitleClasses() {
+        return this.isLightMode()
+            ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate'
+            : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate';
     }
     getViewModeButtonClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        if (isDark) {
-            return 'bg-slate-800/60 border border-slate-700/50 text-slate-300 hover:bg-slate-700/60 hover:border-slate-600/50';
-        }
-        return 'bg-white/80 border border-slate-200 text-slate-700 hover:bg-white hover:border-slate-300 shadow-sm';
+        return this.isLightMode()
+            ? 'bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200'
+            : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
     }
-    handleKeyDown(event) {
-        if (!this.searchService.isSearchOpen()) {
-            if (event.key === '/' || (event.metaKey && event.key === 'k') || (event.ctrlKey && event.key === 'k')) {
-                event.preventDefault();
-                this.searchService.openSearch();
-            }
-            return;
-        }
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            this.closeSearch();
-        }
-        else if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            const results = this.searchService.searchResults();
-            if (results.length > 0) {
-                this.selectedSearchIndex.update(i => (i + 1) % results.length);
-            }
-        }
-        else if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            const results = this.searchService.searchResults();
-            if (results.length > 0) {
-                this.selectedSearchIndex.update(i => (i - 1 + results.length) % results.length);
+    static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], sectionFading: [1, "sectionFading"], subsectionFading: [1, "subsectionFading"], isLoading: [1, "isLoading"], showControls: [1, "showControls"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 22, vars: 26, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out", "h-full"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4", "h-full", "flex", "items-center"], [1, "flex", "items-center", "justify-between", "w-full"], [1, "flex", "items-center", "gap-3"], [3, "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "items-center", "gap-2"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "absolute", "inset-x-0", "top-0", "transition-opacity", "duration-300", "ease-in-out"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3.5"], [1, "flex", "items-center", "justify-between"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "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", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "div", 4)(6, "h1", 5);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(8, DashboardHeaderComponent_Conditional_8_Template, 1, 0, "div", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "p", 5);
+            i0.ɵɵtext(10);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(11, DashboardHeaderComponent_Conditional_11_Template, 8, 3, "div", 7);
+            i0.ɵɵconditionalCreate(12, DashboardHeaderComponent_Conditional_12_Template, 3, 2, "div", 8);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "div", 11)(16, "div", 12)(17, "h1", 5);
+            i0.ɵɵtext(18);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(19, "div", 13);
+            i0.ɵɵconditionalCreate(20, DashboardHeaderComponent_Conditional_20_Template, 4, 7, "div", 14);
+            i0.ɵɵconditionalCreate(21, DashboardHeaderComponent_Conditional_21_Template, 5, 3);
+            i0.ɵɵelementEnd()()()()();
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("height", ctx.headerScrollService.isScrolled() ? "52px" : "100px");
+            i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("opacity-0", ctx.headerScrollService.isScrolled())("pointer-events-none", ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading() ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.subtitle(), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showControls() ? 11 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.formattedGeneratedDate() || ctx.requestedByUser() ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("opacity-0", !ctx.headerScrollService.isScrolled())("pointer-events-none", !ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", ctx.getCondensedTitleClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.currentSection() ? 20 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showControls() ? 21 : -1);
+        } }, dependencies: [CommonModule, i1$1.NgClass, SearchButtonComponent], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardHeaderComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-dashboard-header',
+                standalone: true,
+                imports: [CommonModule, SearchButtonComponent],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50 overflow-hidden" [style.height]="headerScrollService.isScrolled() ? '52px' : '100px'" style="transition: height 300ms ease-in-out;">
+        <!-- Expanded Header (default state) -->
+        <div
+          class="transition-opacity duration-300 ease-in-out h-full"
+          [class.opacity-0]="headerScrollService.isScrolled()"
+          [class.pointer-events-none]="headerScrollService.isScrolled()"
+          [class.opacity-100]="!headerScrollService.isScrolled()">
+          <div
+            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 h-full flex items-center">
+          <div class="flex items-center justify-between w-full">
+            <div>
+              <div class="flex items-center gap-3">
+                <h1 [ngClass]="getMainTitleClasses()">
+                  {{ title() }}
+                </h1>
+                @if (isLoading()) {
+                  <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>
+              <p [ngClass]="getSubtitleClasses()">
+                {{ subtitle() }}
+              </p>
+            </div>
+            @if (showControls()) {
+              <div class="flex items-center gap-2">
+                <symphiq-search-button
+                  [isLightMode]="isLightMode()"
+                  (searchClick)="onSearchClick()"
+                />
+                <button
+                  type="button"
+                  (click)="onViewModeClick()"
+                  [ngClass]="getViewModeButtonClasses()"
+                  class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                  </svg>
+                  <span>{{ viewModeLabel() }}</span>
+                </button>
+              </div>
             }
-        }
-        else if (event.key === 'Enter') {
-            event.preventDefault();
-            const results = this.searchService.searchResults();
-            if (results.length > 0) {
-                this.onSearchResultSelected(results[this.selectedSearchIndex()]);
+            @if (formattedGeneratedDate() || requestedByUser()) {
+              <div class="flex flex-col gap-4 min-w-[180px]">
+                @if (formattedGeneratedDate()) {
+                  <div class="text-left sm:text-right">
+                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Generated At</div>
+                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ formattedGeneratedDate() }}</div>
+                  </div>
+                }
+                @if (requestedByUser()) {
+                  <div class="text-left sm:text-right">
+                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Requested by</div>
+                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
+                  </div>
+                }
+              </div>
             }
+          </div>
+          </div>
+        </div>
+
+        <!-- Condensed Header (scrolled state) -->
+        <div
+          class="absolute inset-x-0 top-0 transition-opacity duration-300 ease-in-out"
+          [class.opacity-0]="!headerScrollService.isScrolled()"
+          [class.pointer-events-none]="!headerScrollService.isScrolled()"
+          [class.opacity-100]="headerScrollService.isScrolled()">
+          <div
+            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3.5">
+          <div class="flex items-center justify-between">
+            <div class="flex-1 min-w-0 mr-4">
+              <h1 [ngClass]="getCondensedTitleClasses()">
+                {{ title() }}
+              </h1>
+            </div>
+            <div class="flex items-center gap-4">
+              @if (currentSection()) {
+                <div class="flex items-center gap-2 text-sm flex-shrink-0">
+                  <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'" class="transition-opacity duration-300" [class.opacity-0]="sectionFading()" [class.opacity-100]="!sectionFading()">
+                    {{ currentSection() }}
+                  </span>
+                  @if (currentSubsection()) {
+                    <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionFading()" [class.opacity-100]="!subsectionFading()">›</span>
+                    <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionFading()" [class.opacity-100]="!subsectionFading()">
+                      {{ currentSubsection() }}
+                    </span>
+                  }
+                </div>
+              }
+              @if (showControls()) {
+                <symphiq-search-button
+                  [isLightMode]="isLightMode()"
+                  [minimized]="true"
+                  (searchClick)="onSearchClick()"
+                />
+                <button
+                  type="button"
+                  (click)="onViewModeClick()"
+                  [ngClass]="getViewModeButtonClasses()"
+                  class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                  </svg>
+                </button>
+              }
+            </div>
+          </div>
+          </div>
+        </div>
+    </header>
+  `
+            }]
+    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], sectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionFading", required: false }] }], subsectionFading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsectionFading", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 128 }); })();
+
+const _c0$u = () => [];
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 13);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode());
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-journey-progress-indicator", 16);
+    i0.ɵɵlistener("stepClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_8_Conditional_0_Template_symphiq_journey_progress_indicator_stepClick_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.stepClick.emit($event)); })("nextStepClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_8_Conditional_0_Template_symphiq_journey_progress_indicator_nextStepClick_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.nextStepClick.emit()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("currentStepId", ctx_r0.JourneyStepIdEnum.BUSINESS_ANALYSIS)("showNextStepAction", false)("forDemo", ctx_r0.forDemo())("maxAccessibleStepId", ctx_r0.maxAccessibleStepId());
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqBusinessAnalysisDashboardComponent_Conditional_8_Conditional_0_Template, 1, 5, "symphiq-journey-progress-indicator", 14);
+    i0.ɵɵelement(1, "symphiq-content-generation-progress-with-confetti", 15);
+} if (rf & 2) {
+    let tmp_4_0;
+    let tmp_6_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(!ctx_r0.isOnboarded() ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("itemStatus", ctx_r0.itemStatus())("currentStatus", (tmp_4_0 = ctx_r0.profile()) == null ? null : tmp_4_0.selfContentStatus)("confettiIntensity", "celebration")("title", "We are generating a new Business Analysis for " + (((tmp_6_0 = ctx_r0.currentProfile()) == null ? null : tmp_6_0.profileStructured == null ? null : tmp_6_0.profileStructured.businessName) || "your business") + ".")("subtitle", "It will appear here when ready. You can check back later as this will take a few minutes to complete.");
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-journey-progress-indicator", 16);
+    i0.ɵɵlistener("stepClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_0_Conditional_0_Template_symphiq_journey_progress_indicator_stepClick_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.stepClick.emit($event)); })("nextStepClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_0_Conditional_0_Template_symphiq_journey_progress_indicator_nextStepClick_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.nextStepClick.emit()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("currentStepId", ctx_r0.JourneyStepIdEnum.BUSINESS_ANALYSIS)("showNextStepAction", ctx_r0.showNextStepAction())("forDemo", ctx_r0.forDemo())("maxAccessibleStepId", ctx_r0.maxAccessibleStepId());
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_0_Conditional_0_Template, 1, 5, "symphiq-journey-progress-indicator", 14);
+    i0.ɵɵelementStart(1, "div", 17)(2, "div", 18);
+    i0.ɵɵelement(3, "symphiq-welcome-banner", 19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 18)(5, "symphiq-recommendations-tiled-grid", 20);
+    i0.ɵɵlistener("viewMoreClick", function SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_0_Template_symphiq_recommendations_tiled_grid_viewMoreClick_5_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openRecommendationDetailsModal($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div");
+    i0.ɵɵelement(7, "symphiq-collapsible-section-group", 21);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(!ctx_r0.isOnboarded() ? 0 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("businessName", ((tmp_4_0 = ctx_r0.currentProfile()) == null ? null : tmp_4_0.profileStructured == null ? null : tmp_4_0.profileStructured.businessName) || "your business")("isOnboarded", ctx_r0.isOnboarded());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("recommendations", ctx_r0.recommendationItems())("viewMode", ctx_r0.viewMode());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("sections", ctx_r0.nonRecommendationSections())("viewMode", ctx_r0.viewMode());
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_1_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelement(1, "symphiq-section-divider", 24);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ɵ$index_46_r5 = i0.ɵɵnextContext().$index;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("subsections", ctx_r0.sections()[ɵ$index_46_r5 + 1].subsections || i0.ɵɵpureFunction0(2, _c0$u));
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-profile-section", 22);
+    i0.ɵɵconditionalCreate(1, SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_1_For_1_Conditional_1_Template, 2, 3, "div", 23);
+} if (rf & 2) {
+    const section_r6 = ctx.$implicit;
+    const ɵ$index_46_r5 = ctx.$index;
+    const ɵ$count_46_r7 = ctx.$count;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("section", section_r6)("viewMode", ctx_r0.viewMode())("forceExpanded", !ctx_r0.isCompactView());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!(ɵ$index_46_r5 === ɵ$count_46_r7 - 1) ? 1 : -1);
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_1_For_1_Template, 2, 4, null, null, i0.ɵɵcomponentInstance().trackBySectionId, true);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r0.sections());
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_0_Template, 8, 8)(1, SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Conditional_1_Template, 2, 0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.isSimplifiedView() ? 0 : 1);
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-section-navigation", 7);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded())("scrollElement", ctx_r0.scrollElement() ?? undefined);
+} }
+function SymphiqBusinessAnalysisDashboardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-floating-toc", 7);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded())("scrollElement", ctx_r0.scrollElement() ?? undefined);
+} }
+class SymphiqBusinessAnalysisDashboardComponent {
+    sectionHasContent(section) {
+        if (!section?.subsections || section.subsections.length === 0) {
+            return false;
         }
+        return section.subsections.some((subsection) => this.subsectionHasContent(subsection));
     }
-    openSearch() {
-        this.searchService.openSearch();
+    subsectionHasContent(subsection) {
+        const hasItems = !!(subsection?.items && subsection.items.length > 0);
+        const hasContent = !!(subsection?.content && subsection.content.trim().length > 0);
+        const hasVisual = !!(subsection?.visual && subsection.visual.enabled);
+        return hasItems || hasContent || hasVisual;
     }
-    closeSearch() {
-        this.searchService.closeSearch();
-        this.selectedSearchIndex.set(0);
+    constructor() {
+        this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
+        this.profile = input(...(ngDevMode ? [undefined, { debugName: "profile" }] : []));
+        this.parentHeaderOffset = input(0, ...(ngDevMode ? [{ debugName: "parentHeaderOffset" }] : []));
+        this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.scrollEvent = input(...(ngDevMode ? [undefined, { debugName: "scrollEvent" }] : []));
+        this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.isOnboarded = input(false, ...(ngDevMode ? [{ debugName: "isOnboarded" }] : []));
+        this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
+        this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
+        this.itemStatus = input(...(ngDevMode ? [undefined, { debugName: "itemStatus" }] : []));
+        this.isMarkingAsReviewed = input(false, ...(ngDevMode ? [{ debugName: "isMarkingAsReviewed" }] : []));
+        this.stepClick = output();
+        this.nextStepClick = output();
+        this.markAsReviewedClick = output();
+        this.JourneyStepIdEnum = JourneyStepIdEnum;
+        this.AiDynamicContentStatusEnum = AiDynamicContentStatusEnum;
+        this.showNextStepAction = computed(() => {
+            const profile = this.profile();
+            if (!profile)
+                return false;
+            const contentGenerated = profile.selfContentStatus === AiDynamicContentStatusEnum.GENERATED;
+            const isReviewed = profile.reviewStatus === ProfileAnalysisReviewStatusEnum.REVIEWED;
+            return contentGenerated && isReviewed;
+        }, ...(ngDevMode ? [{ debugName: "showNextStepAction" }] : []));
+        this.isContentGenerating = computed(() => {
+            const status = this.profile()?.selfContentStatus;
+            return status === AiDynamicContentStatusEnum.REQUESTED || status === AiDynamicContentStatusEnum.GENERATING;
+        }, ...(ngDevMode ? [{ debugName: "isContentGenerating" }] : []));
+        this.shouldShowReviewFooter = computed(() => {
+            const profile = this.profile();
+            if (!profile)
+                return false;
+            return profile.selfContentStatus === AiDynamicContentStatusEnum.GENERATED &&
+                profile.reviewStatus === ProfileAnalysisReviewStatusEnum.NOT_REVIEWED;
+        }, ...(ngDevMode ? [{ debugName: "shouldShowReviewFooter" }] : []));
+        this.headerScrollService = inject(HeaderScrollService);
+        this.lookupService = inject(ProfileItemLookupService);
+        this.navigationService = inject(NavigationStateService);
+        this.profileContextService = inject(ProfileContextService);
+        this.searchService = inject(BusinessProfileSearchService);
+        this.modalService = inject(ModalService);
+        this.confettiService = inject(ConfettiService);
+        this.currentProfile = signal(undefined, ...(ngDevMode ? [{ debugName: "currentProfile" }] : []));
+        this.previousContentStatus = signal(undefined, ...(ngDevMode ? [{ debugName: "previousContentStatus" }] : []));
+        this.COLLAPSE_THRESHOLD = 20;
+        this.EXPAND_THRESHOLD = 10;
+        this.embeddedScrollEffect = effect(() => {
+            const scrollEvent = this.scrollEvent();
+            const isEmbedded = this.embedded();
+            if (isEmbedded && !scrollEvent) {
+                return;
+            }
+            if (!scrollEvent || !isEmbedded) {
+                return;
+            }
+            const detail = scrollEvent.detail;
+            if (!detail) {
+                return;
+            }
+            const scrollTop = detail.scrollTop || 0;
+            const currentState = this.headerScrollService.isScrolled();
+            if (!currentState && scrollTop > this.COLLAPSE_THRESHOLD) {
+                this.headerScrollService.isScrolled.set(true);
+            }
+            else if (currentState && scrollTop < this.EXPAND_THRESHOLD) {
+                this.headerScrollService.isScrolled.set(false);
+            }
+            const scrollElement = this.scrollElement();
+            if (scrollElement) {
+                const scrollHeight = scrollElement.scrollHeight || 0;
+                const clientHeight = scrollElement.clientHeight || 0;
+                const maxScroll = scrollHeight - clientHeight;
+                if (maxScroll > 0) {
+                    const progress = (scrollTop / maxScroll) * 100;
+                    this.headerScrollService.scrollProgress.set(Math.min(100, Math.max(0, progress)));
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "embeddedScrollEffect" }] : []));
+        this.scrollProgress = computed(() => this.headerScrollService.scrollProgress(), ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
+        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.displayMode = signal(DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
+        this.isCompactView = computed(() => this.displayMode() === DisplayModeEnum.COMPACT, ...(ngDevMode ? [{ debugName: "isCompactView" }] : []));
+        this.isSimplifiedView = computed(() => this.displayMode() === DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "isSimplifiedView" }] : []));
+        this.currentSectionTitle = signal('', ...(ngDevMode ? [{ debugName: "currentSectionTitle" }] : []));
+        this.currentSubsectionTitle = signal('', ...(ngDevMode ? [{ debugName: "currentSubsectionTitle" }] : []));
+        this.sectionTitleFading = signal(false, ...(ngDevMode ? [{ debugName: "sectionTitleFading" }] : []));
+        this.subsectionTitleFading = signal(false, ...(ngDevMode ? [{ debugName: "subsectionTitleFading" }] : []));
+        this.selectedSearchIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedSearchIndex" }] : []));
+        this.isViewModeSwitcherOpen = signal(false, ...(ngDevMode ? [{ debugName: "isViewModeSwitcherOpen" }] : []));
+        this.isViewModeSwitching = signal(false, ...(ngDevMode ? [{ debugName: "isViewModeSwitching" }] : []));
+        this.sections = computed(() => {
+            const profile = this.currentProfile();
+            const allSections = profile?.profileStructured?.sections || [];
+            return allSections
+                .filter(section => this.sectionHasContent(section))
+                .sort((a, b) => (a.order || 0) - (b.order || 0));
+        }, ...(ngDevMode ? [{ debugName: "sections" }] : []));
+        this.recommendationItems = computed(() => {
+            const profile = this.currentProfile();
+            return profile?.profileStructured?.recommendations || [];
+        }, ...(ngDevMode ? [{ debugName: "recommendationItems" }] : []));
+        this.nonRecommendationSections = computed(() => {
+            return this.sections().filter(section => section.id !== 'strategic-insights');
+        }, ...(ngDevMode ? [{ debugName: "nonRecommendationSections" }] : []));
+        this.displayModeLabel = computed(() => {
+            const mode = this.displayMode();
+            switch (mode) {
+                case DisplayModeEnum.SIMPLIFIED:
+                    return 'Simplified';
+                case DisplayModeEnum.COMPACT:
+                    return 'Compact';
+                case DisplayModeEnum.EXPANDED:
+                    return 'Expanded';
+                default:
+                    return 'View';
+            }
+        }, ...(ngDevMode ? [{ debugName: "displayModeLabel" }] : []));
+        this.lastSectionTitle = '';
+        this.lastSubsectionTitle = '';
+        this.lastScrollY = 0;
+        this.scrollDirection = 'down';
+        effect(() => {
+            const profile = this.profile();
+            this.currentProfile.set(profile);
+            this.lookupService.setProfile(profile);
+            if (profile) {
+                this.searchService.setProfile(profile);
+            }
+            if (profile?.profileStructured?.sections) {
+                const recommendations = profile.profileStructured?.recommendations;
+                this.profileContextService.indexProfile(profile.profileStructured.sections, recommendations);
+            }
+        });
+        effect(() => {
+            const currentStatus = this.profile()?.selfContentStatus;
+            const prevStatus = this.previousContentStatus();
+            if (prevStatus === AiDynamicContentStatusEnum.GENERATING &&
+                currentStatus === AiDynamicContentStatusEnum.GENERATED) {
+                this.confettiService.trigger({
+                    intensity: 'celebration',
+                    delay: 200,
+                    viewMode: this.viewMode(),
+                });
+            }
+            this.previousContentStatus.set(currentStatus);
+        });
+    }
+    onScroll() {
+        this.headerScrollService.handleScroll(this.embedded());
+        const navState = this.navigationService.getNavigationState()();
+        if (navState.sourceElementId && navState.targetElementId && !navState.isBackButtonVisible) {
+            const currentScrollPosition = window.scrollY;
+            const scrollDifference = Math.abs(currentScrollPosition - navState.targetScrollPosition);
+            if (scrollDifference > 100) {
+                this.navigationService.showBackButton();
+            }
+        }
+    }
+    toggleExpandedView() {
+        const current = this.displayMode();
+        if (current === DisplayModeEnum.COMPACT) {
+            this.displayMode.set(DisplayModeEnum.EXPANDED);
+        }
+        else if (current === DisplayModeEnum.EXPANDED) {
+            this.displayMode.set(DisplayModeEnum.COMPACT);
+        }
+    }
+    openViewModeSwitcher() {
+        this.isViewModeSwitcherOpen.set(true);
+    }
+    closeViewModeSwitcher() {
+        this.isViewModeSwitcherOpen.set(false);
+    }
+    handleDisplayModeChange(mode) {
+        this.isViewModeSwitching.set(true);
+        // Add a small delay to show the spinner
+        setTimeout(() => {
+            this.displayMode.set(mode);
+            this.isViewModeSwitching.set(false);
+            this.closeViewModeSwitcher();
+        }, 500);
+    }
+    handleMarkAsReviewedClick() {
+        this.markAsReviewedClick.emit();
+    }
+    openRecommendationDetailsModal(recommendation) {
+        const itemAdapter = {
+            ...recommendation,
+            type: 'RECOMMENDATION',
+            label: recommendation.title,
+            value: recommendation.description
+        };
+        this.modalService.openItemDetailModal(itemAdapter, this.viewMode(), 'recommendation', 'Strategic Insights', recommendation.title, undefined, this.isSimplifiedView() || this.isCompactView());
+    }
+    getViewModeButtonClasses() {
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
+        if (isDark) {
+            return 'bg-slate-800/60 border border-slate-700/50 text-slate-300 hover:bg-slate-700/60 hover:border-slate-600/50';
+        }
+        return 'bg-white/80 border border-slate-200 text-slate-700 hover:bg-white hover:border-slate-300 shadow-sm';
+    }
+    handleKeyDown(event) {
+        if (!this.searchService.isSearchOpen()) {
+            if (event.key === '/' || (event.metaKey && event.key === 'k') || (event.ctrlKey && event.key === 'k')) {
+                event.preventDefault();
+                this.searchService.openSearch();
+            }
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeSearch();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const results = this.searchService.searchResults();
+            if (results.length > 0) {
+                this.selectedSearchIndex.update(i => (i + 1) % results.length);
+            }
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const results = this.searchService.searchResults();
+            if (results.length > 0) {
+                this.selectedSearchIndex.update(i => (i - 1 + results.length) % results.length);
+            }
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const results = this.searchService.searchResults();
+            if (results.length > 0) {
+                this.onSearchResultSelected(results[this.selectedSearchIndex()]);
+            }
+        }
+    }
+    openSearch() {
+        this.searchService.openSearch();
+    }
+    closeSearch() {
+        this.searchService.closeSearch();
+        this.selectedSearchIndex.set(0);
     }
     onSearchChange(query) {
         this.searchService.setSearchQuery(query);
@@ -68391,888 +68684,404 @@ class SymphiqBusinessAnalysisDashboardComponent {
                     if (this.sectionUpdateTimeout) {
                         clearTimeout(this.sectionUpdateTimeout);
                     }
-                    this.sectionUpdateTimeout = setTimeout(() => {
-                        // Double-check that we should still update (in case scroll changed rapidly)
-                        if (parentSectionTitle !== this.lastSectionTitle) {
-                            this.sectionTitleFading.set(true);
-                            setTimeout(() => {
-                                this.currentSectionTitle.set(parentSectionTitle);
-                                this.lastSectionTitle = parentSectionTitle;
-                                this.sectionTitleFading.set(false);
-                            }, 150);
-                        }
-                    }, 200); // Shorter debounce since we're now using proximity
-                }
-                if (subsectionChanged && this.lastSubsectionTitle !== '') {
-                    if (this.subsectionUpdateTimeout) {
-                        clearTimeout(this.subsectionUpdateTimeout);
-                    }
-                    this.subsectionUpdateTimeout = setTimeout(() => {
-                        // Double-check that we should still update
-                        if (subsectionTitle !== this.lastSubsectionTitle) {
-                            this.subsectionTitleFading.set(true);
-                            setTimeout(() => {
-                                this.currentSubsectionTitle.set(subsectionTitle);
-                                this.lastSubsectionTitle = subsectionTitle;
-                                this.subsectionTitleFading.set(false);
-                            }, 150);
-                        }
-                    }, 200); // Shorter debounce since we're now using proximity
-                }
-            }
-        }, {
-            // Use more granular thresholds for better detection
-            threshold: [0, 0.2, 0.4, 0.6, 0.8, 1],
-            // Focus area starts right after the header
-            rootMargin: '-100px 0px -50% 0px',
-        });
-        // Observe all subsections
-        setTimeout(() => {
-            const subsections = document.querySelectorAll('[data-subsection-id]');
-            subsections.forEach((subsection) => this.subsectionObserver?.observe(subsection));
-        }, 100);
-        // Add event listener for scroll-to-target
-        this.scrollToTargetHandler = (event) => {
-            const customEvent = event;
-            const targetId = customEvent.detail;
-            if (targetId) {
-                // Find the element with matching data-id
-                const targetElement = document.querySelector(`[data-id="${targetId}"]`);
-                if (targetElement) {
-                    // Scroll to the element with offset for header
-                    const yOffset = -120; // Account for sticky header
-                    const y = targetElement.getBoundingClientRect().top + window.pageYOffset + yOffset;
-                    window.scrollTo({ top: y, behavior: 'smooth' });
-                    // Click to expand if collapsed
-                    setTimeout(() => {
-                        targetElement.click();
-                    }, 400);
-                    // Add pulse animation to border
-                    targetElement.classList.add('animate-pulse-border');
-                    setTimeout(() => {
-                        targetElement.classList.remove('animate-pulse-border');
-                    }, 2000);
-                }
-            }
-        };
-        window.addEventListener('scroll-to-target', this.scrollToTargetHandler);
-    }
-    ngOnDestroy() {
-        this.subsectionObserver?.disconnect();
-        if (this.sectionUpdateTimeout) {
-            clearTimeout(this.sectionUpdateTimeout);
-        }
-        if (this.subsectionUpdateTimeout) {
-            clearTimeout(this.subsectionUpdateTimeout);
-        }
-        if (this.scrollToTargetHandler) {
-            window.removeEventListener('scroll-to-target', this.scrollToTargetHandler);
-        }
-        if (this.scrollDirectionHandler) {
-            window.removeEventListener('scroll', this.scrollDirectionHandler);
-        }
-    }
-    getContainerClasses() {
-        const positioning = this.embedded() ? '' : 'relative';
-        return `${positioning} min-h-screen`.trim();
-    }
-    getBackgroundClasses() {
-        const positioning = this.embedded() ? 'absolute' : 'fixed';
-        return `${positioning} inset-0 overflow-hidden pointer-events-none`;
-    }
-    getMeshGradientClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        if (isDark) {
-            return 'absolute inset-0 opacity-30 bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-slate-900';
-        }
-        return 'absolute inset-0 opacity-30 bg-gradient-to-br from-blue-100/50 via-purple-100/50 to-slate-50';
-    }
-    getTopoPatternClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        return isDark ? 'absolute inset-0 opacity-5' : 'absolute inset-0 opacity-5 mix-blend-overlay';
-    }
-    getOrbClasses(index) {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        if (!isDark)
-            return 'hidden';
-        const positions = [
-            'absolute top-0 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl',
-            'absolute top-1/3 right-1/4 w-[32rem] h-[32rem] bg-purple-500/10 rounded-full blur-3xl',
-            'absolute bottom-0 left-1/3 w-[28rem] h-[28rem] bg-blue-400/10 rounded-full blur-3xl'
-        ];
-        return positions[index - 1] || '';
-    }
-    getHeaderClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        return isDark ? 'relative backdrop-blur-sm bg-slate-900/50' : 'relative backdrop-blur-sm bg-white/50';
-    }
-    getMainTitleClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        if (isDark) {
-            return 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
-        }
-        return 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent';
-    }
-    getSubtitleClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        return isDark ? 'text-lg mt-2 text-slate-400' : 'text-lg mt-2 text-slate-600';
-    }
-    getLoadingOverlayClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        if (isDark) {
-            return 'fixed inset-0 z-50 flex items-center justify-center bg-slate-900/80 backdrop-blur-sm';
-        }
-        return 'fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-sm';
-    }
-    getSpinnerClasses() {
-        const isDark = this.viewMode() === ViewModeEnum.DARK;
-        if (isDark) {
-            return 'w-16 h-16 border-4 rounded-full animate-spin border-slate-700 border-t-blue-400';
-        }
-        return 'w-16 h-16 border-4 rounded-full animate-spin border-slate-200 border-t-blue-600';
-    }
-    trackBySectionId(index, section) {
-        return section.id || index;
-    }
-    static { this.ɵfac = function SymphiqBusinessAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqBusinessAnalysisDashboardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqBusinessAnalysisDashboardComponent, selectors: [["symphiq-business-analysis-dashboard"]], hostBindings: function SymphiqBusinessAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("scroll", function SymphiqBusinessAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow)("keydown", function SymphiqBusinessAnalysisDashboardComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyDown($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { embedded: [1, "embedded"], profile: [1, "profile"], parentHeaderOffset: [1, "parentHeaderOffset"], requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], itemStatus: [1, "itemStatus"], isMarkingAsReviewed: [1, "isMarkingAsReviewed"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", markAsReviewedClick: "markAsReviewedClick" }, decls: 36, vars: 64, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [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, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-2"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[60vh]"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [3, "markAsReviewedClick", "viewMode", "reviewStatus", "selfContentStatus", "isMarkingAsReviewed"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "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", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["size", "large", 3, "viewMode"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "itemStatus", "currentStatus", "confettiIntensity", "title", "subtitle"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div");
-            i0.ɵɵelement(2, "div", 1);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(3, "div", 2);
-            i0.ɵɵelementStart(4, "div", 3)(5, "header", 4)(6, "div", 5)(7, "div", 6)(8, "div", 7)(9, "div")(10, "h1", 0);
-            i0.ɵɵtext(11);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "p", 0);
-            i0.ɵɵtext(13, " Business Profile & Analysis ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(14, SymphiqBusinessAnalysisDashboardComponent_Conditional_14_Template, 8, 3, "div", 8);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(15, "div", 5)(16, "div", 9)(17, "div", 7)(18, "div", 10)(19, "h1", 0);
-            i0.ɵɵtext(20);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "div", 11);
-            i0.ɵɵconditionalCreate(22, SymphiqBusinessAnalysisDashboardComponent_Conditional_22_Template, 4, 7, "div", 12);
-            i0.ɵɵconditionalCreate(23, SymphiqBusinessAnalysisDashboardComponent_Conditional_23_Template, 5, 3);
-            i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(24, "main", 13);
-            i0.ɵɵconditionalCreate(25, SymphiqBusinessAnalysisDashboardComponent_Conditional_25_Template, 2, 1, "div", 14)(26, SymphiqBusinessAnalysisDashboardComponent_Conditional_26_Template, 2, 7)(27, SymphiqBusinessAnalysisDashboardComponent_Conditional_27_Template, 2, 1);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(28, SymphiqBusinessAnalysisDashboardComponent_Conditional_28_Template, 1, 4, "symphiq-section-navigation", 15);
-            i0.ɵɵconditionalCreate(29, SymphiqBusinessAnalysisDashboardComponent_Conditional_29_Template, 1, 4, "symphiq-floating-toc", 15);
-            i0.ɵɵelement(30, "symphiq-floating-back-button", 16);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(31, "symphiq-tooltip-container");
-            i0.ɵɵelementStart(32, "symphiq-business-analysis-modal", 17);
-            i0.ɵɵlistener("viewInContextRequested", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_business_analysis_modal_viewInContextRequested_32_listener($event) { return ctx.handleViewInContext($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(33, "symphiq-search-modal", 18);
-            i0.ɵɵlistener("searchChange", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_search_modal_searchChange_33_listener($event) { return ctx.onSearchChange($event); })("resultSelected", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_search_modal_resultSelected_33_listener($event) { return ctx.onSearchResultSelected($event); })("close", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_search_modal_close_33_listener() { return ctx.closeSearch(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "symphiq-view-mode-switcher-modal", 19);
-            i0.ɵɵlistener("close", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_view_mode_switcher_modal_close_34_listener() { return ctx.closeViewModeSwitcher(); })("modeSelected", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_view_mode_switcher_modal_modeSelected_34_listener($event) { return ctx.handleDisplayModeChange($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(35, "symphiq-mark-as-reviewed-footer", 20);
-            i0.ɵɵlistener("markAsReviewedClick", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_mark_as_reviewed_footer_markAsReviewedClick_35_listener() { return ctx.handleMarkAsReviewedClick(); });
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            let tmp_13_0;
-            let tmp_15_0;
-            let tmp_23_0;
-            let tmp_25_0;
-            let tmp_45_0;
-            let tmp_46_0;
-            i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵclassMap(ctx.embedded() ? "sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30" : "fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30");
-            i0.ɵɵadvance();
-            i0.ɵɵstyleProp("width", ctx.scrollProgress(), "%");
-            i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "bg-gradient-to-r from-blue-500 to-purple-500" : "bg-gradient-to-r from-blue-400 to-purple-400");
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("light-mode", ctx.isLightMode());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("max-h-0", ctx.headerScrollService.isScrolled())("opacity-0", ctx.headerScrollService.isScrolled())("max-h-96", !ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", ctx.headerScrollService.isScrolled())("pointer-events-auto", !ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ((tmp_13_0 = ctx.currentProfile()) == null ? null : tmp_13_0.profileStructured == null ? null : tmp_13_0.profileStructured.businessName) || "Business Analysis", " ");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(((tmp_15_0 = ctx.profile()) == null ? null : tmp_15_0.selfContentStatus) === ctx.AiDynamicContentStatusEnum.GENERATED ? 14 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("max-h-0", !ctx.headerScrollService.isScrolled())("opacity-0", !ctx.headerScrollService.isScrolled())("max-h-20", ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("pointer-events-none", !ctx.headerScrollService.isScrolled())("pointer-events-auto", ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate" : "text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate");
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ((tmp_23_0 = ctx.currentProfile()) == null ? null : tmp_23_0.profileStructured == null ? null : tmp_23_0.profileStructured.businessName) || "Business Analysis", " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.isSimplifiedView() ? 22 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(((tmp_25_0 = ctx.profile()) == null ? null : tmp_25_0.selfContentStatus) === ctx.AiDynamicContentStatusEnum.GENERATED ? 23 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("pb-32", ctx.shouldShowReviewFooter());
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading() ? 25 : ctx.isContentGenerating() ? 26 : 27);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(!ctx.isSimplifiedView() ? 28 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isSimplifiedView() ? 29 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("viewMode", ctx.viewMode())("embedded", ctx.embedded());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("isLightMode", ctx.isLightMode());
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("isLightMode", ctx.isLightMode())("isOpen", ctx.searchService.isSearchOpen())("searchQuery", ctx.searchService.getSearchQuery())("results", ctx.searchService.searchResults())("hasResults", ctx.searchService.hasResults())("selectedIndex", ctx.selectedSearchIndex())("placeholder", "Search sections, items, and analysis...");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("isOpen", ctx.isViewModeSwitcherOpen())("currentMode", ctx.displayMode())("viewMode", ctx.viewMode())("isLoading", ctx.isViewModeSwitching());
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("viewMode", ctx.viewMode())("reviewStatus", (tmp_45_0 = ctx.profile()) == null ? null : tmp_45_0.reviewStatus)("selfContentStatus", (tmp_46_0 = ctx.profile()) == null ? null : tmp_46_0.selfContentStatus)("isMarkingAsReviewed", ctx.isMarkingAsReviewed());
-        } }, dependencies: [CommonModule, i1$1.NgClass, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressWithConfettiComponent, IndeterminateSpinnerComponent, MarkAsReviewedFooterComponent], styles: ["[_nghost-%COMP%]{display:block}@keyframes _ngcontent-%COMP%_spin{to{transform:rotate(360deg)}}@keyframes _ngcontent-%COMP%_pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #3b82f6b3}50%{transform:scale(1.02);box-shadow:0 0 20px 8px #3b82f64d}}[_nghost-%COMP%]     .search-highlight-pulse{animation:_ngcontent-%COMP%_pulse-highlight 2s ease-in-out;border-color:#3b82f6!important}"], changeDetection: 0 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqBusinessAnalysisDashboardComponent, [{
-        type: Component,
-        args: [{ selector: 'symphiq-business-analysis-dashboard', standalone: true, imports: [CommonModule, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchButtonComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressWithConfettiComponent, IndeterminateSpinnerComponent, MarkAsReviewedFooterComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="getContainerClasses()">
-      <!-- Scroll Progress Bar (fixed at top) -->
-      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-          [style.width.%]="scrollProgress()"
-          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-          class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-      
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
-      
-      <div class="relative z-[51]">
-        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
-          <!-- Expanded Header (default state) -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="headerScrollService.isScrolled()"
-            [class.opacity-0]="headerScrollService.isScrolled()"
-            [class.max-h-96]="!headerScrollService.isScrolled()"
-            [class.opacity-100]="!headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-              [class.pointer-events-none]="headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h1 [ngClass]="getMainTitleClasses()">
-                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Business Profile & Analysis
-                  </p>
-                </div>
-                @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
-                  <div class="flex items-center gap-2">
-                    <symphiq-search-button
-                      [isLightMode]="isLightMode()"
-                      (searchClick)="openSearch()"
-                    />
-                    <button
-                      type="button"
-                      (click)="openViewModeSwitcher()"
-                      [ngClass]="getViewModeButtonClasses()"
-                      class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                      </svg>
-                      <span>{{ displayModeLabel() }}</span>
-                    </button>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header (scrolled state) -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="!headerScrollService.isScrolled()"
-            [class.opacity-0]="!headerScrollService.isScrolled()"
-            [class.max-h-20]="headerScrollService.isScrolled()"
-            [class.opacity-100]="headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-              [class.pointer-events-none]="!headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div class="flex-1 min-w-0 mr-4">
-                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
-                    {{ currentProfile()?.profileStructured?.businessName || 'Business Analysis' }}
-                  </h1>
-                </div>
-                <div class="flex items-center gap-4">
-                  @if (!isSimplifiedView()) {
-                    <div class="flex items-center gap-2 text-sm flex-shrink-0">
-                      <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'" class="transition-opacity duration-300" [class.opacity-0]="sectionTitleFading()" [class.opacity-100]="!sectionTitleFading()">
-                        {{ currentSectionTitle() }}
-                      </span>
-                      @if (currentSubsectionTitle()) {
-                        <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">›</span>
-                        <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'" class="transition-opacity duration-300" [class.opacity-0]="subsectionTitleFading()" [class.opacity-100]="!subsectionTitleFading()">
-                          {{ currentSubsectionTitle() }}
-                        </span>
-                      }
-                    </div>
-                  }
-                  @if (profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED) {
-                    <symphiq-search-button
-                      [isLightMode]="isLightMode()"
-                      [minimized]="true"
-                      (searchClick)="openSearch()"
-                    />
-                    <button
-                      type="button"
-                      (click)="openViewModeSwitcher()"
-                      [ngClass]="getViewModeButtonClasses()"
-                      class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                      </svg>
-                    </button>
-                  }
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <main class="relative" [class.pb-32]="shouldShowReviewFooter()">
-          @if (isLoading()) {
-            <!-- Pure Loading State -->
-            <div class="flex items-center justify-center min-h-[60vh]">
-              <symphiq-indeterminate-spinner
-                [viewMode]="viewMode()"
-                size="large"
-              />
-            </div>
-          } @else if (isContentGenerating()) {
-            <!-- Journey Progress Banner (always show when not onboarded) -->
-            @if (!isOnboarded()) {
-              <symphiq-journey-progress-indicator
-                [viewMode]="viewMode()"
-                [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
-                [showNextStepAction]="false"
-                [forDemo]="forDemo()"
-                [maxAccessibleStepId]="maxAccessibleStepId()"
-                (stepClick)="stepClick.emit($event)"
-                (nextStepClick)="nextStepClick.emit()"
-              />
-            }
-
-            <!-- Content Generation Progress Component -->
-            <symphiq-content-generation-progress-with-confetti
-              [viewMode]="viewMode()"
-              [itemStatus]="itemStatus()"
-              [currentStatus]="profile()?.selfContentStatus"
-              [confettiIntensity]="'celebration'"
-              [title]="'We are generating a new Business Analysis for ' + (currentProfile()?.profileStructured?.businessName || 'your business') + '.'"
-              [subtitle]="'It will appear here when ready. You can check back later as this will take a few minutes to complete.'"
-            />
-          } @else {
-            @if (isSimplifiedView()) {
-              <!-- Journey Progress Banner - Full Width Sticky (only show when not onboarded) -->
-              @if (!isOnboarded()) {
-                <symphiq-journey-progress-indicator
-                  [viewMode]="viewMode()"
-                  [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
-                  [showNextStepAction]="showNextStepAction()"
-                  [forDemo]="forDemo()"
-                  [maxAccessibleStepId]="maxAccessibleStepId()"
-                  (stepClick)="stepClick.emit($event)"
-                  (nextStepClick)="nextStepClick.emit()"
-                />
-              }
-
-              <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-                <div class="mb-8">
-                  <symphiq-welcome-banner
-                    [viewMode]="viewMode()"
-                    [businessName]="currentProfile()?.profileStructured?.businessName || 'your business'"
-                    [isOnboarded]="isOnboarded()"
-                  />
-                </div>
-
-                <div class="mb-8">
-                  <symphiq-recommendations-tiled-grid
-                    [recommendations]="recommendationItems()"
-                    [viewMode]="viewMode()"
-                    (viewMoreClick)="openRecommendationDetailsModal($event)"
-                  />
-                </div>
-
-                <div>
-                  <symphiq-collapsible-section-group
-                    [sections]="nonRecommendationSections()"
-                    [viewMode]="viewMode()"
-                  />
-                </div>
-              </div>
-            } @else {
-              @for (section of sections(); track trackBySectionId($index, section); let idx = $index; let last = $last) {
-                <symphiq-profile-section
-                  [section]="section"
-                  [viewMode]="viewMode()"
-                  [forceExpanded]="!isCompactView()"
-                />
-                @if (!last) {
-                  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                    <symphiq-section-divider
-                      [viewMode]="viewMode()"
-                      [subsections]="sections()[idx + 1].subsections || []" />
-                  </div>
-                }
-              }
-            }
-          }
-        </main>
-
-        @if (!isSimplifiedView()) {
-          <symphiq-section-navigation
-            [sections]="sections()"
-            [viewMode]="viewMode()"
-            [embedded]="embedded()"
-            [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        @if (!isSimplifiedView()) {
-          <symphiq-floating-toc
-            [sections]="sections()"
-            [viewMode]="viewMode()"
-            [embedded]="embedded()"
-            [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        <symphiq-floating-back-button
-          [viewMode]="viewMode()"
-          [embedded]="embedded()"
-        />
-      </div>
-
-      <symphiq-tooltip-container />
-      <symphiq-business-analysis-modal
-        [isLightMode]="isLightMode()"
-        (viewInContextRequested)="handleViewInContext($event)" />
-
-      <symphiq-search-modal
-        [isLightMode]="isLightMode()"
-        [isOpen]="searchService.isSearchOpen()"
-        [searchQuery]="searchService.getSearchQuery()"
-        [results]="searchService.searchResults()"
-        [hasResults]="searchService.hasResults()"
-        [selectedIndex]="selectedSearchIndex()"
-        [placeholder]="'Search sections, items, and analysis...'"
-        (searchChange)="onSearchChange($event)"
-        (resultSelected)="onSearchResultSelected($event)"
-        (close)="closeSearch()"
-      />
-
-      <symphiq-view-mode-switcher-modal
-        [isOpen]="isViewModeSwitcherOpen()"
-        [currentMode]="displayMode()"
-        [viewMode]="viewMode()"
-        [isLoading]="isViewModeSwitching()"
-        (close)="closeViewModeSwitcher()"
-        (modeSelected)="handleDisplayModeChange($event)"
-      />
-
-      <!-- Mark as Reviewed Sticky Footer -->
-      <symphiq-mark-as-reviewed-footer
-        [viewMode]="viewMode()"
-        [reviewStatus]="profile()?.reviewStatus"
-        [selfContentStatus]="profile()?.selfContentStatus"
-        [isMarkingAsReviewed]="isMarkingAsReviewed()"
-        (markAsReviewedClick)="handleMarkAsReviewedClick()"
-      />
-    </div>
-  `, styles: [":host{display:block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #3b82f6b3}50%{transform:scale(1.02);box-shadow:0 0 20px 8px #3b82f64d}}:host ::ng-deep .search-highlight-pulse{animation:pulse-highlight 2s ease-in-out;border-color:#3b82f6!important}\n"] }]
-    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], isMarkingAsReviewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMarkingAsReviewed", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], markAsReviewedClick: [{ type: i0.Output, args: ["markAsReviewedClick"] }], onScroll: [{
-            type: HostListener,
-            args: ['window:scroll', ['$event']]
-        }], handleKeyDown: [{
-            type: HostListener,
-            args: ['document:keydown', ['$event']]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 351 }); })();
-
-function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 6);
-} }
-function DashboardHeaderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 7)(1, "symphiq-search-button", 15);
-    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_11_Template_symphiq_search_button_searchClick_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 16);
-    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_11_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 17);
-    i0.ɵɵelement(4, "path", 18)(5, "path", 19);
-    i0.ɵɵelementEnd();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(6, "span");
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.viewModeLabel());
-} }
-function DashboardHeaderComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
-    i0.ɵɵtext(2, "Generated At");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 22);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formattedGeneratedDate());
-} }
-function DashboardHeaderComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
-    i0.ɵɵtext(2, "Requested by");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 22);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    let tmp_4_0;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.firstName, " ", (tmp_4_0 = ctx_r1.requestedByUser()) == null ? null : tmp_4_0.lastName);
-} }
-function DashboardHeaderComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵconditionalCreate(1, DashboardHeaderComponent_Conditional_12_Conditional_1_Template, 5, 5, "div", 20);
-    i0.ɵɵconditionalCreate(2, DashboardHeaderComponent_Conditional_12_Conditional_2_Template, 5, 6, "div", 20);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.formattedGeneratedDate() ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.requestedByUser() ? 2 : -1);
-} }
-function DashboardHeaderComponent_Conditional_20_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 5);
-    i0.ɵɵtext(1, "\u203A");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 5);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-400" : "text-slate-500");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-500" : "text-slate-500");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSubsection(), " ");
-} }
-function DashboardHeaderComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "span", 5);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_20_Conditional_3_Template, 4, 3);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-600 font-medium" : "text-slate-400 font-medium");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSection(), " ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.currentSubsection() ? 3 : -1);
-} }
-function DashboardHeaderComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-search-button", 23);
-    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_21_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "button", 24);
-    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_21_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 17);
-    i0.ɵɵelement(3, "path", 18)(4, "path", 19);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode())("minimized", true);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
-} }
-class DashboardHeaderComponent {
-    constructor() {
-        this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
-        this.createdDate = input(...(ngDevMode ? [undefined, { debugName: "createdDate" }] : []));
-        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-        this.subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
-        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
-        this.viewModeLabel = input('View Mode', ...(ngDevMode ? [{ debugName: "viewModeLabel" }] : []));
-        this.currentSection = input(...(ngDevMode ? [undefined, { debugName: "currentSection" }] : []));
-        this.currentSubsection = input(...(ngDevMode ? [undefined, { debugName: "currentSubsection" }] : []));
-        this.isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
-        this.showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
-        this.searchClick = output();
-        this.viewModeClick = output();
-        this.headerScrollService = inject(HeaderScrollService);
-        this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
-        this.dateFormatCache = new StringMemoizeCache();
-        this.formattedGeneratedDate = computed(() => {
-            let formatted = '';
-            const createdDate = this.createdDate();
-            if (createdDate) {
-                formatted = this.formatDate(createdDate.toISOString());
+                    this.sectionUpdateTimeout = setTimeout(() => {
+                        // Double-check that we should still update (in case scroll changed rapidly)
+                        if (parentSectionTitle !== this.lastSectionTitle) {
+                            this.sectionTitleFading.set(true);
+                            setTimeout(() => {
+                                this.currentSectionTitle.set(parentSectionTitle);
+                                this.lastSectionTitle = parentSectionTitle;
+                                this.sectionTitleFading.set(false);
+                            }, 150);
+                        }
+                    }, 200); // Shorter debounce since we're now using proximity
+                }
+                if (subsectionChanged && this.lastSubsectionTitle !== '') {
+                    if (this.subsectionUpdateTimeout) {
+                        clearTimeout(this.subsectionUpdateTimeout);
+                    }
+                    this.subsectionUpdateTimeout = setTimeout(() => {
+                        // Double-check that we should still update
+                        if (subsectionTitle !== this.lastSubsectionTitle) {
+                            this.subsectionTitleFading.set(true);
+                            setTimeout(() => {
+                                this.currentSubsectionTitle.set(subsectionTitle);
+                                this.lastSubsectionTitle = subsectionTitle;
+                                this.subsectionTitleFading.set(false);
+                            }, 150);
+                        }
+                    }, 200); // Shorter debounce since we're now using proximity
+                }
             }
-            return formatted;
-        }, ...(ngDevMode ? [{ debugName: "formattedGeneratedDate" }] : []));
-        this.headerTitleClass = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : []));
-        this.metaLabelClass = computed(() => this.isLightMode() ? 'text-slate-600' : 'text-slate-500', ...(ngDevMode ? [{ debugName: "metaLabelClass" }] : []));
+        }, {
+            // Use more granular thresholds for better detection
+            threshold: [0, 0.2, 0.4, 0.6, 0.8, 1],
+            // Focus area starts right after the header
+            rootMargin: '-100px 0px -50% 0px',
+        });
+        // Observe all subsections
+        setTimeout(() => {
+            const subsections = document.querySelectorAll('[data-subsection-id]');
+            subsections.forEach((subsection) => this.subsectionObserver?.observe(subsection));
+        }, 100);
+        // Add event listener for scroll-to-target
+        this.scrollToTargetHandler = (event) => {
+            const customEvent = event;
+            const targetId = customEvent.detail;
+            if (targetId) {
+                // Find the element with matching data-id
+                const targetElement = document.querySelector(`[data-id="${targetId}"]`);
+                if (targetElement) {
+                    // Scroll to the element with offset for header
+                    const yOffset = -120; // Account for sticky header
+                    const y = targetElement.getBoundingClientRect().top + window.pageYOffset + yOffset;
+                    window.scrollTo({ top: y, behavior: 'smooth' });
+                    // Click to expand if collapsed
+                    setTimeout(() => {
+                        targetElement.click();
+                    }, 400);
+                    // Add pulse animation to border
+                    targetElement.classList.add('animate-pulse-border');
+                    setTimeout(() => {
+                        targetElement.classList.remove('animate-pulse-border');
+                    }, 2000);
+                }
+            }
+        };
+        window.addEventListener('scroll-to-target', this.scrollToTargetHandler);
     }
-    onSearchClick() {
-        this.searchClick.emit();
+    ngOnDestroy() {
+        this.subsectionObserver?.disconnect();
+        if (this.sectionUpdateTimeout) {
+            clearTimeout(this.sectionUpdateTimeout);
+        }
+        if (this.subsectionUpdateTimeout) {
+            clearTimeout(this.subsectionUpdateTimeout);
+        }
+        if (this.scrollToTargetHandler) {
+            window.removeEventListener('scroll-to-target', this.scrollToTargetHandler);
+        }
+        if (this.scrollDirectionHandler) {
+            window.removeEventListener('scroll', this.scrollDirectionHandler);
+        }
     }
-    onViewModeClick() {
-        this.viewModeClick.emit();
+    getContainerClasses() {
+        const positioning = this.embedded() ? '' : 'relative';
+        return `${positioning} min-h-screen`.trim();
     }
-    formatDate(dateString) {
-        // Cache date formatting operations
-        return this.dateFormatCache.get(dateString, (date) => new Date(date).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-        }));
+    getBackgroundClasses() {
+        const positioning = this.embedded() ? 'absolute' : 'fixed';
+        return `${positioning} inset-0 overflow-hidden pointer-events-none`;
+    }
+    getMeshGradientClasses() {
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
+        if (isDark) {
+            return 'absolute inset-0 opacity-30 bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-slate-900';
+        }
+        return 'absolute inset-0 opacity-30 bg-gradient-to-br from-blue-100/50 via-purple-100/50 to-slate-50';
+    }
+    getTopoPatternClasses() {
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
+        return isDark ? 'absolute inset-0 opacity-5' : 'absolute inset-0 opacity-5 mix-blend-overlay';
+    }
+    getOrbClasses(index) {
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
+        if (!isDark)
+            return 'hidden';
+        const positions = [
+            'absolute top-0 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl',
+            'absolute top-1/3 right-1/4 w-[32rem] h-[32rem] bg-purple-500/10 rounded-full blur-3xl',
+            'absolute bottom-0 left-1/3 w-[28rem] h-[28rem] bg-blue-400/10 rounded-full blur-3xl'
+        ];
+        return positions[index - 1] || '';
     }
     getHeaderClasses() {
-        return this.isLightMode()
-            ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200'
-            : 'bg-slate-900/95 backdrop-blur-md shadow-sm border-b border-slate-800';
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
+        return isDark ? 'relative backdrop-blur-sm bg-slate-900/50' : 'relative backdrop-blur-sm bg-white/50';
     }
     getMainTitleClasses() {
-        return this.isLightMode()
-            ? 'text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'
-            : 'text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
+        if (isDark) {
+            return 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent';
+        }
+        return 'text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent';
     }
     getSubtitleClasses() {
-        return this.isLightMode()
-            ? 'text-slate-600 mt-1 text-sm'
-            : 'text-slate-400 mt-1 text-sm';
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
+        return isDark ? 'text-lg mt-2 text-slate-400' : 'text-lg mt-2 text-slate-600';
     }
-    getCondensedTitleClasses() {
-        return this.isLightMode()
-            ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate'
-            : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate';
+    getLoadingOverlayClasses() {
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
+        if (isDark) {
+            return 'fixed inset-0 z-50 flex items-center justify-center bg-slate-900/80 backdrop-blur-sm';
+        }
+        return 'fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-sm';
     }
-    getViewModeButtonClasses() {
-        return this.isLightMode()
-            ? 'bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200'
-            : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
+    getSpinnerClasses() {
+        const isDark = this.viewMode() === ViewModeEnum.DARK;
+        if (isDark) {
+            return 'w-16 h-16 border-4 rounded-full animate-spin border-slate-700 border-t-blue-400';
+        }
+        return 'w-16 h-16 border-4 rounded-full animate-spin border-slate-200 border-t-blue-600';
     }
-    static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], isLoading: [1, "isLoading"], showControls: [1, "showControls"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 22, vars: 26, consts: [[1, "sticky", "top-0", "z-50", "overflow-hidden", 2, "transition", "height 300ms ease-in-out", 3, "ngClass"], [1, "transition-opacity", "duration-300", "ease-in-out", "h-full"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4", "h-full", "flex", "items-center"], [1, "flex", "items-center", "justify-between", "w-full"], [1, "flex", "items-center", "gap-3"], [3, "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "items-center", "gap-2"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "absolute", "inset-x-0", "top-0", "transition-opacity", "duration-300", "ease-in-out"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3.5"], [1, "flex", "items-center", "justify-between"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "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", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "div", 4)(6, "h1", 5);
-            i0.ɵɵtext(7);
+    trackBySectionId(index, section) {
+        return section.id || index;
+    }
+    static { this.ɵfac = function SymphiqBusinessAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqBusinessAnalysisDashboardComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqBusinessAnalysisDashboardComponent, selectors: [["symphiq-business-analysis-dashboard"]], hostBindings: function SymphiqBusinessAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("scroll", function SymphiqBusinessAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow)("keydown", function SymphiqBusinessAnalysisDashboardComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyDown($event); }, i0.ɵɵresolveDocument);
+        } }, inputs: { embedded: [1, "embedded"], profile: [1, "profile"], parentHeaderOffset: [1, "parentHeaderOffset"], requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], itemStatus: [1, "itemStatus"], isMarkingAsReviewed: [1, "isMarkingAsReviewed"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", markAsReviewedClick: "markAsReviewedClick" }, decls: 18, vars: 40, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [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, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "viewMode", "viewModeLabel", "currentSection", "currentSubsection", "sectionFading", "subsectionFading", "showControls"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[60vh]"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [3, "markAsReviewedClick", "viewMode", "reviewStatus", "selfContentStatus", "isMarkingAsReviewed"], ["size", "large", 3, "viewMode"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "itemStatus", "currentStatus", "confettiIntensity", "title", "subtitle"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div");
+            i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(8, DashboardHeaderComponent_Conditional_8_Template, 1, 0, "div", 6);
+            i0.ɵɵelement(3, "div", 2);
+            i0.ɵɵelementStart(4, "div", 3)(5, "symphiq-dashboard-header", 4);
+            i0.ɵɵlistener("searchClick", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_dashboard_header_searchClick_5_listener() { return ctx.openSearch(); })("viewModeClick", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_dashboard_header_viewModeClick_5_listener() { return ctx.openViewModeSwitcher(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "p", 5);
-            i0.ɵɵtext(10);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(11, DashboardHeaderComponent_Conditional_11_Template, 8, 3, "div", 7);
-            i0.ɵɵconditionalCreate(12, DashboardHeaderComponent_Conditional_12_Template, 3, 2, "div", 8);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(13, "div", 9)(14, "div", 10)(15, "div", 11)(16, "div", 12)(17, "h1", 5);
-            i0.ɵɵtext(18);
+            i0.ɵɵelementStart(6, "main", 5);
+            i0.ɵɵconditionalCreate(7, SymphiqBusinessAnalysisDashboardComponent_Conditional_7_Template, 2, 1, "div", 6)(8, SymphiqBusinessAnalysisDashboardComponent_Conditional_8_Template, 2, 7)(9, SymphiqBusinessAnalysisDashboardComponent_Conditional_9_Template, 2, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(10, SymphiqBusinessAnalysisDashboardComponent_Conditional_10_Template, 1, 4, "symphiq-section-navigation", 7);
+            i0.ɵɵconditionalCreate(11, SymphiqBusinessAnalysisDashboardComponent_Conditional_11_Template, 1, 4, "symphiq-floating-toc", 7);
+            i0.ɵɵelement(12, "symphiq-floating-back-button", 8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(13, "symphiq-tooltip-container");
+            i0.ɵɵelementStart(14, "symphiq-business-analysis-modal", 9);
+            i0.ɵɵlistener("viewInContextRequested", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_business_analysis_modal_viewInContextRequested_14_listener($event) { return ctx.handleViewInContext($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "symphiq-search-modal", 10);
+            i0.ɵɵlistener("searchChange", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_search_modal_searchChange_15_listener($event) { return ctx.onSearchChange($event); })("resultSelected", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_search_modal_resultSelected_15_listener($event) { return ctx.onSearchResultSelected($event); })("close", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_search_modal_close_15_listener() { return ctx.closeSearch(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "symphiq-view-mode-switcher-modal", 11);
+            i0.ɵɵlistener("close", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_view_mode_switcher_modal_close_16_listener() { return ctx.closeViewModeSwitcher(); })("modeSelected", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_view_mode_switcher_modal_modeSelected_16_listener($event) { return ctx.handleDisplayModeChange($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "symphiq-mark-as-reviewed-footer", 12);
+            i0.ɵɵlistener("markAsReviewedClick", function SymphiqBusinessAnalysisDashboardComponent_Template_symphiq_mark_as_reviewed_footer_markAsReviewedClick_17_listener() { return ctx.handleMarkAsReviewedClick(); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(19, "div", 13);
-            i0.ɵɵconditionalCreate(20, DashboardHeaderComponent_Conditional_20_Template, 4, 3, "div", 14);
-            i0.ɵɵconditionalCreate(21, DashboardHeaderComponent_Conditional_21_Template, 5, 3);
-            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
-            i0.ɵɵstyleProp("height", ctx.headerScrollService.isScrolled() ? "52px" : "100px");
-            i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("opacity-0", ctx.headerScrollService.isScrolled())("pointer-events-none", ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
+            let tmp_5_0;
+            let tmp_13_0;
+            let tmp_33_0;
+            let tmp_34_0;
+            i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading() ? 8 : -1);
+            i0.ɵɵclassMap(ctx.embedded() ? "sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30" : "fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
+            i0.ɵɵstyleProp("width", ctx.scrollProgress(), "%");
+            i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "bg-gradient-to-r from-blue-500 to-purple-500" : "bg-gradient-to-r from-blue-400 to-purple-400");
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.subtitle(), " ");
+            i0.ɵɵclassProp("light-mode", ctx.isLightMode());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("title", ((tmp_5_0 = ctx.currentProfile()) == null ? null : tmp_5_0.profileStructured == null ? null : tmp_5_0.profileStructured.businessName) || "Business Analysis")("subtitle", "Business Profile & Analysis")("viewMode", ctx.viewMode())("viewModeLabel", ctx.displayModeLabel())("currentSection", ctx.isSimplifiedView() ? undefined : ctx.currentSectionTitle())("currentSubsection", ctx.isSimplifiedView() ? undefined : ctx.currentSubsectionTitle())("sectionFading", ctx.sectionTitleFading())("subsectionFading", ctx.subsectionTitleFading())("showControls", ((tmp_13_0 = ctx.profile()) == null ? null : tmp_13_0.selfContentStatus) === ctx.AiDynamicContentStatusEnum.GENERATED);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showControls() ? 11 : -1);
+            i0.ɵɵclassProp("pb-32", ctx.shouldShowReviewFooter());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.formattedGeneratedDate() || ctx.requestedByUser() ? 12 : -1);
+            i0.ɵɵconditional(ctx.isLoading() ? 7 : ctx.isContentGenerating() ? 8 : 9);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(!ctx.isSimplifiedView() ? 10 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("opacity-0", !ctx.headerScrollService.isScrolled())("pointer-events-none", !ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", ctx.getCondensedTitleClasses());
+            i0.ɵɵconditional(!ctx.isSimplifiedView() ? 11 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("embedded", ctx.embedded());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.currentSection() ? 20 : -1);
+            i0.ɵɵproperty("isLightMode", ctx.isLightMode());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showControls() ? 21 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass, SearchButtonComponent], encapsulation: 2, changeDetection: 0 }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardHeaderComponent, [{
-        type: Component,
-        args: [{
-                selector: 'symphiq-dashboard-header',
-                standalone: true,
-                imports: [CommonModule, SearchButtonComponent],
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50 overflow-hidden" [style.height]="headerScrollService.isScrolled() ? '52px' : '100px'" style="transition: height 300ms ease-in-out;">
-        <!-- Expanded Header (default state) -->
-        <div
-          class="transition-opacity duration-300 ease-in-out h-full"
-          [class.opacity-0]="headerScrollService.isScrolled()"
-          [class.pointer-events-none]="headerScrollService.isScrolled()"
-          [class.opacity-100]="!headerScrollService.isScrolled()">
-          <div
-            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 h-full flex items-center">
-          <div class="flex items-center justify-between w-full">
-            <div>
-              <div class="flex items-center gap-3">
-                <h1 [ngClass]="getMainTitleClasses()">
-                  {{ title() }}
-                </h1>
-                @if (isLoading()) {
-                  <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>
-              <p [ngClass]="getSubtitleClasses()">
-                {{ subtitle() }}
-              </p>
+            i0.ɵɵproperty("isLightMode", ctx.isLightMode())("isOpen", ctx.searchService.isSearchOpen())("searchQuery", ctx.searchService.getSearchQuery())("results", ctx.searchService.searchResults())("hasResults", ctx.searchService.hasResults())("selectedIndex", ctx.selectedSearchIndex())("placeholder", "Search sections, items, and analysis...");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("isOpen", ctx.isViewModeSwitcherOpen())("currentMode", ctx.displayMode())("viewMode", ctx.viewMode())("isLoading", ctx.isViewModeSwitching());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("reviewStatus", (tmp_33_0 = ctx.profile()) == null ? null : tmp_33_0.reviewStatus)("selfContentStatus", (tmp_34_0 = ctx.profile()) == null ? null : tmp_34_0.selfContentStatus)("isMarkingAsReviewed", ctx.isMarkingAsReviewed());
+        } }, dependencies: [CommonModule, i1$1.NgClass, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressWithConfettiComponent, IndeterminateSpinnerComponent, MarkAsReviewedFooterComponent, DashboardHeaderComponent], styles: ["[_nghost-%COMP%]{display:block}@keyframes _ngcontent-%COMP%_spin{to{transform:rotate(360deg)}}@keyframes _ngcontent-%COMP%_pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #3b82f6b3}50%{transform:scale(1.02);box-shadow:0 0 20px 8px #3b82f64d}}[_nghost-%COMP%]     .search-highlight-pulse{animation:_ngcontent-%COMP%_pulse-highlight 2s ease-in-out;border-color:#3b82f6!important}"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqBusinessAnalysisDashboardComponent, [{
+        type: Component,
+        args: [{ selector: 'symphiq-business-analysis-dashboard', standalone: true, imports: [CommonModule, ProfileSectionComponent, SectionNavigationComponent, FloatingTocComponent, FloatingBackButtonComponent, TooltipContainerComponent, SectionDividerComponent, BusinessAnalysisModalComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, WelcomeBannerComponent, RecommendationsTiledGridComponent, CollapsibleSectionGroupComponent, ContentGenerationProgressWithConfettiComponent, IndeterminateSpinnerComponent, MarkAsReviewedFooterComponent, DashboardHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="getContainerClasses()">
+      <!-- Scroll Progress Bar (fixed at top) -->
+      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+          [style.width.%]="scrollProgress()"
+          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+          class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+      
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+      
+      <div class="relative z-[51]">
+        <symphiq-dashboard-header
+          [title]="currentProfile()?.profileStructured?.businessName || 'Business Analysis'"
+          [subtitle]="'Business Profile & Analysis'"
+          [viewMode]="viewMode()"
+          [viewModeLabel]="displayModeLabel()"
+          [currentSection]="isSimplifiedView() ? undefined : currentSectionTitle()"
+          [currentSubsection]="isSimplifiedView() ? undefined : currentSubsectionTitle()"
+          [sectionFading]="sectionTitleFading()"
+          [subsectionFading]="subsectionTitleFading()"
+          [showControls]="profile()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED"
+          (searchClick)="openSearch()"
+          (viewModeClick)="openViewModeSwitcher()"
+        />
+
+        <main class="relative" [class.pb-32]="shouldShowReviewFooter()">
+          @if (isLoading()) {
+            <!-- Pure Loading State -->
+            <div class="flex items-center justify-center min-h-[60vh]">
+              <symphiq-indeterminate-spinner
+                [viewMode]="viewMode()"
+                size="large"
+              />
             </div>
-            @if (showControls()) {
-              <div class="flex items-center gap-2">
-                <symphiq-search-button
-                  [isLightMode]="isLightMode()"
-                  (searchClick)="onSearchClick()"
+          } @else if (isContentGenerating()) {
+            <!-- Journey Progress Banner (always show when not onboarded) -->
+            @if (!isOnboarded()) {
+              <symphiq-journey-progress-indicator
+                [viewMode]="viewMode()"
+                [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
+                [showNextStepAction]="false"
+                [forDemo]="forDemo()"
+                [maxAccessibleStepId]="maxAccessibleStepId()"
+                (stepClick)="stepClick.emit($event)"
+                (nextStepClick)="nextStepClick.emit()"
+              />
+            }
+
+            <!-- Content Generation Progress Component -->
+            <symphiq-content-generation-progress-with-confetti
+              [viewMode]="viewMode()"
+              [itemStatus]="itemStatus()"
+              [currentStatus]="profile()?.selfContentStatus"
+              [confettiIntensity]="'celebration'"
+              [title]="'We are generating a new Business Analysis for ' + (currentProfile()?.profileStructured?.businessName || 'your business') + '.'"
+              [subtitle]="'It will appear here when ready. You can check back later as this will take a few minutes to complete.'"
+            />
+          } @else {
+            @if (isSimplifiedView()) {
+              <!-- Journey Progress Banner - Full Width Sticky (only show when not onboarded) -->
+              @if (!isOnboarded()) {
+                <symphiq-journey-progress-indicator
+                  [viewMode]="viewMode()"
+                  [currentStepId]="JourneyStepIdEnum.BUSINESS_ANALYSIS"
+                  [showNextStepAction]="showNextStepAction()"
+                  [forDemo]="forDemo()"
+                  [maxAccessibleStepId]="maxAccessibleStepId()"
+                  (stepClick)="stepClick.emit($event)"
+                  (nextStepClick)="nextStepClick.emit()"
                 />
-                <button
-                  type="button"
-                  (click)="onViewModeClick()"
-                  [ngClass]="getViewModeButtonClasses()"
-                  class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                  </svg>
-                  <span>{{ viewModeLabel() }}</span>
-                </button>
+              }
+
+              <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                <div class="mb-8">
+                  <symphiq-welcome-banner
+                    [viewMode]="viewMode()"
+                    [businessName]="currentProfile()?.profileStructured?.businessName || 'your business'"
+                    [isOnboarded]="isOnboarded()"
+                  />
+                </div>
+
+                <div class="mb-8">
+                  <symphiq-recommendations-tiled-grid
+                    [recommendations]="recommendationItems()"
+                    [viewMode]="viewMode()"
+                    (viewMoreClick)="openRecommendationDetailsModal($event)"
+                  />
+                </div>
+
+                <div>
+                  <symphiq-collapsible-section-group
+                    [sections]="nonRecommendationSections()"
+                    [viewMode]="viewMode()"
+                  />
+                </div>
               </div>
-            }
-            @if (formattedGeneratedDate() || requestedByUser()) {
-              <div class="flex flex-col gap-4 min-w-[180px]">
-                @if (formattedGeneratedDate()) {
-                  <div class="text-left sm:text-right">
-                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Generated At</div>
-                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ formattedGeneratedDate() }}</div>
-                  </div>
-                }
-                @if (requestedByUser()) {
-                  <div class="text-left sm:text-right">
-                    <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Requested by</div>
-                    <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
+            } @else {
+              @for (section of sections(); track trackBySectionId($index, section); let idx = $index; let last = $last) {
+                <symphiq-profile-section
+                  [section]="section"
+                  [viewMode]="viewMode()"
+                  [forceExpanded]="!isCompactView()"
+                />
+                @if (!last) {
+                  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <symphiq-section-divider
+                      [viewMode]="viewMode()"
+                      [subsections]="sections()[idx + 1].subsections || []" />
                   </div>
                 }
-              </div>
+              }
             }
-          </div>
-          </div>
-        </div>
+          }
+        </main>
 
-        <!-- Condensed Header (scrolled state) -->
-        <div
-          class="absolute inset-x-0 top-0 transition-opacity duration-300 ease-in-out"
-          [class.opacity-0]="!headerScrollService.isScrolled()"
-          [class.pointer-events-none]="!headerScrollService.isScrolled()"
-          [class.opacity-100]="headerScrollService.isScrolled()">
-          <div
-            class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3.5">
-          <div class="flex items-center justify-between">
-            <div class="flex-1 min-w-0 mr-4">
-              <h1 [ngClass]="getCondensedTitleClasses()">
-                {{ title() }}
-              </h1>
-            </div>
-            <div class="flex items-center gap-4">
-              @if (currentSection()) {
-                <div class="flex items-center gap-2 text-sm flex-shrink-0">
-                  <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'">
-                    {{ currentSection() }}
-                  </span>
-                  @if (currentSubsection()) {
-                    <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'">›</span>
-                    <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'">
-                      {{ currentSubsection() }}
-                    </span>
-                  }
-                </div>
-              }
-              @if (showControls()) {
-                <symphiq-search-button
-                  [isLightMode]="isLightMode()"
-                  [minimized]="true"
-                  (searchClick)="onSearchClick()"
-                />
-                <button
-                  type="button"
-                  (click)="onViewModeClick()"
-                  [ngClass]="getViewModeButtonClasses()"
-                  class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                  </svg>
-                </button>
-              }
-            </div>
-          </div>
-          </div>
-        </div>
-    </header>
-  `
-            }]
-    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 128 }); })();
+        @if (!isSimplifiedView()) {
+          <symphiq-section-navigation
+            [sections]="sections()"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        @if (!isSimplifiedView()) {
+          <symphiq-floating-toc
+            [sections]="sections()"
+            [viewMode]="viewMode()"
+            [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <symphiq-floating-back-button
+          [viewMode]="viewMode()"
+          [embedded]="embedded()"
+        />
+      </div>
+
+      <symphiq-tooltip-container />
+      <symphiq-business-analysis-modal
+        [isLightMode]="isLightMode()"
+        (viewInContextRequested)="handleViewInContext($event)" />
+
+      <symphiq-search-modal
+        [isLightMode]="isLightMode()"
+        [isOpen]="searchService.isSearchOpen()"
+        [searchQuery]="searchService.getSearchQuery()"
+        [results]="searchService.searchResults()"
+        [hasResults]="searchService.hasResults()"
+        [selectedIndex]="selectedSearchIndex()"
+        [placeholder]="'Search sections, items, and analysis...'"
+        (searchChange)="onSearchChange($event)"
+        (resultSelected)="onSearchResultSelected($event)"
+        (close)="closeSearch()"
+      />
+
+      <symphiq-view-mode-switcher-modal
+        [isOpen]="isViewModeSwitcherOpen()"
+        [currentMode]="displayMode()"
+        [viewMode]="viewMode()"
+        [isLoading]="isViewModeSwitching()"
+        (close)="closeViewModeSwitcher()"
+        (modeSelected)="handleDisplayModeChange($event)"
+      />
+
+      <!-- Mark as Reviewed Sticky Footer -->
+      <symphiq-mark-as-reviewed-footer
+        [viewMode]="viewMode()"
+        [reviewStatus]="profile()?.reviewStatus"
+        [selfContentStatus]="profile()?.selfContentStatus"
+        [isMarkingAsReviewed]="isMarkingAsReviewed()"
+        (markAsReviewedClick)="handleMarkAsReviewedClick()"
+      />
+    </div>
+  `, styles: [":host{display:block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-highlight{0%,to{transform:scale(1);box-shadow:0 0 #3b82f6b3}50%{transform:scale(1.02);box-shadow:0 0 20px 8px #3b82f64d}}:host ::ng-deep .search-highlight-pulse{animation:pulse-highlight 2s ease-in-out;border-color:#3b82f6!important}\n"] }]
+    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], isMarkingAsReviewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMarkingAsReviewed", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], markAsReviewedClick: [{ type: i0.Output, args: ["markAsReviewedClick"] }], onScroll: [{
+            type: HostListener,
+            args: ['window:scroll', ['$event']]
+        }], handleKeyDown: [{
+            type: HostListener,
+            args: ['document:keydown', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 267 }); })();
 
 class GradeBadgeComponent {
     constructor() {