@eric-emg/symphiq-components 1.2.464 → 1.2.467

package/fesm2022/symphiq-components.mjs

@@ -45566,36 +45566,51 @@ class BusinessAnalysisModalComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BusinessAnalysisModalComponent, { className: "BusinessAnalysisModalComponent", filePath: "lib/components/business-analysis-dashboard/business-analysis-modal.component.ts", lineNumber: 171 }); })();
 
+function ContentGenerationProgressComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "text-slate-500" : "text-slate-400");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.progressMessage(), " ");
+} }
 function ContentGenerationProgressComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 0)(1, "div", 2);
-    i0.ɵɵelement(2, "div", 3);
-    i0.ɵɵelementStart(3, "span", 4);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 5)(6, "div", 6);
-    i0.ɵɵelement(7, "div", 7);
+    i0.ɵɵelementStart(0, "div", 0)(1, "div", 2)(2, "div", 3);
+    i0.ɵɵelement(3, "div", 4);
+    i0.ɵɵelementStart(4, "span", 5);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 8);
-    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(6, "span", 6);
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 7);
+    i0.ɵɵelement(9, "div", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, ContentGenerationProgressComponent_Conditional_0_Conditional_10_Template, 2, 2, "div", 9);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "bg-slate-100/80" : "bg-slate-800/50");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "text-slate-700" : "text-slate-300");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.compactTitle() || ctx_r0.progressMessage(), " ");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "text-blue-600" : "text-blue-400");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.progressMessage(), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.progressPercentage(), "% ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "bg-slate-200" : "bg-slate-700");
     i0.ɵɵadvance();
     i0.ɵɵstyleProp("width", ctx_r0.progressPercentage(), "%");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "text-slate-500" : "text-slate-400");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.progressPercentage(), "% complete ");
+    i0.ɵɵconditional(ctx_r0.compactTitle() ? 10 : -1);
 } }
 function ContentGenerationProgressComponent_Conditional_1_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵelement(1, "div", 28)(2, "div", 29)(3, "div", 30)(4, "div", 31)(5, "div", 32)(6, "div", 33);
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵelement(1, "div", 30)(2, "div", 31)(3, "div", 32)(4, "div", 33)(5, "div", 34)(6, "div", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -45614,39 +45629,39 @@ function ContentGenerationProgressComponent_Conditional_1_Conditional_20_Templat
     i0.ɵɵstyleProp("background-color", ctx_r0.dotColor());
 } }
 function ContentGenerationProgressComponent_Conditional_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 34);
+    i0.ɵɵelement(0, "div", 36);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵstyleProp("left", ctx_r0.progressPercentage(), "%");
     i0.ɵɵproperty("ngClass", ctx_r0.progressGlowClasses());
 } }
 function ContentGenerationProgressComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 9)(2, "div", 10)(3, "div", 11)(4, "div", 12);
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 10)(2, "div", 11)(3, "div", 12)(4, "div", 13);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(5, "svg", 13);
-    i0.ɵɵelement(6, "path", 14);
+    i0.ɵɵelementStart(5, "svg", 14);
+    i0.ɵɵelement(6, "path", 15);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelement(7, "div", 15);
+    i0.ɵɵelement(7, "div", 16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "h2", 16);
+    i0.ɵɵelementStart(8, "h2", 17);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "p", 17);
+    i0.ɵɵelementStart(10, "p", 18);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 18)(13, "div", 19)(14, "p", 20);
+    i0.ɵɵelementStart(12, "div", 19)(13, "div", 20)(14, "p", 21);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 21);
-    i0.ɵɵelement(17, "div", 22);
-    i0.ɵɵelementStart(18, "div", 23);
-    i0.ɵɵelement(19, "div", 7);
+    i0.ɵɵelementStart(16, "div", 22);
+    i0.ɵɵelement(17, "div", 23);
+    i0.ɵɵelementStart(18, "div", 24);
+    i0.ɵɵelement(19, "div", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_1_Conditional_20_Template, 7, 14, "div", 24);
-    i0.ɵɵconditionalCreate(21, ContentGenerationProgressComponent_Conditional_1_Conditional_21_Template, 1, 3, "div", 25);
+    i0.ɵɵconditionalCreate(20, ContentGenerationProgressComponent_Conditional_1_Conditional_20_Template, 7, 14, "div", 26);
+    i0.ɵɵconditionalCreate(21, ContentGenerationProgressComponent_Conditional_1_Conditional_21_Template, 1, 3, "div", 27);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 19)(23, "span", 26);
+    i0.ɵɵelementStart(22, "div", 20)(23, "span", 28);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
@@ -45690,6 +45705,7 @@ class ContentGenerationProgressComponent {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
         this.compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+        this.compactTitle = input('', ...(ngDevMode ? [{ debugName: "compactTitle" }] : []));
         this.progressPercentage = computed(() => {
             const status = this.itemStatus();
             if (!status?.percentageComplete) {
@@ -45763,8 +45779,8 @@ 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"], compact: [1, "compact"] }, decls: 2, vars: 1, consts: [[1, "w-full", "space-y-2", "py-2"], [1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "w-full", "h-2", "rounded-full", "relative", 2, "overflow", "visible", 3, "ngClass"], [1, "h-full", "bg-gradient-to-r", "from-blue-500", "to-cyan-500", "rounded-full", "transition-all", "duration-500", "overflow-hidden"], [1, "absolute", "inset-0", "shimmer-effect"], [1, "text-xs", "tabular-nums", 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", "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.ɵɵconditionalCreate(0, ContentGenerationProgressComponent_Conditional_0_Template, 10, 7, "div", 0)(1, ContentGenerationProgressComponent_Conditional_1_Template, 25, 17, "div", 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"], compact: [1, "compact"], compactTitle: [1, "compactTitle"] }, decls: 2, vars: 1, consts: [[1, "w-full", "rounded-lg", "p-3", 3, "ngClass"], [1, "min-h-[60vh]", "flex", "items-center", "justify-center", "px-4", "py-12", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "gap-3", "mb-2"], [1, "flex", "items-center", "gap-2", "min-w-0"], [1, "animate-spin", "w-3.5", "h-3.5", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full", "flex-shrink-0"], [1, "text-xs", "font-semibold", "truncate", 3, "ngClass"], [1, "text-xs", "font-medium", "tabular-nums", "flex-shrink-0", 3, "ngClass"], [1, "w-full", "h-1.5", "rounded-full", "relative", 3, "ngClass"], [1, "h-full", "bg-gradient-to-r", "from-blue-500", "to-cyan-500", "rounded-full", "transition-all", "duration-500"], [1, "mt-1.5", "text-xs", "truncate", 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.ɵɵconditionalCreate(0, ContentGenerationProgressComponent_Conditional_0_Template, 11, 9, "div", 0)(1, ContentGenerationProgressComponent_Conditional_1_Template, 25, 17, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.compact() ? 0 : 1);
         } }, 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 }); }
@@ -45773,23 +45789,29 @@ class ContentGenerationProgressComponent {
         type: Component,
         args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (compact()) {
-      <div class="w-full space-y-2 py-2">
-        <div class="flex items-center gap-2">
-          <div class="animate-spin w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full"></div>
-          <span class="text-xs font-medium" [ngClass]="isLightMode() ? 'text-blue-600' : 'text-blue-400'">
-            {{ progressMessage() }}
+      <div class="w-full rounded-lg p-3" [ngClass]="isLightMode() ? 'bg-slate-100/80' : 'bg-slate-800/50'">
+        <div class="flex items-center justify-between gap-3 mb-2">
+          <div class="flex items-center gap-2 min-w-0">
+            <div class="animate-spin w-3.5 h-3.5 border-2 border-blue-500/30 border-t-blue-500 rounded-full flex-shrink-0"></div>
+            <span class="text-xs font-semibold truncate" [ngClass]="isLightMode() ? 'text-slate-700' : 'text-slate-300'">
+              {{ compactTitle() || progressMessage() }}
+            </span>
+          </div>
+          <span class="text-xs font-medium tabular-nums flex-shrink-0" [ngClass]="isLightMode() ? 'text-blue-600' : 'text-blue-400'">
+            {{ progressPercentage() }}%
           </span>
         </div>
-        <div class="w-full h-2 rounded-full relative" [ngClass]="isLightMode() ? 'bg-slate-200' : 'bg-slate-700'" style="overflow: visible;">
+        <div class="w-full h-1.5 rounded-full relative" [ngClass]="isLightMode() ? 'bg-slate-200' : 'bg-slate-700'">
           <div
-            class="h-full bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full transition-all duration-500 overflow-hidden"
+            class="h-full bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full transition-all duration-500"
             [style.width.%]="progressPercentage()">
-            <div class="absolute inset-0 shimmer-effect"></div>
           </div>
         </div>
-        <div class="text-xs tabular-nums" [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-400'">
-          {{ progressPercentage() }}% complete
-        </div>
+        @if (compactTitle()) {
+          <div class="mt-1.5 text-xs truncate" [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-400'">
+            {{ progressMessage() }}
+          </div>
+        }
       </div>
     } @else {
       <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
@@ -45864,8 +45886,8 @@ class ContentGenerationProgressComponent {
       </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 }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 233 }); })();
+    }], 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 }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], compactTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactTitle", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 239 }); })();
 
 class ContentGenerationProgressWithConfettiComponent {
     constructor() {
@@ -89052,18 +89074,29 @@ class ProfileAnswerAnimationService {
     }], null, null); })();
 
 const _forTrack0$9 = ($index, $item) => $item.answer.id;
-function ProfileQuestionCardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
+function ProfileQuestionCardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "span", 15);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.categoryBreadcrumbClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formattedCategoryName(), " ");
+} }
+function ProfileQuestionCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 12);
-    i0.ɵɵelement(2, "path", 14);
+    i0.ɵɵelementStart(1, "svg", 13);
+    i0.ɵɵelement(2, "path", 16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.checkboxClasses());
 } }
-function ProfileQuestionCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 5);
+function ProfileQuestionCardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89072,8 +89105,8 @@ function ProfileQuestionCardComponent_Conditional_6_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.question().context, " ");
 } }
-function ProfileQuestionCardComponent_Conditional_7_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
+function ProfileQuestionCardComponent_Conditional_8_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89083,12 +89116,12 @@ function ProfileQuestionCardComponent_Conditional_7_For_6_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.getFocusAreaTitle(focusArea_r2), " ");
 } }
-function ProfileQuestionCardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 15)(2, "span", 16);
+function ProfileQuestionCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 17)(2, "span", 18);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 17);
-    i0.ɵɵrepeaterCreate(5, ProfileQuestionCardComponent_Conditional_7_For_6_Template, 2, 2, "span", 18, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(4, "div", 19);
+    i0.ɵɵrepeaterCreate(5, ProfileQuestionCardComponent_Conditional_8_For_6_Template, 2, 2, "span", 20, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -89099,16 +89132,16 @@ function ProfileQuestionCardComponent_Conditional_7_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.relatedFocusAreas());
 } }
-function ProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+function ProfileQuestionCardComponent_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵlistener("animationend", function ProfileQuestionCardComponent_Conditional_8_For_2_Template_div_animationend_0_listener() { const answerData_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAnimationEnd(answerData_r4.answer.id)); });
-    i0.ɵɵelementStart(1, "span", 20);
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵlistener("animationend", function ProfileQuestionCardComponent_Conditional_9_For_2_Template_div_animationend_0_listener() { const answerData_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAnimationEnd(answerData_r4.answer.id)); });
+    i0.ɵɵelementStart(1, "span", 22);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "symphiq-user-avatar", 21);
+    i0.ɵɵelement(3, "symphiq-user-avatar", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 22);
+    i0.ɵɵelementStart(4, "div", 24);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89127,28 +89160,28 @@ function ProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Answered ", ctx_r0.formatAnswerDate(answerData_r4.answer.createdDate), " ");
 } }
