@memberjunction/ng-conversations 5.40.2 → 5.41.0

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

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ViewChild, ViewChildren } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, ViewChildren, ContentChildren, inject } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { RunView, CompositeKey, LogStatusEx } from '@memberjunction/core';
 import { ArtifactMetadataEngine, ConversationEngine } from '@memberjunction/core-entities';
@@ -10,7 +10,14 @@ import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { ConversationEmptyStateComponent } from './conversation-empty-state.component';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { UUIDsEqual } from '@memberjunction/global';
+import { ConversationsRuntime } from '@memberjunction/conversations-runtime';
+import { RealtimeSessionService } from '../../services/realtime-session.service';
+import { RealtimeSessionReviewService } from '../../services/realtime-session-review.service';
+import { GenerateAndApplyConversationName } from '../../services/conversation-naming';
+import { NormalizeUUID, UUIDsEqual } from '@memberjunction/global';
+// PR 2c — Widget extension surface
+import { ChatSlotDirective } from '../../directives/chat-slot.directive';
+import { BeforeToolInvokedEventArgs, AfterToolInvokedEventArgs, SessionStartedEventArgs, SessionChannelStateChangedEventArgs, SessionEndedEventArgs, } from '../../events/chat-events';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/agent-state.service";
 import * as i2 from "../../services/conversation-agent.service";
@@ -23,516 +30,617 @@ import * as i8 from "../../services/dialog.service";
 import * as i9 from "../../services/conversation-bridge.service";
 import * as i10 from "@memberjunction/ng-artifacts";
 import * as i11 from "../../services/ui-command-handler.service";
-import * as i12 from "@memberjunction/ng-ui-components";
-import * as i13 from "@memberjunction/ng-testing";
-import * as i14 from "@memberjunction/ng-shared-generic";
-import * as i15 from "@memberjunction/ng-resource-permissions";
-import * as i16 from "../collection/artifact-collection-picker-modal.component";
-import * as i17 from "../artifact/artifact-share-modal.component";
-import * as i18 from "../message/message-list.component";
-import * as i19 from "../message/message-input.component";
-import * as i20 from "./conversation-empty-state.component";
-import * as i21 from "./conversation-agent-picker.component";
-import * as i22 from "./conversation-mode-picker.component";
-import * as i23 from "../thread/thread-panel.component";
-import * as i24 from "../project/project-selector.component";
-import * as i25 from "../members/members-modal.component";
-import * as i26 from "../export/export-modal.component";
-import * as i27 from "../attachment/image-viewer.component";
-import * as i28 from "./pinned-messages-panel.component";
+import * as i12 from "@memberjunction/ng-agent-client";
+import * as i13 from "@angular/common";
+import * as i14 from "@memberjunction/ng-ui-components";
+import * as i15 from "@memberjunction/ng-testing";
+import * as i16 from "@memberjunction/ng-shared-generic";
+import * as i17 from "@memberjunction/ng-resource-permissions";
+import * as i18 from "../collection/artifact-collection-picker-modal.component";
+import * as i19 from "../artifact/artifact-share-modal.component";
+import * as i20 from "../slots/mj-chat-agent-presence-default.component";
+import * as i21 from "../realtime/realtime-session-overlay.component";
+import * as i22 from "../message/message-list.component";
+import * as i23 from "../message/message-input.component";
+import * as i24 from "./conversation-empty-state.component";
+import * as i25 from "./conversation-agent-picker.component";
+import * as i26 from "./conversation-mode-picker.component";
+import * as i27 from "../thread/thread-panel.component";
+import * as i28 from "../project/project-selector.component";
+import * as i29 from "../members/members-modal.component";
+import * as i30 from "../export/export-modal.component";
+import * as i31 from "../attachment/image-viewer.component";
+import * as i32 from "./pinned-messages-panel.component";
 const _c0 = ["scrollContainer"];
 const _c1 = ["messageInput"];
-const _c2 = () => [];
+const _c2 = (a0, a1, a2, a3, a4) => ({ $implicit: a0, state: a1, agentName: a2, avatarUrl: a3, mode: a4 });
+const _c3 = (a0, a1, a2, a3, a4) => ({ $implicit: a0, conversationTitle: a1, sharedBy: a2, artifactCount: a3, showArtifactIndicator: a4 });
+const _c4 = (a0, a1, a2) => ({ $implicit: a0, content: a1, visible: a2 });
+const _c5 = () => [];
+const _c6 = (a0, a1, a2, a3) => ({ $implicit: a0, greeting: a1, subtext: a2, suggestedPrompts: a3 });
 const _forTrack0 = ($index, $item) => $item.conversationId;
 const _forTrack1 = ($index, $item) => $item.artifactId;
 const _forTrack2 = ($index, $item) => $item.versionId;
+function ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ConversationChatAreaComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 22);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c2, ctx_r0.agentCharacterConfig, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.state) ?? "idle", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.characterName, ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.avatarUrl, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.voiceStateMode) ?? "subtle"));
+} }
 function ConversationChatAreaComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 33);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_1_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.sidebarToggleClicked.emit()); });
-    i0.ɵɵelement(1, "i", 34);
+    i0.ɵɵelement(0, "mj-chat-agent-presence-default", 21);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("State", (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.state) ?? "idle")("AgentName", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.characterName)("AvatarUrl", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.avatarUrl)("Mode", (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.voiceStateMode) ?? "subtle");
+} }
+function ConversationChatAreaComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Conditional_1_Template, 1, 8, "ng-container")(2, ConversationChatAreaComponent_Conditional_1_Conditional_2_Template, 1, 4, "mj-chat-agent-presence-default", 21);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_2_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("chat-agent-presence--prominent", (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.voiceStateMode) === "prominent");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_2_0 = ctx_r0.slotTemplate("agentPresence")) ? 1 : 2, tmp_2_0);
+} }
+function ConversationChatAreaComponent_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ConversationChatAreaComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 22);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c3, ctx_r0.conversation, (ctx_r0.conversation == null ? null : ctx_r0.conversation.Name) ?? null, (ctx_r0.sharedByBadge == null ? null : ctx_r0.sharedByBadge.display) ?? null, ctx_r0.artifactCountDisplay, ctx_r0.showArtifactIndicator));
+} }
+function ConversationChatAreaComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 37);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sidebarToggleClicked.emit()); });
+    i0.ɵɵelement(1, "i", 38);
     i0.ɵɵelementEnd();
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21);
+function ConversationChatAreaComponent_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.conversation.Name || "");
+    i0.ɵɵtextInterpolate(ctx_r0.conversation.Name || "");
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 22);
-    i0.ɵɵelement(1, "i", 35);
+function ConversationChatAreaComponent_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵelement(1, "i", 39);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("title", ctx_r1.sharedByBadge.fullTooltip);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", ctx_r0.sharedByBadge.fullTooltip);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("Shared by ", ctx_r1.sharedByBadge.display);
+    i0.ɵɵtextInterpolate1("Shared by ", ctx_r0.sharedByBadge.display);
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 36);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_1_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openProjectSelector()); });
-    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openProjectSelector()); });
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.conversation.Project || "Project");
+    i0.ɵɵtextInterpolate(ctx_r0.conversation.Project || "Project");
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_1_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewTestRun(ctx_r1.conversation.TestRunID)); });
-    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.viewTestRun(ctx_r0.conversation.TestRunID)); });
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Test");
     i0.ɵɵelementEnd()();
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 40);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.showPinsPanel = !ctx_r1.showPinsPanel); });
-    i0.ɵɵelement(1, "i", 41);
-    i0.ɵɵelementStart(2, "span", 42);
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.showPinsPanel = !ctx_r0.showPinsPanel); });
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelementStart(2, "span", 46);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", ctx_r1.showPinsPanel);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r0.showPinsPanel);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.pinnedMessages.length);
+    i0.ɵɵtextInterpolate(ctx_r0.pinnedMessages.length);
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 43);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_1_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.viewArtifacts()); });
-    i0.ɵɵelement(1, "i", 44);
-    i0.ɵɵelementStart(2, "span", 45);
+    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.viewArtifacts()); });
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(2, "span", 49);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.artifactCountDisplay);
+    i0.ɵɵtextInterpolate(ctx_r0.artifactCountDisplay);
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 46);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_1_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleMembersModal()); });
-    i0.ɵɵelement(1, "i", 47);
-    i0.ɵɵelementStart(2, "span", 48);
+    i0.ɵɵelementStart(0, "button", 50);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleMembersModal()); });
+    i0.ɵɵelement(1, "i", 51);
+    i0.ɵɵelementStart(2, "span", 52);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.memberCount);
+    i0.ɵɵtextInterpolate(ctx_r0.memberCount);
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-mode-picker", 49);
-    i0.ɵɵlistener("PresetChanged", function ConversationChatAreaComponent_Conditional_1_Conditional_11_Template_mj_conversation_mode_picker_PresetChanged_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnAgentModePresetChanged($event)); });
+    i0.ɵɵelementStart(0, "mj-conversation-mode-picker", 53);
+    i0.ɵɵlistener("PresetChanged", function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template_mj_conversation_mode_picker_PresetChanged_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnAgentModePresetChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("AgentID", ctx_r1.ModePickerTargetAgentId)("Disabled", ctx_r1.isProcessing);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("AgentID", ctx_r0.ModePickerTargetAgentId)("Disabled", ctx_r0.isProcessing);
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-conversation-agent-picker", 30);
+function ConversationChatAreaComponent_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-conversation-agent-picker", 34);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("Conversation", ctx_r1.conversation)("CurrentUser", ctx_r1.currentUser)("Disabled", ctx_r1.isReadOnlyView);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Conversation", ctx_r0.conversation)("CurrentUser", ctx_r0.currentUser)("Disabled", ctx_r0.isReadOnlyView);
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 50);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_1_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.exportConversation()); });
-    i0.ɵɵelement(1, "i", 51);
-    i0.ɵɵelementStart(2, "span", 52);
+    i0.ɵɵelementStart(0, "button", 54);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.exportConversation()); });
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementStart(2, "span", 56);
     i0.ɵɵtext(3, "Export");
     i0.ɵɵelementEnd()();
 } }
-function ConversationChatAreaComponent_Conditional_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_1_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.shareConversation()); });
-    i0.ɵɵelement(1, "i", 35);
-    i0.ɵɵelementStart(2, "span", 52);
+    i0.ɵɵelementStart(0, "button", 57);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.shareConversation()); });
+    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵelementStart(2, "span", 56);
     i0.ɵɵtext(3, "Share");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("shared", ctx_r1.isShared);
