@eric-emg/symphiq-components 1.2.162 → 1.2.164

package/fesm2022/symphiq-components.mjs

@@ -2454,11 +2454,11 @@ class ConfettiService {
             '#67e8f9'
         ];
     }
-    getColors(customColors) {
+    getColors(customColors, viewMode) {
         if (customColors && customColors.length > 0) {
             return customColors;
         }
-        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const isDarkMode = viewMode === ViewModeEnum.DARK;
         return isDarkMode ? this.darkModeColors : this.lightModeColors;
     }
     getIntensityConfig(intensity) {
@@ -2491,9 +2491,9 @@ class ConfettiService {
         }
     }
     trigger(config = {}) {
-        const { intensity = 'normal', colors: customColors, delay = 200 } = config;
+        const { intensity = 'normal', colors: customColors, delay = 200, viewMode } = config;
         const intensityConfig = this.getIntensityConfig(intensity);
-        const colors = this.getColors(customColors);
+        const colors = this.getColors(customColors, viewMode);
         setTimeout(() => {
             this.fireConfetti(intensityConfig, colors);
         }, delay);
@@ -54197,6 +54197,7 @@ class SymphiqConnectGaDashboardComponent {
         this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
         this.stepClick = output();
         this.nextStepClick = output();
+        this.googleButtonClick = output();
         this.headerScrollService = inject(HeaderScrollService);
         this.JourneyStepIdEnum = JourneyStepIdEnum;
         this.COLLAPSE_THRESHOLD = 20;
@@ -54344,7 +54345,7 @@ class SymphiqConnectGaDashboardComponent {
             i0.ɵɵlistener("scroll", function SymphiqConnectGaDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
         } if (rf & 2) {
             i0.ɵɵclassProp("light", ctx.isLightMode())("dark", !ctx.isLightMode());
-        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 70, vars: 66, 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, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", googleButtonClick: "googleButtonClick" }, decls: 70, vars: 66, 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, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button", 3, "click"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -54374,6 +54375,7 @@ class SymphiqConnectGaDashboardComponent {
             i0.ɵɵtext(33, " Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration. ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(34, "div", 22)(35, "button", 23);
+            i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Template_button_click_35_listener() { return ctx.googleButtonClick.emit(); });
             i0.ɵɵelement(36, "div", 24);
             i0.ɵɵelementStart(37, "div", 25)(38, "div", 26);
             i0.ɵɵnamespaceSVG();
@@ -54579,7 +54581,7 @@ class SymphiqConnectGaDashboardComponent {
 
                     <!-- Continue with Google Button -->
                     <div class="mb-6">
-                      <button type="button" class="gsi-material-button">
+                      <button type="button" class="gsi-material-button" (click)="googleButtonClick.emit()">
                         <div class="gsi-material-button-state"></div>
                         <div class="gsi-material-button-content-wrapper">
                           <div class="gsi-material-button-icon">
@@ -54655,7 +54657,7 @@ class SymphiqConnectGaDashboardComponent {
       </div>
     </div>
   `, styles: [":host{display:block}.animated-bubbles{overflow:hidden}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out;opacity:.05}.animated-bubbles:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode:before,.animated-bubbles.light-mode:after{opacity:.03}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}:host.light .gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#1f1f1f;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content}:host.light .gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}:host.light .gsi-material-button .gsi-material-button-content-wrapper{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}:host.light .gsi-material-button .gsi-material-button-contents{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}:host.light .gsi-material-button .gsi-material-button-state{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}:host.light .gsi-material-button:disabled{cursor:default;background-color:#ffffff61;border-color:#1f1f1f1f}:host.light .gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}:host.light .gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}:host.light .gsi-material-button:not(:disabled):active .gsi-material-button-state,:host.light .gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#303030;opacity:12%}:host.light .gsi-material-button:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}:host.light .gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#303030;opacity:8%}:host.dark .gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#131314;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#e3e3e3;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content;border-color:#8e918f}:host.dark .gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}:host.dark .gsi-material-button .gsi-material-button-content-wrapper{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}:host.dark .gsi-material-button .gsi-material-button-contents{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}:host.dark .gsi-material-button .gsi-material-button-state{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}:host.dark .gsi-material-button:disabled{cursor:default;background-color:#13131461;border-color:#8e918f1f}:host.dark .gsi-material-button:disabled .gsi-material-button-state{background-color:#e3e3e31f}:host.dark .gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}:host.dark .gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}:host.dark .gsi-material-button:not(:disabled):active .gsi-material-button-state,:host.dark .gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#fff;opacity:12%}:host.dark .gsi-material-button:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}:host.dark .gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#fff;opacity:8%}\n"] }]
-    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", 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 }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
+    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", 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 }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], googleButtonClick: [{ type: i0.Output, args: ["googleButtonClick"] }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
@@ -57934,29 +57936,27 @@ class CollapsibleSectionGroupComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsibleSectionGroupComponent, { className: "CollapsibleSectionGroupComponent", filePath: "lib/components/business-analysis-dashboard/collapsible-section-group.component.ts", lineNumber: 100 }); })();
 
 function ContentGenerationProgressComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵelement(1, "div", 20)(2, "div", 21)(3, "div", 22)(4, "div", 23)(5, "div", 24);
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "div", 21)(2, "div", 22)(3, "div", 23)(4, "div", 24)(5, "div", 25)(6, "div", 26);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
     i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
-    i0.ɵɵproperty("ngClass", ctx_r0.dotClasses());
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
-    i0.ɵɵproperty("ngClass", ctx_r0.dotClasses());
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
-    i0.ɵɵproperty("ngClass", ctx_r0.dotClasses());
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
-    i0.ɵɵproperty("ngClass", ctx_r0.dotClasses());
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
-    i0.ɵɵproperty("ngClass", ctx_r0.dotClasses());
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
 } }
 function ContentGenerationProgressComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 25);
+    i0.ɵɵelement(0, "div", 27);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
@@ -57971,8 +57971,9 @@ class ContentGenerationProgressComponent {
         this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
         this.progressPercentage = computed(() => {
             const status = this.itemStatus();
-            if (!status?.percentageComplete)
+            if (!status?.percentageComplete) {
                 return 0;
+            }
             return Math.round(Math.min(100, Math.max(0, status.percentageComplete)));
         }, ...(ngDevMode ? [{ debugName: "progressPercentage" }] : []));
         this.progressMessage = computed(() => {
@@ -58026,6 +58027,9 @@ class ContentGenerationProgressComponent {
                 ? 'bg-blue-400 shadow-lg shadow-blue-400/60'
                 : 'bg-cyan-300 shadow-lg shadow-cyan-300/60';
         }, ...(ngDevMode ? [{ debugName: "dotClasses" }] : []));
+        this.dotColor = computed(() => {
+            return this.isLightMode() ? '#60a5fa' : '#67e8f9';
+        }, ...(ngDevMode ? [{ debugName: "dotColor" }] : []));
         this.progressGlowClasses = computed(() => {
             return this.isLightMode()
                 ? 'bg-blue-400 shadow-xl'
@@ -58038,7 +58042,7 @@ class ContentGenerationProgressComponent {
         }, ...(ngDevMode ? [{ debugName: "percentageClasses" }] : []));
     }
     static { this.ɵfac = function ContentGenerationProgressComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ContentGenerationProgressComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContentGenerationProgressComponent, selectors: [["symphiq-content-generation-progress"]], inputs: { itemStatus: [1, "itemStatus"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], showIcon: [1, "showIcon"] }, decls: 25, vars: 17, consts: [[1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "max-w-3xl", "w-full", "space-y-8"], [1, "text-center", "space-y-3"], [1, "flex", "items-center", "justify-center", "mb-4"], [1, "relative", "w-20", "h-20", "rounded-2xl", "flex", "items-center", "justify-center", "icon-pulse", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "absolute", "inset-0", "rounded-2xl", "icon-glow"], [1, "text-3xl", "sm:text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", "sm:text-lg", "max-w-2xl", "mx-auto", 3, "ngClass"], [1, "space-y-4"], [1, "text-center"], [1, "text-lg", "sm:text-xl", "font-medium", "message-fade", 3, "ngClass"], [1, "relative", "h-3", "rounded-full", "overflow-visible", 3, "ngClass"], [1, "absolute", "inset-0", "rounded-full", 3, "ngClass"], [1, "absolute", "inset-y-0", "left-0", "rounded-full", "transition-all", "duration-700", "ease-out", "overflow-hidden", 3, "ngClass"], [1, "absolute", "inset-0", "shimmer-effect"], [1, "absolute", "inset-0", "overflow-visible", "pointer-events-none"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass", "left"], [1, "text-sm", "font-medium", "tabular-nums", 3, "ngClass"], [1, "dot", "dot-1", 3, "ngClass"], [1, "dot", "dot-2", 3, "ngClass"], [1, "dot", "dot-3", 3, "ngClass"], [1, "dot", "dot-4", 3, "ngClass"], [1, "dot", "dot-5", 3, "ngClass"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass"]], template: function ContentGenerationProgressComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ContentGenerationProgressComponent, selectors: [["symphiq-content-generation-progress"]], inputs: { itemStatus: [1, "itemStatus"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], showIcon: [1, "showIcon"] }, decls: 25, vars: 17, consts: [[1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "max-w-3xl", "w-full", "space-y-8"], [1, "text-center", "space-y-3"], [1, "flex", "items-center", "justify-center", "mb-4"], [1, "relative", "w-20", "h-20", "rounded-2xl", "flex", "items-center", "justify-center", "icon-pulse", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-10", "h-10"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 10V3L4 14h7v7l9-11h-7z"], [1, "absolute", "inset-0", "rounded-2xl", "icon-glow"], [1, "text-3xl", "sm:text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", "sm:text-lg", "max-w-2xl", "mx-auto", 3, "ngClass"], [1, "space-y-4"], [1, "text-center"], [1, "text-lg", "sm:text-xl", "font-medium", "message-fade", 3, "ngClass"], [1, "relative", "h-3", "rounded-full", 2, "overflow", "visible", 3, "ngClass"], [1, "absolute", "inset-0", "rounded-full", 3, "ngClass"], [1, "absolute", "inset-y-0", "left-0", "rounded-full", "transition-all", "duration-700", "ease-out", "overflow-hidden", 3, "ngClass"], [1, "absolute", "inset-0", "shimmer-effect"], [1, "absolute", "pointer-events-none", 2, "right", "0", "top", "-4px", "bottom", "-4px", "overflow", "visible", 3, "left"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass", "left"], [1, "text-sm", "font-medium", "tabular-nums", 3, "ngClass"], [1, "absolute", "pointer-events-none", 2, "right", "0", "top", "-4px", "bottom", "-4px", "overflow", "visible"], [1, "animated-dot", "animated-dot-1"], [1, "animated-dot", "animated-dot-2"], [1, "animated-dot", "animated-dot-3"], [1, "animated-dot", "animated-dot-4"], [1, "animated-dot", "animated-dot-5"], [1, "animated-dot", "animated-dot-6"], [1, "absolute", "top-1/2", "-translate-y-1/2", "w-4", "h-4", "rounded-full", "blur-md", "transition-all", "duration-700", "ease-out", 2, "margin-left", "-8px", 3, "ngClass"]], template: function ContentGenerationProgressComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(5, "svg", 5);
@@ -58061,7 +58065,7 @@ class ContentGenerationProgressComponent {
             i0.ɵɵelementStart(18, "div", 15);
             i0.ɵɵelement(19, "div", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_20_Template, 6, 15, "div", 17);
+            i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_20_Template, 7, 14, "div", 17);
             i0.ɵɵconditionalCreate(21, ContentGenerationProgressComponent_Conditional_21_Template, 1, 3, "div", 18);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(22, "div", 11)(23, "span", 19);
@@ -58098,90 +58102,94 @@ class ContentGenerationProgressComponent {
             i0.ɵɵproperty("ngClass", ctx.percentageClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.progressPercentage(), "% complete ");
-        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["@keyframes _ngcontent-%COMP%_icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes _ngcontent-%COMP%_icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes _ngcontent-%COMP%_dots-move{0%{transform:translate(0) scale(.8);opacity:0}10%{opacity:1;transform:translate(10px) scale(1)}25%{transform:translate(30px) scale(1.2)}40%{transform:translate(50px) scale(1)}55%{transform:translate(70px) scale(1.2)}70%{transform:translate(90px) scale(1)}85%{transform:translate(110px) scale(1.2);opacity:1}to{transform:translate(130px) scale(.8);opacity:0}}@keyframes _ngcontent-%COMP%_message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-pulse 2s ease-in-out infinite}.icon-glow[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect[_ngcontent-%COMP%]{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:_ngcontent-%COMP%_shimmer 2s ease-in-out infinite}.message-fade[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_message-fade 3s ease-in-out infinite}.dot[_ngcontent-%COMP%]{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;margin-top:-3px;margin-left:-3px;animation:_ngcontent-%COMP%_dots-move 3s ease-in-out infinite}.dot-1[_ngcontent-%COMP%]{animation-delay:0s}.dot-2[_ngcontent-%COMP%]{animation-delay:.5s}.dot-3[_ngcontent-%COMP%]{animation-delay:1s}.dot-4[_ngcontent-%COMP%]{animation-delay:1.5s}.dot-5[_ngcontent-%COMP%]{animation-delay:2s}@media (prefers-reduced-motion: reduce){.icon-pulse[_ngcontent-%COMP%], .icon-glow[_ngcontent-%COMP%], .shimmer-effect[_ngcontent-%COMP%], .message-fade[_ngcontent-%COMP%], .dot[_ngcontent-%COMP%]{animation:none}}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["@keyframes _ngcontent-%COMP%_icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes _ngcontent-%COMP%_icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes _ngcontent-%COMP%_shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes _ngcontent-%COMP%_dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes _ngcontent-%COMP%_dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes _ngcontent-%COMP%_message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-pulse 2s ease-in-out infinite}.icon-glow[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect[_ngcontent-%COMP%]{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:_ngcontent-%COMP%_shimmer 2s ease-in-out infinite}.message-fade[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_message-fade 3s ease-in-out infinite}.animated-dot[_ngcontent-%COMP%]{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:_ngcontent-%COMP%_dots-move 6s linear infinite,_ngcontent-%COMP%_dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1[_ngcontent-%COMP%]{animation-delay:0s,0s}.animated-dot-2[_ngcontent-%COMP%]{animation-delay:1s,0s}.animated-dot-3[_ngcontent-%COMP%]{animation-delay:2s,0s}.animated-dot-4[_ngcontent-%COMP%]{animation-delay:3s,0s}.animated-dot-5[_ngcontent-%COMP%]{animation-delay:4s,0s}.animated-dot-6[_ngcontent-%COMP%]{animation-delay:5s,0s}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
-      <div class="max-w-3xl w-full space-y-8">
-        <!-- Title Section -->
-        <div class="text-center space-y-3">
-          <div class="flex items-center justify-center mb-4">
-            <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
-              <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-              </svg>
-              <div class="absolute inset-0 rounded-2xl icon-glow"></div>
-            </div>
-          </div>
-
-          <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
-            {{ title() }}
-          </h2>
-
-          <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
-            {{ subtitle() }}
-          </p>
-        </div>
-
-        <!-- Progress Section -->
-        <div class="space-y-4">
-          <!-- Progress Message -->
-          <div class="text-center">
-            <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
-              {{ progressMessage() }}
-            </p>
-          </div>
-
-          <!-- Progress Bar Container -->
-          <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full overflow-visible">
-            <!-- Background Track -->
-            <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
-
-            <!-- Solid Fill with Gradient -->
-            <div
-              [ngClass]="progressBarFillClasses()"
-              [style.width.%]="progressPercentage()"
-              class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
-              <!-- Inner shimmer effect -->
-              <div class="absolute inset-0 shimmer-effect"></div>
-            </div>
-
-            <!-- Animated Dots Overlay (emerges from the solid bar edge) -->
-            @if (progressPercentage() > 0 && progressPercentage() < 100) {
-              <div class="absolute inset-0 overflow-visible pointer-events-none">
-                <div [ngClass]="dotClasses()" [style.left.%]="progressPercentage()" class="dot dot-1"></div>
-                <div [ngClass]="dotClasses()" [style.left.%]="progressPercentage()" class="dot dot-2"></div>
-                <div [ngClass]="dotClasses()" [style.left.%]="progressPercentage()" class="dot dot-3"></div>
-                <div [ngClass]="dotClasses()" [style.left.%]="progressPercentage()" class="dot dot-4"></div>
-                <div [ngClass]="dotClasses()" [style.left.%]="progressPercentage()" class="dot dot-5"></div>
-              </div>
-            }
-
-            <!-- Glow effect at the progress edge -->
-            @if (progressPercentage() > 0 && progressPercentage() < 100) {
-              <div
-                [ngClass]="progressGlowClasses()"
-                [style.left.%]="progressPercentage()"
-                class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
-                style="margin-left: -8px;">
-              </div>
-            }
-          </div>
-
-          <!-- Progress Percentage -->
-          <div class="text-center">
-            <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
-              {{ progressPercentage() }}% complete
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  `, styles: ["@keyframes icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes dots-move{0%{transform:translate(0) scale(.8);opacity:0}10%{opacity:1;transform:translate(10px) scale(1)}25%{transform:translate(30px) scale(1.2)}40%{transform:translate(50px) scale(1)}55%{transform:translate(70px) scale(1.2)}70%{transform:translate(90px) scale(1)}85%{transform:translate(110px) scale(1.2);opacity:1}to{transform:translate(130px) scale(.8);opacity:0}}@keyframes message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse{animation:icon-pulse 2s ease-in-out infinite}.icon-glow{animation:icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s ease-in-out infinite}.message-fade{animation:message-fade 3s ease-in-out infinite}.dot{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;margin-top:-3px;margin-left:-3px;animation:dots-move 3s ease-in-out infinite}.dot-1{animation-delay:0s}.dot-2{animation-delay:.5s}.dot-3{animation-delay:1s}.dot-4{animation-delay:1.5s}.dot-5{animation-delay:2s}@media (prefers-reduced-motion: reduce){.icon-pulse,.icon-glow,.shimmer-effect,.message-fade,.dot{animation:none}}\n"] }]
+        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
+      <div class="max-w-3xl w-full space-y-8">
+        <!-- Title Section -->
+        <div class="text-center space-y-3">
+          <div class="flex items-center justify-center mb-4">
+            <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
+              <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+              </svg>
+              <div class="absolute inset-0 rounded-2xl icon-glow"></div>
+            </div>
+          </div>
+
+          <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
+            {{ title() }}
+          </h2>
+
+          <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
+            {{ subtitle() }}
+          </p>
+        </div>
+
+        <!-- Progress Section -->
+        <div class="space-y-4">
+          <!-- Progress Message -->
+          <div class="text-center">
+            <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
+              {{ progressMessage() }}
+            </p>
+          </div>
+
+          <!-- Progress Bar Container -->
+          <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
+            <!-- Background Track -->
+            <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
+
+            <!-- Solid Fill with Gradient -->
+            <div
+              [ngClass]="progressBarFillClasses()"
+              [style.width.%]="progressPercentage()"
+              class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
+              <!-- Inner shimmer effect -->
+              <div class="absolute inset-0 shimmer-effect"></div>
+            </div>
+
+            <!-- Animated Dots Overlay (container positioned at progress edge, dots animate within) -->
+            @if (progressPercentage() > 0 && progressPercentage() < 100) {
+              <div
+                class="absolute pointer-events-none"
+                [style.left.%]="progressPercentage()"
+                style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
+                <div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
+              </div>
+            }
+
+            <!-- Glow effect at the progress edge -->
+            @if (progressPercentage() > 0 && progressPercentage() < 100) {
+              <div
+                [ngClass]="progressGlowClasses()"
+                [style.left.%]="progressPercentage()"
+                class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
+                style="margin-left: -8px;">
+              </div>
+            }
+          </div>
+
+          <!-- Progress Percentage -->
+          <div class="text-center">
+            <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
+              {{ progressPercentage() }}% complete
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: ["@keyframes icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse{animation:icon-pulse 2s ease-in-out infinite}.icon-glow{animation:icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s ease-in-out infinite}.message-fade{animation:message-fade 3s ease-in-out infinite}.animated-dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:dots-move 6s linear infinite,dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1{animation-delay:0s,0s}.animated-dot-2{animation-delay:1s,0s}.animated-dot-3{animation-delay:2s,0s}.animated-dot-4{animation-delay:3s,0s}.animated-dot-5{animation-delay:4s,0s}.animated-dot-6{animation-delay:5s,0s}\n"] }]
     }], null, { itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 224 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 222 }); })();
 
 class ContentGenerationProgressWithConfettiComponent {
     constructor() {
@@ -58206,7 +58214,8 @@ class ContentGenerationProgressWithConfettiComponent {
                 untracked(() => {
                     this.confettiService.trigger({
                         intensity: this.confettiIntensity(),
-                        delay: this.confettiDelay()
+                        delay: this.confettiDelay(),
+                        viewMode: this.viewMode(),
                     });
                     this.hasCelebrated.set(true);
                 });
@@ -58547,6 +58556,18 @@ class SymphiqBusinessAnalysisDashboardComponent {
         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);
+            }
+        });
     }
     onScroll() {
         this.headerScrollService.handleScroll(this.embedded());
@@ -58707,16 +58728,6 @@ class SymphiqBusinessAnalysisDashboardComponent {
         }, 2000);
     }
     ngOnInit() {
-        this.currentProfile.set(this.profile());
-        this.lookupService.setProfile(this.profile());
-        const profile = this.profile();
-        if (profile) {
-            this.searchService.setProfile(profile);
-        }
-        if (profile?.profileStructured?.sections) {
-            const recommendations = profile.profileStructured?.recommendations;
-            this.profileContextService.indexProfile(profile.profileStructured.sections, recommendations);
-        }
     }
     ngAfterViewInit() {
         // Use a single observer for subsections which includes parent section information
@@ -59015,257 +59026,257 @@ class SymphiqBusinessAnalysisDashboardComponent {
 }
 (() => { (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], 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">
-          @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()"
-              [profile]="profile()"
-              [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>
-
-      @if (isLoading()) {
-        <div [ngClass]="getLoadingOverlayClasses()">
-          <div [ngClass]="getSpinnerClasses()"></div>
-        </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)"
-      />
-    </div>
+        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], 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">
+          @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()"
+              [profile]="profile()"
+              [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>
+
+      @if (isLoading()) {
+        <div [ngClass]="getLoadingOverlayClasses()">
+          <div [ngClass]="getSpinnerClasses()"></div>
+        </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)"
+      />
+    </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 }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], onScroll: [{
             type: HostListener,