-function ProfileQuestionCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵrepeaterCreate(1, ProfileQuestionCardComponent_Conditional_8_For_2_Template, 6, 11, null, null, _forTrack0$9);
+function ProfileQuestionCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵrepeaterCreate(1, ProfileQuestionCardComponent_Conditional_9_For_2_Template, 6, 11, null, null, _forTrack0$9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.displayAnswers());
 } }
-function ProfileQuestionCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 23)(2, "div", 24);
+function ProfileQuestionCardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 25)(2, "div", 26);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 25);
-    i0.ɵɵelement(4, "path", 26);
+    i0.ɵɵelementStart(3, "svg", 27);
+    i0.ɵɵelement(4, "path", 28);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelement(5, "div", 27);
+    i0.ɵɵelement(5, "div", 29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div")(7, "div", 28);
+    i0.ɵɵelementStart(6, "div")(7, "div", 30);
     i0.ɵɵtext(8, " Not answered yet ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 29);
+    i0.ɵɵelementStart(9, "div", 31);
     i0.ɵɵtext(10, " Click the button below to provide your answer ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -89165,13 +89198,13 @@ function ProfileQuestionCardComponent_Conditional_9_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.unansweredTextClasses());
 } }
-function ProfileQuestionCardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function ProfileQuestionCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function ProfileQuestionCardComponent_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onHistoryClick()); });
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function ProfileQuestionCardComponent_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onHistoryClick()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 12);
-    i0.ɵɵelement(2, "path", 31);
+    i0.ɵɵelementStart(1, "svg", 13);
+    i0.ɵɵelement(2, "path", 33);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(3, "span");
@@ -89181,7 +89214,7 @@ function ProfileQuestionCardComponent_Conditional_11_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.historyButtonClasses());
 } }