-    i0.ɵɵproperty("title", ctx_r1.isShared ? "Manage sharing" : "Share conversation");
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("shared", ctx_r0.isShared);
+    i0.ɵɵproperty("title", ctx_r0.isShared ? "Manage sharing" : "Share conversation");
 } }
-function ConversationChatAreaComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 19);
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_1_Conditional_2_Template, 2, 0, "button", 20);
-    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_1_Conditional_3_Template, 2, 1, "div", 21);
-    i0.ɵɵconditionalCreate(4, ConversationChatAreaComponent_Conditional_1_Conditional_4_Template, 4, 2, "span", 22);
-    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_1_Conditional_5_Template, 4, 1, "button", 23);
-    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_1_Conditional_6_Template, 4, 0, "button", 24);
+function ConversationChatAreaComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 23);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_3_Conditional_2_Template, 2, 0, "button", 24);
+    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_3_Conditional_3_Template, 2, 1, "div", 25);
+    i0.ɵɵconditionalCreate(4, ConversationChatAreaComponent_Conditional_3_Conditional_4_Template, 4, 2, "span", 26);
+    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_3_Conditional_5_Template, 4, 1, "button", 27);
+    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_3_Conditional_6_Template, 4, 0, "button", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 25);
-    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_1_Conditional_8_Template, 4, 3, "button", 26);
-    i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_1_Conditional_9_Template, 4, 1, "button", 27);
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_1_Conditional_10_Template, 4, 1, "button", 28);
-    i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_1_Conditional_11_Template, 1, 2, "mj-conversation-mode-picker", 29);
-    i0.ɵɵconditionalCreate(12, ConversationChatAreaComponent_Conditional_1_Conditional_12_Template, 1, 3, "mj-conversation-agent-picker", 30);
-    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_1_Conditional_13_Template, 4, 0, "button", 31);
-    i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_1_Conditional_14_Template, 4, 3, "button", 32);
+    i0.ɵɵelementStart(7, "div", 29);
+    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_3_Conditional_8_Template, 4, 3, "button", 30);
+    i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_3_Conditional_9_Template, 4, 1, "button", 31);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_3_Conditional_10_Template, 4, 1, "button", 32);
+    i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_3_Conditional_11_Template, 1, 2, "mj-conversation-mode-picker", 33);
+    i0.ɵɵconditionalCreate(12, ConversationChatAreaComponent_Conditional_3_Conditional_12_Template, 1, 3, "mj-conversation-agent-picker", 34);
+    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_3_Conditional_13_Template, 4, 0, "button", 35);
+    i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_3_Conditional_14_Template, 4, 3, "button", 36);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("with-sidebar-toggle", ctx_r1.showSidebarToggle);
+    i0.ɵɵclassProp("with-sidebar-toggle", ctx_r0.showSidebarToggle);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showSidebarToggle ? 2 : -1);
+    i0.ɵɵconditional(ctx_r0.showSidebarToggle ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.conversation ? 3 : -1);
+    i0.ɵɵconditional(ctx_r0.conversation ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.sharedByBadge ? 4 : -1);
+    i0.ɵɵconditional(ctx_r0.sharedByBadge ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r1.conversation == null ? null : ctx_r1.conversation.ProjectID) ? 5 : -1);
+    i0.ɵɵconditional((ctx_r0.conversation == null ? null : ctx_r0.conversation.ProjectID) ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r1.conversation == null ? null : ctx_r1.conversation.TestRunID) ? 6 : -1);
+    i0.ɵɵconditional((ctx_r0.conversation == null ? null : ctx_r0.conversation.TestRunID) ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.pinnedMessages.length > 0 ? 8 : -1);
+    i0.ɵɵconditional(ctx_r0.pinnedMessages.length > 0 ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showArtifactIndicator && ctx_r1.artifactCountDisplay > 0 ? 9 : -1);
+    i0.ɵɵconditional(ctx_r0.showArtifactIndicator && ctx_r0.artifactCountDisplay > 0 ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.memberCount > 1 ? 10 : -1);
+    i0.ɵɵconditional(ctx_r0.memberCount > 1 ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showAgentModePicker && ctx_r1.ModePickerTargetAgentId ? 11 : -1);
+    i0.ɵɵconditional(ctx_r0.showAgentModePicker && ctx_r0.ModePickerTargetAgentId ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showAgentPicker && ctx_r1.conversation ? 12 : -1);
+    i0.ɵɵconditional(ctx_r0.showAgentPicker && ctx_r0.conversation ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showExportButton ? 13 : -1);
+    i0.ɵɵconditional(ctx_r0.showExportButton ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showShareButton && ctx_r1.canShareConversation ? 14 : -1);
+    i0.ɵɵconditional(ctx_r0.showShareButton && ctx_r0.canShareConversation ? 14 : -1);
+} }
+function ConversationChatAreaComponent_Conditional_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
 } }
-function ConversationChatAreaComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵelement(1, "mj-loading", 54);
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_5_ng_container_1_Template, 1, 0, "ng-container", 22);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.slotTemplate("demonstrationSurface"))("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c4, ctx_r0.demonstrationSurfaceContent, ctx_r0.demonstrationSurfaceContent, ctx_r0.showDemonstrationSurface));
 } }
-function ConversationChatAreaComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "mj-loading", 58);
+    i0.ɵɵelementEnd();
+} }
+function ConversationChatAreaComponent_Conditional_8_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ConversationChatAreaComponent_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_8_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 22);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c6, ctx_r0.emptyStateConfig, (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.greeting) ?? ctx_r0.emptyStateGreeting, ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.subtext, (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.suggestedPrompts) ?? i0.ɵɵpureFunction0(2, _c5)));
+} }
+function ConversationChatAreaComponent_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-empty-state", 55);
-    i0.ɵɵlistener("sidebarToggleClicked", function ConversationChatAreaComponent_Conditional_5_Template_mj_conversation_empty_state_sidebarToggleClicked_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.sidebarToggleClicked.emit()); })("messageSent", function ConversationChatAreaComponent_Conditional_5_Template_mj_conversation_empty_state_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEmptyStateMessageSent($event)); });
+    i0.ɵɵelementStart(0, "mj-conversation-empty-state", 60);
+    i0.ɵɵlistener("sidebarToggleClicked", function ConversationChatAreaComponent_Conditional_8_Conditional_1_Template_mj_conversation_empty_state_sidebarToggleClicked_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sidebarToggleClicked.emit()); })("messageSent", function ConversationChatAreaComponent_Conditional_8_Conditional_1_Template_mj_conversation_empty_state_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onEmptyStateMessageSent($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("currentUser", ctx_r1.currentUser)("disabled", ctx_r1.isProcessing)("showSidebarToggle", ctx_r1.showSidebarToggle)("overlayMode", ctx_r1.overlayMode)("greeting", ctx_r1.emptyStateGreeting)("enableAttachments", ctx_r1.enableAttachments && ctx_r1.allowAttachments)("enableMentions", ctx_r1.allowMentions)("maxAttachments", ctx_r1.maxAttachments)("maxAttachmentSizeBytes", ctx_r1.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r1.acceptedFileTypes);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("currentUser", ctx_r0.currentUser)("disabled", ctx_r0.isProcessing)("showSidebarToggle", ctx_r0.showSidebarToggle)("overlayMode", ctx_r0.overlayMode)("greeting", (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.greeting) ?? ctx_r0.emptyStateGreeting)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
+} }
+function ConversationChatAreaComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_8_Conditional_0_Template, 1, 8, "ng-container")(1, ConversationChatAreaComponent_Conditional_8_Conditional_1_Template, 1, 10, "mj-conversation-empty-state", 59);
+} if (rf & 2) {
+    let tmp_1_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional((tmp_1_0 = ctx_r0.slotTemplate("emptyState")) ? 0 : 1, tmp_1_0);
 } }
-function ConversationChatAreaComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelement(1, "div", 56);
-    i0.ɵɵelementStart(2, "div", 57)(3, "div", 58)(4, "mj-message-input", 59);
-    i0.ɵɵlistener("emptyStateSubmit", function ConversationChatAreaComponent_Conditional_6_Template_mj_message_input_emptyStateSubmit_4_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEmptyStateMessageSent($event)); });
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "div", 61);
+    i0.ɵɵelementStart(2, "div", 62)(3, "div", 63)(4, "mj-message-input", 64);
+    i0.ɵɵlistener("emptyStateSubmit", function ConversationChatAreaComponent_Conditional_9_Template_mj_message_input_emptyStateSubmit_4_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onEmptyStateMessageSent($event)); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("emptyStateMode", true)("currentUser", ctx_r1.currentUser)("disabled", ctx_r1.isProcessing)("enableAttachments", ctx_r1.enableAttachments && ctx_r1.allowAttachments)("enableMentions", ctx_r1.allowMentions)("maxAttachments", ctx_r1.maxAttachments)("maxAttachmentSizeBytes", ctx_r1.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r1.acceptedFileTypes);
+    i0.ɵɵproperty("emptyStateMode", true)("currentUser", ctx_r0.currentUser)("disabled", ctx_r0.isProcessing)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
 } }
-function ConversationChatAreaComponent_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60);
-    i0.ɵɵelement(1, "mj-loading", 65);
+function ConversationChatAreaComponent_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵelement(1, "mj-loading", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("text", ctx_r1.uploadingMessage);
+    i0.ɵɵproperty("text", ctx_r0.uploadingMessage);
 } }
-function ConversationChatAreaComponent_Conditional_7_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 66);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_7_Conditional_5_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.scrollToBottomAnimate()); });
-    i0.ɵɵelement(1, "i", 67);
+    i0.ɵɵelementStart(0, "span", 71);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_10_Conditional_5_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.scrollToBottomAnimate()); });
+    i0.ɵɵelement(1, "i", 72);
     i0.ɵɵelementEnd();
 } }
-function ConversationChatAreaComponent_Conditional_7_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64);
-    i0.ɵɵelement(1, "mj-loading", 68);
+function ConversationChatAreaComponent_Conditional_10_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "mj-loading", 73);
     i0.ɵɵelementEnd();
 } }
-function ConversationChatAreaComponent_Conditional_7_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 69);
-    i0.ɵɵelement(1, "i", 71);
+function ConversationChatAreaComponent_Conditional_10_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵelement(1, "i", 76);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "You have view-only access to this conversation.");
     i0.ɵɵelementEnd()();
 } }
