@memberjunction/ng-conversations 5.48.0 → 5.49.0

package/dist/lib/components/conversation/conversation-chat-area.component.js

@@ -66,20 +66,20 @@ function ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 23);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 22);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c2, ctx_r0.agentCharacterConfig, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.state) ?? "idle", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.characterName, ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.avatarUrl, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.voiceStateMode) ?? "subtle"));
 } }
 function ConversationChatAreaComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-chat-agent-presence-default", 22);
+    i0.ɵɵelement(0, "mj-chat-agent-presence-default", 21);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("State", (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.state) ?? "idle")("AgentName", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.characterName)("AvatarUrl", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.avatarUrl)("Mode", (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.voiceStateMode) ?? "subtle");
 } }
 function ConversationChatAreaComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Conditional_1_Template, 1, 8, "ng-container")(2, ConversationChatAreaComponent_Conditional_1_Conditional_2_Template, 1, 4, "mj-chat-agent-presence-default", 22);
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Conditional_1_Template, 1, 8, "ng-container")(2, ConversationChatAreaComponent_Conditional_1_Conditional_2_Template, 1, 4, "mj-chat-agent-presence-default", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_2_0;
@@ -92,20 +92,20 @@ function ConversationChatAreaComponent_Conditional_2_ng_container_0_Template(rf,
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 23);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 22);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c3, ctx_r0.conversation, (ctx_r0.conversation == null ? null : ctx_r0.conversation.Name) ?? null, (ctx_r0.sharedByBadge == null ? null : ctx_r0.sharedByBadge.display) ?? null, ctx_r0.artifactCountDisplay, ctx_r0.showArtifactIndicator));
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵelementStart(0, "button", 37);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sidebarToggleClicked.emit()); });
-    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelement(1, "i", 38);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelementStart(0, "div", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -114,8 +114,8 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_3_Template(rf,
     i0.ɵɵtextInterpolate(ctx_r0.conversation.Name || "");
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 27);
-    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵelement(1, "i", 39);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -127,9 +127,9 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_4_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 41);
+    i0.ɵɵelementStart(0, "button", 40);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openProjectSelector()); });
-    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -140,19 +140,19 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵelementStart(0, "button", 42);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.viewTestRun(ctx_r0.conversation.TestRunID)); });
-    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Test");
     i0.ɵɵelementEnd()();
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 45);
+    i0.ɵɵelementStart(0, "button", 44);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.showPinsPanel = !ctx_r0.showPinsPanel); });
-    i0.ɵɵelement(1, "i", 46);
-    i0.ɵɵelementStart(2, "span", 47);
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelementStart(2, "span", 46);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -163,10 +163,10 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵelementStart(0, "button", 47);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.viewArtifacts()); });
-    i0.ɵɵelement(1, "i", 49);
-    i0.ɵɵelementStart(2, "span", 50);
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(2, "span", 49);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -176,10 +176,10 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵelementStart(0, "button", 50);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleMembersModal()); });
-    i0.ɵɵelement(1, "i", 52);
-    i0.ɵɵelementStart(2, "span", 53);
+    i0.ɵɵelement(1, "i", 51);
+    i0.ɵɵelementStart(2, "span", 52);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -189,7 +189,7 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-mode-picker", 54);
+    i0.ɵɵelementStart(0, "mj-conversation-mode-picker", 53);
     i0.ɵɵlistener("PresetChanged", function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template_mj_conversation_mode_picker_PresetChanged_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnAgentModePresetChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -197,26 +197,26 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template(rf,
     i0.ɵɵproperty("AgentID", ctx_r0.ModePickerTargetAgentId)("Disabled", ctx_r0.isProcessing);
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-conversation-agent-picker", 35);
+    i0.ɵɵelement(0, "mj-conversation-agent-picker", 34);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Conversation", ctx_r0.conversation)("CurrentUser", ctx_r0.currentUser)("Disabled", ctx_r0.isReadOnlyView);
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵelementStart(0, "button", 54);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.exportConversation()); });
-    i0.ɵɵelement(1, "i", 56);
-    i0.ɵɵelementStart(2, "span", 57);
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementStart(2, "span", 56);
     i0.ɵɵtext(3, "Export");
     i0.ɵɵelementEnd()();
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵelementStart(0, "button", 57);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.shareConversation()); });
-    i0.ɵɵelement(1, "i", 40);
-    i0.ɵɵelementStart(2, "span", 57);
+    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelementStart(2, "span", 56);
     i0.ɵɵtext(3, "Share");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -225,21 +225,21 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template(rf,
     i0.ɵɵproperty("title", ctx_r0.isShared ? "Manage sharing" : "Share conversation");
 } }
 function ConversationChatAreaComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 24);
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_3_Conditional_2_Template, 2, 0, "button", 25);
-    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_3_Conditional_3_Template, 2, 1, "div", 26);
-    i0.ɵɵconditionalCreate(4, ConversationChatAreaComponent_Conditional_3_Conditional_4_Template, 4, 2, "span", 27);
-    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_3_Conditional_5_Template, 4, 1, "button", 28);
-    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_3_Conditional_6_Template, 4, 0, "button", 29);
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 23);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_3_Conditional_2_Template, 2, 0, "button", 24);
+    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_3_Conditional_3_Template, 2, 1, "div", 25);
+    i0.ɵɵconditionalCreate(4, ConversationChatAreaComponent_Conditional_3_Conditional_4_Template, 4, 2, "span", 26);
+    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_3_Conditional_5_Template, 4, 1, "button", 27);
+    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_3_Conditional_6_Template, 4, 0, "button", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 30);
-    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_3_Conditional_8_Template, 4, 3, "button", 31);
-    i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_3_Conditional_9_Template, 4, 1, "button", 32);
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_3_Conditional_10_Template, 4, 1, "button", 33);
-    i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_3_Conditional_11_Template, 1, 2, "mj-conversation-mode-picker", 34);
-    i0.ɵɵconditionalCreate(12, ConversationChatAreaComponent_Conditional_3_Conditional_12_Template, 1, 3, "mj-conversation-agent-picker", 35);
-    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_3_Conditional_13_Template, 4, 0, "button", 36);
-    i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_3_Conditional_14_Template, 4, 3, "button", 37);
+    i0.ɵɵelementStart(7, "div", 29);
+    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_3_Conditional_8_Template, 4, 3, "button", 30);
+    i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_3_Conditional_9_Template, 4, 1, "button", 31);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_3_Conditional_10_Template, 4, 1, "button", 32);
+    i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_3_Conditional_11_Template, 1, 2, "mj-conversation-mode-picker", 33);
+    i0.ɵɵconditionalCreate(12, ConversationChatAreaComponent_Conditional_3_Conditional_12_Template, 1, 3, "mj-conversation-agent-picker", 34);
+    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_3_Conditional_13_Template, 4, 0, "button", 35);
+    i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_3_Conditional_14_Template, 4, 3, "button", 36);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -256,7 +256,7 @@ function ConversationChatAreaComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional((ctx_r0.conversation == null ? null : ctx_r0.conversation.TestRunID) ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.pinnedMessages.length > 0 ? 8 : -1);
+    i0.ɵɵconditional(ctx_r0.allowPinning && ctx_r0.pinnedMessages.length > 0 ? 8 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.showArtifactIndicator && ctx_r0.artifactCountDisplay > 0 ? 9 : -1);
     i0.ɵɵadvance();
@@ -275,23 +275,29 @@ function ConversationChatAreaComponent_Conditional_5_ng_container_1_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_5_ng_container_1_Template, 1, 0, "ng-container", 23);
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_5_ng_container_1_Template, 1, 0, "ng-container", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.slotTemplate("demonstrationSurface"))("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c4, ctx_r0.demonstrationSurfaceContent, ctx_r0.demonstrationSurfaceContent, ctx_r0.showDemonstrationSurface));
 } }
-function ConversationChatAreaComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
+function ConversationChatAreaComponent_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58);
     i0.ɵɵelement(1, "mj-loading", 59);
     i0.ɵɵelementEnd();
 } }
+function ConversationChatAreaComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_7_Conditional_0_Template, 2, 0, "div", 58);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.showLoadingState ? 0 : -1);
+} }
 function ConversationChatAreaComponent_Conditional_8_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_8_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 23);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_8_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 22);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c6, ctx_r0.emptyStateConfig, (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.greeting) ?? ctx_r0.emptyStateGreeting, ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.subtext, (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.suggestedPrompts) ?? i0.ɵɵpureFunction0(2, _c5)));
@@ -303,10 +309,10 @@ function ConversationChatAreaComponent_Conditional_8_Conditional_1_Template(rf,
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("currentUser", ctx_r0.currentUser)("initialDraft", ctx_r0.GetInitialDraftFor(null))("disabled", ctx_r0.isProcessing)("showSidebarToggle", ctx_r0.showSidebarToggle)("overlayMode", ctx_r0.overlayMode)("greeting", (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.greeting) ?? ctx_r0.emptyStateGreeting)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
+    i0.ɵɵproperty("currentUser", ctx_r0.currentUser)("initialDraft", ctx_r0.GetInitialDraftFor(null))("disabled", ctx_r0.isProcessing)("showSidebarToggle", ctx_r0.showSidebarToggle)("overlayMode", ctx_r0.overlayMode)("greeting", (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.greeting) ?? ctx_r0.emptyStateGreeting)("showSuggestedPrompts", ctx_r0.showSuggestedPrompts)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
 } }
 function ConversationChatAreaComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_8_Conditional_0_Template, 1, 8, "ng-container")(1, ConversationChatAreaComponent_Conditional_8_Conditional_1_Template, 1, 11, "mj-conversation-empty-state", 60);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_8_Conditional_0_Template, 1, 8, "ng-container")(1, ConversationChatAreaComponent_Conditional_8_Conditional_1_Template, 1, 12, "mj-conversation-empty-state", 60);
 } if (rf & 2) {
     let tmp_1_0;
     const ctx_r0 = i0.ɵɵnextContext();
@@ -314,7 +320,7 @@ function ConversationChatAreaComponent_Conditional_8_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "div", 62);
     i0.ɵɵelementStart(2, "div", 63)(3, "div", 64)(4, "mj-message-input", 65, 0);
     i0.ɵɵlistener("initialDraftApplied", function ConversationChatAreaComponent_Conditional_9_Template_mj_message_input_initialDraftApplied_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnComposerDraftApplied()); })("DraftStateChanged", function ConversationChatAreaComponent_Conditional_9_Template_mj_message_input_DraftStateChanged_4_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(null, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_9_Template_mj_message_input_ComposerBlurred_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("emptyStateSubmit", function ConversationChatAreaComponent_Conditional_9_Template_mj_message_input_emptyStateSubmit_4_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEmptyStateMessageSent($event)); });
@@ -322,7 +328,7 @@ function ConversationChatAreaComponent_Conditional_9_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("emptyStateMode", true)("initialDraft", ctx_r0.GetInitialDraftFor(null))("currentUser", ctx_r0.currentUser)("disabled", ctx_r0.isProcessing)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
+    i0.ɵɵproperty("emptyStateMode", true)("initialDraft", ctx_r0.GetInitialDraftFor(null))("currentUser", ctx_r0.currentUser)("disabled", ctx_r0.isProcessing)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("enablePlanMode", ctx_r0.allowPlanMode)("enableRealtime", ctx_r0.allowRealtime)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
 } }
 function ConversationChatAreaComponent_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 66);
@@ -360,12 +366,12 @@ function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Templa
 } if (rf & 2) {
     const inputRef_r16 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("hidden", inputRef_r16.conversationId !== ctx_r0.conversationId)("initialDraft", ctx_r0.GetInitialDraftFor(inputRef_r16.conversationId))("conversationId", inputRef_r16.conversationId)("conversationName", inputRef_r16.conversationName)("currentUser", ctx_r0.currentUser)("conversationHistory", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.messages : i0.ɵɵpureFunction0(23, _c5))("artifactsByDetailId", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.artifactsByDetailId : ctx_r0.emptyArtifactsMap)("systemArtifactsByDetailId", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.systemArtifactsByDetailId : ctx_r0.emptyArtifactsMap)("agentRunsByDetailId", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.agentRunsByDetailId : ctx_r0.emptyAgentRunsMap)("appContext", ctx_r0.appContext)("applicationId", ctx_r0.applicationId)("defaultAgentId", ctx_r0.defaultAgentId)("conversationDefaultAgentId", inputRef_r16.conversationId === ctx_r0.conversationId ? (ctx_r0.conversation == null ? null : ctx_r0.conversation.DefaultAgentID) ?? null : null)("agentConfigurationPresetId", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.ActiveAgentConfigurationPresetId : null)("inProgressMessageIds", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.inProgressMessageIds : ctx_r0.emptyInProgressIds)("disabled", ctx_r0.isProcessing || ctx_r0.isReadOnlyView)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes)("initialMessage", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r16.conversationId) ? ctx_r0.pendingMessage : null)("initialAttachments", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r16.conversationId) ? ctx_r0.pendingAttachments : null);
+    i0.ɵɵproperty("hidden", inputRef_r16.conversationId !== ctx_r0.conversationId)("initialDraft", ctx_r0.GetInitialDraftFor(inputRef_r16.conversationId))("conversationId", inputRef_r16.conversationId)("conversationName", inputRef_r16.conversationName)("currentUser", ctx_r0.currentUser)("conversationHistory", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.messages : i0.ɵɵpureFunction0(25, _c5))("artifactsByDetailId", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.artifactsByDetailId : ctx_r0.emptyArtifactsMap)("systemArtifactsByDetailId", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.systemArtifactsByDetailId : ctx_r0.emptyArtifactsMap)("agentRunsByDetailId", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.agentRunsByDetailId : ctx_r0.emptyAgentRunsMap)("appContext", ctx_r0.appContext)("applicationId", ctx_r0.applicationId)("defaultAgentId", ctx_r0.defaultAgentId)("conversationDefaultAgentId", inputRef_r16.conversationId === ctx_r0.conversationId ? (ctx_r0.conversation == null ? null : ctx_r0.conversation.DefaultAgentID) ?? null : null)("agentConfigurationPresetId", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.ActiveAgentConfigurationPresetId : null)("inProgressMessageIds", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.inProgressMessageIds : ctx_r0.emptyInProgressIds)("disabled", ctx_r0.isProcessing || ctx_r0.isReadOnlyView)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("enablePlanMode", ctx_r0.allowPlanMode)("enableRealtime", ctx_r0.allowRealtime)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes)("initialMessage", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r16.conversationId) ? ctx_r0.pendingMessage : null)("initialAttachments", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r16.conversationId) ? ctx_r0.pendingAttachments : null);
 } }
 function ConversationChatAreaComponent_Conditional_10_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_10_Conditional_8_Conditional_0_Template, 4, 0, "div", 75);
     i0.ɵɵelementStart(1, "div", 64);
-    i0.ɵɵrepeaterCreate(2, ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template, 2, 24, "mj-message-input", 76, _forTrack0);
+    i0.ɵɵrepeaterCreate(2, ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template, 2, 26, "mj-message-input", 76, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -375,7 +381,7 @@ function ConversationChatAreaComponent_Conditional_10_Conditional_8_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_10_Conditional_1_Template, 2, 1, "div", 66);
     i0.ɵɵelementStart(2, "div", 67, 1);
     i0.ɵɵlistener("scroll", function ConversationChatAreaComponent_Conditional_10_Template_div_scroll_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.checkScroll()); });
@@ -392,7 +398,7 @@ function ConversationChatAreaComponent_Conditional_10_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isUploadingAttachments ? 1 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("messages", ctx_r0.messages)("conversation", ctx_r0.conversation)("currentUser", ctx_r0.currentUser)("isProcessing", ctx_r0.isProcessing)("artifactMap", ctx_r0.effectiveArtifactsMap)("agentRunMap", ctx_r0.agentRunsByDetailId)("ratingsMap", ctx_r0.ratingsByDetailId)("userAvatarMap", ctx_r0.userAvatarMap)("attachmentsMap", ctx_r0.attachmentsByDetailId)("messageRendererTemplate", ctx_r0.slotTemplate("messageRenderer"))("messageExtraTemplate", ctx_r0.slotTemplate("messageExtra"))("sessionMetaMap", ctx_r0.realtimeSessionMetaMap);
+    i0.ɵɵproperty("showEmptyFill", ctx_r0.showEmptyFill)("showDateNavigation", ctx_r0.showDateNavigation)("showAgentRunDetails", ctx_r0.showAgentRunDetails)("showReactions", ctx_r0.showReactions)("showMessageRating", ctx_r0.showMessageRating)("allowPinning", ctx_r0.allowPinning)("allowMessageEdit", ctx_r0.allowMessageEdit)("allowMessageDelete", ctx_r0.allowMessageDelete)("messages", ctx_r0.messages)("conversation", ctx_r0.conversation)("currentUser", ctx_r0.currentUser)("isProcessing", ctx_r0.isProcessing)("artifactMap", ctx_r0.effectiveArtifactsMap)("agentRunMap", ctx_r0.agentRunsByDetailId)("ratingsMap", ctx_r0.ratingsByDetailId)("userAvatarMap", ctx_r0.userAvatarMap)("attachmentsMap", ctx_r0.attachmentsByDetailId)("messageRendererTemplate", ctx_r0.slotTemplate("messageRenderer"))("messageExtraTemplate", ctx_r0.slotTemplate("messageExtra"))("sessionMetaMap", ctx_r0.realtimeSessionMetaMap);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.showScrollToBottomIcon && ctx_r0.messages && ctx_r0.messages.length > 0 ? 5 : -1);
     i0.ɵɵadvance(2);
@@ -642,7 +648,7 @@ function ConversationChatAreaComponent_Conditional_24_Template(rf, ctx) { if (rf
 /** `MJ: Resource Types.ID` for Conversations. */
 const CONVERSATIONS_RESOURCE_TYPE_ID = '81D4BC3D-9FEB-EF11-B01A-286B35C04427';
 /** Default width (percentage) for the artifact viewer pane */
-const DEFAULT_ARTIFACT_PANE_WIDTH = 40;
+export const DEFAULT_ARTIFACT_PANE_WIDTH = 40;
 export class ConversationChatAreaComponent extends BaseAngularComponent {
     agentStateService;
     conversationAgentService;
@@ -708,6 +714,52 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * agent's modality support, computed at runtime.
      */
     allowAttachments = true;
+    /**
+     * Host-level cap for the composer's Plan Mode toggle. Defaults true
+     * (current behavior). White-labeled / end-user hosts that don't expose
+     * plan-mode workflows set false to remove the button entirely.
+     */
+    allowPlanMode = true;
+    /**
+     * Host-level cap for the composer's realtime voice-call launcher (and its
+     * options caret). Defaults true (current behavior). Hosts with no voice
+     * experience set false to remove the buttons entirely.
+     */
+    allowRealtime = true;
+    /**
+     * Whether the message list renders its built-in "No messages yet" filler
+     * when a conversation has zero messages. Defaults true. Hosts that render
+     * their own empty-state chrome around the chat area set false.
+     */
+    showEmptyFill = true;
+    /**
+     * Whether the built-in centered loading indicator renders while a
+     * conversation loads. Defaults true. When false the pane stays blank
+     * during the load (the loading branch still short-circuits rendering, so
+     * no premature empty-state flash). Hosts with their own loading chrome
+     * set false.
+     */
+    showLoadingState = true;
+    // --- Additional host-level feature gates (all default true; false removes the
+    //     affordance entirely). Forwarded to the message list / message items / empty
+    //     state so white-labeled end-user surfaces can pare the chat down through the
+    //     component contract instead of CSS on internal class names. ---
+    /** Show the per-message agent run-detail grid (run ID, step/token counts, $ cost). */
+    showAgentRunDetails = true;
+    /** Show the per-message reaction buttons (like / comment). */
+    showReactions = true;
+    /** Show the per-message thumbs rating control on completed AI messages. */
+    showMessageRating = true;
+    /** Allow pinning messages (per-message pin button, the header pin chip, and the pinned-messages panel). */
+    allowPinning = true;
+    /** Allow editing the user's own messages (per-message edit button). */
+    allowMessageEdit = true;
+    /** Allow deleting the user's own messages (per-message delete button). */
+    allowMessageDelete = true;
+    /** Show the empty-state's built-in suggested-prompt chips (and the @mention tip). */
+    showSuggestedPrompts = true;
+    /** Show the message list's sticky date header + jump-to-date navigation. */
+    showDateNavigation = true;
     _isNewConversation = false;
     set isNewConversation(value) {
         this._isNewConversation = value;
@@ -1688,7 +1740,17 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.isUploadingAttachments = false;
         this.uploadingMessage = '';
         this.intentCheckMessage = null;
+        // Reset width along with the flag — otherwise a pane maximized in the
+        // previous conversation leaves artifactPaneWidth at 100, and the next
+        // artifact opens overflowing the viewport (chat area still visible).
+        // Guarded so a non-maximized user-dragged width survives the switch.
+        if (this.isArtifactPaneMaximized) {
+            this.resetArtifactPaneSizing();
+        }
+    }
+    resetArtifactPaneSizing() {
         this.isArtifactPaneMaximized = false;
+        this.artifactPaneWidth = DEFAULT_ARTIFACT_PANE_WIDTH;
     }
     async onConversationChanged(conversationId) {
         // Prevent double-loading if we're already loading this same conversation
@@ -3046,8 +3108,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.canShareSelectedArtifact = false;
         this.canEditSelectedArtifact = false;
         // Reset maximize state and width when closing so the next artifact opens at default size
-        this.isArtifactPaneMaximized = false;
-        this.artifactPaneWidth = DEFAULT_ARTIFACT_PANE_WIDTH;
+        this.resetArtifactPaneSizing();
         this.cdr.detectChanges();
     }
     toggleMaximizeArtifactPane() {
@@ -4194,39 +4255,39 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.artifactViewerComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyStateComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageInputComponents = _t);
-        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", conversationId: "conversationId", conversation: "conversation", threadId: "threadId", suppressNewConversationEmptyState: "suppressNewConversationEmptyState", allowMentions: "allowMentions", allowAttachments: "allowAttachments", isNewConversation: "isNewConversation", pendingMessage: "pendingMessage", pendingMessageConversationId: "pendingMessageConversationId", pendingAttachments: "pendingAttachments", pendingArtifactId: "pendingArtifactId", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", pendingArtifactConversationId: "pendingArtifactConversationId", overlayMode: "overlayMode", showExportButton: "showExportButton", showShareButton: "showShareButton", showArtifactIndicator: "showArtifactIndicator", appContext: "appContext", defaultAgentId: "defaultAgentId", applicationScope: "applicationScope", applicationId: "applicationId", linkedEntityId: "linkedEntityId", linkedRecordId: "linkedRecordId", showAgentPicker: "showAgentPicker", showAgentModePicker: "showAgentModePicker", emptyStateGreeting: "emptyStateGreeting", showSidebarToggle: "showSidebarToggle", showAgentCharacter: "showAgentCharacter", agentCharacterConfig: "agentCharacterConfig", emptyStateConfig: "emptyStateConfig", showDemonstrationSurface: "showDemonstrationSurface", demonstrationSurfaceContent: "demonstrationSurfaceContent", composerDraft: "composerDraft", composerAgentMention: "composerAgentMention" }, outputs: { beforeAgentTurn: "beforeAgentTurn", afterAgentTurn: "afterAgentTurn", beforeToolInvoked: "beforeToolInvoked", afterToolInvoked: "afterToolInvoked", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", sessionStarted: "sessionStarted", sessionChannelStateChanged: "sessionChannelStateChanged", sessionEnded: "sessionEnded", conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", realtimeConversationReady: "realtimeConversationReady", navigationRequest: "navigationRequest", taskClicked: "taskClicked", artifactLinkClicked: "artifactLinkClicked", sidebarToggleClicked: "sidebarToggleClicked", conversationCreated: "conversationCreated", threadOpened: "threadOpened", threadClosed: "threadClosed", pendingArtifactConsumed: "pendingArtifactConsumed", pendingMessageConsumed: "pendingMessageConsumed", pendingMessageRequested: "pendingMessageRequested", composerDraftConsumed: "composerDraftConsumed", composerAgentMentionConsumed: "composerAgentMentionConsumed" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 33, consts: [["emptyStateInput", ""], ["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], [1, "chat-agent-presence", 3, "chat-agent-presence--prominent"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-demonstration-stage"], [1, "chat-messages-pane"], [1, "conversation-loading-state"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "pinnedMessages"], [3, "parentMessageId", "conversationId", "currentUser"], [3, "cancelled", "exported", "isVisible", "conversation", "currentUser"], [3, "Result", "Visible", "Context", "Adapter"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "data", "visible"], [3, "imageUrl", "alt", "fileName", "visible"], [1, "chat-agent-presence"], [3, "State", "AgentName", "AvatarUrl", "Mode"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "chat-title"], [1, "shared-by-badge", 3, "title"], ["title", "Assign to project", 1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [1, "chat-actions", "chat-actions-buttons"], ["title", "View pinned messages", 1, "pin-chip", 3, "active"], ["title", "View artifacts", 1, "artifact-indicator"], ["title", "View members", 1, "chat-members"], [3, "AgentID", "Disabled"], [3, "Conversation", "CurrentUser", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Export conversation"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "shared", "title"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], [1, "fas", "fa-share-nodes"], ["title", "Assign to project", 1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["title", "View pinned messages", 1, "pin-chip", 3, "click"], [1, "fas", "fa-thumbtack"], [1, "pin-chip-count"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [1, "artifact-badge"], ["title", "View members", 1, "chat-members", 3, "click"], [1, "fas", "fa-users"], [1, "members-badge"], [3, "PresetChanged", "AgentID", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Export conversation", 3, "click"], [1, "fas", "fa-download"], [1, "btn-label"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], ["text", "Loading conversation...", "size", "large"], [3, "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "sidebarToggleClicked", "messageSent", "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "message-input-container-wrapper"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "emptyStateSubmit", "emptyStateMode", "initialDraft", "currentUser", "disabled", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll"], [3, "realtimeSessionOpenRequested", "replyInThread", "viewThread", "deleteMessage", "retryMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "diagnosticRequested", "messagePinToggled", "beforeResponseFormSubmitted", "afterResponseFormSubmitted", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap", "messageRendererTemplate", "messageExtraTemplate", "sessionMetaMap"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "loading-peripheral-placeholder"], ["size", "medium", 3, "text"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], ["text", "Loading conversation data...", "size", "medium"], ["role", "status", 1, "read-only-banner"], [3, "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "inProgressMessageIds", "disabled", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "fas", "fa-eye"], [3, "DraftStateChanged", "ComposerBlurred", "initialMessageAutoSendStarted", "initialMessageAutoSendFailed", "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "inProgressMessageIds", "disabled", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "resize-handle"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "maximizeToggled", "openEntityRecord", "navigationRequest", "analyzeRequested", "applyFormRequested", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [3, "closed", "jumpRequested", "unpinRequested", "pinnedMessages"], [3, "NavigateRequest", "StartLiveRequested", "ReviewClosed", "AgentName", "Hidden", "CurrentUser", "EnvironmentID", "ReviewData", "Chrome", "Compact", "ShowDevLinks", "ShowDensityPicker"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill", 3, "click"], ["aria-hidden", "true", 1, "voice-call-pill__pulse"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-volume"], [1, "voice-call-pill__text"], [1, "voice-call-pill__name"], [1, "voice-call-pill__hint"], [3, "closed", "replyAdded", "parentMessageId", "conversationId", "currentUser"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], ["Icon", "fa-solid fa-cube", "Title", "No artifacts in this conversation yet", 1, "artifacts-empty-fill"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "completed", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "closed", "data", "visible"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", conversationId: "conversationId", conversation: "conversation", threadId: "threadId", suppressNewConversationEmptyState: "suppressNewConversationEmptyState", allowMentions: "allowMentions", allowAttachments: "allowAttachments", allowPlanMode: "allowPlanMode", allowRealtime: "allowRealtime", showEmptyFill: "showEmptyFill", showLoadingState: "showLoadingState", showAgentRunDetails: "showAgentRunDetails", showReactions: "showReactions", showMessageRating: "showMessageRating", allowPinning: "allowPinning", allowMessageEdit: "allowMessageEdit", allowMessageDelete: "allowMessageDelete", showSuggestedPrompts: "showSuggestedPrompts", showDateNavigation: "showDateNavigation", isNewConversation: "isNewConversation", pendingMessage: "pendingMessage", pendingMessageConversationId: "pendingMessageConversationId", pendingAttachments: "pendingAttachments", pendingArtifactId: "pendingArtifactId", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", pendingArtifactConversationId: "pendingArtifactConversationId", overlayMode: "overlayMode", showExportButton: "showExportButton", showShareButton: "showShareButton", showArtifactIndicator: "showArtifactIndicator", appContext: "appContext", defaultAgentId: "defaultAgentId", applicationScope: "applicationScope", applicationId: "applicationId", linkedEntityId: "linkedEntityId", linkedRecordId: "linkedRecordId", showAgentPicker: "showAgentPicker", showAgentModePicker: "showAgentModePicker", emptyStateGreeting: "emptyStateGreeting", showSidebarToggle: "showSidebarToggle", showAgentCharacter: "showAgentCharacter", agentCharacterConfig: "agentCharacterConfig", emptyStateConfig: "emptyStateConfig", showDemonstrationSurface: "showDemonstrationSurface", demonstrationSurfaceContent: "demonstrationSurfaceContent", composerDraft: "composerDraft", composerAgentMention: "composerAgentMention" }, outputs: { beforeAgentTurn: "beforeAgentTurn", afterAgentTurn: "afterAgentTurn", beforeToolInvoked: "beforeToolInvoked", afterToolInvoked: "afterToolInvoked", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", sessionStarted: "sessionStarted", sessionChannelStateChanged: "sessionChannelStateChanged", sessionEnded: "sessionEnded", conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", realtimeConversationReady: "realtimeConversationReady", navigationRequest: "navigationRequest", taskClicked: "taskClicked", artifactLinkClicked: "artifactLinkClicked", sidebarToggleClicked: "sidebarToggleClicked", conversationCreated: "conversationCreated", threadOpened: "threadOpened", threadClosed: "threadClosed", pendingArtifactConsumed: "pendingArtifactConsumed", pendingMessageConsumed: "pendingMessageConsumed", pendingMessageRequested: "pendingMessageRequested", composerDraftConsumed: "composerDraftConsumed", composerAgentMentionConsumed: "composerAgentMentionConsumed" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 33, consts: [["emptyStateInput", ""], ["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], [1, "chat-agent-presence", 3, "chat-agent-presence--prominent"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-demonstration-stage"], [1, "chat-messages-pane"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "pinnedMessages"], [3, "parentMessageId", "conversationId", "currentUser"], [3, "cancelled", "exported", "isVisible", "conversation", "currentUser"], [3, "Result", "Visible", "Context", "Adapter"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "data", "visible"], [3, "imageUrl", "alt", "fileName", "visible"], [1, "chat-agent-presence"], [3, "State", "AgentName", "AvatarUrl", "Mode"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "chat-title"], [1, "shared-by-badge", 3, "title"], ["title", "Assign to project", 1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [1, "chat-actions", "chat-actions-buttons"], ["title", "View pinned messages", 1, "pin-chip", 3, "active"], ["title", "View artifacts", 1, "artifact-indicator"], ["title", "View members", 1, "chat-members"], [3, "AgentID", "Disabled"], [3, "Conversation", "CurrentUser", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Export conversation"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "shared", "title"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], [1, "fas", "fa-share-nodes"], ["title", "Assign to project", 1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["title", "View pinned messages", 1, "pin-chip", 3, "click"], [1, "fas", "fa-thumbtack"], [1, "pin-chip-count"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [1, "artifact-badge"], ["title", "View members", 1, "chat-members", 3, "click"], [1, "fas", "fa-users"], [1, "members-badge"], [3, "PresetChanged", "AgentID", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Export conversation", 3, "click"], [1, "fas", "fa-download"], [1, "btn-label"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], [1, "conversation-loading-state"], ["text", "Loading conversation...", "size", "large"], [3, "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "sidebarToggleClicked", "messageSent", "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "message-input-container-wrapper"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "emptyStateSubmit", "emptyStateMode", "initialDraft", "currentUser", "disabled", "enableAttachments", "enableMentions", "enablePlanMode", "enableRealtime", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll"], [3, "realtimeSessionOpenRequested", "replyInThread", "viewThread", "deleteMessage", "retryMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "diagnosticRequested", "messagePinToggled", "beforeResponseFormSubmitted", "afterResponseFormSubmitted", "showEmptyFill", "showDateNavigation", "showAgentRunDetails", "showReactions", "showMessageRating", "allowPinning", "allowMessageEdit", "allowMessageDelete", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap", "messageRendererTemplate", "messageExtraTemplate", "sessionMetaMap"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "loading-peripheral-placeholder"], ["size", "medium", 3, "text"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], ["text", "Loading conversation data...", "size", "medium"], ["role", "status", 1, "read-only-banner"], [3, "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "inProgressMessageIds", "disabled", "enableAttachments", "enableMentions", "enablePlanMode", "enableRealtime", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "fas", "fa-eye"], [3, "DraftStateChanged", "ComposerBlurred", "initialMessageAutoSendStarted", "initialMessageAutoSendFailed", "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "inProgressMessageIds", "disabled", "enableAttachments", "enableMentions", "enablePlanMode", "enableRealtime", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "resize-handle"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "maximizeToggled", "openEntityRecord", "navigationRequest", "analyzeRequested", "applyFormRequested", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [3, "closed", "jumpRequested", "unpinRequested", "pinnedMessages"], [3, "NavigateRequest", "StartLiveRequested", "ReviewClosed", "AgentName", "Hidden", "CurrentUser", "EnvironmentID", "ReviewData", "Chrome", "Compact", "ShowDevLinks", "ShowDensityPicker"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill", 3, "click"], ["aria-hidden", "true", 1, "voice-call-pill__pulse"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-volume"], [1, "voice-call-pill__text"], [1, "voice-call-pill__name"], [1, "voice-call-pill__hint"], [3, "closed", "replyAdded", "parentMessageId", "conversationId", "currentUser"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], ["Icon", "fa-solid fa-cube", "Title", "No artifacts in this conversation yet", 1, "artifacts-empty-fill"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "completed", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "closed", "data", "visible"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 3);
             i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Template, 3, 3, "div", 4);
             i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_2_Template, 1, 8, "ng-container")(3, ConversationChatAreaComponent_Conditional_3_Template, 15, 14, "div", 5);
             i0.ɵɵelementStart(4, "div", 6);
             i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_5_Template, 2, 6, "div", 7);
             i0.ɵɵelementStart(6, "div", 8);
-            i0.ɵɵconditionalCreate(7, ConversationChatAreaComponent_Conditional_7_Template, 2, 0, "div", 9)(8, ConversationChatAreaComponent_Conditional_8_Template, 2, 1)(9, ConversationChatAreaComponent_Conditional_9_Template, 6, 9, "div", 10)(10, ConversationChatAreaComponent_Conditional_10_Template, 9, 15, "div", 10);
+            i0.ɵɵconditionalCreate(7, ConversationChatAreaComponent_Conditional_7_Template, 1, 1)(8, ConversationChatAreaComponent_Conditional_8_Template, 2, 1)(9, ConversationChatAreaComponent_Conditional_9_Template, 6, 11, "div", 9)(10, ConversationChatAreaComponent_Conditional_10_Template, 9, 23, "div", 9);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_11_Template, 3, 14);
-            i0.ɵɵelementStart(12, "mj-artifact-share-modal", 11);
+            i0.ɵɵelementStart(12, "mj-artifact-share-modal", 10);
             i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_saved_12_listener() { return ctx.onArtifactShared(); })("cancelled", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_cancelled_12_listener() { return ctx.onArtifactShareModalClose(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_13_Template, 1, 1, "mj-pinned-messages-panel", 12);
+            i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_13_Template, 1, 1, "mj-pinned-messages-panel", 11);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_14_Template, 4, 14);
             i0.ɵɵpipe(15, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(16, ConversationChatAreaComponent_Conditional_16_Template, 1, 3, "mj-thread-panel", 13);
-            i0.ɵɵelementStart(17, "mj-export-modal", 14);
+            i0.ɵɵconditionalCreate(16, ConversationChatAreaComponent_Conditional_16_Template, 1, 3, "mj-thread-panel", 12);
+            i0.ɵɵelementStart(17, "mj-export-modal", 13);
             i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_export_modal_cancelled_17_listener() { return ctx.onExportModalCancelled(); })("exported", function ConversationChatAreaComponent_Template_mj_export_modal_exported_17_listener() { return ctx.onExportModalComplete(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "mj-resource-share-dialog", 15);
+            i0.ɵɵelementStart(18, "mj-resource-share-dialog", 14);
             i0.ɵɵlistener("Result", function ConversationChatAreaComponent_Template_mj_resource_share_dialog_Result_18_listener($event) { return ctx.onShareDialogResult($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "mj-members-modal", 16);
+            i0.ɵɵelementStart(19, "mj-members-modal", 15);
             i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_members_modal_cancelled_19_listener() { return ctx.showMembersModal = false; })("membersChanged", function ConversationChatAreaComponent_Template_mj_members_modal_membersChanged_19_listener() { return ctx.showMembersModal = false; });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(20, ConversationChatAreaComponent_Conditional_20_Template, 9, 3, "div", 17);
-            i0.ɵɵconditionalCreate(21, ConversationChatAreaComponent_Conditional_21_Template, 13, 2, "div", 17);
-            i0.ɵɵconditionalCreate(22, ConversationChatAreaComponent_Conditional_22_Template, 1, 7, "mj-artifact-collection-picker-modal", 18);
-            i0.ɵɵconditionalCreate(23, ConversationChatAreaComponent_Conditional_23_Template, 1, 2, "mj-test-feedback-dialog", 19);
-            i0.ɵɵconditionalCreate(24, ConversationChatAreaComponent_Conditional_24_Template, 1, 4, "mj-image-viewer", 20);
+            i0.ɵɵconditionalCreate(20, ConversationChatAreaComponent_Conditional_20_Template, 9, 3, "div", 16);
+            i0.ɵɵconditionalCreate(21, ConversationChatAreaComponent_Conditional_21_Template, 13, 2, "div", 16);
+            i0.ɵɵconditionalCreate(22, ConversationChatAreaComponent_Conditional_22_Template, 1, 7, "mj-artifact-collection-picker-modal", 17);
+            i0.ɵɵconditionalCreate(23, ConversationChatAreaComponent_Conditional_23_Template, 1, 2, "mj-test-feedback-dialog", 18);
+            i0.ɵɵconditionalCreate(24, ConversationChatAreaComponent_Conditional_24_Template, 1, 4, "mj-image-viewer", 19);
         } if (rf & 2) {
             let tmp_1_0;
             i0.ɵɵadvance();
@@ -4246,7 +4307,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("isOpen", ctx.isArtifactShareModalOpen)("artifact", ctx.artifactToShare)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showPinsPanel ? 13 : -1);
+            i0.ɵɵconditional(ctx.allowPinning && ctx.showPinsPanel ? 13 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(i0.ɵɵpipeBind1(15, 31, ctx.RealtimeSession.Active$) || ctx.RealtimeReview ? 14 : -1);
             i0.ɵɵadvance(2);
@@ -4271,7 +4332,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationChatAreaComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n       06-10 design: persistent presence indicator (Sid's face + live voice\n       state). Off by default; opt in via [showAgentCharacter]. When a\n       consumer projects an `mjChatSlot=\"agentPresence\"` template, it\n       replaces the default presence component. -->\n  @if (showAgentCharacter) {\n    <div class=\"chat-agent-presence\" [class.chat-agent-presence--prominent]=\"agentCharacterConfig?.voiceStateMode === 'prominent'\">\n      @if (slotTemplate('agentPresence'); as t) {\n        <ng-container *ngTemplateOutlet=\"t; context: {\n          $implicit: agentCharacterConfig,\n          state: agentCharacterConfig?.state ?? 'idle',\n          agentName: agentCharacterConfig?.characterName,\n          avatarUrl: agentCharacterConfig?.avatarUrl,\n          mode: agentCharacterConfig?.voiceStateMode ?? 'subtle'\n        }\"></ng-container>\n      } @else {\n        <mj-chat-agent-presence-default\n          [State]=\"agentCharacterConfig?.state ?? 'idle'\"\n          [AgentName]=\"agentCharacterConfig?.characterName\"\n          [AvatarUrl]=\"agentCharacterConfig?.avatarUrl\"\n          [Mode]=\"agentCharacterConfig?.voiceStateMode ?? 'subtle'\">\n        </mj-chat-agent-presence-default>\n      }\n    </div>\n  }\n\n  <!-- header slot \u2014 replaces the entire chat-header chrome (title, badges,\n       export/share/agent-picker buttons). When projected, the consumer owns\n       the entire header rendering; the default chrome below is bypassed\n       wholesale. Context exposes the minimal IMJChatHeaderComponent shape;\n       consumers needing more app state should bind to chat-area inputs\n       directly via @ViewChild or wrap the whole component. -->\n  @if (slotTemplate('header'); as t) {\n    <ng-container *ngTemplateOutlet=\"t; context: {\n      $implicit: conversation,\n      conversationTitle: conversation?.Name ?? null,\n      sharedBy: sharedByBadge?.display ?? null,\n      artifactCount: artifactCountDisplay,\n      showArtifactIndicator: showArtifactIndicator\n    }\"></ng-container>\n  } @else if (conversation || HasPreConversationHeader) {\n    <!-- Default header \u2014 also renders BEFORE a conversation exists when the\n         embedder has pre-conversation chrome to surface (currently just the\n         mode picker \u2014 agent / share / export / members / artifacts all\n         require a conversation row and stay hidden). Lets embedded surfaces\n         like the Form Builder cockpit show the mode picker above the\n         empty-state on a fresh chat instead of waiting for the first\n         message to round-trip. -->\n    <div class=\"chat-header\">\n      <div class=\"chat-info\" [class.with-sidebar-toggle]=\"showSidebarToggle\">\n        @if (showSidebarToggle) {\n          <button class=\"sidebar-toggle-btn\"\n            (click)=\"sidebarToggleClicked.emit()\"\n            title=\"Show conversations\">\n            <i class=\"fas fa-table-columns\"></i>\n          </button>\n        }\n        @if (conversation) {\n          <div class=\"chat-title\">{{ conversation.Name || '' }}</div>\n        }\n        @if (sharedByBadge) {\n          <span class=\"shared-by-badge\" [title]=\"sharedByBadge.fullTooltip\">\n            <i class=\"fas fa-share-nodes\"></i>\n            <span>Shared by {{ sharedByBadge.display }}</span>\n          </span>\n        }\n        @if (conversation?.ProjectID) {\n          <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\">\n            <i class=\"fas fa-folder\"></i>\n            <span>{{ conversation!.Project || 'Project' }}</span>\n          </button>\n        }\n        @if (conversation?.TestRunID) {\n          <button class=\"test-indicator\" (click)=\"viewTestRun(conversation!.TestRunID!)\" title=\"View Test Run\">\n            <i class=\"fas fa-flask\"></i>\n            <span>Test</span>\n          </button>\n        }\n      </div>\n      <div class=\"chat-actions chat-actions-buttons\">\n        @if (pinnedMessages.length > 0) {\n          <button class=\"pin-chip\" [class.active]=\"showPinsPanel\" (click)=\"showPinsPanel = !showPinsPanel\" title=\"View pinned messages\">\n            <i class=\"fas fa-thumbtack\"></i>\n            <span class=\"pin-chip-count\">{{ pinnedMessages.length }}</span>\n          </button>\n        }\n        @if (showArtifactIndicator && artifactCountDisplay > 0) {\n          <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\">\n            <i class=\"fas fa-cube\"></i>\n            <span class=\"artifact-badge\">{{ artifactCountDisplay }}</span>\n          </button>\n        }\n        @if (memberCount > 1) {\n          <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n            <i class=\"fas fa-users\"></i>\n            <span class=\"members-badge\">{{ memberCount }}</span>\n          </button>\n        }\n        @if (!overlayMode && showAgentModePicker && ModePickerTargetAgentId) {\n          <!-- Per-agent mode/quality picker (Draft / Standard / High).\n               Targets the agent the next non-mention message will route\n               to. Auto-hides when that agent has fewer than 2 configured\n               presets. Choice persists per-user, per-agent via\n               UserInfoEngine; emits the picked configuration ID up so\n               <mj-message-input> can forward it on the next route.\n               Hidden in overlayMode (the compact chat overlay): the\n               mode dropdown wastes the narrow top-right space there. -->\n          <mj-conversation-mode-picker\n            [AgentID]=\"ModePickerTargetAgentId\"\n            [Disabled]=\"isProcessing\"\n            (PresetChanged)=\"OnAgentModePresetChanged($event)\">\n          </mj-conversation-mode-picker>\n        }\n        @if (showAgentPicker && conversation) {\n          <!-- Per-conversation default-agent pin. When set, non-mention\n               messages route to this agent instead of Sage. Persists to\n               MJConversationEntity.DefaultAgentID. Hidden when no\n               conversation is loaded or when the embedder disables it. -->\n          <mj-conversation-agent-picker\n            [Conversation]=\"conversation\"\n            [CurrentUser]=\"currentUser\"\n            [Disabled]=\"isReadOnlyView\">\n          </mj-conversation-agent-picker>\n        }\n        @if (showExportButton) {\n          <button mjButton variant=\"flat\" size=\"sm\" (click)=\"exportConversation()\" title=\"Export conversation\">\n            <i class=\"fas fa-download\"></i>\n            <span class=\"btn-label\">Export</span>\n          </button>\n        }\n        @if (showShareButton && canShareConversation) {\n          <button mjButton variant=\"flat\" size=\"sm\"\n            [class.shared]=\"isShared\"\n            (click)=\"shareConversation()\"\n            [title]=\"isShared ? 'Manage sharing' : 'Share conversation'\">\n            <i class=\"fas fa-share-nodes\"></i>\n            <span class=\"btn-label\">Share</span>\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Messages and Artifact Split Layout \u2014 restructures into [stage | rail]\n       when isDemonstrationActive (per Matt's 06-10 design). The .demonstration-mode\n       class drives the CSS Grid switch; the stage container renders only when the\n       slot is projected AND the host opts in via [showDemonstrationSurface]. -->\n  <div class=\"chat-content-area\" [class.demonstration-mode]=\"isDemonstrationActive\">\n    <!-- demonstrationSurface stage \u2014 takes the main pane; messages shrink to\n         a side rail (or move below on mobile). Off unless both\n         [showDemonstrationSurface] is true AND a slot template is projected. -->\n    @if (isDemonstrationActive) {\n      <div class=\"chat-demonstration-stage\">\n        <ng-container *ngTemplateOutlet=\"slotTemplate('demonstrationSurface'); context: {\n          $implicit: demonstrationSurfaceContent,\n          content: demonstrationSurfaceContent,\n          visible: showDemonstrationSurface\n        }\"></ng-container>\n      </div>\n    }\n\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n      [class.full-width]=\"!showArtifactPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isLoadingConversation) {\n        <!-- Loading State - Show centered spinner while conversation loads (checked FIRST to prevent empty state flash) -->\n        <div class=\"conversation-loading-state\">\n          <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n        </div>\n      } @else if ((isNewConversation || !conversationId) && !suppressNewConversationEmptyState) {\n        <!-- emptyState slot \u2014 when a consumer projects mjChatSlot=\"emptyState\",\n             they take over the entire empty-state region (including any send\n             affordance \u2014 the slot interface doesn't include a sendMessage\n             output, so consumers handle send via their own input). When no\n             slot is projected, the rich built-in <mj-conversation-empty-state>\n             renders with its own greeting, prompt chips, and message input.\n             emptyStateConfig (when supplied) takes precedence over the legacy\n             [emptyStateGreeting] string for backwards compatibility. -->\n        @if (slotTemplate('emptyState'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: emptyStateConfig,\n            greeting: emptyStateConfig?.greeting ?? emptyStateGreeting,\n            subtext: emptyStateConfig?.subtext,\n            suggestedPrompts: emptyStateConfig?.suggestedPrompts ?? []\n          }\"></ng-container>\n        } @else {\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [initialDraft]=\"GetInitialDraftFor(null)\"\n            (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n            [disabled]=\"isProcessing\"\n            [showSidebarToggle]=\"showSidebarToggle\"\n            [overlayMode]=\"overlayMode\"\n            [greeting]=\"emptyStateConfig?.greeting ?? emptyStateGreeting\"\n            [enableAttachments]=\"enableAttachments && allowAttachments\"\n            [enableMentions]=\"allowMentions\"\n            [maxAttachments]=\"maxAttachments\"\n            [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n            [acceptedFileTypes]=\"acceptedFileTypes\"\n            (sidebarToggleClicked)=\"sidebarToggleClicked.emit()\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        }\n      } @else if ((isNewConversation || !conversationId) && suppressNewConversationEmptyState) {\n        <!-- Pre-conversation normal-view: empty message list + emptyStateMode input.\n             Used when host (e.g. Form Builder cockpit) wants the header + mode picker\n             visible on first open instead of the centered welcome card. First send\n             routes through onEmptyStateMessageSent which creates the conversation. -->\n        <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\"></div>\n          <div class=\"chat-input-container\">\n            <div class=\"message-input-container-wrapper\">\n              <mj-message-input\n                #emptyStateInput\n                [emptyStateMode]=\"true\"\n                [initialDraft]=\"GetInitialDraftFor(null)\"\n                (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n                [currentUser]=\"currentUser\"\n                [disabled]=\"isProcessing\"\n                [enableAttachments]=\"enableAttachments && allowAttachments\"\n                [enableMentions]=\"allowMentions\"\n                [maxAttachments]=\"maxAttachments\"\n                [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                [acceptedFileTypes]=\"acceptedFileTypes\"\n                (emptyStateSubmit)=\"onEmptyStateMessageSent($event)\">\n              </mj-message-input>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          <!-- Upload Indicator Overlay (centered in conversation area) -->\n          @if (isUploadingAttachments) {\n            <div class=\"upload-indicator-overlay\">\n              <mj-loading [text]=\"uploadingMessage\" size=\"medium\"></mj-loading>\n            </div>\n          }\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n            <mj-conversation-message-list\n              [messages]=\"messages\"\n              [conversation]=\"conversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              [attachmentsMap]=\"attachmentsByDetailId\"\n              [messageRendererTemplate]=\"slotTemplate('messageRenderer')\"\n              [messageExtraTemplate]=\"slotTemplate('messageExtra')\"\n              [sessionMetaMap]=\"realtimeSessionMetaMap\"\n              (realtimeSessionOpenRequested)=\"OpenRealtimeSessionReview($event)\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (deleteMessage)=\"onDeleteMessage($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (testFeedbackMessage)=\"onTestFeedbackMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\"\n              (attachmentClicked)=\"onAttachmentClicked($event)\"\n              (diagnosticRequested)=\"onDiagnosticRequested($event)\"\n              (messagePinToggled)=\"onMessagePinToggled($event)\"\n              (beforeResponseFormSubmitted)=\"beforeResponseFormSubmitted.emit($event)\"\n              (afterResponseFormSubmitted)=\"afterResponseFormSubmitted.emit($event)\">\n            </mj-conversation-message-list>\n\n            <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n            @if (showScrollToBottomIcon && messages && messages.length > 0) {\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                (click)=\"scrollToBottomAnimate()\">\n                <i class=\"fas fa-arrow-down\"></i>\n              </span>\n            }\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n            @if (isLoadingPeripheralData) {\n              <!-- Loading State -->\n              <div class=\"loading-peripheral-placeholder\">\n                <mj-loading text=\"Loading conversation data...\" size=\"medium\"></mj-loading>\n              </div>\n            } @else {\n              @if (isReadOnlyView) {\n                <div class=\"read-only-banner\" role=\"status\">\n                  <i class=\"fas fa-eye\"></i>\n                  <span>You have view-only access to this conversation.</span>\n                </div>\n              }\n              <!-- Input Component - Multiple instances cached, only one visible -->\n              <div class=\"message-input-container-wrapper\">\n                @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                  <mj-message-input\n                    #messageInput\n                    [hidden]=\"inputRef.conversationId !== conversationId\"\n                    [initialDraft]=\"GetInitialDraftFor(inputRef.conversationId)\"\n                    (DraftStateChanged)=\"OnDraftStateChanged(inputRef.conversationId, $event)\"\n                    (ComposerBlurred)=\"OnComposerBlurred()\"\n                    [conversationId]=\"inputRef.conversationId\"\n                    [conversationName]=\"inputRef.conversationName\"\n                    [currentUser]=\"currentUser\"\n                    [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                    [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                    [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                    [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                    [appContext]=\"appContext\"\n                    [applicationId]=\"applicationId\"\n                    [defaultAgentId]=\"defaultAgentId\"\n                    [conversationDefaultAgentId]=\"inputRef.conversationId === conversationId ? (conversation?.DefaultAgentID ?? null) : null\"\n                    [agentConfigurationPresetId]=\"inputRef.conversationId === conversationId ? ActiveAgentConfigurationPresetId : null\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing || isReadOnlyView\"\n                    [enableAttachments]=\"enableAttachments && allowAttachments\"\n                    [enableMentions]=\"allowMentions\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingMessage : null\"\n                    [initialAttachments]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingAttachments : null\"\n                    (initialMessageAutoSendStarted)=\"onInitialMessageAutoSendStarted($event)\"\n                    (initialMessageAutoSendFailed)=\"onInitialMessageAutoSendFailed($event)\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (agentResponse)=\"onAgentResponse($event)\"\n                    (agentRunDetected)=\"onAgentRunDetected($event)\"\n                    (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                    (messageComplete)=\"onMessageComplete($event)\"\n                    (artifactCreated)=\"onArtifactCreated($event)\"\n                    (conversationRenamed)=\"onConversationRenamed($event)\"\n                    (intentCheckStarted)=\"onIntentCheckStarted($event)\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted($event)\"\n                    (beforeAgentTurn)=\"beforeAgentTurn.emit($event)\"\n                    (afterAgentTurn)=\"afterAgentTurn.emit($event)\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <mj-artifact-viewer-panel\n          [artifactId]=\"selectedArtifactId\"\n          [currentUser]=\"currentUser\"\n          [environmentId]=\"environmentId\"\n          [versionNumber]=\"selectedVersionNumber\"\n          [viewContext]=\"'conversation'\"\n          [canShare]=\"canShareSelectedArtifact\"\n          [canEdit]=\"canEditSelectedArtifact\"\n          [isMaximized]=\"isArtifactPaneMaximized\"\n          [refreshTrigger]=\"artifactViewerRefresh$\"\n          (closed)=\"onCloseArtifactPanel()\"\n          (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n          (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n          (shareRequested)=\"onArtifactShareRequested($event)\"\n          (maximizeToggled)=\"toggleMaximizeArtifactPane()\"\n          (openEntityRecord)=\"onOpenEntityRecord($event)\"\n          (navigationRequest)=\"onNavigationRequest($event)\"\n          (analyzeRequested)=\"OnAnalyzeArtifact($event)\"\n          (applyFormRequested)=\"OnApplyFormRequested($event)\">\n        </mj-artifact-viewer-panel>\n      </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n\n    <!-- Pinned Messages Panel (overlay) -->\n    @if (showPinsPanel) {\n      <mj-pinned-messages-panel\n        [pinnedMessages]=\"pinnedMessages\"\n        (closed)=\"showPinsPanel = false\"\n        (jumpRequested)=\"onJumpToMessage($event)\"\n        (unpinRequested)=\"onUnpinFromPanel($event)\">\n      </mj-pinned-messages-panel>\n    }\n  </div>\n\n  <!-- Live voice \"call mode\" overlay \u2014 fills this conversation panel in place\n       (header + thread + composer) while a realtime session is active. When the\n       call is MINIMIZED (e.g. a dev link navigated to a record) the overlay HIDES\n       (not destroyed \u2014 its merged session state must survive), the session stays\n       fully live, and a floating \"on call\" pill offers the way back.\n       ALSO hosted in SESSION REVIEW mode (RealtimeReview set, no live call): the\n       overlay renders what went down in a PAST session, with a \"Start live session\"\n       button that resumes it as a new call. -->\n  @if ((RealtimeSession.Active$ | async) || RealtimeReview) {\n    <mj-realtime-session-overlay\n      [AgentName]=\"realtimeOverlayAgentName\"\n      [Hidden]=\"(RealtimeSession.Minimized$ | async) === true\"\n      [CurrentUser]=\"currentUser\"\n      [EnvironmentID]=\"environmentId\"\n      [ReviewData]=\"RealtimeReview\"\n      [Chrome]=\"overlayMode ? 'orb' : 'auto'\"\n      [Compact]=\"overlayMode\"\n      [ShowDevLinks]=\"!overlayMode\"\n      [ShowDensityPicker]=\"!overlayMode\"\n      (NavigateRequest)=\"onRealtimeNavigateRequest($event)\"\n      (StartLiveRequested)=\"onReviewStartLive($event)\"\n      (ReviewClosed)=\"onReviewClosed()\">\n    </mj-realtime-session-overlay>\n    @if (RealtimeSession.Minimized$ | async) {\n      <button type=\"button\" class=\"voice-call-pill\" (click)=\"RealtimeSession.SetMinimized(false)\"\n              title=\"Return to the live call\" aria-label=\"Return to the live call\">\n        <span class=\"voice-call-pill__pulse\" aria-hidden=\"true\"></span>\n        <i class=\"fa-solid fa-phone-volume\" aria-hidden=\"true\"></i>\n        <span class=\"voice-call-pill__text\">\n          <span class=\"voice-call-pill__name\">On call \u00B7 {{ RealtimeSession.CurrentAgentName }}</span>\n          <span class=\"voice-call-pill__hint\">Tap to return</span>\n        </span>\n      </button>\n    }\n  }\n</div>\n\n<!-- Thread Panel -->\n@if (threadId) {\n  <mj-thread-panel\n    [parentMessageId]=\"threadId\"\n    [conversationId]=\"conversationId || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onLocalThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n  </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<mj-export-modal\n  [isVisible]=\"showExportModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Share Dialog (generic, shared with dashboards) -->\n<mj-resource-share-dialog\n  [Visible]=\"showShareModal\"\n  [Context]=\"shareContext\"\n  [Adapter]=\"shareAdapter\"\n  (Result)=\"onShareDialogResult($event)\">\n</mj-resource-share-dialog>\n\n<!-- Members Modal -->\n<mj-members-modal\n  [isVisible]=\"showMembersModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"showMembersModal = false\"\n  (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n  <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <mj-project-selector\n          [environmentId]=\"environmentId\"\n          [currentUser]=\"currentUser\"\n          [selectedProjectId]=\"conversation.ProjectID\"\n          (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n  <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n          @if (hasSystemArtifacts) {\n            <button class=\"toggle-system-btn\"\n              [class.active]=\"showSystemArtifacts\"\n              (click)=\"toggleSystemArtifacts()\"\n              title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n            </button>\n          }\n          <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n          <mj-empty-state\n            class=\"artifacts-empty-fill\"\n            Icon=\"fa-solid fa-cube\"\n            Title=\"No artifacts in this conversation yet\" />\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n          <div class=\"artifact-modal-card\"\n            [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n            [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n            <!-- Main card header - click to open latest version -->\n            <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n              <div class=\"artifact-modal-icon\">\n                <i class=\"fas fa-file-code\"></i>\n              </div>\n              <div class=\"artifact-modal-info\">\n                <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                <div class=\"artifact-modal-meta\">\n                  @if (artifact.versionCount > 1) {\n                    {{artifact.versionCount}} versions\n                  } @else {\n                    1 version\n                  }\n                </div>\n              </div>\n              @if (artifact.versionCount > 1) {\n                <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                  <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                  [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                </button>\n              }\n              <div class=\"artifact-modal-action\">\n                <i class=\"fas fa-external-link-alt\"></i>\n              </div>\n            </div>\n\n            <!-- Expanded version list -->\n            @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n              <div class=\"artifact-versions-list\">\n                @for (version of artifact.versions; track version.versionId) {\n                  <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                    <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                    <span class=\"version-open-text\">Open this version</span>\n                    <i class=\"fas fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    [artifactVersionId]=\"collectionPickerVersionId\"\n    [artifactName]=\"collectionPickerArtifactName\"\n    [artifactVersionNumber]=\"collectionPickerVersionNumber\"\n    (completed)=\"onCollectionPickerCompleted($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Test Feedback Dialog -->\n@if (testFeedbackDialogData) {\n  <mj-test-feedback-dialog\n    [data]=\"testFeedbackDialogData\"\n    [visible]=\"showTestFeedbackDialog\"\n    (closed)=\"onTestFeedbackDialogClosed($event)\">\n  </mj-test-feedback-dialog>\n}\n\n<!-- Image Viewer Modal -->\n@if (showImageViewer) {\n  <mj-image-viewer\n    [imageUrl]=\"selectedImageUrl\"\n    [alt]=\"selectedImageAlt\"\n    [fileName]=\"selectedImageFileName\"\n    [visible]=\"showImageViewer\"\n    (closed)=\"onImageViewerClosed()\">\n  </mj-image-viewer>\n}\n", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  /* Positioned context for the in-place realtime \"call mode\" overlay (absolute inset:0) */\n  position: relative;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n   06-10 placement design: persistent presence indicator above the messages.\n   Renders only when [showAgentCharacter] is true, so existing embeds see no\n   layout change. The prominent variant grows toward a centered presence\n   (per Matt: \"can grow larger toward a centered presence\"). */\n.chat-agent-presence {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Sidebar toggle button in header */\n.sidebar-toggle-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn i {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: var(--mj-text-primary);\n}\n\n.chat-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge i {\n  font-size: 10px;\n}\n\n.shared-by-badge span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag i {\n  font-size: 10px;\n}\n\n.test-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n/* Pinned messages chip in chat header */\n.pin-chip {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip i {\n  font-size: 11px;\n}\n\n.pin-chip:hover,\n.pin-chip.active {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members,\n.artifact-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover,\n.artifact-indicator:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n/* Badge overlay for artifact and member counts */\n.artifact-badge,\n.members-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.chat-content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); /* Respect container bounds while maintaining minimum */\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width {\n  width: 100%;\n}\n\n.chat-messages-pane:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden {\n  display: none;\n}\n\n.resize-handle {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized {\n  width: 100% !important;\n}\n\n.chat-artifact-pane > mj-artifact-viewer-panel {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; /* For upload overlay positioning */\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   demonstrationSurface layout-mode (Matt's 06-10 placement design)\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   When .chat-content-area gets .demonstration-mode, the layout flips\n   from \"messages pane (+ optional artifact pane)\" to \"stage + side rail\":\n     - stage (.chat-demonstration-stage) \u2014 left, flexible, holds the\n       consumer's projected demonstrationSurface slot template\n     - rail (.chat-messages-pane) \u2014 right, fixed-width 320px, holds the\n       messages list + composer (\"the conversation as a companion rail\")\n   On mobile (\u2264768px) the same two stack vertically (stage above, rail\n   below) per Matt's note about mobile. The rail intentionally keeps the\n   composer inside it \u2014 Matt's design refers to the conversation rail\n   inclusively (messages + composer together), not as separate regions.\n*/\n.chat-demonstration-stage {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode .chat-messages-pane,\n.chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode .chat-demonstration-stage {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode .chat-messages-pane,\n  .chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n/* Upload indicator overlay - centered in conversation area */\n.upload-indicator-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface-card);\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon i {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.read-only-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n/* Empty-state spans the full artifacts grid */\n.artifacts-empty-fill {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item:hover .version-open-text {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; /* Hide on mobile to save space */\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  /* Action buttons - icon only on mobile */\n  .chat-actions-buttons {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons .action-btn {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons .action-btn .btn-label {\n    display: none;\n  }\n  .chat-actions {\n    flex-wrap: nowrap;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile, overlapping header */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; /* 48px nav + 8px dark strip above blue border */\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n\n/* Artifact Picker Panel */\n.artifact-picker-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: slideInRight 0.2s ease-out;\n}\n\n@keyframes slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item i {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item i.fa-file-pdf { color: var(--mj-status-error); }\n.artifact-picker-item i.fa-file-excel { color: var(--mj-status-success); }\n.artifact-picker-item i.fa-file-word { color: var(--mj-brand-primary); }\n.artifact-picker-item i.fa-file { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* ---------- Floating \"on call\" pill (minimized realtime voice session) ----------\n   Shown bottom-right of the chat panel while the live call overlay is minimized\n   (e.g. after a gear-gated dev link navigated to a record). The mic + session stay\n   live; tapping the pill restores the full call overlay. */\n.voice-call-pill {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; /* just under the full call overlay (z-index 50) */\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n       06-10 design: persistent presence indicator (Sid's face + live voice\n       state). Off by default; opt in via [showAgentCharacter]. When a\n       consumer projects an `mjChatSlot=\"agentPresence\"` template, it\n       replaces the default presence component. -->\n  @if (showAgentCharacter) {\n    <div class=\"chat-agent-presence\" [class.chat-agent-presence--prominent]=\"agentCharacterConfig?.voiceStateMode === 'prominent'\">\n      @if (slotTemplate('agentPresence'); as t) {\n        <ng-container *ngTemplateOutlet=\"t; context: {\n          $implicit: agentCharacterConfig,\n          state: agentCharacterConfig?.state ?? 'idle',\n          agentName: agentCharacterConfig?.characterName,\n          avatarUrl: agentCharacterConfig?.avatarUrl,\n          mode: agentCharacterConfig?.voiceStateMode ?? 'subtle'\n        }\"></ng-container>\n      } @else {\n        <mj-chat-agent-presence-default\n          [State]=\"agentCharacterConfig?.state ?? 'idle'\"\n          [AgentName]=\"agentCharacterConfig?.characterName\"\n          [AvatarUrl]=\"agentCharacterConfig?.avatarUrl\"\n          [Mode]=\"agentCharacterConfig?.voiceStateMode ?? 'subtle'\">\n        </mj-chat-agent-presence-default>\n      }\n    </div>\n  }\n\n  <!-- header slot \u2014 replaces the entire chat-header chrome (title, badges,\n       export/share/agent-picker buttons). When projected, the consumer owns\n       the entire header rendering; the default chrome below is bypassed\n       wholesale. Context exposes the minimal IMJChatHeaderComponent shape;\n       consumers needing more app state should bind to chat-area inputs\n       directly via @ViewChild or wrap the whole component. -->\n  @if (slotTemplate('header'); as t) {\n    <ng-container *ngTemplateOutlet=\"t; context: {\n      $implicit: conversation,\n      conversationTitle: conversation?.Name ?? null,\n      sharedBy: sharedByBadge?.display ?? null,\n      artifactCount: artifactCountDisplay,\n      showArtifactIndicator: showArtifactIndicator\n    }\"></ng-container>\n  } @else if (conversation || HasPreConversationHeader) {\n    <!-- Default header \u2014 also renders BEFORE a conversation exists when the\n         embedder has pre-conversation chrome to surface (currently just the\n         mode picker \u2014 agent / share / export / members / artifacts all\n         require a conversation row and stay hidden). Lets embedded surfaces\n         like the Form Builder cockpit show the mode picker above the\n         empty-state on a fresh chat instead of waiting for the first\n         message to round-trip. -->\n    <div class=\"chat-header\">\n      <div class=\"chat-info\" [class.with-sidebar-toggle]=\"showSidebarToggle\">\n        @if (showSidebarToggle) {\n          <button class=\"sidebar-toggle-btn\"\n            (click)=\"sidebarToggleClicked.emit()\"\n            title=\"Show conversations\">\n            <i class=\"fas fa-table-columns\"></i>\n          </button>\n        }\n        @if (conversation) {\n          <div class=\"chat-title\">{{ conversation.Name || '' }}</div>\n        }\n        @if (sharedByBadge) {\n          <span class=\"shared-by-badge\" [title]=\"sharedByBadge.fullTooltip\">\n            <i class=\"fas fa-share-nodes\"></i>\n            <span>Shared by {{ sharedByBadge.display }}</span>\n          </span>\n        }\n        @if (conversation?.ProjectID) {\n          <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\">\n            <i class=\"fas fa-folder\"></i>\n            <span>{{ conversation!.Project || 'Project' }}</span>\n          </button>\n        }\n        @if (conversation?.TestRunID) {\n          <button class=\"test-indicator\" (click)=\"viewTestRun(conversation!.TestRunID!)\" title=\"View Test Run\">\n            <i class=\"fas fa-flask\"></i>\n            <span>Test</span>\n          </button>\n        }\n      </div>\n      <div class=\"chat-actions chat-actions-buttons\">\n        @if (allowPinning && pinnedMessages.length > 0) {\n          <button class=\"pin-chip\" [class.active]=\"showPinsPanel\" (click)=\"showPinsPanel = !showPinsPanel\" title=\"View pinned messages\">\n            <i class=\"fas fa-thumbtack\"></i>\n            <span class=\"pin-chip-count\">{{ pinnedMessages.length }}</span>\n          </button>\n        }\n        @if (showArtifactIndicator && artifactCountDisplay > 0) {\n          <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\">\n            <i class=\"fas fa-cube\"></i>\n            <span class=\"artifact-badge\">{{ artifactCountDisplay }}</span>\n          </button>\n        }\n        @if (memberCount > 1) {\n          <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n            <i class=\"fas fa-users\"></i>\n            <span class=\"members-badge\">{{ memberCount }}</span>\n          </button>\n        }\n        @if (!overlayMode && showAgentModePicker && ModePickerTargetAgentId) {\n          <!-- Per-agent mode/quality picker (Draft / Standard / High).\n               Targets the agent the next non-mention message will route\n               to. Auto-hides when that agent has fewer than 2 configured\n               presets. Choice persists per-user, per-agent via\n               UserInfoEngine; emits the picked configuration ID up so\n               <mj-message-input> can forward it on the next route.\n               Hidden in overlayMode (the compact chat overlay): the\n               mode dropdown wastes the narrow top-right space there. -->\n          <mj-conversation-mode-picker\n            [AgentID]=\"ModePickerTargetAgentId\"\n            [Disabled]=\"isProcessing\"\n            (PresetChanged)=\"OnAgentModePresetChanged($event)\">\n          </mj-conversation-mode-picker>\n        }\n        @if (showAgentPicker && conversation) {\n          <!-- Per-conversation default-agent pin. When set, non-mention\n               messages route to this agent instead of Sage. Persists to\n               MJConversationEntity.DefaultAgentID. Hidden when no\n               conversation is loaded or when the embedder disables it. -->\n          <mj-conversation-agent-picker\n            [Conversation]=\"conversation\"\n            [CurrentUser]=\"currentUser\"\n            [Disabled]=\"isReadOnlyView\">\n          </mj-conversation-agent-picker>\n        }\n        @if (showExportButton) {\n          <button mjButton variant=\"flat\" size=\"sm\" (click)=\"exportConversation()\" title=\"Export conversation\">\n            <i class=\"fas fa-download\"></i>\n            <span class=\"btn-label\">Export</span>\n          </button>\n        }\n        @if (showShareButton && canShareConversation) {\n          <button mjButton variant=\"flat\" size=\"sm\"\n            [class.shared]=\"isShared\"\n            (click)=\"shareConversation()\"\n            [title]=\"isShared ? 'Manage sharing' : 'Share conversation'\">\n            <i class=\"fas fa-share-nodes\"></i>\n            <span class=\"btn-label\">Share</span>\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Messages and Artifact Split Layout \u2014 restructures into [stage | rail]\n       when isDemonstrationActive (per Matt's 06-10 design). The .demonstration-mode\n       class drives the CSS Grid switch; the stage container renders only when the\n       slot is projected AND the host opts in via [showDemonstrationSurface]. -->\n  <div class=\"chat-content-area\" [class.demonstration-mode]=\"isDemonstrationActive\">\n    <!-- demonstrationSurface stage \u2014 takes the main pane; messages shrink to\n         a side rail (or move below on mobile). Off unless both\n         [showDemonstrationSurface] is true AND a slot template is projected. -->\n    @if (isDemonstrationActive) {\n      <div class=\"chat-demonstration-stage\">\n        <ng-container *ngTemplateOutlet=\"slotTemplate('demonstrationSurface'); context: {\n          $implicit: demonstrationSurfaceContent,\n          content: demonstrationSurfaceContent,\n          visible: showDemonstrationSurface\n        }\"></ng-container>\n      </div>\n    }\n\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n      [class.full-width]=\"!showArtifactPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isLoadingConversation) {\n        <!-- Loading State - checked FIRST to prevent empty state flash. The branch\n             always short-circuits the panes below; showLoadingState only controls\n             whether the built-in spinner renders (hosts with their own loading\n             chrome set it false and get a blank pane instead). -->\n        @if (showLoadingState) {\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        }\n      } @else if ((isNewConversation || !conversationId) && !suppressNewConversationEmptyState) {\n        <!-- emptyState slot \u2014 when a consumer projects mjChatSlot=\"emptyState\",\n             they take over the entire empty-state region (including any send\n             affordance \u2014 the slot interface doesn't include a sendMessage\n             output, so consumers handle send via their own input). When no\n             slot is projected, the rich built-in <mj-conversation-empty-state>\n             renders with its own greeting, prompt chips, and message input.\n             emptyStateConfig (when supplied) takes precedence over the legacy\n             [emptyStateGreeting] string for backwards compatibility. -->\n        @if (slotTemplate('emptyState'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: emptyStateConfig,\n            greeting: emptyStateConfig?.greeting ?? emptyStateGreeting,\n            subtext: emptyStateConfig?.subtext,\n            suggestedPrompts: emptyStateConfig?.suggestedPrompts ?? []\n          }\"></ng-container>\n        } @else {\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [initialDraft]=\"GetInitialDraftFor(null)\"\n            (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n            [disabled]=\"isProcessing\"\n            [showSidebarToggle]=\"showSidebarToggle\"\n            [overlayMode]=\"overlayMode\"\n            [greeting]=\"emptyStateConfig?.greeting ?? emptyStateGreeting\"\n            [showSuggestedPrompts]=\"showSuggestedPrompts\"\n            [enableAttachments]=\"enableAttachments && allowAttachments\"\n            [enableMentions]=\"allowMentions\"\n            [maxAttachments]=\"maxAttachments\"\n            [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n            [acceptedFileTypes]=\"acceptedFileTypes\"\n            (sidebarToggleClicked)=\"sidebarToggleClicked.emit()\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        }\n      } @else if ((isNewConversation || !conversationId) && suppressNewConversationEmptyState) {\n        <!-- Pre-conversation normal-view: empty message list + emptyStateMode input.\n             Used when host (e.g. Form Builder cockpit) wants the header + mode picker\n             visible on first open instead of the centered welcome card. First send\n             routes through onEmptyStateMessageSent which creates the conversation. -->\n        <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\"></div>\n          <div class=\"chat-input-container\">\n            <div class=\"message-input-container-wrapper\">\n              <mj-message-input\n                #emptyStateInput\n                [emptyStateMode]=\"true\"\n                [initialDraft]=\"GetInitialDraftFor(null)\"\n                (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n                [currentUser]=\"currentUser\"\n                [disabled]=\"isProcessing\"\n                [enableAttachments]=\"enableAttachments && allowAttachments\"\n                [enableMentions]=\"allowMentions\"\n                [enablePlanMode]=\"allowPlanMode\"\n                [enableRealtime]=\"allowRealtime\"\n                [maxAttachments]=\"maxAttachments\"\n                [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                [acceptedFileTypes]=\"acceptedFileTypes\"\n                (emptyStateSubmit)=\"onEmptyStateMessageSent($event)\">\n              </mj-message-input>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          <!-- Upload Indicator Overlay (centered in conversation area) -->\n          @if (isUploadingAttachments) {\n            <div class=\"upload-indicator-overlay\">\n              <mj-loading [text]=\"uploadingMessage\" size=\"medium\"></mj-loading>\n            </div>\n          }\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n            <mj-conversation-message-list\n              [showEmptyFill]=\"showEmptyFill\"\n              [showDateNavigation]=\"showDateNavigation\"\n              [showAgentRunDetails]=\"showAgentRunDetails\"\n              [showReactions]=\"showReactions\"\n              [showMessageRating]=\"showMessageRating\"\n              [allowPinning]=\"allowPinning\"\n              [allowMessageEdit]=\"allowMessageEdit\"\n              [allowMessageDelete]=\"allowMessageDelete\"\n              [messages]=\"messages\"\n              [conversation]=\"conversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              [attachmentsMap]=\"attachmentsByDetailId\"\n              [messageRendererTemplate]=\"slotTemplate('messageRenderer')\"\n              [messageExtraTemplate]=\"slotTemplate('messageExtra')\"\n              [sessionMetaMap]=\"realtimeSessionMetaMap\"\n              (realtimeSessionOpenRequested)=\"OpenRealtimeSessionReview($event)\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (deleteMessage)=\"onDeleteMessage($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (testFeedbackMessage)=\"onTestFeedbackMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\"\n              (attachmentClicked)=\"onAttachmentClicked($event)\"\n              (diagnosticRequested)=\"onDiagnosticRequested($event)\"\n              (messagePinToggled)=\"onMessagePinToggled($event)\"\n              (beforeResponseFormSubmitted)=\"beforeResponseFormSubmitted.emit($event)\"\n              (afterResponseFormSubmitted)=\"afterResponseFormSubmitted.emit($event)\">\n            </mj-conversation-message-list>\n\n            <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n            @if (showScrollToBottomIcon && messages && messages.length > 0) {\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                (click)=\"scrollToBottomAnimate()\">\n                <i class=\"fas fa-arrow-down\"></i>\n              </span>\n            }\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n            @if (isLoadingPeripheralData) {\n              <!-- Loading State -->\n              <div class=\"loading-peripheral-placeholder\">\n                <mj-loading text=\"Loading conversation data...\" size=\"medium\"></mj-loading>\n              </div>\n            } @else {\n              @if (isReadOnlyView) {\n                <div class=\"read-only-banner\" role=\"status\">\n                  <i class=\"fas fa-eye\"></i>\n                  <span>You have view-only access to this conversation.</span>\n                </div>\n              }\n              <!-- Input Component - Multiple instances cached, only one visible -->\n              <div class=\"message-input-container-wrapper\">\n                @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                  <mj-message-input\n                    #messageInput\n                    [hidden]=\"inputRef.conversationId !== conversationId\"\n                    [initialDraft]=\"GetInitialDraftFor(inputRef.conversationId)\"\n                    (DraftStateChanged)=\"OnDraftStateChanged(inputRef.conversationId, $event)\"\n                    (ComposerBlurred)=\"OnComposerBlurred()\"\n                    [conversationId]=\"inputRef.conversationId\"\n                    [conversationName]=\"inputRef.conversationName\"\n                    [currentUser]=\"currentUser\"\n                    [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                    [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                    [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                    [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                    [appContext]=\"appContext\"\n                    [applicationId]=\"applicationId\"\n                    [defaultAgentId]=\"defaultAgentId\"\n                    [conversationDefaultAgentId]=\"inputRef.conversationId === conversationId ? (conversation?.DefaultAgentID ?? null) : null\"\n                    [agentConfigurationPresetId]=\"inputRef.conversationId === conversationId ? ActiveAgentConfigurationPresetId : null\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing || isReadOnlyView\"\n                    [enableAttachments]=\"enableAttachments && allowAttachments\"\n                    [enableMentions]=\"allowMentions\"\n                    [enablePlanMode]=\"allowPlanMode\"\n                    [enableRealtime]=\"allowRealtime\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingMessage : null\"\n                    [initialAttachments]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingAttachments : null\"\n                    (initialMessageAutoSendStarted)=\"onInitialMessageAutoSendStarted($event)\"\n                    (initialMessageAutoSendFailed)=\"onInitialMessageAutoSendFailed($event)\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (agentResponse)=\"onAgentResponse($event)\"\n                    (agentRunDetected)=\"onAgentRunDetected($event)\"\n                    (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                    (messageComplete)=\"onMessageComplete($event)\"\n                    (artifactCreated)=\"onArtifactCreated($event)\"\n                    (conversationRenamed)=\"onConversationRenamed($event)\"\n                    (intentCheckStarted)=\"onIntentCheckStarted($event)\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted($event)\"\n                    (beforeAgentTurn)=\"beforeAgentTurn.emit($event)\"\n                    (afterAgentTurn)=\"afterAgentTurn.emit($event)\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <mj-artifact-viewer-panel\n          [artifactId]=\"selectedArtifactId\"\n          [currentUser]=\"currentUser\"\n          [environmentId]=\"environmentId\"\n          [versionNumber]=\"selectedVersionNumber\"\n          [viewContext]=\"'conversation'\"\n          [canShare]=\"canShareSelectedArtifact\"\n          [canEdit]=\"canEditSelectedArtifact\"\n          [isMaximized]=\"isArtifactPaneMaximized\"\n          [refreshTrigger]=\"artifactViewerRefresh$\"\n          (closed)=\"onCloseArtifactPanel()\"\n          (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n          (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n          (shareRequested)=\"onArtifactShareRequested($event)\"\n          (maximizeToggled)=\"toggleMaximizeArtifactPane()\"\n          (openEntityRecord)=\"onOpenEntityRecord($event)\"\n          (navigationRequest)=\"onNavigationRequest($event)\"\n          (analyzeRequested)=\"OnAnalyzeArtifact($event)\"\n          (applyFormRequested)=\"OnApplyFormRequested($event)\">\n        </mj-artifact-viewer-panel>\n      </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n\n    <!-- Pinned Messages Panel (overlay) -->\n    @if (allowPinning && showPinsPanel) {\n      <mj-pinned-messages-panel\n        [pinnedMessages]=\"pinnedMessages\"\n        (closed)=\"showPinsPanel = false\"\n        (jumpRequested)=\"onJumpToMessage($event)\"\n        (unpinRequested)=\"onUnpinFromPanel($event)\">\n      </mj-pinned-messages-panel>\n    }\n  </div>\n\n  <!-- Live voice \"call mode\" overlay \u2014 fills this conversation panel in place\n       (header + thread + composer) while a realtime session is active. When the\n       call is MINIMIZED (e.g. a dev link navigated to a record) the overlay HIDES\n       (not destroyed \u2014 its merged session state must survive), the session stays\n       fully live, and a floating \"on call\" pill offers the way back.\n       ALSO hosted in SESSION REVIEW mode (RealtimeReview set, no live call): the\n       overlay renders what went down in a PAST session, with a \"Start live session\"\n       button that resumes it as a new call. -->\n  @if ((RealtimeSession.Active$ | async) || RealtimeReview) {\n    <mj-realtime-session-overlay\n      [AgentName]=\"realtimeOverlayAgentName\"\n      [Hidden]=\"(RealtimeSession.Minimized$ | async) === true\"\n      [CurrentUser]=\"currentUser\"\n      [EnvironmentID]=\"environmentId\"\n      [ReviewData]=\"RealtimeReview\"\n      [Chrome]=\"overlayMode ? 'orb' : 'auto'\"\n      [Compact]=\"overlayMode\"\n      [ShowDevLinks]=\"!overlayMode\"\n      [ShowDensityPicker]=\"!overlayMode\"\n      (NavigateRequest)=\"onRealtimeNavigateRequest($event)\"\n      (StartLiveRequested)=\"onReviewStartLive($event)\"\n      (ReviewClosed)=\"onReviewClosed()\">\n    </mj-realtime-session-overlay>\n    @if (RealtimeSession.Minimized$ | async) {\n      <button type=\"button\" class=\"voice-call-pill\" (click)=\"RealtimeSession.SetMinimized(false)\"\n              title=\"Return to the live call\" aria-label=\"Return to the live call\">\n        <span class=\"voice-call-pill__pulse\" aria-hidden=\"true\"></span>\n        <i class=\"fa-solid fa-phone-volume\" aria-hidden=\"true\"></i>\n        <span class=\"voice-call-pill__text\">\n          <span class=\"voice-call-pill__name\">On call \u00B7 {{ RealtimeSession.CurrentAgentName }}</span>\n          <span class=\"voice-call-pill__hint\">Tap to return</span>\n        </span>\n      </button>\n    }\n  }\n</div>\n\n<!-- Thread Panel -->\n@if (threadId) {\n  <mj-thread-panel\n    [parentMessageId]=\"threadId\"\n    [conversationId]=\"conversationId || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onLocalThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n  </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<mj-export-modal\n  [isVisible]=\"showExportModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Share Dialog (generic, shared with dashboards) -->\n<mj-resource-share-dialog\n  [Visible]=\"showShareModal\"\n  [Context]=\"shareContext\"\n  [Adapter]=\"shareAdapter\"\n  (Result)=\"onShareDialogResult($event)\">\n</mj-resource-share-dialog>\n\n<!-- Members Modal -->\n<mj-members-modal\n  [isVisible]=\"showMembersModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"showMembersModal = false\"\n  (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n  <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <mj-project-selector\n          [environmentId]=\"environmentId\"\n          [currentUser]=\"currentUser\"\n          [selectedProjectId]=\"conversation.ProjectID\"\n          (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n  <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n          @if (hasSystemArtifacts) {\n            <button class=\"toggle-system-btn\"\n              [class.active]=\"showSystemArtifacts\"\n              (click)=\"toggleSystemArtifacts()\"\n              title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n            </button>\n          }\n          <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n          <mj-empty-state\n            class=\"artifacts-empty-fill\"\n            Icon=\"fa-solid fa-cube\"\n            Title=\"No artifacts in this conversation yet\" />\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n          <div class=\"artifact-modal-card\"\n            [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n            [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n            <!-- Main card header - click to open latest version -->\n            <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n              <div class=\"artifact-modal-icon\">\n                <i class=\"fas fa-file-code\"></i>\n              </div>\n              <div class=\"artifact-modal-info\">\n                <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                <div class=\"artifact-modal-meta\">\n                  @if (artifact.versionCount > 1) {\n                    {{artifact.versionCount}} versions\n                  } @else {\n                    1 version\n                  }\n                </div>\n              </div>\n              @if (artifact.versionCount > 1) {\n                <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                  <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                  [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                </button>\n              }\n              <div class=\"artifact-modal-action\">\n                <i class=\"fas fa-external-link-alt\"></i>\n              </div>\n            </div>\n\n            <!-- Expanded version list -->\n            @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n              <div class=\"artifact-versions-list\">\n                @for (version of artifact.versions; track version.versionId) {\n                  <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                    <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                    <span class=\"version-open-text\">Open this version</span>\n                    <i class=\"fas fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    [artifactVersionId]=\"collectionPickerVersionId\"\n    [artifactName]=\"collectionPickerArtifactName\"\n    [artifactVersionNumber]=\"collectionPickerVersionNumber\"\n    (completed)=\"onCollectionPickerCompleted($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Test Feedback Dialog -->\n@if (testFeedbackDialogData) {\n  <mj-test-feedback-dialog\n    [data]=\"testFeedbackDialogData\"\n    [visible]=\"showTestFeedbackDialog\"\n    (closed)=\"onTestFeedbackDialogClosed($event)\">\n  </mj-test-feedback-dialog>\n}\n\n<!-- Image Viewer Modal -->\n@if (showImageViewer) {\n  <mj-image-viewer\n    [imageUrl]=\"selectedImageUrl\"\n    [alt]=\"selectedImageAlt\"\n    [fileName]=\"selectedImageFileName\"\n    [visible]=\"showImageViewer\"\n    (closed)=\"onImageViewerClosed()\">\n  </mj-image-viewer>\n}\n", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  /* Positioned context for the in-place realtime \"call mode\" overlay (absolute inset:0) */\n  position: relative;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n   06-10 placement design: persistent presence indicator above the messages.\n   Renders only when [showAgentCharacter] is true, so existing embeds see no\n   layout change. The prominent variant grows toward a centered presence\n   (per Matt: \"can grow larger toward a centered presence\"). */\n.chat-agent-presence {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Sidebar toggle button in header */\n.sidebar-toggle-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn i {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: var(--mj-text-primary);\n}\n\n.chat-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge i {\n  font-size: 10px;\n}\n\n.shared-by-badge span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag i {\n  font-size: 10px;\n}\n\n.test-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n/* Pinned messages chip in chat header */\n.pin-chip {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip i {\n  font-size: 11px;\n}\n\n.pin-chip:hover,\n.pin-chip.active {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members,\n.artifact-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover,\n.artifact-indicator:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n/* Badge overlay for artifact and member counts */\n.artifact-badge,\n.members-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.chat-content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); /* Respect container bounds while maintaining minimum */\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width {\n  width: 100%;\n}\n\n.chat-messages-pane:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden {\n  display: none;\n}\n\n.resize-handle {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized {\n  width: 100% !important;\n}\n\n.chat-artifact-pane > mj-artifact-viewer-panel {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; /* For upload overlay positioning */\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   demonstrationSurface layout-mode (Matt's 06-10 placement design)\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   When .chat-content-area gets .demonstration-mode, the layout flips\n   from \"messages pane (+ optional artifact pane)\" to \"stage + side rail\":\n     - stage (.chat-demonstration-stage) \u2014 left, flexible, holds the\n       consumer's projected demonstrationSurface slot template\n     - rail (.chat-messages-pane) \u2014 right, fixed-width 320px, holds the\n       messages list + composer (\"the conversation as a companion rail\")\n   On mobile (\u2264768px) the same two stack vertically (stage above, rail\n   below) per Matt's note about mobile. The rail intentionally keeps the\n   composer inside it \u2014 Matt's design refers to the conversation rail\n   inclusively (messages + composer together), not as separate regions.\n*/\n.chat-demonstration-stage {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode .chat-messages-pane,\n.chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode .chat-demonstration-stage {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode .chat-messages-pane,\n  .chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n/* Upload indicator overlay - centered in conversation area */\n.upload-indicator-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface-card);\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon i {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.read-only-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n/* Empty-state spans the full artifacts grid */\n.artifacts-empty-fill {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item:hover .version-open-text {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; /* Hide on mobile to save space */\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  /* Action buttons - icon only on mobile */\n  .chat-actions-buttons {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons .action-btn {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons .action-btn .btn-label {\n    display: none;\n  }\n  .chat-actions {\n    flex-wrap: nowrap;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile, overlapping header */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; /* 48px nav + 8px dark strip above blue border */\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n\n/* Artifact Picker Panel */\n.artifact-picker-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: slideInRight 0.2s ease-out;\n}\n\n@keyframes slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item i {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item i.fa-file-pdf { color: var(--mj-status-error); }\n.artifact-picker-item i.fa-file-excel { color: var(--mj-status-success); }\n.artifact-picker-item i.fa-file-word { color: var(--mj-brand-primary); }\n.artifact-picker-item i.fa-file { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* ---------- Floating \"on call\" pill (minimized realtime voice session) ----------\n   Shown bottom-right of the chat panel while the live call overlay is minimized\n   (e.g. after a gear-gated dev link navigated to a record). The mic + session stay\n   live; tapping the pill restores the full call overlay. */\n.voice-call-pill {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; /* just under the full call overlay (z-index 50) */\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n"] }]
     }], () => [{ type: i1.AgentStateService }, { type: i2.ConversationAgentService }, { type: i3.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i4.ArtifactPermissionService }, { type: i5.ConversationAttachmentService }, { type: i6.ConversationStreamingService }, { type: i7.DialogService }, { type: i8.ConversationBridgeService }, { type: i9.AnalyzeArtifactService }, { type: i10.UICommandHandlerService }, { type: i9.InteractiveFormApplyService }, { type: i11.AgentClientService }], { environmentId: [{
             type: Input
         }], currentUser: [{
@@ -4288,6 +4349,30 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             type: Input
         }], allowAttachments: [{
             type: Input
+        }], allowPlanMode: [{
+            type: Input
+        }], allowRealtime: [{
+            type: Input
+        }], showEmptyFill: [{
+            type: Input
+        }], showLoadingState: [{
+            type: Input
+        }], showAgentRunDetails: [{
+            type: Input
+        }], showReactions: [{
+            type: Input
+        }], showMessageRating: [{
+            type: Input
+        }], allowPinning: [{
+            type: Input
+        }], allowMessageEdit: [{
+            type: Input
+        }], allowMessageDelete: [{
+            type: Input
+        }], showSuggestedPrompts: [{
+            type: Input
+        }], showDateNavigation: [{
+            type: Input
         }], isNewConversation: [{
             type: Input
         }], pendingMessage: [{