-function ProfileQuestionCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function ProfileQuestionCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div");
 } }
 class ProfileQuestionCardComponent {
@@ -89194,6 +89227,7 @@ class ProfileQuestionCardComponent {
         this.profileAnswerHistories = input([], ...(ngDevMode ? [{ debugName: "profileAnswerHistories" }] : []));
         this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.showFocusAreaChips = input(false, ...(ngDevMode ? [{ debugName: "showFocusAreaChips" }] : []));
+        this.categoryNameFormatter = input(null, ...(ngDevMode ? [{ debugName: "categoryNameFormatter" }] : []));
         this.answerClick = output();
         this.historyClick = output();
         this.questionAnswers = computed(() => {
@@ -89230,6 +89264,18 @@ class ProfileQuestionCardComponent {
             const q = this.question();
             return 'focusAreaDomains' in q ? (q.focusAreaDomains || []) : [];
         }, ...(ngDevMode ? [{ debugName: "relatedFocusAreas" }] : []));
+        this.showCategoryBreadcrumb = computed(() => {
+            const q = this.question();
+            return this.viewType() === 'all' && 'category' in q && q.category;
+        }, ...(ngDevMode ? [{ debugName: "showCategoryBreadcrumb" }] : []));
+        this.formattedCategoryName = computed(() => {
+            const q = this.question();
+            const category = 'category' in q ? q.category : null;
+            if (!category)
+                return '';
+            const formatter = this.categoryNameFormatter();
+            return formatter ? formatter(category) : category;
+        }, ...(ngDevMode ? [{ debugName: "formattedCategoryName" }] : []));
         this.hasHistory = computed(() => {
             const q = this.question();
             const histories = this.profileAnswerHistories();
@@ -89281,6 +89327,11 @@ class ProfileQuestionCardComponent {
             ? 'bg-white border-slate-200 hover:border-slate-300 hover:shadow-lg'
             : 'bg-slate-800/50 border-slate-700/50 hover:border-slate-600/70 hover:shadow-xl hover:shadow-slate-900/30';
     }
+    categoryBreadcrumbClasses() {
+        return this.isLightMode()
+            ? 'text-blue-600'
+            : 'text-blue-400';
+    }
     questionTextClasses() {
         return this.isLightMode()
             ? 'text-slate-900'
@@ -89368,42 +89419,46 @@ class ProfileQuestionCardComponent {
             : 'bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white shadow-lg shadow-blue-500/20';
     }
     static { this.ɵfac = function ProfileQuestionCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProfileQuestionCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProfileQuestionCardComponent, selectors: [["symphiq-profile-question-card"]], inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], showFocusAreaChips: [1, "showFocusAreaChips"] }, outputs: { answerClick: "answerClick", historyClick: "historyClick" }, decls: 18, vars: 10, consts: [[1, "rounded-xl", "border-2", "p-6", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "gap-3"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "flex-shrink-0", "w-6", "h-6", "rounded", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "flex", "flex-wrap", "gap-3"], [1, "rounded-lg", "p-6", "border-2", "border-dashed", "text-center", 3, "ngClass"], [1, "mt-4", "flex", "items-center", "justify-between"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "ngClass"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 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", "M9 5l7 7-7 7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-full", 3, "animationend", "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["size", "small", 3, "viewMode", "user"], [1, "self-center", "text-xs", "-ml-1", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-3"], [1, "relative", "w-16", "h-16", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "absolute", "top-1", "right-1", "w-3", "h-3", "rounded-full", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"]], template: function ProfileQuestionCardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3", 3);
-            i0.ɵɵtext(4);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProfileQuestionCardComponent, selectors: [["symphiq-profile-question-card"]], inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], showFocusAreaChips: [1, "showFocusAreaChips"], categoryNameFormatter: [1, "categoryNameFormatter"] }, outputs: { answerClick: "answerClick", historyClick: "historyClick" }, decls: 19, vars: 11, consts: [[1, "rounded-xl", "border-2", "p-6", "transition-all", "duration-200", 3, "ngClass"], [1, "mb-3"], [1, "flex", "items-start", "gap-3"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "flex-shrink-0", "w-6", "h-6", "rounded", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "flex", "flex-wrap", "gap-3"], [1, "rounded-lg", "p-6", "border-2", "border-dashed", "text-center", 3, "ngClass"], [1, "mt-4", "flex", "items-center", "justify-between"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "ngClass"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 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", "M9 5l7 7-7 7"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-full", 3, "animationend", "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["size", "small", 3, "viewMode", "user"], [1, "self-center", "text-xs", "-ml-1", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-3"], [1, "relative", "w-16", "h-16", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "absolute", "top-1", "right-1", "w-3", "h-3", "rounded-full", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"]], template: function ProfileQuestionCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, ProfileQuestionCardComponent_Conditional_1_Template, 3, 2, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "h3", 4);
+            i0.ɵɵtext(5);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(5, ProfileQuestionCardComponent_Conditional_5_Template, 3, 1, "div", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(6, ProfileQuestionCardComponent_Conditional_6_Template, 2, 2, "p", 5);
-            i0.ɵɵconditionalCreate(7, ProfileQuestionCardComponent_Conditional_7_Template, 7, 2, "div", 6);
-            i0.ɵɵconditionalCreate(8, ProfileQuestionCardComponent_Conditional_8_Template, 3, 0, "div", 7)(9, ProfileQuestionCardComponent_Conditional_9_Template, 11, 6, "div", 8);
-            i0.ɵɵelementStart(10, "div", 9);
-            i0.ɵɵconditionalCreate(11, ProfileQuestionCardComponent_Conditional_11_Template, 5, 1, "button", 10)(12, ProfileQuestionCardComponent_Conditional_12_Template, 1, 0, "div");
-            i0.ɵɵelementStart(13, "button", 11);
-            i0.ɵɵlistener("click", function ProfileQuestionCardComponent_Template_button_click_13_listener() { return ctx.onAnswerClick(); });
-            i0.ɵɵelementStart(14, "span");
-            i0.ɵɵtext(15);
+            i0.ɵɵconditionalCreate(6, ProfileQuestionCardComponent_Conditional_6_Template, 3, 1, "div", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(7, ProfileQuestionCardComponent_Conditional_7_Template, 2, 2, "p", 6);
+            i0.ɵɵconditionalCreate(8, ProfileQuestionCardComponent_Conditional_8_Template, 7, 2, "div", 7);
+            i0.ɵɵconditionalCreate(9, ProfileQuestionCardComponent_Conditional_9_Template, 3, 0, "div", 8)(10, ProfileQuestionCardComponent_Conditional_10_Template, 11, 6, "div", 9);
+            i0.ɵɵelementStart(11, "div", 10);
+            i0.ɵɵconditionalCreate(12, ProfileQuestionCardComponent_Conditional_12_Template, 5, 1, "button", 11)(13, ProfileQuestionCardComponent_Conditional_13_Template, 1, 0, "div");
+            i0.ɵɵelementStart(14, "button", 12);
+            i0.ɵɵlistener("click", function ProfileQuestionCardComponent_Template_button_click_14_listener() { return ctx.onAnswerClick(); });
+            i0.ɵɵelementStart(15, "span");
+            i0.ɵɵtext(16);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(16, "svg", 12);
-            i0.ɵɵelement(17, "path", 13);
+            i0.ɵɵelementStart(17, "svg", 13);
+            i0.ɵɵelement(18, "path", 14);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showCategoryBreadcrumb() ? 1 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.questionTextClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.question().question, " ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isAnswered() ? 5 : -1);
+            i0.ɵɵconditional(ctx.isAnswered() ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.question().context ? 6 : -1);
+            i0.ɵɵconditional(ctx.question().context ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showFocusAreaChips() && ctx.relatedFocusAreas().length > 0 ? 7 : -1);
+            i0.ɵɵconditional(ctx.showFocusAreaChips() && ctx.relatedFocusAreas().length > 0 ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.displayAnswers().length > 0 ? 8 : 9);
+            i0.ɵɵconditional(ctx.displayAnswers().length > 0 ? 9 : 10);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.hasHistory() ? 11 : 12);
+            i0.ɵɵconditional(ctx.hasHistory() ? 12 : 13);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.buttonClasses());
             i0.ɵɵadvance(2);
@@ -89414,6 +89469,13 @@ class ProfileQuestionCardComponent {
         type: Component,
         args: [{ selector: 'symphiq-profile-question-card', standalone: true, imports: [CommonModule, UserAvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div [ngClass]="containerClasses()" class="rounded-xl border-2 p-6 transition-all duration-200">
+      @if (showCategoryBreadcrumb()) {
+        <div class="mb-3">
+          <span [ngClass]="categoryBreadcrumbClasses()" class="text-xs font-semibold uppercase tracking-wider">
+            {{ formattedCategoryName() }}
+          </span>
+        </div>
+      }
       <div class="flex items-start gap-3">
         <div class="flex-1 min-w-0">
           <h3 [ngClass]="questionTextClasses()" class="text-lg font-bold mb-2">
@@ -89525,8 +89587,8 @@ class ProfileQuestionCardComponent {
       </div>
     </div>
   `, styles: ["@keyframes answerPopIn{0%{opacity:0;transform:scale(.8);box-shadow:0 0 #3b82f600}50%{opacity:1;transform:scale(1.05);box-shadow:0 0 20px 4px #3b82f680}to{opacity:1;transform:scale(1);box-shadow:0 0 #3b82f600}}.animate-answer-pop-in{animation:answerPopIn .5s ease-out forwards}@keyframes answerFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.animate-answer-fade-out{animation:answerFadeOut .4s ease-out forwards}\n"] }]
-    }], null, { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], profileAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswers", required: false }] }], profileAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswerHistories", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], showFocusAreaChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFocusAreaChips", required: false }] }], answerClick: [{ type: i0.Output, args: ["answerClick"] }], historyClick: [{ type: i0.Output, args: ["historyClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileQuestionCardComponent, { className: "ProfileQuestionCardComponent", filePath: "lib/components/shared/profile/profile-question-card.component.ts", lineNumber: 168 }); })();
+    }], null, { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], profileAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswers", required: false }] }], profileAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswerHistories", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], showFocusAreaChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFocusAreaChips", required: false }] }], categoryNameFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryNameFormatter", required: false }] }], answerClick: [{ type: i0.Output, args: ["answerClick"] }], historyClick: [{ type: i0.Output, args: ["historyClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileQuestionCardComponent, { className: "ProfileQuestionCardComponent", filePath: "lib/components/shared/profile/profile-question-card.component.ts", lineNumber: 175 }); })();
 
 const _forTrack0$8 = ($index, $item) => $item.answer.id;
 const _forTrack1$1 = ($index, $item) => $item.history.id;
@@ -90072,11 +90134,11 @@ function ProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_
 } if (rf & 2) {
     const question_r6 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("id", "question-" + question_r6.id)("question", question_r6)("viewMode", ctx_r1.viewMode())("viewType", ctx_r1.viewType())("profileAnswers", ctx_r1.profileAnswers())("profileAnswerHistories", ctx_r1.profileAnswerHistories())("users", ctx_r1.users())("showFocusAreaChips", ctx_r1.showFocusAreaChips());
+    i0.ɵɵproperty("id", "question-" + question_r6.id)("question", question_r6)("viewMode", ctx_r1.viewMode())("viewType", ctx_r1.viewType())("profileAnswers", ctx_r1.profileAnswers())("profileAnswerHistories", ctx_r1.profileAnswerHistories())("users", ctx_r1.users())("showFocusAreaChips", ctx_r1.showFocusAreaChips())("categoryNameFormatter", ctx_r1.categoryNameFormatter());
 } }
 function ProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵrepeaterCreate(1, ProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_18_For_2_Template, 1, 8, "symphiq-profile-question-card", 31, _forTrack0$7);
+    i0.ɵɵrepeaterCreate(1, ProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_18_For_2_Template, 1, 9, "symphiq-profile-question-card", 31, _forTrack0$7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -90591,7 +90653,7 @@ class ProfileQuestionsModalComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalWrapper = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
-        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], showAllQuestions: [1, "showAllQuestions"], startDirectAnswer: [1, "startDirectAnswer"], viewMode: [1, "viewMode"], breadcrumbPrefix: [1, "breadcrumbPrefix"], showFocusAreaChips: [1, "showFocusAreaChips"], categoryNameFormatter: [1, "categoryNameFormatter"], focusAreaNameFormatter: [1, "focusAreaNameFormatter"], questionFilterFn: [1, "questionFilterFn"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick", answerSave: "answerSave" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], ["scrollContainer", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "block", "h-[80vh]", 3, "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "block", "h-[80vh]", 3, "close", "back", "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "flex", "flex-col", "gap-6"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users", "showFocusAreaChips"], [3, "answerClick", "historyClick", "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users", "showFocusAreaChips"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "h-[70vh]", "overflow-hidden"], [1, "block", "h-full", 3, "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers", "breadcrumbPrefix", "showFocusAreaChips", "categoryNameFormatter", "focusAreaNameFormatter"], [1, "block", "h-full", 3, "backClick", "saveClick", "saveAndNextClick", "navigateToList", "navigateToNextQuestion", "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers", "breadcrumbPrefix", "showFocusAreaChips", "categoryNameFormatter", "focusAreaNameFormatter"]], template: function ProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], showAllQuestions: [1, "showAllQuestions"], startDirectAnswer: [1, "startDirectAnswer"], viewMode: [1, "viewMode"], breadcrumbPrefix: [1, "breadcrumbPrefix"], showFocusAreaChips: [1, "showFocusAreaChips"], categoryNameFormatter: [1, "categoryNameFormatter"], focusAreaNameFormatter: [1, "focusAreaNameFormatter"], questionFilterFn: [1, "questionFilterFn"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick", answerSave: "answerSave" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], ["scrollContainer", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "block", "h-[80vh]", 3, "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "block", "h-[80vh]", 3, "close", "back", "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "flex", "flex-col", "gap-6"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users", "showFocusAreaChips", "categoryNameFormatter"], [3, "answerClick", "historyClick", "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users", "showFocusAreaChips", "categoryNameFormatter"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "h-[70vh]", "overflow-hidden"], [1, "block", "h-full", 3, "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers", "breadcrumbPrefix", "showFocusAreaChips", "categoryNameFormatter", "focusAreaNameFormatter"], [1, "block", "h-full", 3, "backClick", "saveClick", "saveAndNextClick", "navigateToList", "navigateToNextQuestion", "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers", "breadcrumbPrefix", "showFocusAreaChips", "categoryNameFormatter", "focusAreaNameFormatter"]], template: function ProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ProfileQuestionsModalComponent_Conditional_0_Template, 11, 5, "div", 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -90729,6 +90791,7 @@ class ProfileQuestionsModalComponent {
                         [profileAnswerHistories]="profileAnswerHistories()"
                         [users]="users()"
                         [showFocusAreaChips]="showFocusAreaChips()"
+                        [categoryNameFormatter]="categoryNameFormatter()"
                         (answerClick)="onQuestionAnswerClick($event)"
                         (historyClick)="onQuestionHistoryClick($event)" />
                     }
@@ -90811,7 +90874,7 @@ class ProfileQuestionsModalComponent {
             type: ViewChild,
             args: ['scrollContainer']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileQuestionsModalComponent, { className: "ProfileQuestionsModalComponent", filePath: "lib/components/shared/profile/profile-questions-modal.component.ts", lineNumber: 212 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileQuestionsModalComponent, { className: "ProfileQuestionsModalComponent", filePath: "lib/components/shared/profile/profile-questions-modal.component.ts", lineNumber: 213 }); })();
 
 const _c0$7 = ["chartdiv"];
 function ProfileStatusCardComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
@@ -94656,7 +94719,7 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_7
     i0.ɵɵelementEnd();
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_12_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵelementStart(0, "span", 52);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -94667,11 +94730,11 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_1
     i0.ɵɵtextInterpolate1(" ", tool_r4, " ");
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43)(1, "div", 48)(2, "span", 49);
+    i0.ɵɵelementStart(0, "div", 44)(1, "div", 49)(2, "span", 50);
     i0.ɵɵtext(3, "Marketing Tools:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 50);
-    i0.ɵɵrepeaterCreate(5, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_12_For_6_Template, 2, 2, "span", 51, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(4, "div", 51);
+    i0.ɵɵrepeaterCreate(5, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_12_For_6_Template, 2, 2, "span", 52, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const focusArea_r3 = i0.ɵɵnextContext().$implicit;
@@ -94682,64 +94745,50 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_1
     i0.ɵɵrepeater(focusArea_r3.tools);
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-content-generation-progress", 44);
-} if (rf & 2) {
-    const focusArea_r3 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("itemStatus", focusArea_r3.itemStatusProfileFocusArea ?? undefined)("viewMode", ctx_r1.viewMode())("compact", true);
-} }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-content-generation-progress", 44);
-} if (rf & 2) {
-    const focusArea_r3 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("itemStatus", focusArea_r3.itemStatusProfileAnalysis ?? undefined)("viewMode", ctx_r1.viewMode())("compact", true);
-} }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 45);
-    i0.ɵɵelement(1, "div", 52);
-    i0.ɵɵelementStart(2, "span", 53);
+    i0.ɵɵelement(1, "div", 53);
+    i0.ɵɵelementStart(2, "span", 54);
     i0.ɵɵtext(3, "Profile Generation Pending");
     i0.ɵɵelementEnd()();
 } }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56);
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 59);
+    i0.ɵɵelementStart(1, "svg", 60);
     i0.ɵɵelement(2, "path", 29);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3, " Complete ");
     i0.ɵɵelementEnd();
 } }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 57);
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 59);
-    i0.ɵɵelement(2, "path", 60);
+    i0.ɵɵelementStart(1, "svg", 60);
+    i0.ɵɵelement(2, "path", 61);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3, " In Progress ");
     i0.ɵɵelementEnd();
 } }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58);
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 59);
-    i0.ɵɵelement(2, "path", 61);
+    i0.ɵɵelementStart(1, "svg", 60);
+    i0.ɵɵelement(2, "path", 62);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3, " Not Started ");
     i0.ɵɵelementEnd();
 } }
-function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46)(1, "div", 54)(2, "span");
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 55)(2, "span");
     i0.ɵɵtext(3, "Progress");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "div");
-    i0.ɵɵelement(7, "div", 55);
+    i0.ɵɵelement(7, "div", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Conditional_8_Template, 4, 0, "div", 56)(9, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Conditional_9_Template, 4, 0, "div", 57)(10, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Conditional_10_Template, 4, 0, "div", 58);
+    i0.ɵɵconditionalCreate(8, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Conditional_8_Template, 4, 0, "div", 57)(9, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Conditional_9_Template, 4, 0, "div", 58)(10, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Conditional_10_Template, 4, 0, "div", 59);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const focusArea_r3 = i0.ɵɵnextContext().$implicit;
@@ -94757,35 +94806,58 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_1
     i0.ɵɵadvance();
     i0.ɵɵconditional(focusArea_r3.status === "complete" ? 8 : focusArea_r3.status === "in-progress" ? 9 : 10);
 } }
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵelement(1, "symphiq-content-generation-progress", 63);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const focusArea_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("itemStatus", focusArea_r3.itemStatusProfileFocusArea ?? undefined)("viewMode", ctx_r1.viewMode())("compact", true)("compactTitle", "Generating Focus Area Profile");
+} }
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵelement(1, "symphiq-content-generation-progress", 63);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const focusArea_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("itemStatus", focusArea_r3.itemStatusProfileAnalysis ?? undefined)("viewMode", ctx_r1.viewMode())("compact", true)("compactTitle", "Generating Focus Area Analysis");
+} }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " View Details ");
+    i0.ɵɵtext(0, " View Analysis ");
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " All Questions Answered ");
+    i0.ɵɵtext(0, " View Details ");
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " Continue Answering Questions ");
+    i0.ɵɵtext(0, " All Questions Answered ");
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Continue Answering Questions ");
+} }
+function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Start Answering Questions ");
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵlistener("click", function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const focusArea_r3 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleFooterClick(focusArea_r3.profileFocusArea)); });
-    i0.ɵɵelementStart(1, "div", 63)(2, "span", 64);
-    i0.ɵɵconditionalCreate(3, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_3_Template, 1, 0)(4, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_4_Template, 1, 0)(5, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_5_Template, 1, 0)(6, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_6_Template, 1, 0);
+    i0.ɵɵelementStart(0, "div", 64);
+    i0.ɵɵlistener("click", function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const focusArea_r3 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(focusArea_r3.selfContentStatusProfileAnalysis === ctx_r1.AiDynamicContentStatusEnum.GENERATED && focusArea_r3.profileAnalysis ? ctx_r1.handleAnalysisFooterClick(focusArea_r3.profileAnalysis) : ctx_r1.handleFooterClick(focusArea_r3.profileFocusArea)); });
+    i0.ɵɵelementStart(1, "div", 65)(2, "span", 66);
+    i0.ɵɵconditionalCreate(3, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_3_Template, 1, 0)(4, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_4_Template, 1, 0)(5, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_5_Template, 1, 0)(6, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_6_Template, 1, 0)(7, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Conditional_7_Template, 1, 0);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(7, "svg", 65);
-    i0.ɵɵelement(8, "path", 66);
+    i0.ɵɵelementStart(8, "svg", 67);
+    i0.ɵɵelement(9, "path", 68);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const focusArea_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵclassMap(ctx_r1.getCardFooterClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(focusArea_r3.hasAnalysis ? 3 : focusArea_r3.status === "complete" ? 4 : focusArea_r3.status === "in-progress" ? 5 : 6);
+    i0.ɵɵconditional(focusArea_r3.selfContentStatusProfileAnalysis === ctx_r1.AiDynamicContentStatusEnum.GENERATED ? 3 : focusArea_r3.hasAnalysis ? 4 : focusArea_r3.status === "complete" ? 5 : focusArea_r3.status === "in-progress" ? 6 : 7);
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "div", 37)(2, "div", 38)(3, "div", 39);
@@ -94798,13 +94870,14 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Template(rf,
     i0.ɵɵelementStart(8, "h3");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "p");
+    i0.ɵɵelementStart(10, "p", 43);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_12_Template, 7, 1, "div", 43);
-    i0.ɵɵconditionalCreate(13, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_13_Template, 1, 3, "symphiq-content-generation-progress", 44)(14, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Template, 1, 3, "symphiq-content-generation-progress", 44)(15, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_15_Template, 4, 0, "div", 45)(16, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Template, 11, 11, "div", 46);
+    i0.ɵɵconditionalCreate(12, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_12_Template, 7, 1, "div", 44);
+    i0.ɵɵconditionalCreate(13, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_13_Template, 4, 0, "div", 45)(14, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_14_Template, 11, 11, "div", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Template, 9, 3, "div", 47);
+    i0.ɵɵconditionalCreate(15, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_15_Template, 2, 4, "div", 47)(16, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_16_Template, 2, 4, "div", 47);
+    i0.ɵɵconditionalCreate(17, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Conditional_17_Template, 10, 3, "div", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const focusArea_r3 = ctx.$implicit;
@@ -94822,13 +94895,16 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Template(rf,
     i0.ɵɵtextInterpolate1(" ", focusArea_r3.title, " ");
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.getDescriptionClasses());
+    i0.ɵɵproperty("libSymphiqTooltip", focusArea_r3.description);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", focusArea_r3.description, " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(focusArea_r3.engagementStatus === ctx_r1.FocusAreaDetailStatusEnum.ENGAGED && focusArea_r3.tools.length > 0 ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(focusArea_r3.profileFocusArea && focusArea_r3.selfContentStatusProfileFocusArea !== ctx_r1.AiDynamicContentStatusEnum.GENERATED && focusArea_r3.engagementStatus !== ctx_r1.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST ? 13 : focusArea_r3.profileAnalysis && focusArea_r3.selfContentStatusProfileAnalysis !== null && focusArea_r3.selfContentStatusProfileAnalysis !== ctx_r1.AiDynamicContentStatusEnum.GENERATED && focusArea_r3.engagementStatus !== ctx_r1.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST ? 14 : focusArea_r3.selfContentStatusProfileFocusArea === null && focusArea_r3.engagementStatus !== ctx_r1.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST ? 15 : focusArea_r3.selfContentStatusProfileFocusArea === ctx_r1.AiDynamicContentStatusEnum.GENERATED && (focusArea_r3.selfContentStatusProfileAnalysis === null || focusArea_r3.selfContentStatusProfileAnalysis === ctx_r1.AiDynamicContentStatusEnum.GENERATED) || focusArea_r3.status !== "pending" ? 16 : -1);
-    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(focusArea_r3.selfContentStatusProfileFocusArea === null && focusArea_r3.engagementStatus !== ctx_r1.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST ? 13 : focusArea_r3.selfContentStatusProfileFocusArea === ctx_r1.AiDynamicContentStatusEnum.GENERATED && (focusArea_r3.selfContentStatusProfileAnalysis === null || focusArea_r3.selfContentStatusProfileAnalysis === ctx_r1.AiDynamicContentStatusEnum.GENERATED) || focusArea_r3.status !== "pending" ? 14 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(focusArea_r3.profileFocusArea && focusArea_r3.selfContentStatusProfileFocusArea !== ctx_r1.AiDynamicContentStatusEnum.GENERATED && focusArea_r3.engagementStatus !== ctx_r1.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST ? 15 : focusArea_r3.profileAnalysis && focusArea_r3.selfContentStatusProfileAnalysis !== null && focusArea_r3.selfContentStatusProfileAnalysis !== ctx_r1.AiDynamicContentStatusEnum.GENERATED && focusArea_r3.engagementStatus !== ctx_r1.FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST ? 16 : -1);
+    i0.ɵɵadvance(2);
     i0.ɵɵconditional(focusArea_r3.canViewDetails && focusArea_r3.profileFocusArea && !(focusArea_r3.profileAnalysis && focusArea_r3.selfContentStatusProfileAnalysis !== null && focusArea_r3.selfContentStatusProfileAnalysis !== ctx_r1.AiDynamicContentStatusEnum.GENERATED) ? 17 : -1);
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
@@ -94844,14 +94920,14 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵelementStart(0, "div", 64);
     i0.ɵɵlistener("click", function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const focusArea_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleFooterClick(focusArea_r6.profileFocusArea)); });
-    i0.ɵɵelementStart(1, "div", 63)(2, "span", 64);
+    i0.ɵɵelementStart(1, "div", 65)(2, "span", 66);
     i0.ɵɵtext(3, "View Details");
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(4, "svg", 65);
-    i0.ɵɵelement(5, "path", 66);
+    i0.ɵɵelementStart(4, "svg", 67);
+    i0.ɵɵelement(5, "path", 68);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -94867,10 +94943,10 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8
     i0.ɵɵelementStart(7, "h3");
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "p");
+    i0.ɵɵelementStart(9, "p", 43);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8_Conditional_11_Template, 6, 2, "div", 47);
+    i0.ɵɵconditionalCreate(11, SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8_Conditional_11_Template, 6, 2, "div", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const focusArea_r6 = ctx.$implicit;
@@ -94886,21 +94962,22 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8
     i0.ɵɵtextInterpolate1(" ", focusArea_r6.title, " ");
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.getDescriptionClasses());
+    i0.ɵɵproperty("libSymphiqTooltip", focusArea_r6.description);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", focusArea_r6.description, " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(focusArea_r6.canViewDetails && focusArea_r6.profileFocusArea ? 11 : -1);
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35)(1, "div", 67);
-    i0.ɵɵelement(2, "div", 68);
-    i0.ɵɵelementStart(3, "span", 69);
+    i0.ɵɵelementStart(0, "div", 35)(1, "div", 69);
+    i0.ɵɵelement(2, "div", 70);
+    i0.ɵɵelementStart(3, "span", 71);
     i0.ɵɵtext(4, "Not Interested");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "div", 68);
+    i0.ɵɵelement(5, "div", 70);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 70);
-    i0.ɵɵrepeaterCreate(7, SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8_Template, 12, 11, "div", 34, _forTrack0$5);
+    i0.ɵɵelementStart(6, "div", 72);
+    i0.ɵɵrepeaterCreate(7, SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_For_8_Template, 12, 12, "div", 34, _forTrack0$5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -94915,7 +94992,7 @@ function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_Templ
 } }
 function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_67_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-search-modal", 71);
+    i0.ɵɵelementStart(0, "symphiq-search-modal", 73);
     i0.ɵɵlistener("closeModal", function SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_67_Template_symphiq_search_modal_closeModal_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleCloseSearchModal()); });
     i0.ɵɵelementEnd();
 } }
@@ -94945,6 +95022,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
         this.displayMode = input(DisplayModeEnum.SIMPLIFIED, ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
         this.currentStepId = input(JourneyStepIdEnum.FOCUS_AREA_ANALYSIS, ...(ngDevMode ? [{ debugName: "currentStepId" }] : []));
         this.navigateToProfileFocusArea = output();
+        this.navigateToProfileAnalysis = output();
         this.stepClick = output();
         this.nextStepClick = output();
         this.answerFocusAreaProfileQuestions = output();
@@ -95127,7 +95205,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
             if (interestedCards.length === 0) {
                 return false;
             }
-            return interestedCards.every(card => card.selfContentStatusProfileFocusArea === AiDynamicContentStatusEnum.GENERATED);
+            return interestedCards.every(card => card.selfContentStatusProfileAnalysis === AiDynamicContentStatusEnum.GENERATED);
         }, ...(ngDevMode ? [{ debugName: "allInterestedFocusAreasGenerated" }] : []));
     }
     onScroll() {
@@ -95136,6 +95214,9 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
     handleFooterClick(profileFocusArea) {
         this.navigateToProfileFocusArea.emit(profileFocusArea);
     }
+    handleAnalysisFooterClick(profileAnalysis) {
+        this.navigateToProfileAnalysis.emit(profileAnalysis);
+    }
     handleSearchClick() {
         this.showSearchModal.set(true);
     }
@@ -95297,7 +95378,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
     static { this.ɵfac = function SymphiqProfileFocusAreasAnalysesDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqProfileFocusAreasAnalysesDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqProfileFocusAreasAnalysesDashboardComponent, selectors: [["symphiq-profile-focus-areas-analyses-dashboard"]], hostBindings: function SymphiqProfileFocusAreasAnalysesDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqProfileFocusAreasAnalysesDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalyses: [1, "profileAnalyses"], profileFocusAreas: [1, "profileFocusAreas"], itemStatusesProfileFocusArea: [1, "itemStatusesProfileFocusArea"], itemStatusesProfileAnalysis: [1, "itemStatusesProfileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileFocusAreaQuestions: [1, "profileFocusAreaQuestions"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"], viewMode: [1, "viewMode"], displayMode: [1, "displayMode"], currentStepId: [1, "currentStepId"] }, outputs: { navigateToProfileFocusArea: "navigateToProfileFocusArea", stepClick: "stepClick", nextStepClick: "nextStepClick", answerFocusAreaProfileQuestions: "answerFocusAreaProfileQuestions", continueFocusAreaProfileQuestions: "continueFocusAreaProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", focusAreaProfileAdminAnswerAction: "focusAreaProfileAdminAnswerAction" }, decls: 68, vars: 29, consts: [[1, "min-h-screen", "relative"], [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, "fixed", "top-0", "left-0", "right-0", "h-1", "z-[60]", "bg-slate-200/30"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "title", "subtitle", "viewMode", "showControls"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "container", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8", "md:py-12", "relative", "z-10"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8"], [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", "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], ["currentStepId", "focus-areas", 3, "viewMode", "focusAreaDetails"], [1, "mt-6", "p-5", "rounded-xl", "border-l-4", "flex", "items-start", "gap-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "font-bold", "text-lg", "mb-2", 3, "ngClass"], [1, "space-y-2", "text-sm", 3, "ngClass"], [1, "flex", "items-start", "gap-2"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], [1, "mt-6", "p-5", "rounded-xl", "border", "flex", "items-start", "gap-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6"], [3, "class"], [1, "mt-12"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "p-6", "flex-1"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "text-4xl"], [1, "flex", "flex-col", "items-end", "gap-2"], [3, "ngClass"], [1, "px-3", "py-1", "bg-green-100", "dark:bg-green-900/30", "text-green-700", "dark:text-green-400", "text-xs", "font-semibold", "rounded-full"], [1, "mt-3", "mb-2"], [3, "itemStatus", "viewMode", "compact"], [1, "flex", "items-center", "gap-2", "py-2"], [1, "space-y-2"], [1, "mt-auto", "cursor-pointer", "hover:bg-slate-100", "dark:hover:bg-slate-700/50", "transition-colors", 3, "class"], [1, "flex", "items-center", "gap-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "px-2", "py-0.5", "rounded", "text-xs", 3, "ngClass"], [1, "animate-spin", "w-4", "h-4", "border-2", "border-amber-500/30", "border-t-amber-500", "rounded-full"], [1, "text-xs", "text-amber-600", "dark:text-amber-400", "font-medium"], [1, "flex", "items-center", "justify-between", "text-sm"], [1, "h-full", "bg-gradient-to-r", "from-blue-500", "to-cyan-500", "rounded-full", "transition-all", "duration-500"], [1, "flex", "items-center", "gap-1", "text-xs", "text-green-600", "dark:text-green-400", "font-medium"], [1, "flex", "items-center", "gap-1", "text-xs", "text-blue-600", "dark:text-blue-400", "font-medium"], [1, "flex", "items-center", "gap-1", "text-xs", "text-slate-500", "dark:text-slate-400", "font-medium"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z", "clip-rule", "evenodd"], [1, "mt-auto", "cursor-pointer", "hover:bg-slate-100", "dark:hover:bg-slate-700/50", "transition-colors", 3, "click"], [1, "flex", "items-center", "justify-between"], [1, "text-sm", "font-medium", "text-slate-600", "dark:text-slate-400"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-slate-400", "dark:text-slate-500", "hover:text-blue-500", "dark:hover:text-blue-400", "hover:translate-x-1", "transition-all"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "flex", "items-center", "gap-4", "mb-6"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "text-sm", "font-medium", "px-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6", "opacity-60"], [3, "closeModal"]], template: function SymphiqProfileFocusAreasAnalysesDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalyses: [1, "profileAnalyses"], profileFocusAreas: [1, "profileFocusAreas"], itemStatusesProfileFocusArea: [1, "itemStatusesProfileFocusArea"], itemStatusesProfileAnalysis: [1, "itemStatusesProfileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileFocusAreaQuestions: [1, "profileFocusAreaQuestions"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"], viewMode: [1, "viewMode"], displayMode: [1, "displayMode"], currentStepId: [1, "currentStepId"] }, outputs: { navigateToProfileFocusArea: "navigateToProfileFocusArea", navigateToProfileAnalysis: "navigateToProfileAnalysis", stepClick: "stepClick", nextStepClick: "nextStepClick", answerFocusAreaProfileQuestions: "answerFocusAreaProfileQuestions", continueFocusAreaProfileQuestions: "continueFocusAreaProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", focusAreaProfileAdminAnswerAction: "focusAreaProfileAdminAnswerAction" }, decls: 69, vars: 29, consts: [[1, "min-h-screen", "relative"], [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, "fixed", "top-0", "left-0", "right-0", "h-1", "z-[60]", "bg-slate-200/30"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "title", "subtitle", "viewMode", "showControls"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "container", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8", "md:py-12", "relative", "z-10"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8"], [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", "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], ["currentStepId", "focus-areas", 3, "viewMode", "focusAreaDetails"], [1, "mt-6", "p-5", "rounded-xl", "border-l-4", "flex", "items-start", "gap-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "font-bold", "text-lg", "mb-2", 3, "ngClass"], [1, "space-y-2", "text-sm", 3, "ngClass"], [1, "flex", "items-start", "gap-2"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], [1, "mt-6", "p-5", "rounded-xl", "border", "flex", "items-start", "gap-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6"], [3, "class"], [1, "mt-12"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "p-6", "flex-1"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "text-4xl"], [1, "flex", "flex-col", "items-end", "gap-2"], [3, "ngClass"], [1, "px-3", "py-1", "bg-green-100", "dark:bg-green-900/30", "text-green-700", "dark:text-green-400", "text-xs", "font-semibold", "rounded-full"], ["tooltipPosition", "bottom", 3, "libSymphiqTooltip"], [1, "mt-3", "mb-2"], [1, "flex", "items-center", "gap-2", "py-2"], [1, "space-y-2"], [1, "px-6", "pb-4"], [1, "mt-auto", "cursor-pointer", "hover:bg-slate-100", "dark:hover:bg-slate-700/50", "transition-colors", 3, "class"], [1, "flex", "items-center", "gap-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "px-2", "py-0.5", "rounded", "text-xs", 3, "ngClass"], [1, "animate-spin", "w-4", "h-4", "border-2", "border-amber-500/30", "border-t-amber-500", "rounded-full"], [1, "text-xs", "text-amber-600", "dark:text-amber-400", "font-medium"], [1, "flex", "items-center", "justify-between", "text-sm"], [1, "h-full", "bg-gradient-to-r", "from-blue-500", "to-cyan-500", "rounded-full", "transition-all", "duration-500"], [1, "flex", "items-center", "gap-1", "text-xs", "text-green-600", "dark:text-green-400", "font-medium"], [1, "flex", "items-center", "gap-1", "text-xs", "text-blue-600", "dark:text-blue-400", "font-medium"], [1, "flex", "items-center", "gap-1", "text-xs", "text-slate-500", "dark:text-slate-400", "font-medium"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z", "clip-rule", "evenodd"], [3, "itemStatus", "viewMode", "compact", "compactTitle"], [1, "mt-auto", "cursor-pointer", "hover:bg-slate-100", "dark:hover:bg-slate-700/50", "transition-colors", 3, "click"], [1, "flex", "items-center", "justify-between"], [1, "text-sm", "font-medium", "text-slate-600", "dark:text-slate-400"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "text-slate-400", "dark:text-slate-500", "hover:text-blue-500", "dark:hover:text-blue-400", "hover:translate-x-1", "transition-all"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "flex", "items-center", "gap-4", "mb-6"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "text-sm", "font-medium", "px-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3", "gap-6", "opacity-60"], [3, "closeModal"]], template: function SymphiqProfileFocusAreasAnalysesDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "div", 1);
             i0.ɵɵelementStart(2, "div", 2);
@@ -95381,11 +95462,12 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
             i0.ɵɵtext(62, " The final step\u2014Metric Analysis\u2014lets you provide funnel-specific context for each conversion point. This granular knowledge ensures recommendations address the precise bottlenecks in your customer journey, creating a complete picture from top-of-funnel awareness to revenue. ");
             i0.ɵɵelementEnd()()()()()()();
             i0.ɵɵelementStart(63, "div", 33);
-            i0.ɵɵrepeaterCreate(64, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Template, 18, 14, "div", 34, _forTrack0$5);
+            i0.ɵɵrepeaterCreate(64, SymphiqProfileFocusAreasAnalysesDashboardComponent_For_65_Template, 18, 16, "div", 34, _forTrack0$5);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(66, SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_66_Template, 9, 3, "div", 35);
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(67, SymphiqProfileFocusAreasAnalysesDashboardComponent_Conditional_67_Template, 1, 0, "symphiq-search-modal");
+            i0.ɵɵelement(68, "symphiq-tooltip-container");
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵclassMap(ctx.getContainerClasses());
@@ -95432,11 +95514,11 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
             i0.ɵɵconditional(ctx.notInterestedFocusAreaCards().length > 0 ? 66 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showSearchModal() ? 67 : -1);
-        } }, dependencies: [CommonModule, i1$1.NgClass, DashboardHeaderComponent, SearchModalComponent, JourneyProgressIndicatorComponent, ConfidenceLevelCardComponent, ContentGenerationProgressComponent], styles: [".animated-bubbles[_ngcontent-%COMP%]{background:linear-gradient(135deg,#6366f10d,#a855f70d)}.animated-bubbles.light-mode[_ngcontent-%COMP%]{background:linear-gradient(135deg,#3b82f608,#9333ea08)}.animated-bubbles[_ngcontent-%COMP%]:before, .animated-bubbles[_ngcontent-%COMP%]:after{content:\"\";position:absolute;border-radius:50%;animation:_ngcontent-%COMP%_float 20s infinite ease-in-out}.animated-bubbles[_ngcontent-%COMP%]:before{width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 70%);top:-250px;right:-250px;animation-delay:-5s}.animated-bubbles[_ngcontent-%COMP%]:after{width:400px;height:400px;background:radial-gradient(circle,rgba(168,85,247,.1) 0%,transparent 70%);bottom:-200px;left:-200px;animation-delay:-10s}@keyframes _ngcontent-%COMP%_float{0%,to{transform:translateY(0) translate(0)}25%{transform:translateY(-50px) translate(50px)}50%{transform:translateY(-100px) translate(-50px)}75%{transform:translateY(-50px) translate(-100px)}}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, DashboardHeaderComponent, SearchModalComponent, JourneyProgressIndicatorComponent, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, TooltipDirective, TooltipContainerComponent], styles: [".animated-bubbles[_ngcontent-%COMP%]{background:linear-gradient(135deg,#6366f10d,#a855f70d)}.animated-bubbles.light-mode[_ngcontent-%COMP%]{background:linear-gradient(135deg,#3b82f608,#9333ea08)}.animated-bubbles[_ngcontent-%COMP%]:before, .animated-bubbles[_ngcontent-%COMP%]:after{content:\"\";position:absolute;border-radius:50%;animation:_ngcontent-%COMP%_float 20s infinite ease-in-out}.animated-bubbles[_ngcontent-%COMP%]:before{width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 70%);top:-250px;right:-250px;animation-delay:-5s}.animated-bubbles[_ngcontent-%COMP%]:after{width:400px;height:400px;background:radial-gradient(circle,rgba(168,85,247,.1) 0%,transparent 70%);bottom:-200px;left:-200px;animation-delay:-10s}@keyframes _ngcontent-%COMP%_float{0%,to{transform:translateY(0) translate(0)}25%{transform:translateY(-50px) translate(50px)}50%{transform:translateY(-100px) translate(-50px)}75%{transform:translateY(-50px) translate(-100px)}}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqProfileFocusAreasAnalysesDashboardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-profile-focus-areas-analyses-dashboard', standalone: true, imports: [CommonModule, DashboardHeaderComponent, SearchModalComponent, JourneyProgressIndicatorComponent, ConfidenceLevelCardComponent, ContentGenerationProgressComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        args: [{ selector: 'symphiq-profile-focus-areas-analyses-dashboard', standalone: true, imports: [CommonModule, DashboardHeaderComponent, SearchModalComponent, JourneyProgressIndicatorComponent, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, TooltipDirective, TooltipContainerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div [class]="getContainerClasses()" class="min-h-screen relative">
       <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>
@@ -95585,7 +95667,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                     {{ focusArea.title }}
                   </h3>
 
-                  <p [class]="getDescriptionClasses()">
+                  <p [class]="getDescriptionClasses()" [libSymphiqTooltip]="focusArea.description" tooltipPosition="bottom">
                     {{ focusArea.description }}
                   </p>
 
@@ -95604,19 +95686,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                     </div>
                   }
 
-                  @if (focusArea.profileFocusArea && focusArea.selfContentStatusProfileFocusArea !== AiDynamicContentStatusEnum.GENERATED && focusArea.engagementStatus !== FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST) {
-                    <symphiq-content-generation-progress
-                      [itemStatus]="focusArea.itemStatusProfileFocusArea ?? undefined"
-                      [viewMode]="viewMode()"
-                      [compact]="true"
-                    />
-                  } @else if (focusArea.profileAnalysis && focusArea.selfContentStatusProfileAnalysis !== null && focusArea.selfContentStatusProfileAnalysis !== AiDynamicContentStatusEnum.GENERATED && focusArea.engagementStatus !== FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST) {
-                    <symphiq-content-generation-progress
-                      [itemStatus]="focusArea.itemStatusProfileAnalysis ?? undefined"
-                      [viewMode]="viewMode()"
-                      [compact]="true"
-                    />
-                  } @else if (focusArea.selfContentStatusProfileFocusArea === null && focusArea.engagementStatus !== FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST) {
+                  @if (focusArea.selfContentStatusProfileFocusArea === null && focusArea.engagementStatus !== FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST) {
                     <div class="flex items-center gap-2 py-2">
                       <div class="animate-spin w-4 h-4 border-2 border-amber-500/30 border-t-amber-500 rounded-full"></div>
                       <span class="text-xs text-amber-600 dark:text-amber-400 font-medium">Profile Generation Pending</span>
@@ -95663,14 +95733,36 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                   }
                 </div>
 
+                @if (focusArea.profileFocusArea && focusArea.selfContentStatusProfileFocusArea !== AiDynamicContentStatusEnum.GENERATED && focusArea.engagementStatus !== FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST) {
+                  <div class="px-6 pb-4">
+                    <symphiq-content-generation-progress
+                      [itemStatus]="focusArea.itemStatusProfileFocusArea ?? undefined"
+                      [viewMode]="viewMode()"
+                      [compact]="true"
+                      [compactTitle]="'Generating Focus Area Profile'"
+                    />
+                  </div>
+                } @else if (focusArea.profileAnalysis && focusArea.selfContentStatusProfileAnalysis !== null && focusArea.selfContentStatusProfileAnalysis !== AiDynamicContentStatusEnum.GENERATED && focusArea.engagementStatus !== FocusAreaDetailStatusEnum.NOT_ENGAGED_AND_NO_INTEREST) {
+                  <div class="px-6 pb-4">
+                    <symphiq-content-generation-progress
+                      [itemStatus]="focusArea.itemStatusProfileAnalysis ?? undefined"
+                      [viewMode]="viewMode()"
+                      [compact]="true"
+                      [compactTitle]="'Generating Focus Area Analysis'"
+                    />
+                  </div>
+                }
+
                 @if (focusArea.canViewDetails && focusArea.profileFocusArea && !(focusArea.profileAnalysis && focusArea.selfContentStatusProfileAnalysis !== null && focusArea.selfContentStatusProfileAnalysis !== AiDynamicContentStatusEnum.GENERATED)) {
                   <div
                     [class]="getCardFooterClasses()"
                     class="mt-auto cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors"
-                    (click)="handleFooterClick(focusArea.profileFocusArea)">
+                    (click)="focusArea.selfContentStatusProfileAnalysis === AiDynamicContentStatusEnum.GENERATED && focusArea.profileAnalysis ? handleAnalysisFooterClick(focusArea.profileAnalysis) : handleFooterClick(focusArea.profileFocusArea)">
                     <div class="flex items-center justify-between">
                       <span class="text-sm font-medium text-slate-600 dark:text-slate-400">
-                        @if (focusArea.hasAnalysis) {
+                        @if (focusArea.selfContentStatusProfileAnalysis === AiDynamicContentStatusEnum.GENERATED) {
+                          View Analysis
+                        } @else if (focusArea.hasAnalysis) {
                           View Details
                         } @else if (focusArea.status === 'complete') {
                           All Questions Answered
@@ -95718,7 +95810,7 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
                         {{ focusArea.title }}
                       </h3>
 
-                      <p [class]="getDescriptionClasses()">
+                      <p [class]="getDescriptionClasses()" [libSymphiqTooltip]="focusArea.description" tooltipPosition="bottom">
                         {{ focusArea.description }}
                       </p>
                     </div>
@@ -95750,13 +95842,15 @@ class SymphiqProfileFocusAreasAnalysesDashboardComponent {
             (closeModal)="handleCloseSearchModal()"
         ></symphiq-search-modal>
       }
+
+      <symphiq-tooltip-container />
     </div>
   `, styles: [".animated-bubbles{background:linear-gradient(135deg,#6366f10d,#a855f70d)}.animated-bubbles.light-mode{background:linear-gradient(135deg,#3b82f608,#9333ea08)}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out}.animated-bubbles:before{width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 70%);top:-250px;right:-250px;animation-delay:-5s}.animated-bubbles:after{width:400px;height:400px;background:radial-gradient(circle,rgba(168,85,247,.1) 0%,transparent 70%);bottom:-200px;left:-200px;animation-delay:-10s}@keyframes float{0%,to{transform:translateY(0) translate(0)}25%{transform:translateY(-50px) translate(50px)}50%{transform:translateY(-100px) translate(-50px)}75%{transform:translateY(-50px) translate(-100px)}}\n"] }]
-    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalyses: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalyses", required: false }] }], profileFocusAreas: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileFocusAreas", required: false }] }], itemStatusesProfileFocusArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileFocusArea", required: false }] }], itemStatusesProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], profileFocusAreaQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileFocusAreaQuestions", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], currentUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUser", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], navigateToProfileFocusArea: [{ type: i0.Output, args: ["navigateToProfileFocusArea"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], answerFocusAreaProfileQuestions: [{ type: i0.Output, args: ["answerFocusAreaProfileQuestions"] }], continueFocusAreaProfileQuestions: [{ type: i0.Output, args: ["continueFocusAreaProfileQuestions"] }], profileQuestionAnswerSave: [{ type: i0.Output, args: ["profileQuestionAnswerSave"] }], focusAreaProfileAdminAnswerAction: [{ type: i0.Output, args: ["focusAreaProfileAdminAnswerAction"] }], onScroll: [{
+    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], profileAnalyses: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnalyses", required: false }] }], profileFocusAreas: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileFocusAreas", required: false }] }], itemStatusesProfileFocusArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileFocusArea", required: false }] }], itemStatusesProfileAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatusesProfileAnalysis", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], funnelAnalysis: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], account: [{ type: i0.Input, args: [{ isSignal: true, alias: "account", required: false }] }], profileFocusAreaQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileFocusAreaQuestions", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], currentUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUser", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], navigateToProfileFocusArea: [{ type: i0.Output, args: ["navigateToProfileFocusArea"] }], navigateToProfileAnalysis: [{ type: i0.Output, args: ["navigateToProfileAnalysis"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], answerFocusAreaProfileQuestions: [{ type: i0.Output, args: ["answerFocusAreaProfileQuestions"] }], continueFocusAreaProfileQuestions: [{ type: i0.Output, args: ["continueFocusAreaProfileQuestions"] }], profileQuestionAnswerSave: [{ type: i0.Output, args: ["profileQuestionAnswerSave"] }], focusAreaProfileAdminAnswerAction: [{ type: i0.Output, args: ["focusAreaProfileAdminAnswerAction"] }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileFocusAreasAnalysesDashboardComponent, { className: "SymphiqProfileFocusAreasAnalysesDashboardComponent", filePath: "lib/components/profile-analyses-focus-areas-dashboard/symphiq-profile-focus-areas-analyses-dashboard.component.ts", lineNumber: 435 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileFocusAreasAnalysesDashboardComponent, { className: "SymphiqProfileFocusAreasAnalysesDashboardComponent", filePath: "lib/components/profile-analyses-focus-areas-dashboard/symphiq-profile-focus-areas-analyses-dashboard.component.ts", lineNumber: 449 }); })();
 
 const _c0$5 = () => [];
 function SymphiqProfileFocusAreaDashboardComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
@@ -96285,18 +96379,29 @@ class ShopProfileViewToggleComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileViewToggleComponent, { className: "ShopProfileViewToggleComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/shop-profile-view-toggle.component.ts", lineNumber: 33 }); })();
 
 const _forTrack0$3 = ($index, $item) => $item.answer.id;
-function ShopProfileQuestionCardComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
+function ShopProfileQuestionCardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "span", 15);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.categoryBreadcrumbClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formattedCategoryName(), " ");
+} }
+function ShopProfileQuestionCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 12);
-    i0.ɵɵelement(2, "path", 14);
+    i0.ɵɵelementStart(1, "svg", 13);
+    i0.ɵɵelement(2, "path", 16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.checkboxClasses());
 } }
-function ShopProfileQuestionCardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 5);
+function ShopProfileQuestionCardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -96305,8 +96410,8 @@ function ShopProfileQuestionCardComponent_Conditional_6_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.question().context, " ");
 } }
-function ShopProfileQuestionCardComponent_Conditional_7_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
+function ShopProfileQuestionCardComponent_Conditional_8_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -96316,12 +96421,12 @@ function ShopProfileQuestionCardComponent_Conditional_7_For_6_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.getFocusAreaTitle(focusArea_r2), " ");
 } }
-function ShopProfileQuestionCardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 15)(2, "span", 16);
+function ShopProfileQuestionCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 17)(2, "span", 18);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 17);
-    i0.ɵɵrepeaterCreate(5, ShopProfileQuestionCardComponent_Conditional_7_For_6_Template, 2, 2, "span", 18, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(4, "div", 19);
+    i0.ɵɵrepeaterCreate(5, ShopProfileQuestionCardComponent_Conditional_8_For_6_Template, 2, 2, "span", 20, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -96332,16 +96437,16 @@ function ShopProfileQuestionCardComponent_Conditional_7_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.relatedFocusAreas());
 } }