-function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-message-input", 72, 1);
-    i0.ɵɵlistener("messageSent", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onMessageSent($event)); })("agentResponse", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onAgentRunDetected($event)); })("agentRunUpdate", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_agentRunUpdate_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onAgentRunUpdate($event)); })("messageComplete", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_messageComplete_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onMessageComplete($event)); })("artifactCreated", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onConversationRenamed($event)); })("intentCheckStarted", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_intentCheckStarted_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onIntentCheckStarted()); })("intentCheckCompleted", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_intentCheckCompleted_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onIntentCheckCompleted()); })("uploadStateChanged", function ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template_mj_message_input_uploadStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onUploadStateChanged($event)); });
+    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.ɵɵelementEnd();
 } if (rf & 2) {
     const inputRef_r16 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("hidden", inputRef_r16.conversationId !== ctx_r1.conversationId)("conversationId", inputRef_r16.conversationId)("conversationName", inputRef_r16.conversationName)("currentUser", ctx_r1.currentUser)("conversationHistory", inputRef_r16.conversationId === ctx_r1.conversationId ? ctx_r1.messages : i0.ɵɵpureFunction0(21, _c2))("artifactsByDetailId", inputRef_r16.conversationId === ctx_r1.conversationId ? ctx_r1.artifactsByDetailId : ctx_r1.emptyArtifactsMap)("systemArtifactsByDetailId", inputRef_r16.conversationId === ctx_r1.conversationId ? ctx_r1.systemArtifactsByDetailId : ctx_r1.emptyArtifactsMap)("agentRunsByDetailId", inputRef_r16.conversationId === ctx_r1.conversationId ? ctx_r1.agentRunsByDetailId : ctx_r1.emptyAgentRunsMap)("appContext", ctx_r1.appContext)("defaultAgentId", ctx_r1.defaultAgentId)("conversationDefaultAgentId", inputRef_r16.conversationId === ctx_r1.conversationId ? (ctx_r1.conversation == null ? null : ctx_r1.conversation.DefaultAgentID) ?? null : null)("agentConfigurationPresetId", inputRef_r16.conversationId === ctx_r1.conversationId ? ctx_r1.ActiveAgentConfigurationPresetId : null)("inProgressMessageIds", inputRef_r16.conversationId === ctx_r1.conversationId ? ctx_r1.inProgressMessageIds : ctx_r1.emptyInProgressIds)("disabled", ctx_r1.isProcessing || ctx_r1.isReadOnlyView)("enableAttachments", ctx_r1.enableAttachments && ctx_r1.allowAttachments)("enableMentions", ctx_r1.allowMentions)("maxAttachments", ctx_r1.maxAttachments)("maxAttachmentSizeBytes", ctx_r1.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r1.acceptedFileTypes)("initialMessage", inputRef_r16.conversationId === ctx_r1.conversationId ? ctx_r1.pendingMessage : null)("initialAttachments", inputRef_r16.conversationId === ctx_r1.conversationId ? ctx_r1.pendingAttachments : null);
+    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);
 } }
-function ConversationChatAreaComponent_Conditional_7_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_7_Conditional_8_Conditional_0_Template, 4, 0, "div", 69);
-    i0.ɵɵelementStart(1, "div", 58);
-    i0.ɵɵrepeaterCreate(2, ConversationChatAreaComponent_Conditional_7_Conditional_8_For_3_Template, 2, 22, "mj-message-input", 70, _forTrack0);
+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);
+    i0.ɵɵelementStart(1, "div", 63);
+    i0.ɵɵrepeaterCreate(2, ConversationChatAreaComponent_Conditional_10_Conditional_8_For_3_Template, 2, 23, "mj-message-input", 75, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.isReadOnlyView ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r0.isReadOnlyView ? 0 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.getCachedInputs());
+    i0.ɵɵrepeater(ctx_r0.getCachedInputs());
 } }
-function ConversationChatAreaComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_7_Conditional_1_Template, 2, 1, "div", 60);
-    i0.ɵɵelementStart(2, "div", 61, 0);
-    i0.ɵɵlistener("scroll", function ConversationChatAreaComponent_Conditional_7_Template_div_scroll_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.checkScroll()); });
-    i0.ɵɵelementStart(4, "mj-conversation-message-list", 62);
-    i0.ɵɵlistener("replyInThread", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_replyInThread_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onReplyInThread($event)); })("viewThread", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_viewThread_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewThread($event)); })("deleteMessage", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_deleteMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDeleteMessage($event)); })("retryMessage", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_retryMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRetryMessage($event)); })("testFeedbackMessage", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_testFeedbackMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTestFeedbackMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_artifactClicked_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_messageEdited_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_openEntityRecord_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_suggestedResponseSelected_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSuggestedResponseSelected($event)); })("attachmentClicked", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_attachmentClicked_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAttachmentClicked($event)); })("diagnosticRequested", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_diagnosticRequested_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDiagnosticRequested($event)); })("messagePinToggled", function ConversationChatAreaComponent_Conditional_7_Template_mj_conversation_message_list_messagePinToggled_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMessagePinToggled($event)); });
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_10_Conditional_1_Template, 2, 1, "div", 65);
+    i0.ɵɵelementStart(2, "div", 66, 0);
+    i0.ɵɵlistener("scroll", function ConversationChatAreaComponent_Conditional_10_Template_div_scroll_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.checkScroll()); });
+    i0.ɵɵelementStart(4, "mj-conversation-message-list", 67);
+    i0.ɵɵlistener("realtimeSessionOpenRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_realtimeSessionOpenRequested_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OpenRealtimeSessionReview($event)); })("replyInThread", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_replyInThread_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReplyInThread($event)); })("viewThread", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_viewThread_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onViewThread($event)); })("deleteMessage", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_deleteMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteMessage($event)); })("retryMessage", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_retryMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRetryMessage($event)); })("testFeedbackMessage", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_testFeedbackMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_artifactClicked_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_messageEdited_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_openEntityRecord_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_suggestedResponseSelected_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSuggestedResponseSelected($event)); })("attachmentClicked", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_attachmentClicked_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAttachmentClicked($event)); })("diagnosticRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_diagnosticRequested_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDiagnosticRequested($event)); })("messagePinToggled", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_messagePinToggled_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessagePinToggled($event)); })("beforeResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_beforeResponseFormSubmitted_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.beforeResponseFormSubmitted.emit($event)); })("afterResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_afterResponseFormSubmitted_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.afterResponseFormSubmitted.emit($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_7_Conditional_5_Template, 2, 0, "span", 63);
+    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_10_Conditional_5_Template, 2, 0, "span", 68);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 57);
-    i0.ɵɵconditionalCreate(7, ConversationChatAreaComponent_Conditional_7_Conditional_7_Template, 2, 0, "div", 64)(8, ConversationChatAreaComponent_Conditional_7_Conditional_8_Template, 4, 1);
+    i0.ɵɵelementStart(6, "div", 62);
+    i0.ɵɵconditionalCreate(7, ConversationChatAreaComponent_Conditional_10_Conditional_7_Template, 2, 0, "div", 69)(8, ConversationChatAreaComponent_Conditional_10_Conditional_8_Template, 4, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isUploadingAttachments ? 1 : -1);
+    i0.ɵɵconditional(ctx_r0.isUploadingAttachments ? 1 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("messages", ctx_r1.messages)("conversation", ctx_r1.conversation)("currentUser", ctx_r1.currentUser)("isProcessing", ctx_r1.isProcessing)("artifactMap", ctx_r1.effectiveArtifactsMap)("agentRunMap", ctx_r1.agentRunsByDetailId)("ratingsMap", ctx_r1.ratingsByDetailId)("userAvatarMap", ctx_r1.userAvatarMap)("attachmentsMap", ctx_r1.attachmentsByDetailId);
+    i0.ɵɵproperty("messages", ctx_r0.messages)("conversation", ctx_r0.conversation)("currentUser", ctx_r0.currentUser)("isProcessing", ctx_r0.isProcessing)("artifactMap", ctx_r0.effectiveArtifactsMap)("agentRunMap", ctx_r0.agentRunsByDetailId)("ratingsMap", ctx_r0.ratingsByDetailId)("userAvatarMap", ctx_r0.userAvatarMap)("attachmentsMap", ctx_r0.attachmentsByDetailId)("messageRendererTemplate", ctx_r0.slotTemplate("messageRenderer"))("messageExtraTemplate", ctx_r0.slotTemplate("messageExtra"))("sessionMetaMap", ctx_r0.realtimeSessionMetaMap);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showScrollToBottomIcon && ctx_r1.messages && ctx_r1.messages.length > 0 ? 5 : -1);
+    i0.ɵɵconditional(ctx_r0.showScrollToBottomIcon && ctx_r0.messages && ctx_r0.messages.length > 0 ? 5 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.isLoadingPeripheralData ? 7 : 8);
+    i0.ɵɵconditional(ctx_r0.isLoadingPeripheralData ? 7 : 8);
 } }
-function ConversationChatAreaComponent_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_8_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onResizeStart($event)); })("touchstart", function ConversationChatAreaComponent_Conditional_8_Conditional_0_Template_div_touchstart_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onResizeTouchStart($event)); });
+    i0.ɵɵelementStart(0, "div", 81);
+    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_11_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeStart($event)); })("touchstart", function ConversationChatAreaComponent_Conditional_11_Conditional_0_Template_div_touchstart_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeTouchStart($event)); });
     i0.ɵɵelementEnd();
 } }
-function ConversationChatAreaComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_8_Conditional_0_Template, 1, 0, "div", 73);
-    i0.ɵɵelementStart(1, "div", 74)(2, "mj-artifact-viewer-panel", 75);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_8_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_8_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveToCollectionRequested($event)); })("navigateToLink", function ConversationChatAreaComponent_Conditional_8_Template_mj_artifact_viewer_panel_navigateToLink_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onArtifactLinkNavigation($event)); })("shareRequested", function ConversationChatAreaComponent_Conditional_8_Template_mj_artifact_viewer_panel_shareRequested_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onArtifactShareRequested($event)); })("maximizeToggled", function ConversationChatAreaComponent_Conditional_8_Template_mj_artifact_viewer_panel_maximizeToggled_2_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMaximizeArtifactPane()); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_8_Template_mj_artifact_viewer_panel_openEntityRecord_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); })("navigationRequest", function ConversationChatAreaComponent_Conditional_8_Template_mj_artifact_viewer_panel_navigationRequest_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNavigationRequest($event)); })("analyzeRequested", function ConversationChatAreaComponent_Conditional_8_Template_mj_artifact_viewer_panel_analyzeRequested_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAnalyzeArtifact($event)); })("applyFormRequested", function ConversationChatAreaComponent_Conditional_8_Template_mj_artifact_viewer_panel_applyFormRequested_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnApplyFormRequested($event)); });
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_11_Conditional_0_Template, 1, 0, "div", 78);
+    i0.ɵɵelementStart(1, "div", 79)(2, "mj-artifact-viewer-panel", 80);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSaveToCollectionRequested($event)); })("navigateToLink", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_navigateToLink_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactLinkNavigation($event)); })("shareRequested", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_shareRequested_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactShareRequested($event)); })("maximizeToggled", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_maximizeToggled_2_listener() { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleMaximizeArtifactPane()); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_openEntityRecord_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("navigationRequest", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_navigationRequest_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onNavigationRequest($event)); })("analyzeRequested", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_analyzeRequested_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAnalyzeArtifact($event)); })("applyFormRequested", function ConversationChatAreaComponent_Conditional_11_Template_mj_artifact_viewer_panel_applyFormRequested_2_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnApplyFormRequested($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵconditional(!ctx_r1.isArtifactPaneMaximized ? 0 : -1);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(!ctx_r0.isArtifactPaneMaximized ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("width", ctx_r1.artifactPaneWidth, "%");
-    i0.ɵɵclassProp("maximized", ctx_r1.isArtifactPaneMaximized);
+    i0.ɵɵstyleProp("width", ctx_r0.artifactPaneWidth, "%");
+    i0.ɵɵclassProp("maximized", ctx_r0.isArtifactPaneMaximized);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("artifactId", ctx_r1.selectedArtifactId)("currentUser", ctx_r1.currentUser)("environmentId", ctx_r1.environmentId)("versionNumber", ctx_r1.selectedVersionNumber)("viewContext", "conversation")("canShare", ctx_r1.canShareSelectedArtifact)("canEdit", ctx_r1.canEditSelectedArtifact)("isMaximized", ctx_r1.isArtifactPaneMaximized)("refreshTrigger", ctx_r1.artifactViewerRefresh$);
+    i0.ɵɵproperty("artifactId", ctx_r0.selectedArtifactId)("currentUser", ctx_r0.currentUser)("environmentId", ctx_r0.environmentId)("versionNumber", ctx_r0.selectedVersionNumber)("viewContext", "conversation")("canShare", ctx_r0.canShareSelectedArtifact)("canEdit", ctx_r0.canEditSelectedArtifact)("isMaximized", ctx_r0.isArtifactPaneMaximized)("refreshTrigger", ctx_r0.artifactViewerRefresh$);
 } }
-function ConversationChatAreaComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-pinned-messages-panel", 77);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_10_Template_mj_pinned_messages_panel_closed_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showPinsPanel = false); })("jumpRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_pinned_messages_panel_jumpRequested_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onJumpToMessage($event)); })("unpinRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_pinned_messages_panel_unpinRequested_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUnpinFromPanel($event)); });
+    i0.ɵɵelementStart(0, "mj-pinned-messages-panel", 82);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_13_Template_mj_pinned_messages_panel_closed_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showPinsPanel = false); })("jumpRequested", function ConversationChatAreaComponent_Conditional_13_Template_mj_pinned_messages_panel_jumpRequested_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onJumpToMessage($event)); })("unpinRequested", function ConversationChatAreaComponent_Conditional_13_Template_mj_pinned_messages_panel_unpinRequested_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onUnpinFromPanel($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("pinnedMessages", ctx_r1.pinnedMessages);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("pinnedMessages", ctx_r0.pinnedMessages);
 } }
-function ConversationChatAreaComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 85);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_14_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.RealtimeSession.SetMinimized(false)); });
+    i0.ɵɵelement(1, "span", 86)(2, "i", 87);
+    i0.ɵɵelementStart(3, "span", 88)(4, "span", 89);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 90);
+    i0.ɵɵtext(7, "Tap to return");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("On call \u00B7 ", ctx_r0.RealtimeSession.CurrentAgentName);
+} }
+function ConversationChatAreaComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-thread-panel", 78);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_11_Template_mj_thread_panel_closed_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLocalThreadClosed()); })("replyAdded", function ConversationChatAreaComponent_Conditional_11_Template_mj_thread_panel_replyAdded_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onThreadReplyAdded($event)); });
+    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.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_14_Conditional_2_Template, 8, 1, "button", 84);
+    i0.ɵɵpipe(3, "async");
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("parentMessageId", ctx_r1.threadId)("conversationId", ctx_r1.conversationId || "")("currentUser", ctx_r1.currentUser);
+    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.ɵɵadvance(2);
+    i0.ɵɵconditional(i0.ɵɵpipeBind1(3, 8, ctx_r0.RealtimeSession.Minimized$) ? 2 : -1);
 } }
-function ConversationChatAreaComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_15_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showProjectSelector = false); });
-    i0.ɵɵelementStart(1, "div", 80);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_15_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r21); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 81)(3, "h3");
+function ConversationChatAreaComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-thread-panel", 91);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_16_Template_mj_thread_panel_closed_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onLocalThreadClosed()); })("replyAdded", function ConversationChatAreaComponent_Conditional_16_Template_mj_thread_panel_replyAdded_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onThreadReplyAdded($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("parentMessageId", ctx_r0.threadId)("conversationId", ctx_r0.conversationId || "")("currentUser", ctx_r0.currentUser);
+} }
+function ConversationChatAreaComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_20_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
+    i0.ɵɵelementStart(1, "div", 93);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_20_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r23); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 94)(3, "h3");
     i0.ɵɵtext(4, "Assign Project");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 82);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showProjectSelector = false); });
-    i0.ɵɵelement(6, "i", 83);
+    i0.ɵɵelementStart(5, "button", 95);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_20_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
+    i0.ɵɵelement(6, "i", 96);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 84)(8, "mj-project-selector", 85);
-    i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_15_Template_mj_project_selector_projectSelected_8_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onProjectSelected($event)); });
+    i0.ɵɵelementStart(7, "div", 97)(8, "mj-project-selector", 98);
+    i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_20_Template_mj_project_selector_projectSelected_8_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onProjectSelected($event)); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(8);
-    i0.ɵɵproperty("environmentId", ctx_r1.environmentId)("currentUser", ctx_r1.currentUser)("selectedProjectId", ctx_r1.conversation.ProjectID);
+    i0.ɵɵproperty("environmentId", ctx_r0.environmentId)("currentUser", ctx_r0.currentUser)("selectedProjectId", ctx_r0.conversation.ProjectID);
 } }
-function ConversationChatAreaComponent_Conditional_16_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 92);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSystemArtifacts()); });
-    i0.ɵɵelement(1, "i", 93);
+function ConversationChatAreaComponent_Conditional_21_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 105);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleSystemArtifacts()); });
+    i0.ɵɵelement(1, "i", 106);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("active", ctx_r1.showSystemArtifacts);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r0.showSystemArtifacts);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r1.showSystemArtifacts ? "Hide" : "Show", " System");
+    i0.ɵɵtextInterpolate1("", ctx_r0.showSystemArtifacts ? "Hide" : "Show", " System");
 } }
-function ConversationChatAreaComponent_Conditional_16_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 90);
-    i0.ɵɵelement(1, "i", 94);
-    i0.ɵɵelementStart(2, "p", 95);
+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()();
 } }
-function ConversationChatAreaComponent_Conditional_16_For_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const artifact_r25 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵtextInterpolate1(" ", artifact_r25.versionCount, " versions ");
+    const artifact_r27 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", artifact_r27.versionCount, " versions ");
 } }
-function ConversationChatAreaComponent_Conditional_16_For_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " 1 version ");
 } }
-function ConversationChatAreaComponent_Conditional_16_For_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 107);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_For_12_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r26); const artifact_r25 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleArtifactExpansion(artifact_r25.artifactId, $event)); });
-    i0.ɵɵelement(1, "i", 108);
+function ConversationChatAreaComponent_Conditional_21_For_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 120);
+    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.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r25 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const artifact_r27 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r1.expandedArtifactId !== artifact_r25.artifactId)("fa-chevron-up", ctx_r1.expandedArtifactId === artifact_r25.artifactId);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.expandedArtifactId !== artifact_r27.artifactId)("fa-chevron-up", ctx_r0.expandedArtifactId === artifact_r27.artifactId);
 } }
-function ConversationChatAreaComponent_Conditional_16_For_12_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 110);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_For_12_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r28 = i0.ɵɵrestoreView(_r27).$implicit; const artifact_r25 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.openArtifactFromModal(artifact_r25.artifactId, version_r28.versionNumber); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 111);
+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.ɵɵ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.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 112);
+    i0.ɵɵelementStart(3, "span", 125);
     i0.ɵɵtext(4, "Open this version");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 113);
+    i0.ɵɵelement(5, "i", 126);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const version_r28 = ctx.$implicit;
+    const version_r30 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("v", version_r28.versionNumber);
+    i0.ɵɵtextInterpolate1("v", version_r30.versionNumber);
 } }
-function ConversationChatAreaComponent_Conditional_16_For_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 106);
-    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_16_For_12_Conditional_13_For_2_Template, 6, 1, "div", 109, _forTrack2);
+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.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r25 = i0.ɵɵnextContext().$implicit;
+    const artifact_r27 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(artifact_r25.versions);
+    i0.ɵɵrepeater(artifact_r27.versions);
 } }
-function ConversationChatAreaComponent_Conditional_16_For_12_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 96)(1, "div", 97);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_For_12_Template_div_click_1_listener() { const artifact_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openArtifactFromModal(artifact_r25.artifactId)); });
-    i0.ɵɵelementStart(2, "div", 98);
-    i0.ɵɵelement(3, "i", 99);
+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.ɵɵ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.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 100)(5, "div", 101);
+    i0.ɵɵelementStart(4, "div", 113)(5, "div", 114);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 102);
-    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_16_For_12_Conditional_8_Template, 1, 1)(9, ConversationChatAreaComponent_Conditional_16_For_12_Conditional_9_Template, 1, 0);
+    i0.ɵɵelementStart(7, "div", 115);
+    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_16_For_12_Conditional_10_Template, 2, 4, "button", 103);
-    i0.ɵɵelementStart(11, "div", 104);
-    i0.ɵɵelement(12, "i", 105);
+    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.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_16_For_12_Conditional_13_Template, 3, 0, "div", 106);
+    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_21_For_12_Conditional_13_Template, 3, 0, "div", 119);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r25 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("expanded", ctx_r1.expandedArtifactId === artifact_r25.artifactId)("system-artifact", artifact_r25.visibility === "System Only");
+    const artifact_r27 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("expanded", ctx_r0.expandedArtifactId === artifact_r27.artifactId)("system-artifact", artifact_r27.visibility === "System Only");
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(artifact_r25.name);
+    i0.ɵɵtextInterpolate(artifact_r27.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(artifact_r25.versionCount > 1 ? 8 : 9);
+    i0.ɵɵconditional(artifact_r27.versionCount > 1 ? 8 : 9);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(artifact_r25.versionCount > 1 ? 10 : -1);
+    i0.ɵɵconditional(artifact_r27.versionCount > 1 ? 10 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r1.expandedArtifactId === artifact_r25.artifactId && artifact_r25.versionCount > 1 ? 13 : -1);
+    i0.ɵɵconditional(ctx_r0.expandedArtifactId === artifact_r27.artifactId && artifact_r27.versionCount > 1 ? 13 : -1);
 } }
-function ConversationChatAreaComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showArtifactsModal = false); });
-    i0.ɵɵelementStart(1, "div", 86);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r22); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 81)(3, "h3");
+function ConversationChatAreaComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 92);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
+    i0.ɵɵelementStart(1, "div", 99);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r24); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 94)(3, "h3");
     i0.ɵɵtext(4, "Conversation Artifacts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 87);
-    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_16_Conditional_6_Template, 4, 3, "button", 88);
-    i0.ɵɵelementStart(7, "button", 82);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showArtifactsModal = false); });
-    i0.ɵɵelement(8, "i", 83);
+    i0.ɵɵelementStart(5, "div", 100);
+    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_21_Conditional_6_Template, 4, 3, "button", 101);
+    i0.ɵɵelementStart(7, "button", 95);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
+    i0.ɵɵelement(8, "i", 96);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 89);
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_16_Conditional_10_Template, 4, 0, "div", 90);
-    i0.ɵɵrepeaterCreate(11, ConversationChatAreaComponent_Conditional_16_For_12_Template, 14, 8, "div", 91, _forTrack1);
+    i0.ɵɵelementStart(9, "div", 102);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_21_Conditional_10_Template, 4, 0, "div", 103);
+    i0.ɵɵrepeaterCreate(11, ConversationChatAreaComponent_Conditional_21_For_12_Template, 14, 8, "div", 104, _forTrack1);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.hasSystemArtifacts ? 6 : -1);
+    i0.ɵɵconditional(ctx_r0.hasSystemArtifacts ? 6 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r1.artifactsByDetailId.size === 0 ? 10 : -1);
+    i0.ɵɵconditional(ctx_r0.artifactsByDetailId.size === 0 ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.getArtifactsArray());
+    i0.ɵɵrepeater(ctx_r0.getArtifactsArray());
 } }
-function ConversationChatAreaComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 114);
-    i0.ɵɵlistener("completed", function ConversationChatAreaComponent_Conditional_17_Template_mj_artifact_collection_picker_modal_completed_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCollectionPickerCompleted($event)); })("cancelled", function ConversationChatAreaComponent_Conditional_17_Template_mj_artifact_collection_picker_modal_cancelled_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCollectionPickerCancelled()); });
+function ConversationChatAreaComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 127);
+    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) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("isOpen", ctx_r1.showCollectionPicker)("environmentId", ctx_r1.environmentId)("currentUser", ctx_r1.currentUser)("excludeCollectionIds", ctx_r1.collectionPickerExcludedIds)("artifactVersionId", ctx_r1.collectionPickerVersionId)("artifactName", ctx_r1.collectionPickerArtifactName)("artifactVersionNumber", ctx_r1.collectionPickerVersionNumber);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("isOpen", ctx_r0.showCollectionPicker)("environmentId", ctx_r0.environmentId)("currentUser", ctx_r0.currentUser)("excludeCollectionIds", ctx_r0.collectionPickerExcludedIds)("artifactVersionId", ctx_r0.collectionPickerVersionId)("artifactName", ctx_r0.collectionPickerArtifactName)("artifactVersionNumber", ctx_r0.collectionPickerVersionNumber);
 } }
-function ConversationChatAreaComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-test-feedback-dialog", 115);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_18_Template_mj_test_feedback_dialog_closed_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTestFeedbackDialogClosed($event)); });
+function ConversationChatAreaComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-test-feedback-dialog", 128);
+    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) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("data", ctx_r1.testFeedbackDialogData)("visible", ctx_r1.showTestFeedbackDialog);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("data", ctx_r0.testFeedbackDialogData)("visible", ctx_r0.showTestFeedbackDialog);
 } }
-function ConversationChatAreaComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-image-viewer", 116);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_19_Template_mj_image_viewer_closed_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onImageViewerClosed()); });
+function ConversationChatAreaComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-image-viewer", 129);
+    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) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("imageUrl", ctx_r1.selectedImageUrl)("alt", ctx_r1.selectedImageAlt)("fileName", ctx_r1.selectedImageFileName)("visible", ctx_r1.showImageViewer);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("imageUrl", ctx_r0.selectedImageUrl)("alt", ctx_r0.selectedImageAlt)("fileName", ctx_r0.selectedImageFileName)("visible", ctx_r0.showImageViewer);
 } }
 /** `MJ: Resource Types.ID` for Conversations. */
 const CONVERSATIONS_RESOURCE_TYPE_ID = '81D4BC3D-9FEB-EF11-B01A-286B35C04427';
@@ -552,6 +660,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     analyzeArtifactService;
     uiCommandHandler;
     interactiveFormApplyService;
+    agentClientService;
     environmentId;
     currentUser;
     // LOCAL STATE INPUTS - passed from parent workspace
