@memberjunction/ng-conversations 5.43.0 → 5.44.0

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

@@ -261,7 +261,7 @@ function ConversationChatAreaComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.memberCount > 1 ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.showAgentModePicker && ctx_r0.ModePickerTargetAgentId ? 11 : -1);
+    i0.ɵɵconditional(!ctx_r0.overlayMode && ctx_r0.showAgentModePicker && ctx_r0.ModePickerTargetAgentId ? 11 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.showAgentPicker && ctx_r0.conversation ? 12 : -1);
     i0.ɵɵadvance();
@@ -354,12 +354,12 @@ function ConversationChatAreaComponent_Conditional_10_Conditional_8_Conditional_
 function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-message-input", 77, 1);
-    i0.ɵɵlistener("messageSent", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageSent($event)); })("agentResponse", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunDetected($event)); })("agentRunUpdate", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_agentRunUpdate_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunUpdate($event)); })("messageComplete", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_messageComplete_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageComplete($event)); })("artifactCreated", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onConversationRenamed($event)); })("intentCheckStarted", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_intentCheckStarted_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckStarted()); })("intentCheckCompleted", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_intentCheckCompleted_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckCompleted()); })("beforeAgentTurn", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_beforeAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.beforeAgentTurn.emit($event)); })("afterAgentTurn", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_afterAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.afterAgentTurn.emit($event)); })("uploadStateChanged", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_uploadStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onUploadStateChanged($event)); });
+    i0.ɵɵlistener("initialMessageAutoSendStarted", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_initialMessageAutoSendStarted_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onInitialMessageAutoSendStarted($event)); })("initialMessageAutoSendFailed", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_initialMessageAutoSendFailed_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onInitialMessageAutoSendFailed($event)); })("messageSent", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageSent($event)); })("agentResponse", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunDetected($event)); })("agentRunUpdate", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_agentRunUpdate_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunUpdate($event)); })("messageComplete", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_messageComplete_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageComplete($event)); })("artifactCreated", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onConversationRenamed($event)); })("intentCheckStarted", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_intentCheckStarted_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckStarted($event)); })("intentCheckCompleted", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_intentCheckCompleted_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckCompleted($event)); })("beforeAgentTurn", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_beforeAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.beforeAgentTurn.emit($event)); })("afterAgentTurn", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_afterAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.afterAgentTurn.emit($event)); })("uploadStateChanged", function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template_mj_message_input_uploadStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onUploadStateChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const inputRef_r16 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("hidden", inputRef_r16.conversationId !== ctx_r0.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(22, _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", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.pendingMessage : null)("initialAttachments", inputRef_r16.conversationId === ctx_r0.conversationId ? ctx_r0.pendingAttachments : null);
+    i0.ɵɵproperty("hidden", inputRef_r16.conversationId !== ctx_r0.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(22, _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);
 } }
 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", 74);
@@ -447,15 +447,15 @@ function ConversationChatAreaComponent_Conditional_14_Template(rf, ctx) { if (rf
     const _r20 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-realtime-session-overlay", 83);
     i0.ɵɵpipe(1, "async");
-    i0.ɵɵlistener("NavigateRequest", function ConversationChatAreaComponent_Conditional_14_Template_mj_realtime_session_overlay_NavigateRequest_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onVoiceNavigateRequest($event)); })("StartLiveRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_realtime_session_overlay_StartLiveRequested_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewStartLive($event)); })("ReviewClosed", function ConversationChatAreaComponent_Conditional_14_Template_mj_realtime_session_overlay_ReviewClosed_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewClosed()); });
+    i0.ɵɵlistener("NavigateRequest", function ConversationChatAreaComponent_Conditional_14_Template_mj_realtime_session_overlay_NavigateRequest_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRealtimeNavigateRequest($event)); })("StartLiveRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_realtime_session_overlay_StartLiveRequested_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewStartLive($event)); })("ReviewClosed", function ConversationChatAreaComponent_Conditional_14_Template_mj_realtime_session_overlay_ReviewClosed_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewClosed()); });
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_14_Conditional_2_Template, 8, 1, "button", 84);
     i0.ɵɵpipe(3, "async");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("AgentName", ctx_r0.realtimeOverlayAgentName)("Hidden", i0.ɵɵpipeBind1(1, 6, ctx_r0.RealtimeSession.Minimized$) === true)("CurrentUser", ctx_r0.currentUser)("EnvironmentID", ctx_r0.environmentId)("ReviewData", ctx_r0.RealtimeReview);
+    i0.ɵɵproperty("AgentName", ctx_r0.realtimeOverlayAgentName)("Hidden", i0.ɵɵpipeBind1(1, 10, ctx_r0.RealtimeSession.Minimized$) === true)("CurrentUser", ctx_r0.currentUser)("EnvironmentID", ctx_r0.environmentId)("ReviewData", ctx_r0.RealtimeReview)("Chrome", ctx_r0.overlayMode ? "orb" : "auto")("Compact", ctx_r0.overlayMode)("ShowDevLinks", !ctx_r0.overlayMode)("ShowDensityPicker", !ctx_r0.overlayMode);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(i0.ɵɵpipeBind1(3, 8, ctx_r0.RealtimeSession.Minimized$) ? 2 : -1);
+    i0.ɵɵconditional(i0.ɵɵpipeBind1(3, 12, ctx_r0.RealtimeSession.Minimized$) ? 2 : -1);
 } }
 function ConversationChatAreaComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
@@ -502,11 +502,7 @@ function ConversationChatAreaComponent_Conditional_21_Conditional_6_Template(rf,
     i0.ɵɵtextInterpolate1("", ctx_r0.showSystemArtifacts ? "Hide" : "Show", " System");
 } }
 function ConversationChatAreaComponent_Conditional_21_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103);
-    i0.ɵɵelement(1, "i", 107);
-    i0.ɵɵelementStart(2, "p", 108);
-    i0.ɵɵtext(3, "No artifacts in this conversation yet");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 103);
 } }
 function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
@@ -519,9 +515,9 @@ function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_9_Templ
 } }
 function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 120);
+    i0.ɵɵelementStart(0, "button", 118);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r28); const artifact_r27 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleArtifactExpansion(artifact_r27.artifactId, $event)); });
-    i0.ɵɵelement(1, "i", 121);
+    i0.ɵɵelement(1, "i", 119);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const artifact_r27 = i0.ɵɵnextContext().$implicit;
@@ -531,15 +527,15 @@ function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_10_Temp
 } }
 function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 123);
+    i0.ɵɵelementStart(0, "div", 121);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r30 = i0.ɵɵrestoreView(_r29).$implicit; const artifact_r27 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.openArtifactFromModal(artifact_r27.artifactId, version_r30.versionNumber); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 124);
+    i0.ɵɵelementStart(1, "span", 122);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 125);
+    i0.ɵɵelementStart(3, "span", 123);
     i0.ɵɵtext(4, "Open this version");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 126);
+    i0.ɵɵelement(5, "i", 124);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const version_r30 = ctx.$implicit;
@@ -547,8 +543,8 @@ function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_For_
     i0.ɵɵtextInterpolate1("v", version_r30.versionNumber);
 } }
 function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 119);
-    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_For_2_Template, 6, 1, "div", 122, _forTrack2);
+    i0.ɵɵelementStart(0, "div", 117);
+    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_For_2_Template, 6, 1, "div", 120, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const artifact_r27 = i0.ɵɵnextContext().$implicit;
@@ -557,22 +553,22 @@ function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_Temp
 } }
 function ConversationChatAreaComponent_Conditional_21_For_12_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 109)(1, "div", 110);
+    i0.ɵɵelementStart(0, "div", 107)(1, "div", 108);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_For_12_Template_div_click_1_listener() { const artifact_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openArtifactFromModal(artifact_r27.artifactId)); });
-    i0.ɵɵelementStart(2, "div", 111);
-    i0.ɵɵelement(3, "i", 112);
+    i0.ɵɵelementStart(2, "div", 109);
+    i0.ɵɵelement(3, "i", 110);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 113)(5, "div", 114);
+    i0.ɵɵelementStart(4, "div", 111)(5, "div", 112);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 115);
+    i0.ɵɵelementStart(7, "div", 113);
     i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_21_For_12_Conditional_8_Template, 1, 1)(9, ConversationChatAreaComponent_Conditional_21_For_12_Conditional_9_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_21_For_12_Conditional_10_Template, 2, 4, "button", 116);