-function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+function ShopProfileQuestionCardComponent_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19);
-    i0.ɵɵlistener("animationend", function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template_div_animationend_0_listener() { const answerData_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAnimationEnd(answerData_r4.answer.id)); });
-    i0.ɵɵelementStart(1, "span", 20);
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵlistener("animationend", function ShopProfileQuestionCardComponent_Conditional_9_For_2_Template_div_animationend_0_listener() { const answerData_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAnimationEnd(answerData_r4.answer.id)); });
+    i0.ɵɵelementStart(1, "span", 22);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "symphiq-user-avatar", 21);
+    i0.ɵɵelement(3, "symphiq-user-avatar", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 22);
+    i0.ɵɵelementStart(4, "div", 24);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -96360,28 +96465,28 @@ function ShopProfileQuestionCardComponent_Conditional_8_For_2_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Answered ", ctx_r0.formatAnswerDate(answerData_r4.answer.createdDate), " ");
 } }
-function ShopProfileQuestionCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionCardComponent_Conditional_8_For_2_Template, 6, 11, null, null, _forTrack0$3);
+function ShopProfileQuestionCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionCardComponent_Conditional_9_For_2_Template, 6, 11, null, null, _forTrack0$3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.displayAnswers());
 } }
-function ShopProfileQuestionCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 23)(2, "div", 24);
+function ShopProfileQuestionCardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 25)(2, "div", 26);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 25);
-    i0.ɵɵelement(4, "path", 26);
+    i0.ɵɵelementStart(3, "svg", 27);
+    i0.ɵɵelement(4, "path", 28);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelement(5, "div", 27);
+    i0.ɵɵelement(5, "div", 29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div")(7, "div", 28);
+    i0.ɵɵelementStart(6, "div")(7, "div", 30);
     i0.ɵɵtext(8, " Not answered yet ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 29);
+    i0.ɵɵelementStart(9, "div", 31);
     i0.ɵɵtext(10, " Click the button below to provide your answer ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -96398,13 +96503,13 @@ function ShopProfileQuestionCardComponent_Conditional_9_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.unansweredTextClasses());
 } }
-function ShopProfileQuestionCardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function ShopProfileQuestionCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function ShopProfileQuestionCardComponent_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onHistoryClick()); });
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function ShopProfileQuestionCardComponent_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onHistoryClick()); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 12);
-    i0.ɵɵelement(2, "path", 31);
+    i0.ɵɵelementStart(1, "svg", 13);
+    i0.ɵɵelement(2, "path", 33);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(3, "span");
@@ -96414,7 +96519,7 @@ function ShopProfileQuestionCardComponent_Conditional_11_Template(rf, ctx) { if
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.historyButtonClasses());
 } }