@@ -559,6 +668,11 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     set conversationId(value) {
         if (value !== this._conversationId) {
             this._conversationId = value;
+            // SESSION-REVIEW lifecycle: changing the active conversation must NEVER leave a
+            // stale review overlay hosted over the new conversation. A LIVE call is untouched
+            // by this — the overlay's live mode renders off RealtimeSession.Active$, not
+            // RealtimeReview (and a review can't open while a call is live anyway).
+            this.ClearRealtimeSessionReview();
             // Trigger change handler after initialization is complete
             // Only skip during Angular's initial binding before ngOnInit completes
             if (this.isInitialized) {
@@ -750,8 +864,112 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     emptyStateGreeting = 'How can I help you?';
     // Sidebar toggle - when true, shows toggle button in header to expand sidebar
     showSidebarToggle = false;
+    // ────────────────────────────────────────────────────────────────────
+    // PR 2c — Widget extension surface (additive — no breaking changes)
+    // ────────────────────────────────────────────────────────────────────
+    /**
+     * When true, the `agentPresence` slot is allowed to render (using the
+     * supplied `agentCharacterConfig` for visualization data). Off by default
+     * so existing embeds (Form Builder, Component Studio AI Assistant, the
+     * corner overlay) see no UI change.
+     */
+    showAgentCharacter = false;
+    /**
+     * Visualization data forwarded to the `agentPresence` slot's default
+     * component (or to any consumer-projected template via slot context).
+     * Includes avatar URL, character name, voice state, and visual intensity.
+     */
+    agentCharacterConfig = null;
+    /**
+     * Structured config for the `emptyState` slot's default component —
+     * greeting, subtext, and optional suggested prompts. Backwards-compatible
+     * with the existing `emptyStateGreeting` input (which still wins when
+     * `emptyStateConfig` is null).
+     */
+    emptyStateConfig = null;
+    /**
+     * Activate the `demonstrationSurface` slot layout-mode. Per Matt's 06-10
+     * placement design: when true AND a consumer has projected
+     * `mjChatSlot="demonstrationSurface"`, the chat-content-area restructures
+     * into [stage | conversation-rail] — the stage takes the main pane, the
+     * messages pane shrinks to a side rail (below the stage on mobile). When
+     * false (default), no layout change; the chat-area renders as normal.
+     *
+     * The consumer is expected to drive this from their own state (e.g., an
+     * agent emits a demonstration intent → host sets this true; user dismisses
+     * → host sets it false). The widget itself doesn't decide.
+     */
+    showDemonstrationSurface = false;
+    /**
+     * Content payload forwarded to the `demonstrationSurface` slot via
+     * `$implicit` + named `content` context. Shape is consumer-defined per the
+     * {@link IMJChatDemonstrationSurfaceComponent} interface — the widget
+     * doesn't introspect or render it directly, just hands it through.
+     */
+    demonstrationSurfaceContent = null;
+    /**
+     * True when the demonstrationSurface layout-mode is BOTH opted-in
+     * (`showDemonstrationSurface`) AND has a slot template projected to render
+     * into. Both conditions must hold for the layout restructure to kick in.
+     */
+    get isDemonstrationActive() {
+        return this.showDemonstrationSurface && this.slotTemplate('demonstrationSurface') !== null;
+    }
+    // ────────────────────────────────────────────────────────────────────
+    // PR 2c — Before/After cancelable @Output() events
+    // ────────────────────────────────────────────────────────────────────
+    //
+    // Listeners set `event.Cancel = true` on the `Before*` event to halt the
+    // default behavior; the matching `After*` event then does NOT fire.
+    // Informational events (progress, shown notifications, session lifecycle)
+    // stay as single emitters without a Before-pair.
+    //
+    // WIRING STATUS:
+    //   ✓ beforeAgentTurn / afterAgentTurn — wired in message-input.component
+    //     around `agentService.processMessage()` (re-emitted from chat-area).
+    //   ✓ beforeResponseFormSubmitted / afterResponseFormSubmitted — wired in
+    //     message-item.component's `onFormSubmitted()`, forwarded through
+    //     message-list to chat-area.
+    //   ✓ beforeToolInvoked / afterToolInvoked — wired AND cancel-enforced.
+    //     Subscribed to AgentClientService.ToolRequested$ / ToolExecuted$ in
+    //     ngOnInit. When a listener sets event.Cancel = true, the chat-area's
+    //     subscriber copies it back to the ClientToolRequestEvent and
+    //     AgentClientSession.handleToolRequest short-circuits dispatch (tool
+    //     handler NOT called, ToolExecuted$ NOT emitted, server receives a
+    //     failure response carrying any CancelReason).
+    //   ✓ sessionStarted / sessionChannelStateChanged / sessionEnded — subscribed
+    //     to ConversationsRuntime.Sessions.SessionLifecycle$ in ngOnInit. The
+    //     runtime's SessionsObserver consumes whichever ISessionsAdapter the host
+    //     registered at bootstrap; the Angular default is RealtimeSessionsAdapter,
+    //     which bridges RealtimeSessionService's SessionStarted$ / ActiveChannels$
+    //     (diffed for open/close) / SessionEnded$. Non-Angular hosts (React,
+    //     Vue, Node) register their own adapter — the chat-area code is unchanged.
+    /** Cancelable — fired BEFORE a user message is sent to the agent. */
+    beforeAgentTurn = new EventEmitter();
+    /** Fired AFTER a successful agent turn completes. */
+    afterAgentTurn = new EventEmitter();
+    /** Cancelable — fired BEFORE a registered client tool is invoked by the agent. */
+    beforeToolInvoked = new EventEmitter();
+    /** Fired AFTER a client tool invocation completes. */
+    afterToolInvoked = new EventEmitter();
+    /** Cancelable — fired BEFORE a response form's submitted values are sent. */
+    beforeResponseFormSubmitted = new EventEmitter();
+    /** Fired AFTER a response form's values have been sent. */
+    afterResponseFormSubmitted = new EventEmitter();
+    /** Informational. */
+    sessionStarted = new EventEmitter();
+    /** Informational. */
+    sessionChannelStateChanged = new EventEmitter();
+    /** Informational. */
+    sessionEnded = new EventEmitter();
     conversationRenamed = new EventEmitter();
     openEntityRecord = new EventEmitter();
+    /**
+     * A realtime session that CREATED its own conversation has ended — the new
+     * conversation is named (background, shared helper) and ready. The workspace folds
+     * it into the cached list and selects it when the conversation list is visible.
+     */
+    realtimeConversationReady = new EventEmitter();
     navigationRequest = new EventEmitter();
     taskClicked = new EventEmitter();
     artifactLinkClicked = new EventEmitter();
@@ -769,6 +987,20 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     messageInputComponents;
     artifactViewerComponent;
     emptyStateComponent;
+    /**
+     * Slot-fill templates supplied by consumers via the `mjChatSlot` directive.
+     * Looked up by slot name with {@link slotTemplate}.
+     */
+    chatSlotChildren;
+    /**
+     * Public helper for the template + consumers — resolve a slot name to the
+     * consumer-supplied `TemplateRef`, or `null` if no consumer template was
+     * projected for that slot. When `null`, the template should render the
+     * slot's default standalone component.
+     */
+    slotTemplate(name) {
+        return this.chatSlotChildren?.find((s) => s.SlotName === name)?.Template ?? null;
+    }
     messages = [];
     showScrollToBottomIcon = false;
     scrollToBottom = false;
@@ -886,7 +1118,37 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     acceptedFileTypes = 'image/*';
     conversationManagerAgent = null;
     engine = ConversationEngine.Instance;
-    constructor(agentStateService, conversationAgentService, activeTasks, cdr, mentionAutocompleteService, artifactPermissionService, attachmentService, streamingService, confirmDialog, bridge, analyzeArtifactService, uiCommandHandler, interactiveFormApplyService) {
+    /**
+     * Voice session service — exposed to the template so the realtime "call mode"
+     * overlay can be hosted here (it fills this conversation panel in place while
+     * `Active$` is true). The trigger wiring lives in <mj-message-input>.
+     */
+    RealtimeSession = inject(RealtimeSessionService);
+    /** Stateless loader for the call overlay's SESSION REVIEW mode (past realtime sessions). */
+    realtimeReviewService = inject(RealtimeSessionReviewService);
+    /**
+     * The PAST realtime session currently under review, or null. While set (and no live
+     * call is active) the realtime overlay renders in SESSION REVIEW mode over this
+     * conversation panel. Populated via {@link OpenRealtimeSessionReview}; cleared when
+     * the user closes the review or resumes it as a new live call.
+     */
+    RealtimeReview = null;
+    /**
+     * Session-row enrichment for the timeline's realtime SESSION BLOCKS (details stamped
+     * with an `AgentSessionID` collapse to one card per session — see the message list's
+     * timeline pass). Keyed by `NormalizeUUID(sessionId)`; loaded with ONE batched
+     * `MJ: AI Agent Sessions` lookup per conversation, only when stamped rows exist.
+     * Tolerant: a failed lookup leaves the map empty and cards render their generic label.
+     */
+    realtimeSessionMetaMap = new Map();
+    /** Agent name the overlay banner shows: the reviewed session's agent while reviewing, else the live call's. */
+    get realtimeOverlayAgentName() {
+        if (this.RealtimeReview && !this.RealtimeSession.IsActive) {
+            return this.RealtimeReview.AgentName;
+        }
+        return this.RealtimeSession.CurrentAgentName;
+    }
+    constructor(agentStateService, conversationAgentService, activeTasks, cdr, mentionAutocompleteService, artifactPermissionService, attachmentService, streamingService, confirmDialog, bridge, analyzeArtifactService, uiCommandHandler, interactiveFormApplyService, agentClientService) {
         super();
         this.agentStateService = agentStateService;
         this.conversationAgentService = conversationAgentService;
@@ -901,6 +1163,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.analyzeArtifactService = analyzeArtifactService;
         this.uiCommandHandler = uiCommandHandler;
         this.interactiveFormApplyService = interactiveFormApplyService;
+        this.agentClientService = agentClientService;
     }
     /**
      * Apply a form-role artifact's spec as an EntityFormOverride for the
@@ -935,6 +1198,99 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 void this.handleCaptureDataSnapshotCommand(command);
             }
         });
+        // REALTIME-CREATED CONVERSATIONS — three-beat lifecycle so the UI feels live:
+        //  START: fold the server-created conversation into the cached list right away
+        //         (it shows as 'New Conversation' while the call runs; no selection yet).
+        //         Driven by SessionStarted$ — it fires AFTER mintSession resolves, so the
+        //         created conversation id is guaranteed present (Active$ races the mint).
+        //  FIRST UTTERANCE: auto-name it via the shared helper (background) — the list
+        //         updates reactively through ConversationEngine.Conversations$.
+        //  END:   select it (workspace gates on the list being visible).
+        let namedThisSession = false;
+        this.RealtimeSession.SessionStarted$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            namedThisSession = false;
+            const created = this.RealtimeSession.SessionCreatedConversationId;
+            if (created) {
+                this.realtimeConversationReady.emit({ conversationId: created, select: false });
+            }
+        });
+        let voiceWasActive = false;
+        this.RealtimeSession.Active$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((active) => {
+            if (voiceWasActive && !active) {
+                this.onVoiceSessionEnded();
+            }
+            voiceWasActive = active;
+        });
+        this.RealtimeSession.Captions$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((captions) => {
+            if (namedThisSession) {
+                return;
+            }
+            const created = this.RealtimeSession.SessionCreatedConversationId;
+            const seed = this.RealtimeSession.FirstUserTranscript;
+            if (created && seed && captions.some(c => c.Role === 'User')) {
+                namedThisSession = true;
+                void GenerateAndApplyConversationName({
+                    ConversationId: created,
+                    MessageText: seed,
+                    Provider: this.ProviderToUse,
+                    CurrentUser: this.currentUser
+                });
+            }
+        });
+        // Bridge AgentClientService's tool-dispatch observables to chat-area's
+        // Before/After cancelable @Outputs. `ToolRequested$` fires synchronously
+        // BEFORE the tool runs; `ToolExecuted$` fires after a successful dispatch
+        // (suppressed when the host vetoes via Cancel).
+        //
+        // Cancel-enforcement: the `ClientToolRequestEvent` carries a mutable
+        // `Cancel: boolean` field. We emit the Angular `beforeToolInvoked` event
+        // synchronously inside the RxJS subscriber, listeners can flip
+        // `args.Cancel = true`, and we copy that decision back to `toolEvent.Cancel`
+        // before the subscriber returns. `AgentClientSession.handleToolRequest` then
+        // sees the veto, short-circuits dispatch, and reports the cancellation back
+        // to the server. `afterToolInvoked` does NOT fire in the canceled case.
+        this.agentClientService.ToolRequested$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((toolEvent) => {
+            const args = new BeforeToolInvokedEventArgs(toolEvent.Request.ToolName, toolEvent.Request.Params);
+            this.beforeToolInvoked.emit(args);
+            if (args.Cancel) {
+                toolEvent.Cancel = true;
+                toolEvent.CancelReason = args.CancelReason;
+            }
+        });
+        this.agentClientService.ToolExecuted$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((toolEvent) => {
+            this.afterToolInvoked.emit(new AfterToolInvokedEventArgs(toolEvent.Request.ToolName, toolEvent.Request.Params, toolEvent.Result));
+        });
+        // Bridge ConversationsRuntime.Sessions.SessionLifecycle$ → chat-area's
+        // informational session* outputs. The runtime's SessionsObserver subscribes
+        // to whichever ISessionsAdapter the host registered at bootstrap (today:
+        // RealtimeSessionsAdapter from ConversationsRuntimeBootstrap, bridging
+        // RealtimeSessionService from PR #2787). Each event variant maps 1:1 to one
+        // of the three @Output() emitters declared above.
+        ConversationsRuntime.Instance.Sessions.SessionLifecycle$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            switch (event.kind) {
+                case 'session-started':
+                    this.sessionStarted.emit(new SessionStartedEventArgs(event.sessionId, event.channelKinds));
+                    return;
+                case 'session-channel':
+                    this.sessionChannelStateChanged.emit(new SessionChannelStateChangedEventArgs(event.sessionId, event.channelKind, event.state));
+                    return;
+                case 'session-ended':
+                    this.sessionEnded.emit(new SessionEndedEventArgs(event.sessionId, event.reason));
+                    return;
+            }
+        });
         // The workspace component initializes AI Engine and mention service before
         // any child components render, so we can safely skip duplicate initialization.
         // This prevents race conditions and ensures agents are fully loaded.
@@ -1325,6 +1681,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                     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);
             // Create new Map references to trigger Angular change detection
             this.agentRunsByDetailId = new Map(this.agentRunsByDetailId);
             this.artifactsByDetailId = new Map(this.artifactsByDetailId);
@@ -1345,6 +1704,58 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.lastLoadedConversationId = null;
         }
     }
+    /**
+     * Loads the `MJ: AI Agent Sessions` rows referenced by the conversation's
+     * session-stamped details (one batched lookup, narrow fields, only when stamped rows
+     * exist) and rebuilds {@link realtimeSessionMetaMap} so the timeline's session cards
+     * 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) {
+        const sessionIds = [];
+        const seen = new Set();
+        for (const detail of details) {
+            const raw = detail.AgentSessionID?.trim() ?? '';
+            if (raw.length === 0) {
+                continue;
+            }
+            const key = NormalizeUUID(raw);
+            if (!seen.has(key)) {
+                seen.add(key);
+                sessionIds.push(raw);
+            }
+        }
+        const metaMap = new Map();
+        if (sessionIds.length > 0) {
+            try {
+                const idList = sessionIds.map(id => `'${id.replace(/'/g, "''")}'`).join(',');
+                const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+                const result = await rv.RunView({
+                    EntityName: 'MJ: AI Agent Sessions',
+                    ExtraFilter: `ID IN (${idList})`,
+                    Fields: ['ID', 'Agent', 'Status', 'CloseReason', 'ClosedAt'],
+                    ResultType: 'simple'
+                });
+                if (result.Success) {
+                    for (const row of result.Results ?? []) {
+                        const closedAt = row.ClosedAt ? new Date(row.ClosedAt) : null;
+                        metaMap.set(NormalizeUUID(row.ID), {
+                            SessionID: row.ID,
+                            AgentName: row.Agent ?? null,
+                            Status: row.Status ?? null,
+                            CloseReason: row.CloseReason ?? null,
+                            ClosedAt: closedAt && !isNaN(closedAt.getTime()) ? closedAt : null
+                        });
+                    }
+                }
+            }
+            catch (error) {
+                console.warn('Failed to load realtime session meta — session cards render without status chips:', error);
+            }
+        }
+        // New reference so the message list's ngOnChanges sees the update
+        this.realtimeSessionMetaMap = metaMap;
+    }
     /**
      * REMOVED: Active tasks should only track currently-running tasks in this browser session.
      * Database tasks with 'In-Progress' status are shown in the Tasks dropdown via loadDatabaseTasks().
@@ -2522,6 +2933,111 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             compositeKey
         });
     }
+    /**
+     * A gear-gated developer link in the live call overlay asked to open a record
+     * (delegated agent run / agent session). The overlay has already minimized itself
+     * (the call stays live behind the floating "on call" pill); re-emit on the SAME
+     * `openEntityRecord` chain every other chat record-open uses, so the Explorer
+     * wrapper routes it through `NavigationService.OpenEntityRecord`.
+     */
+    onVoiceNavigateRequest(event) {
+        const compositeKey = new CompositeKey();
+        compositeKey.KeyValuePairs.push({ FieldName: 'ID', Value: event.RecordID });
+        this.openEntityRecord.emit({
+            entityName: event.EntityName,
+            compositeKey
+        });
+    }
+    /**
+     * 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.
+     */
+    onVoiceSessionEnded() {
+        const conversationId = this.RealtimeSession.SessionCreatedConversationId;
+        if (!conversationId) {
+            return;
+        }
+        // Naming normally fired at the first utterance; this covers a silent call's default.
+        this.realtimeConversationReady.emit({ conversationId, select: true });
+    }
+    /**
+     * 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,
+     * delegated-run cards, the saved read-only whiteboard). Intended for conversation
+     * timeline affordances that reopen historical realtime sessions.
+     *
+     * @param agentSessionId The `MJ: AI Agent Sessions.ID` to review.
+     * @returns `true` when the session loaded and the review opened; `false` when it
+     *   couldn't be loaded (missing/unreadable session) or a live call is already active.
+     */
+    async OpenRealtimeSessionReview(agentSessionId) {
+        if (this.RealtimeSession.IsActive) {
+            return false; // a live call owns the overlay — don't fight it with a review
+        }
+        const conversationAtRequest = this._conversationId;
+        const review = await this.realtimeReviewService.LoadSessionReview(agentSessionId, this.ProviderToUse);
+        if (!review) {
+            return false;
+        }
+        if (this.RealtimeSession.IsActive) {
+            return false; // a live call started while the review was loading — it wins
+        }
+        if (!this.canHostLoadedReview(conversationAtRequest, review.ConversationID)) {
+            return false; // the active conversation changed mid-load and the review isn't its own — discard, don't go stale
+        }
+        this.RealtimeReview = review;
+        this.cdr.detectChanges();
+        return true;
+    }
+    /**
+     * STALENESS GUARD for the async review load: hosting is allowed when the active
+     * conversation hasn't changed since the request started, OR when it HAS changed but
+     * the loaded review belongs to the now-active conversation (the deep-link case where
+     * the conversation selection and the review open race each other). Anything else is
+     * a stale review for a conversation the user already left — never host it.
+     */
+    canHostLoadedReview(conversationAtRequest, reviewConversationId) {
+        const current = this._conversationId;
+        if (conversationAtRequest === current) {
+            return true;
+        }
+        return !!reviewConversationId && !!current && UUIDsEqual(reviewConversationId, current);
+    }
+    /**
+     * Drops any hosted SESSION REVIEW so the overlay unhosts itself. Safe to call at any
+     * time: a LIVE call's overlay is unaffected (it renders off `RealtimeSession.Active$`).
+     * Called on every conversation change, on the overlay's Close, and available to hosts
+     * that need to programmatically dismiss a review.
+     */
+    ClearRealtimeSessionReview() {
+        if (this.RealtimeReview) {
+            this.RealtimeReview = null;
+        }
+    }
+    /**
+     * Review mode's "Start live session": RESUMES the reviewed session as a new live call
+     * through the SAME start path the composer's mic uses, chaining `lastSessionId` so the
+     * server restores saved channel states (e.g. the whiteboard) via `PriorChannelStatesJson`.
+     * The start flips `Active$` synchronously, so clearing the review immediately after
+     * never unhosts the overlay mid-transition.
+     */
+    async onReviewStartLive(request) {
+        const agentName = this.RealtimeReview?.AgentName ?? null;
+        try {
+            const start = this.RealtimeSession.StartVoiceSession(request.TargetAgentId, request.ConversationId ?? this.conversationId, request.LastSessionId, agentName);
+            this.RealtimeReview = null;
+            await start;
+        }
+        catch (error) {
+            console.error('Failed to resume the reviewed session as a live call:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Could not start the live session.', 'error', 3000);
+        }
+    }
+    /** Review mode's Close: drop the review state (the overlay unhosts itself). */
+    onReviewClosed() {
+        this.ClearRealtimeSessionReview();
+    }
     /**
      * Handles Shift+Click on an AI message bubble.
      * Dumps a live snapshot of in-memory streaming and agent-run state to the browser
@@ -3169,8 +3685,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.cdr.detectChanges();
         }
     }
-    static ɵfac = function ConversationChatAreaComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConversationChatAreaComponent)(i0.ɵɵdirectiveInject(i1.AgentStateService), i0.ɵɵdirectiveInject(i2.ConversationAgentService), i0.ɵɵdirectiveInject(i3.ActiveTasksService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i4.MentionAutocompleteService), i0.ɵɵdirectiveInject(i5.ArtifactPermissionService), i0.ɵɵdirectiveInject(i6.ConversationAttachmentService), i0.ɵɵdirectiveInject(i7.ConversationStreamingService), i0.ɵɵdirectiveInject(i8.DialogService), i0.ɵɵdirectiveInject(i9.ConversationBridgeService), i0.ɵɵdirectiveInject(i10.AnalyzeArtifactService), i0.ɵɵdirectiveInject(i11.UICommandHandlerService), i0.ɵɵdirectiveInject(i10.InteractiveFormApplyService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationChatAreaComponent, selectors: [["mj-conversation-chat-area"]], viewQuery: function ConversationChatAreaComponent_Query(rf, ctx) { if (rf & 1) {
+    static ɵfac = function ConversationChatAreaComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConversationChatAreaComponent)(i0.ɵɵdirectiveInject(i1.AgentStateService), i0.ɵɵdirectiveInject(i2.ConversationAgentService), i0.ɵɵdirectiveInject(i3.ActiveTasksService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i4.MentionAutocompleteService), i0.ɵɵdirectiveInject(i5.ArtifactPermissionService), i0.ɵɵdirectiveInject(i6.ConversationAttachmentService), i0.ɵɵdirectiveInject(i7.ConversationStreamingService), i0.ɵɵdirectiveInject(i8.DialogService), i0.ɵɵdirectiveInject(i9.ConversationBridgeService), i0.ɵɵdirectiveInject(i10.AnalyzeArtifactService), i0.ɵɵdirectiveInject(i11.UICommandHandlerService), i0.ɵɵdirectiveInject(i10.InteractiveFormApplyService), i0.ɵɵdirectiveInject(i12.AgentClientService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationChatAreaComponent, selectors: [["mj-conversation-chat-area"]], contentQueries: function ConversationChatAreaComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
+            i0.ɵɵcontentQuery(dirIndex, ChatSlotDirective, 4);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chatSlotChildren = _t);
+        } }, viewQuery: function ConversationChatAreaComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5)(ArtifactViewerPanelComponent, 5)(ConversationEmptyStateComponent, 5)(_c1, 5);
         } if (rf & 2) {
             let _t;
@@ -3178,48 +3699,63 @@ 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" }, outputs: { conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", 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: 20, vars: 26, consts: [["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-messages-pane"], [1, "conversation-loading-state"], [3, "currentUser", "disabled", "showSidebarToggle", "overlayMode", "greeting", "enableAttachments", "enableMentions", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [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-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, "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, "replyInThread", "viewThread", "deleteMessage", "retryMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "diagnosticRequested", "messagePinToggled", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap"], [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", "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", "uploadStateChanged", "hidden", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "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, "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", 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) {
             i0.ɵɵelementStart(0, "div", 2);
-            i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Template, 15, 14, "div", 3);
-            i0.ɵɵelementStart(2, "div", 4)(3, "div", 5);
-            i0.ɵɵconditionalCreate(4, ConversationChatAreaComponent_Conditional_4_Template, 2, 0, "div", 6)(5, ConversationChatAreaComponent_Conditional_5_Template, 1, 10, "mj-conversation-empty-state", 7)(6, ConversationChatAreaComponent_Conditional_6_Template, 5, 8, "div", 8)(7, ConversationChatAreaComponent_Conditional_7_Template, 9, 12, "div", 8);
+            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);
+            i0.ɵɵelementStart(4, "div", 5);
+            i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_5_Template, 2, 6, "div", 6);
+            i0.ɵɵelementStart(6, "div", 7);
+            i0.ɵɵconditionalCreate(7, ConversationChatAreaComponent_Conditional_7_Template, 2, 0, "div", 8)(8, ConversationChatAreaComponent_Conditional_8_Template, 2, 1)(9, ConversationChatAreaComponent_Conditional_9_Template, 5, 8, "div", 9)(10, ConversationChatAreaComponent_Conditional_10_Template, 9, 15, "div", 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_8_Template, 3, 14);
-            i0.ɵɵelementStart(9, "mj-artifact-share-modal", 9);
-            i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_saved_9_listener() { return ctx.onArtifactShared(); })("cancelled", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_cancelled_9_listener() { return ctx.onArtifactShareModalClose(); });
+            i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_11_Template, 3, 14);
+            i0.ɵɵelementStart(12, "mj-artifact-share-modal", 10);
+            i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_saved_12_listener() { return ctx.onArtifactShared(); })("cancelled", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_cancelled_12_listener() { return ctx.onArtifactShareModalClose(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_10_Template, 1, 1, "mj-pinned-messages-panel", 10);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_11_Template, 1, 3, "mj-thread-panel", 11);
-            i0.ɵɵelementStart(12, "mj-export-modal", 12);
-            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_export_modal_cancelled_12_listener() { return ctx.onExportModalCancelled(); })("exported", function ConversationChatAreaComponent_Template_mj_export_modal_exported_12_listener() { return ctx.onExportModalComplete(); });
+            i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_13_Template, 1, 1, "mj-pinned-messages-panel", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "mj-resource-share-dialog", 13);
-            i0.ɵɵlistener("Result", function ConversationChatAreaComponent_Template_mj_resource_share_dialog_Result_13_listener($event) { return ctx.onShareDialogResult($event); });
+            i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_14_Template, 4, 10);
+            i0.ɵɵpipe(15, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "mj-members-modal", 14);
-            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_members_modal_cancelled_14_listener() { return ctx.showMembersModal = false; })("membersChanged", function ConversationChatAreaComponent_Template_mj_members_modal_membersChanged_14_listener() { return ctx.showMembersModal = false; });
+            i0.ɵɵconditionalCreate(16, ConversationChatAreaComponent_Conditional_16_Template, 1, 3, "mj-thread-panel", 12);
+            i0.ɵɵelementStart(17, "mj-export-modal", 13);
+            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_export_modal_cancelled_17_listener() { return ctx.onExportModalCancelled(); })("exported", function ConversationChatAreaComponent_Template_mj_export_modal_exported_17_listener() { return ctx.onExportModalComplete(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(15, ConversationChatAreaComponent_Conditional_15_Template, 9, 3, "div", 15);
-            i0.ɵɵconditionalCreate(16, ConversationChatAreaComponent_Conditional_16_Template, 13, 2, "div", 15);
-            i0.ɵɵconditionalCreate(17, ConversationChatAreaComponent_Conditional_17_Template, 1, 7, "mj-artifact-collection-picker-modal", 16);
-            i0.ɵɵconditionalCreate(18, ConversationChatAreaComponent_Conditional_18_Template, 1, 2, "mj-test-feedback-dialog", 17);
-            i0.ɵɵconditionalCreate(19, ConversationChatAreaComponent_Conditional_19_Template, 1, 4, "mj-image-viewer", 18);
+            i0.ɵɵelementStart(18, "mj-resource-share-dialog", 14);
+            i0.ɵɵlistener("Result", function ConversationChatAreaComponent_Template_mj_resource_share_dialog_Result_18_listener($event) { return ctx.onShareDialogResult($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(19, "mj-members-modal", 15);
+            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_members_modal_cancelled_19_listener() { return ctx.showMembersModal = false; })("membersChanged", function ConversationChatAreaComponent_Template_mj_members_modal_membersChanged_19_listener() { return ctx.showMembersModal = false; });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(20, ConversationChatAreaComponent_Conditional_20_Template, 9, 3, "div", 16);
+            i0.ɵɵconditionalCreate(21, ConversationChatAreaComponent_Conditional_21_Template, 13, 2, "div", 16);
+            i0.ɵɵconditionalCreate(22, ConversationChatAreaComponent_Conditional_22_Template, 1, 7, "mj-artifact-collection-picker-modal", 17);
+            i0.ɵɵconditionalCreate(23, ConversationChatAreaComponent_Conditional_23_Template, 1, 2, "mj-test-feedback-dialog", 18);
+            i0.ɵɵconditionalCreate(24, ConversationChatAreaComponent_Conditional_24_Template, 1, 4, "mj-image-viewer", 19);
         } if (rf & 2) {
+            let tmp_1_0;
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showAgentCharacter ? 1 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.conversation || ctx.HasPreConversationHeader ? 1 : -1);
+            i0.ɵɵconditional((tmp_1_0 = ctx.slotTemplate("header")) ? 2 : ctx.conversation || ctx.HasPreConversationHeader ? 3 : -1, tmp_1_0);
             i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("demonstration-mode", ctx.isDemonstrationActive);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isDemonstrationActive ? 5 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵclassProp("full-width", !ctx.showArtifactPanel)("hidden", ctx.isArtifactPaneMaximized);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoadingConversation ? 4 : (ctx.isNewConversation || !ctx.conversationId) && !ctx.suppressNewConversationEmptyState ? 5 : (ctx.isNewConversation || !ctx.conversationId) && ctx.suppressNewConversationEmptyState ? 6 : 7);
+            i0.ɵɵconditional(ctx.isLoadingConversation ? 7 : (ctx.isNewConversation || !ctx.conversationId) && !ctx.suppressNewConversationEmptyState ? 8 : (ctx.isNewConversation || !ctx.conversationId) && ctx.suppressNewConversationEmptyState ? 9 : 10);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.showArtifactPanel && ctx.selectedArtifactId ? 8 : -1);
+            i0.ɵɵconditional(ctx.showArtifactPanel && ctx.selectedArtifactId ? 11 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("isOpen", ctx.isArtifactShareModalOpen)("artifact", ctx.artifactToShare)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showPinsPanel ? 10 : -1);
+            i0.ɵɵconditional(ctx.showPinsPanel ? 13 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.threadId ? 11 : -1);
+            i0.ɵɵconditional(i0.ɵɵpipeBind1(15, 31, ctx.RealtimeSession.Active$) || ctx.RealtimeReview ? 14 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.threadId ? 16 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("isVisible", ctx.showExportModal)("conversation", ctx.conversation || undefined)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
@@ -3227,21 +3763,21 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("isVisible", ctx.showMembersModal)("conversation", ctx.conversation || undefined)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showProjectSelector && ctx.conversation ? 15 : -1);
+            i0.ɵɵconditional(ctx.showProjectSelector && ctx.conversation ? 20 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showArtifactsModal ? 16 : -1);
+            i0.ɵɵconditional(ctx.showArtifactsModal ? 21 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCollectionPicker ? 17 : -1);
+            i0.ɵɵconditional(ctx.showCollectionPicker ? 22 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.testFeedbackDialogData ? 18 : -1);
+            i0.ɵɵconditional(ctx.testFeedbackDialogData ? 23 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showImageViewer ? 19 : -1);
-        } }, dependencies: [i12.MJButtonDirective, i10.ArtifactViewerPanelComponent, i13.TestFeedbackDialogComponent, i14.LoadingComponent, i15.GenericShareDialogComponent, i16.ArtifactCollectionPickerModalComponent, i17.ArtifactShareModalComponent, i18.MessageListComponent, i19.MessageInputComponent, i20.ConversationEmptyStateComponent, i21.ConversationAgentPickerComponent, i22.ConversationModePickerComponent, i23.ThreadPanelComponent, i24.ProjectSelectorComponent, i25.MembersModalComponent, i26.ExportModalComponent, i27.ImageViewerComponent, i28.PinnedMessagesPanelComponent], 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.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.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.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}"] });
+            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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationChatAreaComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- Fixed 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  @if (conversation || HasPreConversationHeader) {\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 -->\n  <div class=\"chat-content-area\">\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        <!-- Empty State - No conversation selected OR new unsaved conversation -->\n        <mj-conversation-empty-state\n          [currentUser]=\"currentUser\"\n          [disabled]=\"isProcessing\"\n          [showSidebarToggle]=\"showSidebarToggle\"\n          [overlayMode]=\"overlayMode\"\n          [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      } @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              (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            </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                    [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                    (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</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}\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.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/* 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"] }]
-    }], () => [{ 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 }], { environmentId: [{
+        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"] }]
+    }], () => [{ 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: [{
             type: Input
@@ -3295,10 +3831,40 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             type: Input
         }], showSidebarToggle: [{
             type: Input
+        }], showAgentCharacter: [{
+            type: Input
+        }], agentCharacterConfig: [{
+            type: Input
+        }], emptyStateConfig: [{
+            type: Input
+        }], showDemonstrationSurface: [{
+            type: Input
+        }], demonstrationSurfaceContent: [{
+            type: Input
+        }], beforeAgentTurn: [{
+            type: Output
+        }], afterAgentTurn: [{
+            type: Output
+        }], beforeToolInvoked: [{
+            type: Output
+        }], afterToolInvoked: [{
+            type: Output
+        }], beforeResponseFormSubmitted: [{
+            type: Output
+        }], afterResponseFormSubmitted: [{
+            type: Output
+        }], sessionStarted: [{
+            type: Output
+        }], sessionChannelStateChanged: [{
+            type: Output
+        }], sessionEnded: [{
+            type: Output
         }], conversationRenamed: [{
             type: Output
         }], openEntityRecord: [{
             type: Output
+        }], realtimeConversationReady: [{
+            type: Output
         }], navigationRequest: [{
             type: Output
         }], taskClicked: [{
@@ -3331,6 +3897,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }], emptyStateComponent: [{
             type: ViewChild,
             args: [ConversationEmptyStateComponent]
+        }], chatSlotChildren: [{
+            type: ContentChildren,
+            args: [ChatSlotDirective]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 97 }); })();
 //# sourceMappingURL=conversation-chat-area.component.js.map