-    i0.ɵɵelementStart(11, "div", 117);
-    i0.ɵɵelement(12, "i", 118);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_21_For_12_Conditional_10_Template, 2, 4, "button", 114);
+    i0.ɵɵelementStart(11, "div", 115);
+    i0.ɵɵelement(12, "i", 116);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_Template, 3, 0, "div", 119);
+    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_Template, 3, 0, "div", 117);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const artifact_r27 = ctx.$implicit;
@@ -603,7 +599,7 @@ function ConversationChatAreaComponent_Conditional_21_Template(rf, ctx) { if (rf
     i0.ɵɵelement(8, "i", 96);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(9, "div", 102);
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_21_Conditional_10_Template, 4, 0, "div", 103);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_21_Conditional_10_Template, 1, 0, "mj-empty-state", 103);
     i0.ɵɵrepeaterCreate(11, ConversationChatAreaComponent_Conditional_21_For_12_Template, 14, 8, "div", 104, _forTrack1);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -617,7 +613,7 @@ function ConversationChatAreaComponent_Conditional_21_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 127);
+    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 125);
     i0.ɵɵlistener("completed", function ConversationChatAreaComponent_Conditional_22_Template_mj_artifact_collection_picker_modal_completed_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCompleted($event)); })("cancelled", function ConversationChatAreaComponent_Conditional_22_Template_mj_artifact_collection_picker_modal_cancelled_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCancelled()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -626,7 +622,7 @@ function ConversationChatAreaComponent_Conditional_22_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-test-feedback-dialog", 128);
+    i0.ɵɵelementStart(0, "mj-test-feedback-dialog", 126);
     i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_23_Template_mj_test_feedback_dialog_closed_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackDialogClosed($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -635,7 +631,7 @@ function ConversationChatAreaComponent_Conditional_23_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-image-viewer", 129);
+    i0.ɵɵelementStart(0, "mj-image-viewer", 127);
     i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_24_Template_mj_image_viewer_closed_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onImageViewerClosed()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -722,6 +718,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     // Using getter/setter to ensure correct type handling
     _pendingMessage = null;
     set pendingMessage(value) {
+        const previousPendingMessage = this._pendingMessage;
         // Handle case where an object is incorrectly passed
         if (value && typeof value === 'object' && 'text' in value) {
             this._pendingMessage = value.text;
@@ -729,10 +726,46 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         else {
             this._pendingMessage = value;
         }
+        // Once the host clears the pending message (consumed), drop the captured target so a later
+        // pending message can't be misrouted to a stale conversation.
+        if (!this._pendingMessage) {
+            this._pendingMessageTargetId = null;
+            this._pendingMessageReservedTargetId = null;
+        }
+        else if (this._pendingMessage !== previousPendingMessage) {
+            this._pendingMessageReservedTargetId = null;
+        }
     }
     get pendingMessage() {
         return this._pendingMessage;
     }
+    /**
+     * The conversation the {@link pendingMessage} was created FOR. The pending message's
+     * auto-send is delivered ONLY to the cached input whose conversationId matches this —
+     * NOT the live-active conversationId. Without this, swapping conversations during the
+     * (async) auto-send window lets the swapped-to conversation's input grab the still-set
+     * pendingMessage and send it too, duplicating the message into the wrong conversation.
+     *
+     * Hosts MAY set this explicitly; it also self-resolves from {@link _pendingMessageTargetId}
+     * (captured in onEmptyStateMessageSent) so the guard works regardless of host wiring.
+     */
+    pendingMessageConversationId = null;
+    /** Internally-captured target for {@link pendingMessage}, set when this component creates a
+     *  new conversation from the empty state. Host-independent; immune to conversation-swap timing. */
+    _pendingMessageTargetId = null;
+    _pendingMessageReservedTargetId = null;
+    /**
+     * The conversation a pending message must be delivered to. Prefers the explicit host input,
+     * then the internally-captured new-conversation target, finally the active conversation
+     * (legacy fallback for single-conversation hosts that never swap).
+     */
+    get EffectivePendingMessageTarget() {
+        return this.pendingMessageConversationId ?? this._pendingMessageTargetId ?? this.conversationId;
+    }
+    shouldDeliverPendingMessageTo(conversationId) {
+        const targetId = this.EffectivePendingMessageTarget;
+        return UUIDsEqual(conversationId, targetId) && !UUIDsEqual(this._pendingMessageReservedTargetId, targetId);
+    }
     // Using getter/setter to ensure reactivity
     _pendingAttachments = null;
     set pendingAttachments(value) {
@@ -743,6 +776,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     pendingArtifactId = null;
     pendingArtifactVersionNumber = null;
+    pendingArtifactConversationId = null;
     /** When true, the component is rendered inside the floating overlay (hides suggested topics, etc.) */
     overlayMode = false;
     /** Show the Export button in the conversation header. Default true. */
@@ -1006,6 +1040,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     scrollToBottom = false;
     lastLoadedConversationId = null; // Track which conversation's peripheral data was loaded
     currentlyLoadingConversationId = null; // Track which conversation is currently being loaded
+    conversationLoadToken = 0; // Monotonic token to discard stale async conversation loads
     isProcessing = false;
     intentCheckMessage = null; // Temporary message shown during intent checking
     isLoadingConversation = false; // Set to true only when actively loading conversation data
@@ -1198,8 +1233,12 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // override or augment behavior by handling the bubbled event.
         this.uiCommandHandler.actionableCommandRequested
             .pipe(takeUntil(this.destroy$))
-            .subscribe((command) => {
+            .subscribe((request) => {
+            const { command, conversationId } = request;
             if (command.type === 'client:capture-data-snapshot') {
+                if (conversationId && !this.isActiveConversation(conversationId)) {
+                    return;
+                }
                 void this.handleCaptureDataSnapshotCommand(command);
             }
         });
@@ -1216,17 +1255,14 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
             namedThisSession = false;
-            const created = this.RealtimeSession.SessionCreatedConversationId;
-            if (created) {
-                this.realtimeConversationReady.emit({ conversationId: created, select: false });
-            }
+            this.onRealtimeSessionStarted();
         });
         let voiceWasActive = false;
         this.RealtimeSession.Active$
             .pipe(takeUntil(this.destroy$))
             .subscribe((active) => {
             if (voiceWasActive && !active) {
-                this.onVoiceSessionEnded();
+                this.onRealtimeSessionEnded();
             }
             voiceWasActive = active;
         });
@@ -1343,9 +1379,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe(async (event) => {
             // Find the message in our current conversation
+            const conversationId = this.conversationId;
             const message = this.messages.find(m => UUIDsEqual(m.ID, event.conversationDetailId));
-            if (message) {
-                await this.handleMessageCompletion(message, event.agentRunId);
+            if (message && conversationId) {
+                await this.handleMessageCompletion(message, event.agentRunId, conversationId);
             }
         });
         // Subscribe to polling-based agent state as a secondary fallback for completion detection.
@@ -1356,22 +1393,29 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.agentStateService.activeAgents$
             .pipe(takeUntil(this.destroy$))
             .subscribe(async (agents) => {
-            if (!this.conversationId)
+            const conversationId = this.conversationId;
+            if (!conversationId)
                 return;
-            const conversationAgents = agents.filter(a => UUIDsEqual(a.run.ConversationID, this.conversationId));
+            const conversationAgents = agents.filter(a => UUIDsEqual(a.run.ConversationID, conversationId));
             const hasActiveAgents = conversationAgents.length > 0;
             if (this.hadActiveAgents && !hasActiveAgents) {
                 // Agents just completed — surgical refresh picks up new messages,
                 // updated agent runs, and new artifacts in one query with minimal UI repaint
-                await this.engine.RefreshConversationDetails(this.conversationId, this.currentUser);
+                await this.engine.RefreshConversationDetails(conversationId, this.currentUser);
+                if (!this.isActiveConversation(conversationId)) {
+                    return;
+                }
                 // Re-read messages from the surgically updated engine cache
-                const freshDetails = this.engine.GetCachedDetails(this.conversationId);
+                const freshDetails = this.engine.GetCachedDetails(conversationId);
                 if (freshDetails) {
                     this.messages = freshDetails;
                 }
                 // Reprocess peripheral data (artifacts, ratings) from updated cache
                 this.lastLoadedConversationId = null;
-                await this.loadPeripheralData(this.conversationId);
+                await this.loadPeripheralData(conversationId);
+                if (!this.isActiveConversation(conversationId)) {
+                    return;
+                }
                 // Clear active tasks for messages that are no longer in-progress
                 for (const message of this.messages) {
                     if (message.Status !== 'In-Progress') {
@@ -1479,19 +1523,61 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         window.removeEventListener('touchmove', this.boundOnResizeTouchMove);
         window.removeEventListener('touchend', this.boundOnResizeTouchEnd);
     }
+    isActiveConversation(conversationId) {
+        return UUIDsEqual(conversationId, this.conversationId);
+    }
+    isActiveConversationLoad(conversationId, loadToken) {
+        return loadToken === this.conversationLoadToken && this.isActiveConversation(conversationId);
+    }
+    isCurrentConversationContext(conversationId, loadToken) {
+        return loadToken != null
+            ? this.isActiveConversationLoad(conversationId, loadToken)
+            : this.isActiveConversation(conversationId);
+    }
+    resetConversationScopedViewState() {
+        this.showArtifactPanel = false;
+        this.selectedArtifactId = null;
+        this.selectedVersionNumber = undefined;
+        this.canShareSelectedArtifact = false;
+        this.canEditSelectedArtifact = false;
+        this.showArtifactsModal = false;
+        this.showSystemArtifacts = false;
+        this.expandedArtifactId = null;
+        this._combinedArtifactsMap = null;
+        this.isArtifactShareModalOpen = false;
+        this.artifactToShare = null;
+        this.showCollectionPicker = false;
+        this.collectionPickerArtifactId = null;
+        this.collectionPickerExcludedIds = [];
+        this.collectionPickerVersionId = null;
+        this.collectionPickerArtifactName = '';
+        this.collectionPickerVersionNumber = null;
+        this.showImageViewer = false;
+        this.selectedImageUrl = '';
+        this.selectedImageAlt = '';
+        this.selectedImageFileName = '';
+        this.showTestFeedbackDialog = false;
+        this.testFeedbackDialogData = null;
+        this.showPinsPanel = false;
+        this.showAgentPanel = false;
+        this.showExportModal = false;
+        this.showShareModal = false;
+        this.shareContext = null;
+        this.showMembersModal = false;
+        this.showProjectSelector = false;
+        this.isUploadingAttachments = false;
+        this.uploadingMessage = '';
+        this.intentCheckMessage = null;
+        this.isArtifactPaneMaximized = false;
+    }
     async onConversationChanged(conversationId) {
         // Prevent double-loading if we're already loading this same conversation
         // (ngDoCheck can fire multiple times during state changes)
         if (this.currentlyLoadingConversationId === conversationId && conversationId !== null) {
             return;
         }
-        // Do NOT clear activeTasks - they are workspace-level and persist across conversations
-        // Clearing causes bugs: global tasks panel blanks out, no notifications when switching
-        this.showArtifactPanel = false;
-        this.selectedArtifactId = null;
-        // Reset maximize state so it doesn't carry over to the next conversation
-        this.isArtifactPaneMaximized = false;
-        this.artifactPaneWidth = DEFAULT_ARTIFACT_PANE_WIDTH; // restore default width
+        const loadToken = ++this.conversationLoadToken;
+        this.resetConversationScopedViewState();
         // Reset poll-based completion tracking whenever we switch conversations,
         // so the first empty poll on the new conversation doesn't trigger a spurious reload.
         this.hadActiveAgents = false;
@@ -1512,16 +1598,28 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 this.cdr.detectChanges();
             }
             try {
-                await this.loadMessages(conversationId);
+                await this.loadMessages(conversationId, loadToken);
+                if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+                    return;
+                }
                 await this.restoreActiveTasks(conversationId);
+                if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+                    return;
+                }
                 // TODO: Replace polling with PubSub - see plans/repair-conversations-ui-performance.md
                 this.agentStateService.startPolling(this.currentUser, conversationId);
             }
             catch (error) {
+                if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+                    return;
+                }
                 console.error('Error loading conversation:', error);
                 this.messages = [];
             }
             finally {
+                if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+                    return;
+                }
                 this.currentlyLoadingConversationId = null;
                 this.isLoadingConversation = false;
                 // Create new array reference to trigger Angular change detection
@@ -1541,6 +1639,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.messages = [];
             this.isLoadingConversation = false;
             this.currentlyLoadingConversationId = null;
+            this.lastLoadedConversationId = null;
             this.agentStateService.stopPolling();
         }
     }
@@ -1574,7 +1673,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }
         return this.messageInputComponents.find(component => component.conversationId === this.conversationId);
     }
-    async loadMessages(conversationId) {
+    async loadMessages(conversationId, loadToken) {
         try {
             // Single source of truth: ConversationEngine handles caching and DB queries.
             // Cache hit = instant (no DB). Cache miss = one GetConversationComplete query.
@@ -1582,6 +1681,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             const existingEntry = this.engine.GetCachedDetailEntry(conversationId);
             const forceRefresh = existingEntry?.PeripheralDataStale === true;
             const cacheEntry = await this.engine.LoadConversationDetails(conversationId, this.currentUser, forceRefresh);
+            if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+                return;
+            }
             // Set messages from engine cache
             this.messages = cacheEntry.Details;
             // Copy user avatars from engine cache
@@ -1606,18 +1708,30 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                     const recentCompletion = this.streamingService.getRecentCompletion(message.ID);
                     if (recentCompletion) {
                         LogStatusEx({ message: `📥 Found missed completion for message ${message.ID}, handling...`, verboseOnly: true });
-                        this.handleMessageCompletion(message, recentCompletion.agentRunId);
+                        await this.handleMessageCompletion(message, recentCompletion.agentRunId, conversationId, loadToken);
+                        if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+                            return;
+                        }
                         this.streamingService.clearRecentCompletion(message.ID);
                     }
                 }
             }
             this.scrollToBottom = true;
             // Process peripheral data (agent runs, artifacts, ratings, attachments) from engine cache
-            await this.loadPeripheralData(conversationId);
-            await this.detectAndReconcileAgentRuns(conversationId);
+            await this.loadPeripheralData(conversationId, loadToken);
+            if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+                return;
+            }
+            await this.detectAndReconcileAgentRuns(conversationId, loadToken);
+            if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+                return;
+            }
             await this.handlePendingArtifactNavigation();
         }
         catch (error) {
+            if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+                return;
+            }
             console.error('Error loading messages:', error);
             this.messages = [];
         }
@@ -1631,12 +1745,14 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * - Processes cached JSON data to build display maps
      * - Instant when switching between conversations
      */
-    async loadPeripheralData(conversationId) {
+    async loadPeripheralData(conversationId, loadToken) {
+        if (!this.isCurrentConversationContext(conversationId, loadToken)) {
+            return;
+        }
         // Skip if we've already processed peripheral data for this conversation
         if (this.lastLoadedConversationId === conversationId) {
             return;
         }
-        this.lastLoadedConversationId = conversationId;
         try {
             // Read from engine cache — always present after loadMessages() calls LoadConversationDetails()
             const cacheEntry = this.engine.GetCachedDetailEntry(conversationId);
@@ -1682,13 +1798,19 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             const messageIds = cacheEntry.Details.map(d => d.ID).filter((id) => !!id);
             if (messageIds.length > 0) {
                 const attachmentsMap = await this.attachmentService.loadAttachmentsForMessages(messageIds, this.currentUser);
+                if (!this.isCurrentConversationContext(conversationId, loadToken)) {
+                    return;
+                }
                 for (const [detailId, attachments] of attachmentsMap) {
                     this.attachmentsByDetailId.set(detailId, attachments);
                 }
             }
             // Load session-row meta for any realtime SESSION BLOCKS in the timeline
             // (agent name + status/close-reason chip on the collapsed session cards)
-            await this.loadRealtimeSessionMeta(cacheEntry.Details);
+            await this.loadRealtimeSessionMeta(cacheEntry.Details, conversationId, loadToken);
+            if (!this.isCurrentConversationContext(conversationId, loadToken)) {
+                return;
+            }
             // Create new Map references to trigger Angular change detection
             this.agentRunsByDetailId = new Map(this.agentRunsByDetailId);
             this.artifactsByDetailId = new Map(this.artifactsByDetailId);
@@ -1700,6 +1822,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             // Update artifact count for header display
             this.artifactCount = this.calculateUniqueArtifactCount();
             this.updateArtifactCountDisplay();
+            this.lastLoadedConversationId = conversationId;
             // Trigger message re-render now that peripheral data is loaded
             this.messages = [...this.messages];
             this.cdr.detectChanges();
@@ -1716,7 +1839,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * can show the agent name and a status / close-reason chip. TOLERANT by design: any
      * failure leaves the map empty — cards degrade to their generic label.
      */
-    async loadRealtimeSessionMeta(details) {
+    async loadRealtimeSessionMeta(details, conversationId, loadToken) {
         const sessionIds = [];
         const seen = new Set();
         for (const detail of details) {
@@ -1758,6 +1881,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 console.warn('Failed to load realtime session meta — session cards render without status chips:', error);
             }
         }
+        if (conversationId && !this.isCurrentConversationContext(conversationId, loadToken)) {
+            return;
+        }
         // New reference so the message list's ngOnChanges sees the update
         this.realtimeSessionMetaMap = metaMap;
     }
@@ -1771,6 +1897,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // Database tasks are loaded separately by TasksDropdownComponent
     }
     async onMessageSent(message) {
+        if (this.pendingMessage && this.isPendingMessageTarget(message.ConversationID)) {
+            this._pendingMessageReservedTargetId = null;
+            this.pendingMessageConsumed.emit();
+        }
         // Guard: ignore events from hidden message-input instances belonging to other conversations.
         // Multiple inputs are kept alive in the DOM cache (one per visited conversation) and all
         // emit events to this single parent. Without this check, a background agent's response
@@ -1782,10 +1912,6 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             }
             return;
         }
-        // Clear pending message if it was sent - notify parent via output
-        if (this.pendingMessage) {
-            this.pendingMessageConsumed.emit();
-        }
         // Check if message already exists in the array (by ID) to prevent duplicates
         // Messages can be emitted multiple times as they're updated (e.g., status changes)
         const existingIndex = this.messages.findIndex(m => UUIDsEqual(m.ID, message.ID));
@@ -1810,7 +1936,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             }
             // Load attachments for the new message (if any were saved with it)
             // This ensures attachments are displayed immediately after sending
-            await this.loadAttachmentsForMessage(message.ID);
+            await this.loadAttachmentsForMessage(message.ID, message.ConversationID);
+            if (!this.isActiveConversation(message.ConversationID)) {
+                return;
+            }
             // CRITICAL: If this is a new In-Progress AI message, add it to inProgressMessageIds
             // immediately so message-input registers a PubSub streaming callback for it.
             // buildMessagesFromCache handles the nav-away/nav-back reconnection case;
@@ -1827,13 +1956,29 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // the UI does not update when the messages array is modified from a streaming callback.
         this.cdr.detectChanges();
     }
+    onInitialMessageAutoSendStarted(event) {
+        if (this.pendingMessage && this.isPendingMessageTarget(event.conversationId)) {
+            this._pendingMessageReservedTargetId = event.conversationId;
+        }
+    }
+    onInitialMessageAutoSendFailed(event) {
+        if (UUIDsEqual(event.conversationId, this._pendingMessageReservedTargetId)) {
+            this._pendingMessageReservedTargetId = null;
+        }
+    }
+    isPendingMessageTarget(conversationId) {
+        return UUIDsEqual(conversationId, this.EffectivePendingMessageTarget);
+    }
     /**
      * Loads attachments for a single message and adds them to the attachmentsByDetailId map.
      * Called after a new message is sent to ensure attachments are displayed immediately.
      */
-    async loadAttachmentsForMessage(messageId) {
+    async loadAttachmentsForMessage(messageId, conversationId) {
         try {
             const attachments = await this.attachmentService.loadAttachmentsForMessage(messageId, this.currentUser);
+            if (!this.isActiveConversation(conversationId)) {
+                return;
+            }
             if (attachments.length > 0) {
                 this.attachmentsByDetailId.set(messageId, attachments);
                 // Create new map reference to trigger Angular change detection
@@ -1870,7 +2015,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * This is called when the first progress update arrives with an agent run ID
      */
     async onAgentRunDetected(event) {
-        await this.addAgentRunToMap(event.conversationDetailId, event.agentRunId);
+        // Guard: ignore events from a background conversation's (hidden, still-streaming) input
+        // after a conversation swap. Without this, a background run would be written into the
+        // active conversation's agent-run map and engine cache. See onMessageSent() for context.
+        if (!this.isActiveConversation(event.conversationId)) {
+            return;
+        }
+        await this.addAgentRunToMap(event.conversationId, event.conversationDetailId, event.agentRunId);
     }
     /**
      * Handle message completion event from message-input
@@ -1878,6 +2029,12 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * Also reloads attachments created during agent execution (e.g., generated images)
      */
     async onMessageComplete(event) {
+        // Guard: ignore completion of a background conversation's run after a conversation swap.
+        // Without this, a background run is refreshed into the active conversation's engine cache
+        // (keyed by this.conversationId) and its attachments loaded into the active map.
+        if (!this.isActiveConversation(event.conversationId)) {
+            return;
+        }
         // Get existing agent run from map
         const existingAgentRun = this.agentRunsByDetailId.get(event.conversationDetailId);
         if (existingAgentRun?.ID) {
@@ -1885,6 +2042,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             // duck type check to see if we have a BaseEntity or not
             if (!!existingAgentRun.Load) {
                 await existingAgentRun.Load(existingAgentRun.ID);
+                if (!this.isActiveConversation(event.conversationId)) {
+                    return;
+                }
             }
             else {
                 // we do NOT have an existingAgentRun base entity, but rather a simple JSON object so we need to create an object here
@@ -1894,8 +2054,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 // swap the map entry to have this object now
                 this.agentRunsByDetailId.set(event.conversationDetailId, newEntity);
                 // Also update ConversationEngine's cache
-                if (this.conversationId) {
-                    ConversationEngine.Instance.SetAgentRunForDetail(this.conversationId, event.conversationDetailId, newEntity);
+                if (event.conversationId) {
+                    ConversationEngine.Instance.SetAgentRunForDetail(event.conversationId, event.conversationDetailId, newEntity);
                 }
             }
             // Trigger re-render to show updated status
@@ -1906,7 +2066,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // (e.g., images generated by agent via Generate Image action)
         // This must be done after agent completion because attachments are created by AgentRunner
         // after the agent execution finishes
-        await this.loadAttachmentsForMessage(event.conversationDetailId);
+        await this.loadAttachmentsForMessage(event.conversationDetailId, event.conversationId);
         // Trigger change detection after async attachment loading to ensure UI updates
         this.cdr.detectChanges();
     }
@@ -1916,18 +2076,24 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * Provides real-time updates of status, timestamps, tokens, cost during execution
      */
     async onAgentRunUpdate(event) {
+        // Guard: ignore live progress updates from a background conversation's run after a swap.
+        // Without this, a background run is written into the active conversation's agent-run map
+        // and into ConversationEngine's cache keyed by this.conversationId. See onMessageSent().
+        if (!this.isActiveConversation(event.conversationId)) {
+            return;
+        }
         if (event.agentRun) {
             // Directly update map with fresh data from progress (no database query needed)
             // Don't create new Map - message-list component needs to keep the same reference
             this.agentRunsByDetailId.set(event.conversationDetailId, event.agentRun);
             // Also update ConversationEngine's cache for other consumers
-            if (this.conversationId) {
-                ConversationEngine.Instance.SetAgentRunForDetail(this.conversationId, event.conversationDetailId, event.agentRun);
+            if (event.conversationId) {
+                ConversationEngine.Instance.SetAgentRunForDetail(event.conversationId, event.conversationDetailId, event.agentRun);
             }
         }
         else {
             // no agent run, should have agentRunId
-            await this.addAgentRunToMap(event.conversationDetailId, event.agentRunId);
+            await this.addAgentRunToMap(event.conversationId, event.conversationDetailId, event.agentRunId);
         }
         // Force message list to re-render with updated agent run
         // This ensures message components receive the fresh agent run data
@@ -1958,6 +2124,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             if (!engineDetails || engineDetails.length === 0) {
                 return;
             }
+            if (!this.isActiveConversation(conversationId)) {
+                return;
+            }
             // Track existing message IDs before reload to identify new messages
             const existingMessageIds = new Set(this.messages.map(m => m.ID));
             // Merge engine cache with existing client-side messages.
@@ -1999,23 +2168,36 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * @param message The message that completed
      * @param agentRunId The ID of the agent run that completed
      */
-    async handleMessageCompletion(message, _agentRunId) {
+    async handleMessageCompletion(message, _agentRunId, expectedConversationId = message.ConversationID, loadToken) {
         try {
+            const isCurrent = () => this.isCurrentConversationContext(expectedConversationId, loadToken);
             LogStatusEx({ message: `🎉 Handling completion for message ${message.ID}`, verboseOnly: true });
             // Snapshot artifact IDs before reload to detect newly created artifacts
             const artifactIdsBefore = this.collectAllArtifactIds();
             // Reload message from database to get final content and status
             await message.Load(message.ID);
+            if (!isCurrent()) {
+                return;
+            }
             // Reload agent run to get final status, timestamps, and cost
             const agentRun = this.agentRunsByDetailId.get(message.ID);
             if (agentRun?.ID) {
                 await agentRun.Load(agentRun.ID);
+                if (!isCurrent()) {
+                    return;
+                }
             }
             // Reload artifacts for this completed message
-            await this.reloadArtifactsForMessage(message.ID);
+            await this.reloadArtifactsForMessage(message.ID, expectedConversationId, loadToken);
+            if (!isCurrent()) {
+                return;
+            }
             // Reload messages to pick up newly delegated agent messages
             // When Sage delegates to Marketing Agent, a new message is created
             await this.reloadMessagesForActiveConversation();
+            if (!isCurrent()) {
+                return;
+            }
             // Invalidate cache since reloadMessages may have loaded new delegated-agent messages
             // that are not in the cache set by reloadArtifactsForMessage().
             // Without this, navigating away and back would show stale data.
@@ -2031,7 +2213,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             // When Sage delegates to a sub-agent (e.g., Skip), the artifact is on the sub-agent's
             // message, not Sage's. Checking only the triggering message would miss delegated artifacts.
             if (!this.showArtifactPanel) {
-                await this.autoOpenNewArtifact(artifactIdsBefore);
+                await this.autoOpenNewArtifact(artifactIdsBefore, expectedConversationId);
             }
             // Remove task from ActiveTasksService (clears spinner in conversation list)
             const task = this.activeTasks.getByConversationDetailId(message.ID);
@@ -2069,15 +2251,21 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // This ensures we get the final status and timestamps, replacing any stale data from when agent started
         // agentResult is ExecuteAgentResult which contains agentRun property
         if (event.agentResult?.agentRun?.ID) {
-            await this.addAgentRunToMap(event.message.ID, event.agentResult.agentRun.ID, true); // forceRefresh = true
+            await this.addAgentRunToMap(event.message.ConversationID, event.message.ID, event.agentResult.agentRun.ID, true); // forceRefresh = true
+            if (!this.isActiveConversation(event.message.ConversationID)) {
+                return;
+            }
         }
         // Snapshot artifact IDs before reload to detect newly created artifacts
         const artifactIdsBefore = this.collectAllArtifactIds();
         // Reload artifact mapping for this message to pick up newly created artifacts
-        await this.reloadArtifactsForMessage(event.message.ID);
+        await this.reloadArtifactsForMessage(event.message.ID, event.message.ConversationID);
+        if (!this.isActiveConversation(event.message.ConversationID)) {
+            return;
+        }
         // Auto-open artifact panel if NEW artifacts were discovered
         if (!this.showArtifactPanel) {
-            await this.autoOpenNewArtifact(artifactIdsBefore);
+            await this.autoOpenNewArtifact(artifactIdsBefore, event.message.ConversationID);
         }
         // Force change detection to update the UI
         this.cdr.detectChanges();
@@ -2098,17 +2286,20 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * Called when a new agent run completes to keep the map in sync
      * @param forceRefresh If true, always reload from database even if already in map (used when status changes)
      */
-    async addAgentRunToMap(conversationDetailId, agentRunId, forceRefresh = false) {
+    async addAgentRunToMap(conversationId, conversationDetailId, agentRunId, forceRefresh = false) {
         try {
             // Always refresh if forced, or if not in map yet
             if (forceRefresh || !this.agentRunsByDetailId.has(conversationDetailId)) {
                 const md = this.ProviderToUse;
                 const agentRun = await md.GetEntityObject('MJ: AI Agent Runs', this.currentUser);
                 if (await agentRun.Load(agentRunId)) {
+                    if (!this.isActiveConversation(conversationId)) {
+                        return agentRun;
+                    }
                     this.agentRunsByDetailId.set(conversationDetailId, agentRun);
                     // Also update ConversationEngine's cache for other consumers
-                    if (this.conversationId) {
-                        ConversationEngine.Instance.SetAgentRunForDetail(this.conversationId, conversationDetailId, agentRun);
+                    if (conversationId) {
+                        ConversationEngine.Instance.SetAgentRunForDetail(conversationId, conversationDetailId, agentRun);
                     }
                     // Force message list to re-render with updated agent run
                     // Keep same Map reference so message-list component can access updates
@@ -2133,7 +2324,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * Called after an artifact is created to update the UI immediately.
      * Invalidates and refreshes the conversation cache.
      */
-    async reloadArtifactsForMessage(conversationDetailId) {
+    async reloadArtifactsForMessage(conversationDetailId, expectedConversationId, loadToken) {
         LogStatusEx({ message: `🔄 Reloading artifacts for message ${conversationDetailId}`, verboseOnly: true });
         try {
             const md = this.ProviderToUse;
@@ -2143,11 +2334,20 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 console.error('Failed to load conversation detail');
                 return;
             }
+            const detailConversationId = detail.ConversationID;
+            const targetConversationId = expectedConversationId ?? detailConversationId;
+            const isCurrent = () => this.isCurrentConversationContext(targetConversationId, loadToken);
+            if (!UUIDsEqual(detailConversationId, targetConversationId) || !isCurrent()) {
+                return;
+            }
             // Surgical refresh — merges new artifacts into existing cache without replacing objects
-            await this.engine.RefreshConversationDetails(detail.ConversationID, this.currentUser);
+            await this.engine.RefreshConversationDetails(detailConversationId, this.currentUser);
+            if (!isCurrent()) {
+                return;
+            }
             // Reprocess peripheral data from the updated engine cache
             this.lastLoadedConversationId = null;
-            await this.loadPeripheralData(detail.ConversationID);
+            await this.loadPeripheralData(detailConversationId, loadToken);
         }
         catch (error) {
             console.error('Failed to reload artifacts for message:', error);
@@ -2211,13 +2411,19 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * because reloadMessagesForActiveConversation can temporarily remove messages
      * from this.messages during concurrent operations.
      */
-    async autoOpenNewArtifact(artifactIdsBefore) {
+    async autoOpenNewArtifact(artifactIdsBefore, expectedConversationId = this.conversationId) {
+        if (!this.isActiveConversation(expectedConversationId)) {
+            return;
+        }
         for (const [detailId, artifactList] of this.artifactsByDetailId) {
             const newArtifact = artifactList.find(a => !artifactIdsBefore.has(a.artifactId));
             if (newArtifact) {
                 this.selectedArtifactId = newArtifact.artifactId;
                 this.showArtifactPanel = true;
-                await this.loadArtifactPermissions(newArtifact.artifactId);
+                await this.loadArtifactPermissions(newArtifact.artifactId, expectedConversationId, newArtifact.artifactId);
+                if (!this.isActiveConversation(expectedConversationId) || !UUIDsEqual(this.selectedArtifactId, newArtifact.artifactId)) {
+                    return;
+                }
                 LogStatusEx({ message: `🎨 Auto-opening new artifact ${newArtifact.artifactId} from detail ${detailId}`, verboseOnly: true });
                 return;
             }
@@ -2325,12 +2531,16 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.expandedArtifactId = this.expandedArtifactId === artifactId ? null : artifactId;
     }
     async openArtifactFromModal(artifactId, versionNumber) {
+        const conversationId = this.conversationId;
         this.selectedArtifactId = artifactId;
         this.selectedVersionNumber = versionNumber;
         this.showArtifactPanel = true;
         this.showArtifactsModal = false;
         // Load permissions for the selected artifact
-        await this.loadArtifactPermissions(artifactId);
+        await this.loadArtifactPermissions(artifactId, conversationId, artifactId);
+        if (!this.isActiveConversation(conversationId) || !UUIDsEqual(this.selectedArtifactId, artifactId)) {
+            return;
+        }
         this.cdr.detectChanges();
     }
     exportConversation() {
@@ -2440,7 +2650,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         LogStatusEx({ message: 'Thread reply added', verboseOnly: true, additionalArgs: [reply] });
         // Reload messages to get updated thread counts
         if (this.conversationId) {
-            this.loadMessages(this.conversationId);
+            const conversationId = this.conversationId;
+            const loadToken = ++this.conversationLoadToken;
+            void this.loadMessages(conversationId, loadToken);
         }
     }
     onToggleAgentPanel() {
@@ -2630,6 +2842,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.uploadingMessage = event.message;
     }
     async onArtifactClicked(data) {
+        const conversationId = this.conversationId;
         this.selectedArtifactId = data.artifactId;
         // If versionId is provided, find the version number from display data (no lazy load needed)
         if (data.versionId) {
@@ -2649,23 +2862,38 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }
         this.showArtifactPanel = true;
         // Load permissions for the selected artifact
-        await this.loadArtifactPermissions(data.artifactId);
+        await this.loadArtifactPermissions(data.artifactId, conversationId, data.artifactId);
+        if (!this.isActiveConversation(conversationId) || !UUIDsEqual(this.selectedArtifactId, data.artifactId)) {
+            return;
+        }
         // Trigger detectChanges after all state is settled (showArtifactPanel, permissions)
         // to prevent ExpressionChangedAfterItHasBeenCheckedError from zone-triggered CD
         // seeing partial state between the await boundaries
         this.cdr.detectChanges();
     }
     async onArtifactCreated(data) {
+        // Guard: ignore artifacts created by a background conversation's agent after a swap.
+        // Without this, reloadArtifactsForMessage -> loadPeripheralData would CLEAR the active
+        // conversation's artifact/agent-run/rating/attachment maps and rebuild them from the
+        // background conversation's cache — wiping the displayed conversation's artifacts.
+        // The background conversation's artifacts persist server-side and reload when the user
+        // navigates back to it. See onMessageSent() for the broader pattern.
+        if (!this.isActiveConversation(data.conversationId)) {
+            return;
+        }
         // Snapshot artifact IDs before reload to detect newly created artifacts
         const artifactIdsBefore = this.collectAllArtifactIds();
         // Reload artifacts to get full entities (processes ALL messages in the conversation)
-        await this.reloadArtifactsForMessage(data.conversationDetailId);
+        await this.reloadArtifactsForMessage(data.conversationDetailId, data.conversationId);
+        if (!this.isActiveConversation(data.conversationId)) {
+            return;
+        }
         // Auto-open artifact panel if no artifact currently shown
         if (!this.showArtifactPanel) {
             // Use robust auto-open that checks ALL messages for new artifacts.
             // When a sub-agent (e.g., Skip) creates an artifact on a different ConversationDetail
             // than the one specified in the event, checking only data.conversationDetailId would miss it.
-            await this.autoOpenNewArtifact(artifactIdsBefore);
+            await this.autoOpenNewArtifact(artifactIdsBefore, data.conversationId);
         }
         else if (this.selectedArtifactId) {
             // Panel is already open - check if new artifact is a new version of currently displayed artifact
@@ -2903,6 +3131,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 return;
             }
             LogStatusEx({ message: '✅ Created new conversation', verboseOnly: true, additionalArgs: [newConversation.ID] });
+            // Pin the auto-send to THIS newly-created conversation, host-independent and immune to
+            // conversation-swap timing. The pending message round-trips through the host (which sets
+            // [pendingMessage]) and comes back as an @Input; the @for delivers it ONLY to the input
+            // whose conversationId matches this target. Without this, a fast swap during the async
+            // auto-send window lets the swapped-to conversation's input grab the pending message and
+            // send it there instead (the cross-conversation bleed).
+            this._pendingMessageTargetId = newConversation.ID;
             // Emit to parent with the new conversation AND the pending message/attachments in a single event
             // This ensures atomic state update - workspace sets all state before Angular change detection
             // creates the new message-input component
@@ -2945,7 +3180,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * `openEntityRecord` chain every other chat record-open uses, so the Explorer
      * wrapper routes it through `NavigationService.OpenEntityRecord`.
      */
-    onVoiceNavigateRequest(event) {
+    onRealtimeNavigateRequest(event) {
         const compositeKey = new CompositeKey();
         compositeKey.KeyValuePairs.push({ FieldName: 'ID', Value: event.RecordID });
         this.openEntityRecord.emit({
@@ -2954,11 +3189,35 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         });
     }
     /**
-     * Post-call hook for sessions that created their own conversation: kicks the shared
-     * auto-naming helper in the background (first user utterance as the seed) and emits
-     * {@link realtimeConversationReady} so the workspace can refresh + select.
+     * Session-START hook for a realtime session that CREATED its own conversation (started
+     * without one). Folds that server-created conversation into the engine's reactive cache
+     * directly — ONE single-row load, only when it isn't already cached — so the sidebar list
+     * emits via `Conversations$` the moment the call starts, independent of the host's refresh
+     * round-trip. Also emits {@link realtimeConversationReady} so the host can react (it
+     * selects on close). No-op when the session joined an existing conversation. Fire-and-forget
+     * on the load: a failed load just leaves the host's emit to fold it in.
+     */
+    onRealtimeSessionStarted() {
+        const created = this.RealtimeSession.SessionCreatedConversationId;
+        if (!created) {
+            return;
+        }
+        void this.engine.EnsureConversationLoaded(created, this.currentUser);
+        this.realtimeConversationReady.emit({ conversationId: created, select: false });
+    }
+    /**
+     * Post-call hook. Two responsibilities:
+     *  1. Reload the ACTIVE conversation's timeline so the session that just ended — whose
+     *     session-stamped `MJ: Conversation Details` were persisted server-side during the
+     *     call — surfaces as a reviewable past-session block WITHOUT a manual refresh.
+     *  2. For a session that CREATED its own conversation, kick the shared auto-naming
+     *     helper (covered elsewhere on first utterance; this covers a silent call) and
+     *     emit {@link realtimeConversationReady} so the host can refresh the list + select.
      */
-    onVoiceSessionEnded() {
+    onRealtimeSessionEnded() {
+        // (1) Refresh the active conversation's timeline (cheap — single conversation).
+        void this.reloadActiveConversationTimeline();
+        // (2) New-conversation case: let the host fold + select it.
         const conversationId = this.RealtimeSession.SessionCreatedConversationId;
         if (!conversationId) {
             return;
@@ -2966,6 +3225,40 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // Naming normally fired at the first utterance; this covers a silent call's default.
         this.realtimeConversationReady.emit({ conversationId, select: true });
     }
+    /**
+     * Surgically reloads the CURRENTLY-OPEN conversation's details so newly-persisted rows
+     * (e.g. a just-ended realtime session's session-stamped caption turns) appear in the
+     * timeline — and therefore in the "review past sessions" affordances — without a manual
+     * browser refresh. Re-queries ONLY the active conversation (no broad reload), mirrors the
+     * agent-completion refresh path, and no-ops when no conversation is open.
+     */
+    async reloadActiveConversationTimeline() {
+        const conversationId = this.conversationId;
+        if (!conversationId) {
+            return;
+        }
+        try {
+            await this.engine.RefreshConversationDetails(conversationId, this.currentUser);
+            if (!this.isActiveConversation(conversationId)) {
+                return;
+            }
+            // Re-read messages from the surgically updated engine cache
+            const freshDetails = this.engine.GetCachedDetails(conversationId);
+            if (freshDetails) {
+                this.messages = freshDetails;
+            }
+            // Reprocess peripheral data + realtime session meta (drives the timeline's session cards)
+            this.lastLoadedConversationId = null;
+            await this.loadPeripheralData(conversationId);
+            if (!this.isActiveConversation(conversationId)) {
+                return;
+            }
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            console.error('Failed to reload conversation timeline after the session ended:', error);
+        }
+    }
     /**
      * ENTRY API for SESSION REVIEW: opens the realtime overlay in review mode over this
      * conversation panel, rendering what went down in a PAST agent session (caption turns,
@@ -3030,7 +3323,14 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     async onReviewStartLive(request) {
         const agentName = this.RealtimeReview?.AgentName ?? null;
         try {
-            const start = this.RealtimeSession.StartVoiceSession(request.TargetAgentId, request.ConversationId ?? this.conversationId, request.LastSessionId, agentName);
+            const start = this.RealtimeSession.StartRealtimeSession(request.TargetAgentId, request.ConversationId ?? this.conversationId, request.LastSessionId, agentName, null, // preferredModelId
+            null, // clientTools
+            null, // coAgentId
+            null, // configOverridesJson
+            null, // recordingConsent
+            null, // mediaCollectionId
+            // App awareness — see message-input.startVoiceSession for the rationale.
+            this.applicationId, this.appContext);
             this.RealtimeReview = null;
             await start;
         }
@@ -3113,22 +3413,36 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     /**
      * Load permissions for the given artifact
      */
-    async loadArtifactPermissions(artifactId) {
+    async loadArtifactPermissions(artifactId, expectedConversationId, expectedSelectedArtifactId) {
+        const canApply = () => {
+            const conversationOk = expectedConversationId === undefined || this.isActiveConversation(expectedConversationId);
+            const artifactOk = !expectedSelectedArtifactId || UUIDsEqual(this.selectedArtifactId, expectedSelectedArtifactId);
+            return conversationOk && artifactOk;
+        };
         // Guard against null/undefined
         if (!artifactId) {
-            this.canShareSelectedArtifact = false;
-            this.canEditSelectedArtifact = false;
-            return;
+            if (canApply()) {
+                this.canShareSelectedArtifact = false;
+                this.canEditSelectedArtifact = false;
+            }
+            return false;
         }
         try {
             const permissions = await this.artifactPermissionService.getUserPermissions(artifactId, this.currentUser);
+            if (!canApply()) {
+                return false;
+            }
             this.canShareSelectedArtifact = permissions.canShare;
             this.canEditSelectedArtifact = permissions.canEdit;
+            return true;
         }
         catch (error) {
             console.error('Failed to load artifact permissions:', error);
-            this.canShareSelectedArtifact = false;
-            this.canEditSelectedArtifact = false;
+            if (canApply()) {
+                this.canShareSelectedArtifact = false;
+                this.canEditSelectedArtifact = false;
+            }
+            return false;
         }
     }
     /**
@@ -3166,7 +3480,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * to the prior conversation turn.
      */
     async OnAnalyzeArtifact(event) {
-        if (!this.conversationId || !this.currentUser)
+        const conversationId = this.conversationId;
+        if (!conversationId || !this.currentUser)
             return null;
         const messageInput = this.getActiveMessageInputComponent();
         const snapshotTitle = event.snapshot.title || 'Untitled Snapshot';
@@ -3176,6 +3491,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 currentUser: this.currentUser,
                 environmentId: this.environmentId,
             });
+            if (!this.isActiveConversation(conversationId)) {
+                return null;
+            }
             if (messageInput) {
                 const rowCount = (event.snapshot.tables ?? []).reduce((sum, t) => sum + (t.rows?.length ?? 0), 0);
                 const serialized = JSON.stringify(event.snapshot);
@@ -3198,6 +3516,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 message: `[OnAnalyzeArtifact] CreateSnapshotArtifact failed: ${error instanceof Error ? error.message : String(error)}`,
                 verboseOnly: false,
             });
+            if (!this.isActiveConversation(conversationId)) {
+                return null;
+            }
             if (messageInput) {
                 messageInput.messageText = `Analyze "${snapshotTitle}" — `;
                 messageInput.inputBox?.focus();
@@ -3227,14 +3548,18 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * than throwing. The user's conversation state isn't disrupted.
      */
     async handleCaptureDataSnapshotCommand(command) {
-        console.log('[client:capture-data-snapshot] Handler invoked', { command, conversationId: this.conversationId });
-        if (!this.conversationId || !this.currentUser) {
+        const conversationId = this.conversationId;
+        console.log('[client:capture-data-snapshot] Handler invoked', { command, conversationId });
+        if (!conversationId || !this.currentUser) {
             console.warn('[client:capture-data-snapshot] No active conversation/user; ignoring');
             return;
         }
         let artifactId = command.artifactId;
         if (!artifactId) {
             artifactId = (await this.findMostRecentComponentArtifactId()) ?? undefined;
+            if (!this.isActiveConversation(conversationId)) {
+                return;
+            }
             console.log('[client:capture-data-snapshot] Resolved artifactId via lookup:', artifactId);
         }
         else {
@@ -3257,11 +3582,14 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.selectedVersionNumber = undefined;
             this.showArtifactPanel = true;
             try {
-                await this.loadArtifactPermissions(artifactId);
+                await this.loadArtifactPermissions(artifactId, conversationId, artifactId);
             }
             catch {
                 // Non-fatal — permissions are for UI affordances, not capture
             }
+            if (!this.isActiveConversation(conversationId) || !UUIDsEqual(this.selectedArtifactId, artifactId)) {
+                return;
+            }
             this.cdr.detectChanges();
             console.log('[client:capture-data-snapshot] Opened artifact panel; waiting for viewer mount + data load');
         }
@@ -3270,6 +3598,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // and query-backed / server-paged components need additional time to load
         // their rows (we now wait for rows, not just a registered table).
         const snapshot = await this.waitForViewerSnapshot(15000);
+        if (!this.isActiveConversation(conversationId) || !UUIDsEqual(this.selectedArtifactId, artifactId)) {
+            return;
+        }
         if (!snapshot) {
             console.warn('[client:capture-data-snapshot] Artifact viewer did not produce a snapshot within timeout');
             return;
@@ -3280,6 +3611,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // chain that normally syncs `pendingAttachments` is async (next-tick) and
         // hasn't propagated by the time we auto-send.
         const capturedAttachment = await this.OnAnalyzeArtifact({ artifactId, snapshot });
+        if (!this.isActiveConversation(conversationId)) {
+            return;
+        }
         // Auto-send the followup so the agent re-runs immediately with the
         // captured snapshot now attached. Resolution order:
         //   1. command.followupMessage   — if the agent provided one
@@ -3544,14 +3878,20 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      *    completed successfully, we detect the mismatch and correct it. This prevents
      *    the race condition where the client overwrites a server-completed record.
      */
-    async detectAndReconcileAgentRuns(conversationId) {
-        await this.reconnectInProgressRuns();
-        await this.correctStaleErrorMessages();
+    async detectAndReconcileAgentRuns(conversationId, loadToken) {
+        if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+            return;
+        }
+        await this.reconnectInProgressRuns(conversationId, loadToken);
+        if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+            return;
+        }
+        await this.correctStaleErrorMessages(conversationId, loadToken);
     }
     /**
      * Reconnect to in-progress agent runs whose completion events were missed.
      */
-    async reconnectInProgressRuns() {
+    async reconnectInProgressRuns(conversationId, loadToken) {
         const inProgressMessages = this.messages.filter(m => m.Status === 'In-Progress' && m.Role === 'AI');
         if (inProgressMessages.length === 0) {
             return;
@@ -3569,7 +3909,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             if (completedStatuses.includes(agentRun.Status)) {
                 // Agent completed during the WebSocket reconnection gap — handle now
                 LogStatusEx({ message: `🔄 Agent run ${agentRun.ID} already completed (${agentRun.Status}) for message ${message.ID}, handling catch-up...`, verboseOnly: true });
-                await this.handleMessageCompletion(message, agentRun.ID);
+                await this.handleMessageCompletion(message, agentRun.ID, conversationId, loadToken);
             }
             else {
                 LogStatusEx({ message: `🔌 Agent run ${agentRun.ID} still ${agentRun.Status} for message ${message.ID}, WebSocket will receive updates`, verboseOnly: true });
@@ -3581,7 +3921,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * agent run actually completed successfully on the server. This corrects the race
      * condition where the client overwrote a server-completed record with an error status.
      */
-    async correctStaleErrorMessages() {
+    async correctStaleErrorMessages(conversationId, loadToken) {
         const errorMessages = this.messages.filter(m => m.Status === 'Error' && m.Role === 'AI');
         if (errorMessages.length === 0) {
             return;
@@ -3590,7 +3930,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             const agentRun = this.agentRunsByDetailId.get(message.ID);
             if (agentRun && agentRun.Status === 'Completed') {
                 LogStatusEx({ message: `🔧 Correcting stale error: message ${message.ID} shows Error but agent run ${agentRun.ID} completed successfully`, verboseOnly: true });
-                await this.handleMessageCompletion(message, agentRun.ID);
+                await this.handleMessageCompletion(message, agentRun.ID, conversationId, loadToken);
             }
         }
     }
@@ -3602,10 +3942,15 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (!this.pendingArtifactId) {
             return; // No pending navigation
         }
+        const pendingTargetConversationId = this.pendingArtifactConversationId ?? this.conversationId;
+        if (!this.pendingArtifactId || !this.isActiveConversation(pendingTargetConversationId)) {
+            return;
+        }
         console.log('📦 Processing pending artifact navigation:', this.pendingArtifactId, 'v' + this.pendingArtifactVersionNumber);
         // Capture values before emitting consumed event
         const artifactIdToOpen = this.pendingArtifactId;
         const versionNumberToOpen = this.pendingArtifactVersionNumber;
+        const conversationId = this.conversationId;
         // Notify parent that we consumed the pending artifact
         this.pendingArtifactConsumed.emit();
         // Find the message containing this artifact version
@@ -3633,7 +3978,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.selectedVersionNumber = versionNumberToOpen ?? undefined;
         this.showArtifactPanel = true;
         // Load permissions for the artifact
-        await this.loadArtifactPermissions(artifactIdToOpen);
+        await this.loadArtifactPermissions(artifactIdToOpen, conversationId, artifactIdToOpen);
+        if (!this.isActiveConversation(conversationId) || !UUIDsEqual(this.selectedArtifactId, artifactIdToOpen)) {
+            return;
+        }
         this.cdr.detectChanges();
         // Scroll to the message
         this.scrollToMessage(messageIdWithArtifact);
@@ -3659,7 +4007,12 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     /**
      * Handle intent check started - show temporary "Analyzing intent..." message
      */
-    async onIntentCheckStarted() {
+    async onIntentCheckStarted(event) {
+        // Guard: ignore intent-check UI from a background conversation's input after a swap,
+        // so the "Analyzing..." placeholder isn't injected into the displayed conversation.
+        if (!this.isActiveConversation(event.conversationId)) {
+            return;
+        }
         const md = this.ProviderToUse;
         const tempMessage = await md.GetEntityObject('MJ: Conversation Details', this.currentUser);
         // Create a temporary message that looks like an AI response in-progress
@@ -3682,7 +4035,14 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     /**
      * Handle intent check completed - remove temporary message
      */
-    onIntentCheckCompleted() {
+    onIntentCheckCompleted(event) {
+        // Guard (symmetric with onIntentCheckStarted): ignore a background conversation's
+        // intent-check completion after a swap. Without this, a late completion from the
+        // conversation the user just left would remove the ACTIVE conversation's own
+        // "Analyzing..." placeholder (intentCheckMessage is a single shared field).
+        if (!this.isActiveConversation(event.conversationId)) {
+            return;
+        }
         if (this.intentCheckMessage) {
             // Remove the temporary intent check message
             this.messages = this.messages.filter(m => m !== this.intentCheckMessage);
@@ -3704,7 +4064,7 @@ 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", pendingAttachments: "pendingAttachments", pendingArtifactId: "pendingArtifactId", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", 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" }, 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" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 33, consts: [["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", "disabled", "showSidebarToggle", "overlayMode", "greeting", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [3, "sidebarToggleClicked", "messageSent", "currentUser", "disabled", "showSidebarToggle", "overlayMode", "greeting", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "message-input-container-wrapper"], [3, "emptyStateSubmit", "emptyStateMode", "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", "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, "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "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"], ["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"], [1, "empty-state"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "fas", "fa-cube", 2, "font-size", "48px", "color", "var(--mj-text-muted)", "margin-bottom", "16px"], [2, "color", "var(--mj-text-muted)", "font-size", "14px"], [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", 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" }, 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" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 33, consts: [["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", "disabled", "showSidebarToggle", "overlayMode", "greeting", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [3, "sidebarToggleClicked", "messageSent", "currentUser", "disabled", "showSidebarToggle", "overlayMode", "greeting", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "message-input-container-wrapper"], [3, "emptyStateSubmit", "emptyStateMode", "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", "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, "initialMessageAutoSendStarted", "initialMessageAutoSendFailed", "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "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) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Template, 3, 3, "div", 3);
             i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_2_Template, 1, 8, "ng-container")(3, ConversationChatAreaComponent_Conditional_3_Template, 15, 14, "div", 4);
@@ -3719,7 +4079,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_13_Template, 1, 1, "mj-pinned-messages-panel", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_14_Template, 4, 10);
+            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", 12);
@@ -3777,11 +4137,11 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵconditional(ctx.testFeedbackDialogData ? 23 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showImageViewer ? 24 : -1);
-        } }, dependencies: [i13.NgTemplateOutlet, i14.MJButtonDirective, i10.ArtifactViewerPanelComponent, i15.TestFeedbackDialogComponent, i16.LoadingComponent, i17.GenericShareDialogComponent, i18.ArtifactCollectionPickerModalComponent, i19.ArtifactShareModalComponent, i20.MJChatAgentPresenceDefaultComponent, i21.RealtimeSessionOverlayComponent, i22.MessageListComponent, i23.MessageInputComponent, i24.ConversationEmptyStateComponent, i25.ConversationAgentPickerComponent, i26.ConversationModePickerComponent, i27.ThreadPanelComponent, i28.ProjectSelectorComponent, i29.MembersModalComponent, i30.ExportModalComponent, i31.ImageViewerComponent, i32.PinnedMessagesPanelComponent, i13.AsyncPipe], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  \n\n  position: relative;\n}\n\n.chat-header[_ngcontent-%COMP%] {\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\n\n\n\n\n\n.chat-agent-presence[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.sidebar-toggle-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n.chat-title[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.pin-chip[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.pin-chip[_ngcontent-%COMP%]:hover, \n.pin-chip.active[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members[_ngcontent-%COMP%], \n.artifact-indicator[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover, \n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n\n.artifact-badge[_ngcontent-%COMP%], \n.members-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); \n\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.resize-handle[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; \n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.chat-demonstration-stage[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-demonstration-stage[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n   .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n\n\n.upload-indicator-overlay[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]::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[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; \n\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  \n\n  .chat-actions-buttons[_ngcontent-%COMP%] {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: nowrap;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n\n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; \n\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n.artifact-picker-overlay[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_slideInRight 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-pdf[_ngcontent-%COMP%] { color: #e53e3e; }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-excel[_ngcontent-%COMP%] { color: #38a169; }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-word[_ngcontent-%COMP%] { color: #3182ce; }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.voice-call-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; \n\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse[_ngcontent-%COMP%] {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: _ngcontent-%COMP%_voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes _ngcontent-%COMP%_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}"] });
+        } }, dependencies: [i13.NgTemplateOutlet, i14.MJButtonDirective, i14.MJEmptyStateComponent, i10.ArtifactViewerPanelComponent, i15.TestFeedbackDialogComponent, i16.LoadingComponent, i17.GenericShareDialogComponent, i18.ArtifactCollectionPickerModalComponent, i19.ArtifactShareModalComponent, i20.MJChatAgentPresenceDefaultComponent, i21.RealtimeSessionOverlayComponent, i22.MessageListComponent, i23.MessageInputComponent, i24.ConversationEmptyStateComponent, i25.ConversationAgentPickerComponent, i26.ConversationModePickerComponent, i27.ThreadPanelComponent, i28.ProjectSelectorComponent, i29.MembersModalComponent, i30.ExportModalComponent, i31.ImageViewerComponent, i32.PinnedMessagesPanelComponent, i13.AsyncPipe], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  \n\n  position: relative;\n}\n\n.chat-header[_ngcontent-%COMP%] {\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\n\n\n\n\n\n.chat-agent-presence[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.sidebar-toggle-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n.chat-title[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.pin-chip[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.pin-chip[_ngcontent-%COMP%]:hover, \n.pin-chip.active[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members[_ngcontent-%COMP%], \n.artifact-indicator[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover, \n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n\n.artifact-badge[_ngcontent-%COMP%], \n.members-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); \n\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.resize-handle[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; \n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.chat-demonstration-stage[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-demonstration-stage[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n   .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n\n\n.upload-indicator-overlay[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n\n\n.artifacts-empty-fill[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]::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[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]: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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; \n\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  \n\n  .chat-actions-buttons[_ngcontent-%COMP%] {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: nowrap;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n\n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; \n\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n.artifact-picker-overlay[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_slideInRight 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-pdf[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-excel[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-word[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.voice-call-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; \n\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[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse[_ngcontent-%COMP%] {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: _ngcontent-%COMP%_voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes _ngcontent-%COMP%_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}"] });
 }
 (() => { (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 (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          <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            [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                [emptyStateMode]=\"true\"\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                    [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]=\"inputRef.conversationId === conversationId ? pendingMessage : null\"\n                    [initialAttachments]=\"inputRef.conversationId === conversationId ? pendingAttachments : null\"\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()\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted()\"\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      (NavigateRequest)=\"onVoiceNavigateRequest($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          <div class=\"empty-state\">\n            <i class=\"fas fa-cube\" style=\"font-size: 48px; color: var(--mj-text-muted); margin-bottom: 16px;\"></i>\n            <p style=\"color: var(--mj-text-muted); font-size: 14px;\">No artifacts in this conversation yet</p>\n          </div>\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}", 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 {\n  grid-column: 1/-1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\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: #e53e3e; }\n.artifact-picker-item i.fa-file-excel { color: #38a169; }\n.artifact-picker-item i.fa-file-word { color: #3182ce; }\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 (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            [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                [emptyStateMode]=\"true\"\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                    [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"] }]
     }], () => [{ type: i1.AgentStateService }, { type: i2.ConversationAgentService }, { type: i3.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i4.MentionAutocompleteService }, { type: i5.ArtifactPermissionService }, { type: i6.ConversationAttachmentService }, { type: i7.ConversationStreamingService }, { type: i8.DialogService }, { type: i9.ConversationBridgeService }, { type: i10.AnalyzeArtifactService }, { type: i11.UICommandHandlerService }, { type: i10.InteractiveFormApplyService }, { type: i12.AgentClientService }], { environmentId: [{
             type: Input
         }], currentUser: [{
@@ -3802,12 +4162,16 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             type: Input
         }], pendingMessage: [{
             type: Input
+        }], pendingMessageConversationId: [{
+            type: Input
         }], pendingAttachments: [{
             type: Input
         }], pendingArtifactId: [{
             type: Input
         }], pendingArtifactVersionNumber: [{
             type: Input
+        }], pendingArtifactConversationId: [{
+            type: Input
         }], overlayMode: [{
             type: Input
         }], showExportButton: [{