-function ShopProfileQuestionCardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function ShopProfileQuestionCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div");
 } }
 class ShopProfileQuestionCardComponent {
@@ -96426,6 +96531,7 @@ class ShopProfileQuestionCardComponent {
         this.profileAnswers = input([], ...(ngDevMode ? [{ debugName: "profileAnswers" }] : []));
         this.profileAnswerHistories = input([], ...(ngDevMode ? [{ debugName: "profileAnswerHistories" }] : []));
         this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
+        this.categoryNameFormatter = input(null, ...(ngDevMode ? [{ debugName: "categoryNameFormatter" }] : []));
         this.answerClick = output();
         this.historyClick = output();
         this.questionAnswers = computed(() => {
@@ -96461,6 +96567,16 @@ class ShopProfileQuestionCardComponent {
         this.showFocusAreaChips = computed(() => {
             return this.viewType() === 'category';
         }, ...(ngDevMode ? [{ debugName: "showFocusAreaChips" }] : []));
+        this.showCategoryBreadcrumb = computed(() => {
+            return this.viewType() === 'all' && this.question().category;
+        }, ...(ngDevMode ? [{ debugName: "showCategoryBreadcrumb" }] : []));
+        this.formattedCategoryName = computed(() => {
+            const category = this.question().category;
+            if (!category)
+                return '';
+            const formatter = this.categoryNameFormatter();
+            return formatter ? formatter(category) : category;
+        }, ...(ngDevMode ? [{ debugName: "formattedCategoryName" }] : []));
         this.relatedFocusAreas = computed(() => {
             return this.question().focusAreaDomains || [];
         }, ...(ngDevMode ? [{ debugName: "relatedFocusAreas" }] : []));
@@ -96515,6 +96631,11 @@ class ShopProfileQuestionCardComponent {
             ? 'bg-white border-slate-200 hover:border-slate-300 hover:shadow-lg'
             : 'bg-slate-800/50 border-slate-700/50 hover:border-slate-600/70 hover:shadow-xl hover:shadow-slate-900/30';
     }
+    categoryBreadcrumbClasses() {
+        return this.isLightMode()
+            ? 'text-blue-600'
+            : 'text-blue-400';
+    }
     questionTextClasses() {
         return this.isLightMode()
             ? 'text-slate-900'
@@ -96602,42 +96723,46 @@ class ShopProfileQuestionCardComponent {
             : 'bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white shadow-lg shadow-blue-500/20';
     }
     static { this.ɵfac = function ShopProfileQuestionCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ShopProfileQuestionCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileQuestionCardComponent, selectors: [["symphiq-shop-profile-question-card"]], inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"] }, outputs: { answerClick: "answerClick", historyClick: "historyClick" }, decls: 18, vars: 10, consts: [[1, "rounded-xl", "border-2", "p-6", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "gap-3"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "flex-shrink-0", "w-6", "h-6", "rounded", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "flex", "flex-wrap", "gap-3"], [1, "rounded-lg", "p-6", "border-2", "border-dashed", "text-center", 3, "ngClass"], [1, "mt-4", "flex", "items-center", "justify-between"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "ngClass"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 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", "M9 5l7 7-7 7"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-full", 3, "animationend", "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["size", "small", 3, "viewMode", "user"], [1, "self-center", "text-xs", "-ml-1", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-3"], [1, "relative", "w-16", "h-16", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "absolute", "top-1", "right-1", "w-3", "h-3", "rounded-full", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"]], template: function ShopProfileQuestionCardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3", 3);
-            i0.ɵɵtext(4);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileQuestionCardComponent, selectors: [["symphiq-shop-profile-question-card"]], inputs: { question: [1, "question"], viewMode: [1, "viewMode"], viewType: [1, "viewType"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], categoryNameFormatter: [1, "categoryNameFormatter"] }, outputs: { answerClick: "answerClick", historyClick: "historyClick" }, decls: 19, vars: 11, consts: [[1, "rounded-xl", "border-2", "p-6", "transition-all", "duration-200", 3, "ngClass"], [1, "mb-3"], [1, "flex", "items-start", "gap-3"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "flex-shrink-0", "w-6", "h-6", "rounded", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "mb-4"], [1, "flex", "flex-wrap", "gap-3"], [1, "rounded-lg", "p-6", "border-2", "border-dashed", "text-center", 3, "ngClass"], [1, "mt-4", "flex", "items-center", "justify-between"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "ngClass"], ["type", "button", 1, "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 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", "M9 5l7 7-7 7"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], [1, "mb-2"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1.5", "rounded-full", "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-full", 3, "animationend", "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["size", "small", 3, "viewMode", "user"], [1, "self-center", "text-xs", "-ml-1", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-3"], [1, "relative", "w-16", "h-16", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "absolute", "top-1", "right-1", "w-3", "h-3", "rounded-full", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-xs", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"]], template: function ShopProfileQuestionCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, ShopProfileQuestionCardComponent_Conditional_1_Template, 3, 2, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "h3", 4);
+            i0.ɵɵtext(5);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(5, ShopProfileQuestionCardComponent_Conditional_5_Template, 3, 1, "div", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(6, ShopProfileQuestionCardComponent_Conditional_6_Template, 2, 2, "p", 5);
-            i0.ɵɵconditionalCreate(7, ShopProfileQuestionCardComponent_Conditional_7_Template, 7, 2, "div", 6);
-            i0.ɵɵconditionalCreate(8, ShopProfileQuestionCardComponent_Conditional_8_Template, 3, 0, "div", 7)(9, ShopProfileQuestionCardComponent_Conditional_9_Template, 11, 6, "div", 8);
-            i0.ɵɵelementStart(10, "div", 9);
-            i0.ɵɵconditionalCreate(11, ShopProfileQuestionCardComponent_Conditional_11_Template, 5, 1, "button", 10)(12, ShopProfileQuestionCardComponent_Conditional_12_Template, 1, 0, "div");
-            i0.ɵɵelementStart(13, "button", 11);
-            i0.ɵɵlistener("click", function ShopProfileQuestionCardComponent_Template_button_click_13_listener() { return ctx.onAnswerClick(); });
-            i0.ɵɵelementStart(14, "span");
-            i0.ɵɵtext(15);
+            i0.ɵɵconditionalCreate(6, ShopProfileQuestionCardComponent_Conditional_6_Template, 3, 1, "div", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(7, ShopProfileQuestionCardComponent_Conditional_7_Template, 2, 2, "p", 6);
+            i0.ɵɵconditionalCreate(8, ShopProfileQuestionCardComponent_Conditional_8_Template, 7, 2, "div", 7);
+            i0.ɵɵconditionalCreate(9, ShopProfileQuestionCardComponent_Conditional_9_Template, 3, 0, "div", 8)(10, ShopProfileQuestionCardComponent_Conditional_10_Template, 11, 6, "div", 9);
+            i0.ɵɵelementStart(11, "div", 10);
+            i0.ɵɵconditionalCreate(12, ShopProfileQuestionCardComponent_Conditional_12_Template, 5, 1, "button", 11)(13, ShopProfileQuestionCardComponent_Conditional_13_Template, 1, 0, "div");
+            i0.ɵɵelementStart(14, "button", 12);
+            i0.ɵɵlistener("click", function ShopProfileQuestionCardComponent_Template_button_click_14_listener() { return ctx.onAnswerClick(); });
+            i0.ɵɵelementStart(15, "span");
+            i0.ɵɵtext(16);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(16, "svg", 12);
-            i0.ɵɵelement(17, "path", 13);
+            i0.ɵɵelementStart(17, "svg", 13);
+            i0.ɵɵelement(18, "path", 14);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showCategoryBreadcrumb() ? 1 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.questionTextClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.question().question, " ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isAnswered() ? 5 : -1);
+            i0.ɵɵconditional(ctx.isAnswered() ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.question().context ? 6 : -1);
+            i0.ɵɵconditional(ctx.question().context ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showFocusAreaChips() && ctx.relatedFocusAreas().length > 0 ? 7 : -1);
+            i0.ɵɵconditional(ctx.showFocusAreaChips() && ctx.relatedFocusAreas().length > 0 ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.displayAnswers().length > 0 ? 8 : 9);
+            i0.ɵɵconditional(ctx.displayAnswers().length > 0 ? 9 : 10);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.hasHistory() ? 11 : 12);
+            i0.ɵɵconditional(ctx.hasHistory() ? 12 : 13);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.buttonClasses());
             i0.ɵɵadvance(2);
@@ -96646,131 +96771,137 @@ class ShopProfileQuestionCardComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShopProfileQuestionCardComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-shop-profile-question-card', standalone: true, imports: [CommonModule, UserAvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="containerClasses()" class="rounded-xl border-2 p-6 transition-all duration-200">
-      <!-- Question Header with Checkbox -->
-      <div class="flex items-start gap-3">
-        <div class="flex-1 min-w-0">
-          <h3 [ngClass]="questionTextClasses()" class="text-lg font-bold mb-2">
-            {{ question().question }}
-          </h3>
-        </div>
-        @if (isAnswered()) {
-          <div [ngClass]="checkboxClasses()" class="flex-shrink-0 w-6 h-6 rounded flex items-center justify-center">
-            <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="M5 13l4 4L19 7"></path>
-            </svg>
-          </div>
-        }
-      </div>
-
-      <!-- Context -->
-      @if (question().context) {
-        <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mb-4">
-          {{ question().context }}
-        </p>
-      }
-
-      <!-- Related Focus Areas (only show when viewing by category) -->
-      @if (showFocusAreaChips() && relatedFocusAreas().length > 0) {
-        <div class="mb-4">
-          <div class="mb-2">
-            <span [ngClass]="relatedLabelClasses()" class="text-xs font-semibold">
-              Related to {{ relatedFocusAreas().length }} focus area(s)
-            </span>
-          </div>
-          <div class="flex flex-wrap gap-2">
-            @for (focusArea of relatedFocusAreas(); track focusArea) {
-              <span [ngClass]="focusAreaChipClasses()" class="px-3 py-1.5 rounded-full text-xs font-medium">
-                {{ getFocusAreaTitle(focusArea) }}
-              </span>
-            }
-          </div>
-        </div>
-      }
-
-      <!-- Answer Section -->
-      @if (displayAnswers().length > 0) {
-        <!-- Answered State - Show answer chips -->
-        <div class="flex flex-wrap gap-3">
-          @for (answerData of displayAnswers(); track answerData.answer.id) {
-            <div
-              [ngClass]="answerChipClasses()"
-              [class.animate-answer-pop-in]="isNewAnswer(answerData.answer.id)"
-              [class.animate-answer-fade-out]="isRemovedAnswer(answerData.answer.id)"
-              (animationend)="onAnimationEnd(answerData.answer.id)"
-              class="flex items-center gap-2 px-4 py-2.5 rounded-full">
-              <span [ngClass]="answerTextClasses()" class="text-sm font-medium">
-                {{ answerData.answer.answer }}
-              </span>
-              <symphiq-user-avatar
-                [viewMode]="viewMode()"
-                [user]="answerData.user"
-                size="small"
-              />
-            </div>
-            <div [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
-              Answered {{ formatAnswerDate(answerData.answer.createdDate) }}
-            </div>
-          }
-        </div>
-      } @else {
-        <!-- Unanswered State -->
-        <div [ngClass]="unansweredContainerClasses()" class="rounded-lg p-6 border-2 border-dashed text-center">
-          <div class="flex flex-col items-center gap-3">
-            <!-- Empty State Icon -->
-            <div [ngClass]="emptyStateIconContainerClasses()" class="relative w-16 h-16">
-              <svg [ngClass]="emptyStateIconClasses()" class="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-              </svg>
-              <div [ngClass]="emptyStateDotClasses()" class="absolute top-1 right-1 w-3 h-3 rounded-full border-2"></div>
-            </div>
-            <div>
-              <div [ngClass]="unansweredLabelClasses()" class="text-sm font-semibold mb-1">
-                Not answered yet
-              </div>
-              <div [ngClass]="unansweredTextClasses()" class="text-xs">
-                Click the button below to provide your answer
-              </div>
-            </div>
-          </div>
-        </div>
-      }
-
-      <!-- Action Buttons -->
-      <div class="mt-4 flex items-center justify-between">
-        <!-- History Button (left) -->
-        @if (hasHistory()) {
-          <button
-            type="button"
-            (click)="onHistoryClick()"
-            [ngClass]="historyButtonClasses()"
-            class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 hover:scale-105 active:scale-95">
-            <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-            <span>History</span>
-          </button>
-        } @else {
-          <div></div>
-        }
-
-        <!-- Answer Button (right) -->
-        <button
-          type="button"
-          (click)="onAnswerClick()"
-          [ngClass]="buttonClasses()"
-          class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 hover:scale-105 active:scale-95">
-          <span>{{ isAnswered() ? 'Edit Answer' : 'Answer' }}</span>
-          <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="M9 5l7 7-7 7"></path>
-          </svg>
-        </button>
-      </div>
-    </div>
+        args: [{ selector: 'symphiq-shop-profile-question-card', standalone: true, imports: [CommonModule, UserAvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="containerClasses()" class="rounded-xl border-2 p-6 transition-all duration-200">
+      @if (showCategoryBreadcrumb()) {
+        <div class="mb-3">
+          <span [ngClass]="categoryBreadcrumbClasses()" class="text-xs font-semibold uppercase tracking-wider">
+            {{ formattedCategoryName() }}
+          </span>
+        </div>
+      }
+      <div class="flex items-start gap-3">
+        <div class="flex-1 min-w-0">
+          <h3 [ngClass]="questionTextClasses()" class="text-lg font-bold mb-2">
+            {{ question().question }}
+          </h3>
+        </div>
+        @if (isAnswered()) {
+          <div [ngClass]="checkboxClasses()" class="flex-shrink-0 w-6 h-6 rounded flex items-center justify-center">
+            <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="M5 13l4 4L19 7"></path>
+            </svg>
+          </div>
+        }
+      </div>
+
+      <!-- Context -->
+      @if (question().context) {
+        <p [ngClass]="contextTextClasses()" class="text-sm leading-relaxed mb-4">
+          {{ question().context }}
+        </p>
+      }
+
+      <!-- Related Focus Areas (only show when viewing by category) -->
+      @if (showFocusAreaChips() && relatedFocusAreas().length > 0) {
+        <div class="mb-4">
+          <div class="mb-2">
+            <span [ngClass]="relatedLabelClasses()" class="text-xs font-semibold">
+              Related to {{ relatedFocusAreas().length }} focus area(s)
+            </span>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            @for (focusArea of relatedFocusAreas(); track focusArea) {
+              <span [ngClass]="focusAreaChipClasses()" class="px-3 py-1.5 rounded-full text-xs font-medium">
+                {{ getFocusAreaTitle(focusArea) }}
+              </span>
+            }
+          </div>
+        </div>
+      }
+
+      <!-- Answer Section -->
+      @if (displayAnswers().length > 0) {
+        <!-- Answered State - Show answer chips -->
+        <div class="flex flex-wrap gap-3">
+          @for (answerData of displayAnswers(); track answerData.answer.id) {
+            <div
+              [ngClass]="answerChipClasses()"
+              [class.animate-answer-pop-in]="isNewAnswer(answerData.answer.id)"
+              [class.animate-answer-fade-out]="isRemovedAnswer(answerData.answer.id)"
+              (animationend)="onAnimationEnd(answerData.answer.id)"
+              class="flex items-center gap-2 px-4 py-2.5 rounded-full">
+              <span [ngClass]="answerTextClasses()" class="text-sm font-medium">
+                {{ answerData.answer.answer }}
+              </span>
+              <symphiq-user-avatar
+                [viewMode]="viewMode()"
+                [user]="answerData.user"
+                size="small"
+              />
+            </div>
+            <div [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
+              Answered {{ formatAnswerDate(answerData.answer.createdDate) }}
+            </div>
+          }
+        </div>
+      } @else {
+        <!-- Unanswered State -->
+        <div [ngClass]="unansweredContainerClasses()" class="rounded-lg p-6 border-2 border-dashed text-center">
+          <div class="flex flex-col items-center gap-3">
+            <!-- Empty State Icon -->
+            <div [ngClass]="emptyStateIconContainerClasses()" class="relative w-16 h-16">
+              <svg [ngClass]="emptyStateIconClasses()" class="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+              </svg>
+              <div [ngClass]="emptyStateDotClasses()" class="absolute top-1 right-1 w-3 h-3 rounded-full border-2"></div>
+            </div>
+            <div>
+              <div [ngClass]="unansweredLabelClasses()" class="text-sm font-semibold mb-1">
+                Not answered yet
+              </div>
+              <div [ngClass]="unansweredTextClasses()" class="text-xs">
+                Click the button below to provide your answer
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+
+      <!-- Action Buttons -->
+      <div class="mt-4 flex items-center justify-between">
+        <!-- History Button (left) -->
+        @if (hasHistory()) {
+          <button
+            type="button"
+            (click)="onHistoryClick()"
+            [ngClass]="historyButtonClasses()"
+            class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 hover:scale-105 active:scale-95">
+            <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            <span>History</span>
+          </button>
+        } @else {
+          <div></div>
+        }
+
+        <!-- Answer Button (right) -->
+        <button
+          type="button"
+          (click)="onAnswerClick()"
+          [ngClass]="buttonClasses()"
+          class="px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 hover:scale-105 active:scale-95">
+          <span>{{ isAnswered() ? 'Edit Answer' : 'Answer' }}</span>
+          <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="M9 5l7 7-7 7"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
   `, styles: ["@keyframes answerPopIn{0%{opacity:0;transform:scale(.8);box-shadow:0 0 #3b82f600}50%{opacity:1;transform:scale(1.05);box-shadow:0 0 20px 4px #3b82f680}to{opacity:1;transform:scale(1);box-shadow:0 0 #3b82f600}}.animate-answer-pop-in{animation:answerPopIn .5s ease-out forwards}@keyframes answerFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.animate-answer-fade-out{animation:answerFadeOut .4s ease-out forwards}\n"] }]
-    }], null, { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], profileAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswers", required: false }] }], profileAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswerHistories", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], answerClick: [{ type: i0.Output, args: ["answerClick"] }], historyClick: [{ type: i0.Output, args: ["historyClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionCardComponent, { className: "ShopProfileQuestionCardComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/shop-profile-question-card.component.ts", lineNumber: 178 }); })();
+    }], null, { question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], profileAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswers", required: false }] }], profileAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswerHistories", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], categoryNameFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryNameFormatter", required: false }] }], answerClick: [{ type: i0.Output, args: ["answerClick"] }], historyClick: [{ type: i0.Output, args: ["historyClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionCardComponent, { className: "ShopProfileQuestionCardComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/shop-profile-question-card.component.ts", lineNumber: 184 }); })();
 
 const _c0$4 = ["scrollContainer"];
 const _c1$1 = ["stickySentinel"];
@@ -98291,11 +98422,11 @@ function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditio
 } if (rf & 2) {
     const question_r6 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("id", "question-" + question_r6.id)("question", question_r6)("viewMode", ctx_r1.viewMode())("viewType", ctx_r1.viewType())("profileAnswers", ctx_r1.profileAnswers())("profileAnswerHistories", ctx_r1.profileAnswerHistories())("users", ctx_r1.users());
+    i0.ɵɵproperty("id", "question-" + question_r6.id)("question", question_r6)("viewMode", ctx_r1.viewMode())("viewType", ctx_r1.viewType())("profileAnswers", ctx_r1.profileAnswers())("profileAnswerHistories", ctx_r1.profileAnswerHistories())("users", ctx_r1.users())("categoryNameFormatter", ctx_r1.getCategoryNameFormatter());
 } }
 function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_18_For_2_Template, 1, 7, "symphiq-shop-profile-question-card", 31, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionsModalComponent_Conditional_0_Conditional_9_Conditional_18_For_2_Template, 1, 8, "symphiq-shop-profile-question-card", 31, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -98675,6 +98806,9 @@ class ShopProfileQuestionsModalComponent {
             .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
             .join(' ');
     }
+    getCategoryNameFormatter() {
+        return (category) => this.formatCategoryName(category);
+    }
     formatFocusAreaName(focusArea) {
         if (focusArea === 'general')
             return 'General';
@@ -98786,7 +98920,7 @@ class ShopProfileQuestionsModalComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalWrapper = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
-        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], showAllQuestions: [1, "showAllQuestions"], startDirectAnswer: [1, "startDirectAnswer"], viewMode: [1, "viewMode"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick", answerSave: "answerSave" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], ["scrollContainer", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "block", "h-[80vh]", 3, "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "block", "h-[80vh]", 3, "close", "back", "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "flex", "flex-col", "gap-6"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users"], [3, "answerClick", "historyClick", "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "h-[70vh]", "overflow-hidden"], [1, "block", "h-full", 3, "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers"], [1, "block", "h-full", 3, "backClick", "saveClick", "saveAndNextClick", "navigateToList", "navigateToNextQuestion", "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers"]], template: function ShopProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], showAllQuestions: [1, "showAllQuestions"], startDirectAnswer: [1, "startDirectAnswer"], viewMode: [1, "viewMode"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick", answerSave: "answerSave" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], ["scrollContainer", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "block", "h-[80vh]", 3, "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "block", "h-[80vh]", 3, "close", "back", "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "flex", "flex-col", "gap-6"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users", "categoryNameFormatter"], [3, "answerClick", "historyClick", "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users", "categoryNameFormatter"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "h-[70vh]", "overflow-hidden"], [1, "block", "h-full", 3, "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers"], [1, "block", "h-full", 3, "backClick", "saveClick", "saveAndNextClick", "navigateToList", "navigateToNextQuestion", "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers"]], template: function ShopProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ShopProfileQuestionsModalComponent_Conditional_0_Template, 11, 5, "div", 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -98930,6 +99064,7 @@ class ShopProfileQuestionsModalComponent {
                         [profileAnswers]="profileAnswers()"
                         [profileAnswerHistories]="profileAnswerHistories()"
                         [users]="users()"
+                        [categoryNameFormatter]="getCategoryNameFormatter()"
                         (answerClick)="onQuestionAnswerClick($event)"
                         (historyClick)="onQuestionHistoryClick($event)" />
                     }
@@ -99014,7 +99149,7 @@ class ShopProfileQuestionsModalComponent {
             type: ViewChild,
             args: ['scrollContainer']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionsModalComponent, { className: "ShopProfileQuestionsModalComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/shop-profile-questions-modal.component.ts", lineNumber: 219 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionsModalComponent, { className: "ShopProfileQuestionsModalComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/shop-profile-questions-modal.component.ts", lineNumber: 220 }); })();
 
 const _c0$2 = ["chartdiv"];
 function ShopProfileStatusCardComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {