@memberjunction/ng-conversations 6.2.0-edge.4 → 6.2.0-edge.6

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

@@ -1,7 +1,7 @@
 import { Component, Input, Output, EventEmitter, ViewChild, ViewChildren, ContentChildren, ElementRef, inject } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { RunView, CompositeKey, LogStatusEx } from '@memberjunction/core';
-import { ArtifactMetadataEngine, ConversationEngine, CONVERSATIONS_FORK_AUTHORIZATION, CONVERSATIONS_FORKING_SETTING_KEY, UserInfoEngine } from '@memberjunction/core-entities';
+import { ArtifactMetadataEngine, ConversationEngine, ShouldReplaceDetailAgentRun, CONVERSATIONS_FORK_AUTHORIZATION, CONVERSATIONS_FORKING_SETTING_KEY, UserInfoEngine, WorkflowSaveOperation } from '@memberjunction/core-entities';
 import { ConversationUtility } from "@memberjunction/ai-core-plus";
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { ConversationDetailWindowStore } from '../../services/conversation-detail-window.store';
@@ -22,15 +22,18 @@ import { RealtimeSessionReviewService } from '../../services/realtime-session-re
 import { GenerateAndApplyConversationName, GenerateAndApplyForkName, SaveForkName } from '../../services/conversation-naming';
 import { CollectRealtimeSessionIDs, MapRealtimeSessionMeta, REALTIME_SESSION_META_FIELDS } from '../../utils/realtime-session-timeline';
 import { ResolveDateJumpTarget, CombineDateJumpOutcome, DescribeDateJumpOutcome, DATE_JUMP_MAX_PAGES } from '../../utils/date-jump';
+import { CompareMessagesByCreatedAt, UpsertMessageById } from '../../utils/message-list-order';
+import { SavePinState } from '../../utils/pin-state';
 import { InjectFrameZone } from '../../util/frame-zone';
 import { MessageListComponent } from '../message/message-list.component';
 import { IsForkPointOrEarlier } from '../../utils/conversation-branching';
 import { BackLabelOf, BuildForkBreadcrumbs, BuildForkHeaderPath, BuildForkMarkerText, BuildForkComposerHint, BuildForkViewLayout, BuildViewForkChipMap, CanForkFrom, FindLatestTurn, FirstOwnRowID, ForkDependsOnRows, IsRowInOpenView, MAIN_COMPOSER_PLACEHOLDER, MAIN_OPEN_VIEW, ParentForkIdOf, ReadBranchIdOf, SameOpenView, SplitForkRows, TurnRowsAfter, FORK_COMPOSER_PLACEHOLDER, ForkInitials, ForkKindIcon, DRAFT_FORK_TITLE } from '../../utils/conversation-forks';
 import { DecideArtifactPanelAction, SnapshotArtifactVersions } from '../../utils/artifact-panel-action';
-import { NormalizeUUID, UUIDsEqual, UUIDSet, IndexByUUID } from '@memberjunction/global';
+import { NormalizeUUID, UUIDsEqual, UUIDSet, IndexByUUID, IsValidUUID } from '@memberjunction/global';
 // PR 2c — Widget extension surface
 import { ChatSlotDirective } from '../../directives/chat-slot.directive';
 import { ConversationCallStartOptions } from '../realtime/capture/realtime-capture-channel';
+import { DescribeCallFailureNotice } from '../realtime/realtime-call-failure-notice';
 import { BeforeToolInvokedEventArgs, AfterToolInvokedEventArgs, BeforeStopClickedEventArgs, AfterStopClickedEventArgs, SessionStartedEventArgs, SessionChannelStateChangedEventArgs, SessionEndedEventArgs, } from '../../events/chat-events';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/agent-state.service";
@@ -47,25 +50,26 @@ import * as i11 from "../../services/ui-command-handler.service";
 import * as i12 from "@memberjunction/ng-agent-client";
 import * as i13 from "@angular/common";
 import * as i14 from "@angular/forms";
-import * as i15 from "@memberjunction/ng-ui-components";
-import * as i16 from "@memberjunction/ng-testing";
-import * as i17 from "@memberjunction/ng-shared-generic";
-import * as i18 from "@memberjunction/ng-resource-permissions";
-import * as i19 from "../collection/artifact-collection-picker-modal.component";
-import * as i20 from "../artifact/artifact-share-modal.component";
-import * as i21 from "../slots/mj-chat-agent-presence-default.component";
-import * as i22 from "../realtime/realtime-session-overlay.component";
-import * as i23 from "../message/message-list.component";
-import * as i24 from "../message/message-input.component";
-import * as i25 from "./conversation-empty-state.component";
-import * as i26 from "./conversation-agent-picker.component";
-import * as i27 from "./conversation-mode-picker.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";
-import * as i33 from "./forks-popover.component";
+import * as i15 from "@memberjunction/ng-task-graph-editor";
+import * as i16 from "@memberjunction/ng-ui-components";
+import * as i17 from "@memberjunction/ng-testing";
+import * as i18 from "@memberjunction/ng-shared-generic";
+import * as i19 from "@memberjunction/ng-resource-permissions";
+import * as i20 from "../collection/artifact-collection-picker-modal.component";
+import * as i21 from "../artifact/artifact-share-modal.component";
+import * as i22 from "../slots/mj-chat-agent-presence-default.component";
+import * as i23 from "../realtime/realtime-session-overlay.component";
+import * as i24 from "../message/message-list.component";
+import * as i25 from "../message/message-input.component";
+import * as i26 from "./conversation-empty-state.component";
+import * as i27 from "./conversation-agent-picker.component";
+import * as i28 from "./conversation-mode-picker.component";
+import * as i29 from "../project/project-selector.component";
+import * as i30 from "../members/members-modal.component";
+import * as i31 from "../export/export-modal.component";
+import * as i32 from "../attachment/image-viewer.component";
+import * as i33 from "./pinned-messages-panel.component";
+import * as i34 from "./forks-popover.component";
 const _c0 = ["scrollContainer"];
 const _c1 = ["titleNameInput"];
 const _c2 = ["titleRenameButton"];
@@ -85,20 +89,20 @@ function ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 27);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_1_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 28);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c5, ctx_r0.agentCharacterConfig, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.state) ?? "idle", ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.characterName, ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.avatarUrl, (ctx_r0.agentCharacterConfig == null ? null : ctx_r0.agentCharacterConfig.voiceStateMode) ?? "subtle"));
 } }
 function ConversationChatAreaComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-chat-agent-presence-default", 26);
+    i0.ɵɵelement(0, "mj-chat-agent-presence-default", 27);
 } 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", 25);
-    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", 26);
+    i0.ɵɵelementStart(0, "div", 26);
+    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", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_4_0;
@@ -111,31 +115,31 @@ function ConversationChatAreaComponent_Conditional_2_ng_container_0_Template(rf,
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 27);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 28);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction5(2, _c6, 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 _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵelementStart(0, "button", 44);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sidebarToggleClicked.emit()); });
-    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelement(1, "i", 45);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_3_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_3_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 45);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_3_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 46);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const titleBar_r4 = i0.ɵɵreference(5);
     i0.ɵɵproperty("ngTemplateOutlet", titleBar_r4);
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 31);
-    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -147,9 +151,9 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_4_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵelementStart(0, "button", 48);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openProjectSelector()); });
-    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -161,22 +165,22 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_5_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 49);
+    i0.ɵɵelementStart(0, "button", 50);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.viewTestRun(ctx_r0.conversation.TestRunID)); });
-    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Test");
     i0.ɵɵelementEnd()();
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 51, 2);
+    i0.ɵɵelementStart(0, "button", 52, 2);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ToggleForksPopover()); });
-    i0.ɵɵelement(2, "i", 52);
-    i0.ɵɵelementStart(3, "span", 53);
+    i0.ɵɵelement(2, "i", 53);
+    i0.ɵɵelementStart(3, "span", 54);
     i0.ɵɵtext(4, "Forks");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 54);
+    i0.ɵɵelementStart(5, "span", 55);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -188,10 +192,10 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵelementStart(0, "button", 56);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.TogglePinsPanel()); });
-    i0.ɵɵelement(1, "i", 56);
-    i0.ɵɵelementStart(2, "span", 57);
+    i0.ɵɵelement(1, "i", 57);
+    i0.ɵɵelementStart(2, "span", 58);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -202,10 +206,10 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵelementStart(0, "button", 59);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.viewArtifacts()); });
-    i0.ɵɵelement(1, "i", 59);
-    i0.ɵɵelementStart(2, "span", 60);
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(2, "span", 61);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -215,10 +219,10 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_10_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵelementStart(0, "button", 62);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleMembersModal()); });
-    i0.ɵɵelement(1, "i", 62);
-    i0.ɵɵelementStart(2, "span", 63);
+    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelementStart(2, "span", 64);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -228,7 +232,7 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_11_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-mode-picker", 64);
+    i0.ɵɵelementStart(0, "mj-conversation-mode-picker", 65);
     i0.ɵɵlistener("PresetChanged", function ConversationChatAreaComponent_Conditional_3_Conditional_12_Template_mj_conversation_mode_picker_PresetChanged_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnAgentModePresetChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -236,17 +240,17 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_12_Template(rf,
     i0.ɵɵproperty("AgentID", ctx_r0.ModePickerTargetAgentId)("Disabled", ctx_r0.isProcessing);
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-conversation-agent-picker", 40);
+    i0.ɵɵelement(0, "mj-conversation-agent-picker", 41);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Conversation", ctx_r0.conversation)("CurrentUser", ctx_r0.currentUser)("AllowedAgentIDs", ctx_r0.AllowedAgentIDs)("Disabled", ctx_r0.EffectiveReadOnly);
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
+    i0.ɵɵelementStart(0, "button", 66);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.exportConversation()); });
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 53);
+    i0.ɵɵelementStart(2, "span", 54);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -259,10 +263,10 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_14_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 65);
+    i0.ɵɵelementStart(0, "button", 66);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.shareConversation()); });
-    i0.ɵɵelement(1, "i", 46);
-    i0.ɵɵelementStart(2, "span", 53);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(2, "span", 54);
     i0.ɵɵtext(3, "Share");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -274,31 +278,31 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_16_ng_container
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_3_Conditional_16_ng_container_0_Template, 1, 0, "ng-container", 27);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_3_Conditional_16_ng_container_0_Template, 1, 0, "ng-container", 28);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c7, ctx_r0.conversation, ctx_r0.conversationId, ctx_r0.isProcessing));
 } }
 function ConversationChatAreaComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵelementStart(0, "div", 29);
     i0.ɵɵlistener("keydown.escape", function ConversationChatAreaComponent_Conditional_3_Template_div_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnViewEscape($event)); });
-    i0.ɵɵelementStart(1, "div", 29);
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_3_Conditional_2_Template, 2, 0, "button", 30);
+    i0.ɵɵelementStart(1, "div", 30);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_3_Conditional_2_Template, 2, 0, "button", 31);
     i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_3_Conditional_3_Template, 1, 1, "ng-container");
-    i0.ɵɵconditionalCreate(4, ConversationChatAreaComponent_Conditional_3_Conditional_4_Template, 4, 2, "span", 31);
-    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_3_Conditional_5_Template, 4, 2, "button", 32);
-    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_3_Conditional_6_Template, 4, 0, "button", 33);
+    i0.ɵɵconditionalCreate(4, ConversationChatAreaComponent_Conditional_3_Conditional_4_Template, 4, 2, "span", 32);
+    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_3_Conditional_5_Template, 4, 2, "button", 33);
+    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_3_Conditional_6_Template, 4, 0, "button", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 34);
-    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_3_Conditional_8_Template, 7, 5, "button", 35);
-    i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_3_Conditional_9_Template, 4, 3, "button", 36);
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_3_Conditional_10_Template, 4, 1, "button", 37);
-    i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_3_Conditional_11_Template, 4, 1, "button", 38);
-    i0.ɵɵconditionalCreate(12, ConversationChatAreaComponent_Conditional_3_Conditional_12_Template, 1, 2, "mj-conversation-mode-picker", 39);
-    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_3_Conditional_13_Template, 1, 4, "mj-conversation-agent-picker", 40);
-    i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_3_Conditional_14_Template, 4, 4, "button", 41);
-    i0.ɵɵconditionalCreate(15, ConversationChatAreaComponent_Conditional_3_Conditional_15_Template, 4, 3, "button", 42);
+    i0.ɵɵelementStart(7, "div", 35);
+    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_3_Conditional_8_Template, 7, 5, "button", 36);
+    i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_3_Conditional_9_Template, 4, 3, "button", 37);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_3_Conditional_10_Template, 4, 1, "button", 38);
+    i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_3_Conditional_11_Template, 4, 1, "button", 39);
+    i0.ɵɵconditionalCreate(12, ConversationChatAreaComponent_Conditional_3_Conditional_12_Template, 1, 2, "mj-conversation-mode-picker", 40);
+    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_3_Conditional_13_Template, 1, 4, "mj-conversation-agent-picker", 41);
+    i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_3_Conditional_14_Template, 4, 4, "button", 42);
+    i0.ɵɵconditionalCreate(15, ConversationChatAreaComponent_Conditional_3_Conditional_15_Template, 4, 3, "button", 43);
     i0.ɵɵconditionalCreate(16, ConversationChatAreaComponent_Conditional_3_Conditional_16_Template, 1, 6, "ng-container");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -339,7 +343,7 @@ function ConversationChatAreaComponent_ng_template_4_Conditional_1_ng_container_
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_ng_template_4_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 45);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_ng_template_4_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 46);
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
     const titleName_r14 = i0.ɵɵreference(7);
@@ -347,11 +351,11 @@ function ConversationChatAreaComponent_ng_template_4_Conditional_1_Template(rf,
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 76)(1, "button", 77);
+    i0.ɵɵelementStart(0, "li", 77)(1, "button", 78);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r16); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.ShowWholePath()); });
     i0.ɵɵtext(2, "\u2026");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "i", 75);
+    i0.ɵɵelement(3, "i", 76);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -359,13 +363,13 @@ function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditi
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditional_0_Template, 4, 2, "li", 71);
-    i0.ɵɵelementStart(1, "li", 72)(2, "button", 73);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Conditional_0_Template, 4, 2, "li", 72);
+    i0.ɵɵelementStart(1, "li", 73)(2, "button", 74);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Template_button_click_2_listener() { const parent_r17 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenCrumb(parent_r17.Crumb)); });
-    i0.ɵɵelementStart(3, "span", 74);
+    i0.ɵɵelementStart(3, "span", 75);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(5, "i", 75);
+    i0.ɵɵelement(5, "i", 76);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const parent_r17 = ctx.$implicit;
@@ -382,11 +386,11 @@ function ConversationChatAreaComponent_ng_template_4_Conditional_2_ng_container_
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_ng_template_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "nav", 67)(1, "ol", 68);
+    i0.ɵɵelementStart(0, "nav", 68)(1, "ol", 69);
     i0.ɵɵrepeaterCreate(2, ConversationChatAreaComponent_ng_template_4_Conditional_2_For_3_Template, 6, 7, null, null, i0.ɵɵrepeaterTrackByIndex);
-    i0.ɵɵelementStart(4, "li", 69);
-    i0.ɵɵelement(5, "i", 70);
-    i0.ɵɵtemplate(6, ConversationChatAreaComponent_ng_template_4_Conditional_2_ng_container_6_Template, 1, 0, "ng-container", 45);
+    i0.ɵɵelementStart(4, "li", 70);
+    i0.ɵɵelement(5, "i", 71);
+    i0.ɵɵtemplate(6, ConversationChatAreaComponent_ng_template_4_Conditional_2_ng_container_6_Template, 1, 0, "ng-container", 46);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -400,8 +404,8 @@ function ConversationChatAreaComponent_ng_template_4_Conditional_2_Template(rf,
     i0.ɵɵproperty("ngTemplateOutlet", titleName_r14);
 } }
 function ConversationChatAreaComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66);
-    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_ng_template_4_Conditional_1_Template, 1, 1, "ng-container")(2, ConversationChatAreaComponent_ng_template_4_Conditional_2_Template, 7, 4, "nav", 67);
+    i0.ɵɵelementStart(0, "div", 67);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_ng_template_4_Conditional_1_Template, 1, 1, "ng-container")(2, ConversationChatAreaComponent_ng_template_4_Conditional_2_Template, 7, 4, "nav", 68);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -410,7 +414,7 @@ function ConversationChatAreaComponent_ng_template_4_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 79, 3);
+    i0.ɵɵelementStart(0, "input", 80, 3);
     i0.ɵɵtwoWayListener("ngModelChange", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.TitleRenameText, $event) || (ctx_r0.TitleRenameText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("keydown.enter", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_keydown_enter_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); $event.preventDefault(); return i0.ɵɵresetView(ctx_r0.SaveTitleRename(true)); })("keydown.escape", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); $event.preventDefault(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r0.CancelTitleRename()); })("blur", function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.SaveTitleRename()); });
     i0.ɵɵelementEnd();
@@ -421,9 +425,9 @@ function ConversationChatAreaComponent_ng_template_6_Conditional_0_Template(rf,
 } }
 function ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 82, 4);
+    i0.ɵɵelementStart(0, "button", 83, 4);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.StartTitleRename()); });
-    i0.ɵɵelement(2, "i", 83);
+    i0.ɵɵelement(2, "i", 84);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -431,10 +435,10 @@ function ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2
     i0.ɵɵattribute("aria-label", ctx_r0.TitleRenameLabel);
 } }
 function ConversationChatAreaComponent_ng_template_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h2", 80);
+    i0.ɵɵelementStart(0, "h2", 81);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2_Template, 3, 2, "button", 81);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_ng_template_6_Conditional_1_Conditional_2_Template, 3, 2, "button", 82);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("title", ctx_r0.HeaderTitle);
@@ -444,7 +448,7 @@ function ConversationChatAreaComponent_ng_template_6_Conditional_1_Template(rf,
     i0.ɵɵconditional(ctx_r0.CanRenameTitle ? 2 : -1);
 } }
 function ConversationChatAreaComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_ng_template_6_Conditional_0_Template, 2, 2, "input", 78)(1, ConversationChatAreaComponent_ng_template_6_Conditional_1_Template, 3, 3);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_ng_template_6_Conditional_0_Template, 2, 2, "input", 79)(1, ConversationChatAreaComponent_ng_template_6_Conditional_1_Template, 3, 3);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r0.IsRenamingTitle ? 0 : 1);
@@ -453,8 +457,8 @@ function ConversationChatAreaComponent_Conditional_9_ng_container_1_Template(rf,
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_9_ng_container_1_Template, 1, 0, "ng-container", 27);
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_9_ng_container_1_Template, 1, 0, "ng-container", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -462,19 +466,19 @@ function ConversationChatAreaComponent_Conditional_9_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.slotTemplate("demonstrationSurface"))("ngTemplateOutletContext", i0.ɵɵpureFunction3(2, _c8, ctx_r0.demonstrationSurfaceContent, ctx_r0.demonstrationSurfaceContent, ctx_r0.showDemonstrationSurface));
 } }
 function ConversationChatAreaComponent_Conditional_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 84);
-    i0.ɵɵelement(1, "mj-loading", 85);
+    i0.ɵɵelementStart(0, "div", 85);
+    i0.ɵɵelement(1, "mj-loading", 86);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_11_Conditional_0_Template, 2, 0, "div", 84);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_11_Conditional_0_Template, 2, 0, "div", 85);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r0.showLoadingState ? 0 : -1);
 } }
 function ConversationChatAreaComponent_Conditional_12_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵelement(1, "i", 88);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 89);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -487,14 +491,14 @@ function ConversationChatAreaComponent_Conditional_12_Conditional_1_ng_container
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_12_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 27);
+    i0.ɵɵtemplate(0, ConversationChatAreaComponent_Conditional_12_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 28);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngTemplateOutlet", ctx)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c10, 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, _c9)));
 } }
 function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-empty-state", 89);
+    i0.ɵɵelementStart(0, "mj-conversation-empty-state", 90);
     i0.ɵɵlistener("initialDraftApplied", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_initialDraftApplied_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerDraftApplied()); })("DraftStateChanged", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_DraftStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(null, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_ComposerBlurred_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("sidebarToggleClicked", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_sidebarToggleClicked_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sidebarToggleClicked.emit()); })("messageSent", function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template_mj_conversation_empty_state_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onEmptyStateMessageSent($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -502,15 +506,15 @@ function ConversationChatAreaComponent_Conditional_12_Conditional_2_Template(rf,
     i0.ɵɵproperty("currentUser", ctx_r0.currentUser)("initialDraft", ctx_r0.GetInitialDraftFor(null))("disabled", ctx_r0.isProcessing)("showSidebarToggle", ctx_r0.showSidebarToggle)("overlayMode", ctx_r0.overlayMode)("greeting", (ctx_r0.emptyStateConfig == null ? null : ctx_r0.emptyStateConfig.greeting) ?? ctx_r0.emptyStateGreeting)("showSuggestedPrompts", ctx_r0.showSuggestedPrompts)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("enableAgentMentions", ctx_r0.allowAgentMentions)("enableEntityMentions", ctx_r0.allowEntityMentions)("enableSkillCommands", ctx_r0.allowSkillCommands)("AllowedAgentIDs", ctx_r0.AllowedAgentIDs)("MentionPeople", ctx_r0.MentionPeople)("ComposerExtraTemplate", ctx_r0.slotTemplate("composerExtra"))("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
 } }
 function ConversationChatAreaComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_12_Conditional_0_Template, 4, 1, "div", 86)(1, ConversationChatAreaComponent_Conditional_12_Conditional_1_Template, 1, 8, "ng-container")(2, ConversationChatAreaComponent_Conditional_12_Conditional_2_Template, 1, 18, "mj-conversation-empty-state", 87);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_12_Conditional_0_Template, 4, 1, "div", 87)(1, ConversationChatAreaComponent_Conditional_12_Conditional_1_Template, 1, 8, "ng-container")(2, ConversationChatAreaComponent_Conditional_12_Conditional_2_Template, 1, 18, "mj-conversation-empty-state", 88);
 } if (rf & 2) {
     let tmp_3_0;
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r0.ReadOnly ? 0 : (tmp_3_0 = ctx_r0.slotTemplate("emptyState")) ? 1 : 2, tmp_3_0);
 } }
 function ConversationChatAreaComponent_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵelement(1, "i", 88);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 89);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -523,8 +527,8 @@ function ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 92);
-    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 27);
+    i0.ɵɵelementStart(0, "div", 93);
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -533,8 +537,8 @@ function ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_
 } }
 function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_Template, 2, 6, "div", 92);
-    i0.ɵɵelementStart(1, "div", 93)(2, "mj-message-input", 94, 5);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_13_Conditional_4_Conditional_0_Template, 2, 6, "div", 93);
+    i0.ɵɵelementStart(1, "div", 94)(2, "mj-message-input", 95, 5);
     i0.ɵɵlistener("initialDraftApplied", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_initialDraftApplied_2_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerDraftApplied()); })("DraftStateChanged", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_DraftStateChanged_2_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(null, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_ComposerBlurred_2_listener() { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("emptyStateSubmit", function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template_mj_message_input_emptyStateSubmit_2_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onEmptyStateMessageSent($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -545,10 +549,10 @@ function ConversationChatAreaComponent_Conditional_13_Conditional_4_Template(rf,
     i0.ɵɵproperty("emptyStateMode", true)("initialDraft", ctx_r0.GetInitialDraftFor(null))("currentUser", ctx_r0.currentUser)("disabled", ctx_r0.isProcessing)("ReadOnly", ctx_r0.EffectiveReadOnly)("appContext", ctx_r0.appContext)("applicationId", ctx_r0.applicationId)("defaultAgentId", ctx_r0.defaultAgentId)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("enableAgentMentions", ctx_r0.allowAgentMentions)("enableEntityMentions", ctx_r0.allowEntityMentions)("enableSkillCommands", ctx_r0.allowSkillCommands)("enablePlanMode", ctx_r0.allowPlanMode)("enableRealtime", ctx_r0.allowRealtime)("AllowedAgentIDs", ctx_r0.AllowedAgentIDs)("MentionPeople", ctx_r0.MentionPeople)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes);
 } }
 function ConversationChatAreaComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵelement(1, "div", 90);
-    i0.ɵɵelementStart(2, "div", 91);
-    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_13_Conditional_3_Template, 4, 1, "div", 86)(4, ConversationChatAreaComponent_Conditional_13_Conditional_4_Template, 4, 21);
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "div", 91);
+    i0.ɵɵelementStart(2, "div", 92);
+    i0.ɵɵconditionalCreate(3, ConversationChatAreaComponent_Conditional_13_Conditional_3_Template, 4, 1, "div", 87)(4, ConversationChatAreaComponent_Conditional_13_Conditional_4_Template, 4, 21);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -560,9 +564,9 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_1_ng_container
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 101);
+    i0.ɵɵelementStart(0, "div", 102);
     i0.ɵɵlistener("keydown.escape", function ConversationChatAreaComponent_Conditional_14_Conditional_1_Template_div_keydown_escape_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnViewEscape($event)); });
-    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_14_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 45);
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_14_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 46);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
@@ -571,8 +575,8 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_1_Template(rf,
     i0.ɵɵproperty("ngTemplateOutlet", titleBar_r4);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 96);
-    i0.ɵɵelement(1, "mj-loading", 102);
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵelement(1, "mj-loading", 103);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -581,19 +585,19 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_2_Template(rf,
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 103);
+    i0.ɵɵelementStart(0, "span", 104);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_14_Conditional_6_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.scrollToBottomAnimate()); });
-    i0.ɵɵelement(1, "i", 104);
+    i0.ɵɵelement(1, "i", 105);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 100);
-    i0.ɵɵelement(1, "mj-loading", 105);
+    i0.ɵɵelementStart(0, "div", 101);
+    i0.ɵɵelement(1, "mj-loading", 106);
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵelement(1, "i", 88);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 89);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -603,8 +607,8 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_9_Template(rf,
     i0.ɵɵtextInterpolate(ctx_r0.ReadOnlyMessage || "You have view-only access to this conversation.");
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵelement(1, "i", 88);
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 89);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "You have view-only access to this conversation.");
     i0.ɵɵelementEnd()();
@@ -613,8 +617,8 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional
     i0.ɵɵelementContainer(0);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 92);
-    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 27);
+    i0.ɵɵelementStart(0, "div", 93);
+    i0.ɵɵtemplate(1, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -623,7 +627,7 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-message-input", 108, 7);
+    i0.ɵɵelementStart(0, "mj-message-input", 109, 7);
     i0.ɵɵlistener("DraftStateChanged", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_DraftStateChanged_0_listener($event) { const inputRef_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnDraftStateChanged(inputRef_r27.conversationId, $event)); })("ComposerBlurred", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_ComposerBlurred_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnComposerBlurred()); })("StopClicked", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_StopClicked_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnComposerStopClicked()); })("initialMessageAutoSendStarted", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_initialMessageAutoSendStarted_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onInitialMessageAutoSendStarted($event)); })("initialMessageAutoSendFailed", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_initialMessageAutoSendFailed_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onInitialMessageAutoSendFailed($event)); })("messageSent", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_messageSent_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageSent($event)); })("MessageStreamed", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_MessageStreamed_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnMessageStreamed($event)); })("agentResponse", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_agentResponse_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentResponse($event)); })("agentRunDetected", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_agentRunDetected_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunDetected($event)); })("agentRunUpdate", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_agentRunUpdate_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onAgentRunUpdate($event)); })("messageComplete", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_messageComplete_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onMessageComplete($event)); })("artifactCreated", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_artifactCreated_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onArtifactCreated($event)); })("conversationRenamed", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_conversationRenamed_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onConversationRenamed($event)); })("intentCheckStarted", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_intentCheckStarted_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckStarted($event)); })("intentCheckCompleted", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_intentCheckCompleted_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onIntentCheckCompleted($event)); })("beforeAgentTurn", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_beforeAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.beforeAgentTurn.emit($event)); })("afterAgentTurn", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_afterAgentTurn_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.afterAgentTurn.emit($event)); })("uploadStateChanged", function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template_mj_message_input_uploadStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onUploadStateChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -632,7 +636,7 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Templ
     i0.ɵɵproperty("hidden", inputRef_r27.conversationId !== ctx_r0.conversationId)("initialDraft", ctx_r0.GetInitialDraftFor(inputRef_r27.conversationId))("conversationId", inputRef_r27.conversationId)("conversationName", inputRef_r27.conversationName)("currentUser", ctx_r0.currentUser)("conversationHistory", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.messages : i0.ɵɵpureFunction0(44, _c9))("artifactsByDetailId", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.artifactsByDetailId : ctx_r0.emptyArtifactsMap)("systemArtifactsByDetailId", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.systemArtifactsByDetailId : ctx_r0.emptyArtifactsMap)("agentRunsByDetailId", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.agentRunsByDetailId : ctx_r0.emptyAgentRunsMap)("appContext", ctx_r0.appContext)("applicationId", ctx_r0.applicationId)("defaultAgentId", ctx_r0.defaultAgentId)("conversationDefaultAgentId", inputRef_r27.conversationId === ctx_r0.conversationId ? (ctx_r0.conversation == null ? null : ctx_r0.conversation.DefaultAgentID) ?? null : null)("agentConfigurationPresetId", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.ActiveAgentConfigurationPresetId : null)("AgentReplyMode", ctx_r0.AgentReplyMode)("AllowedAgentIDs", ctx_r0.AllowedAgentIDs)("MentionPeople", ctx_r0.MentionPeople)("AgentHistoryFrom", ctx_r0.AgentHistoryFrom)("TargetBranchID", ctx_r0.TargetBranchIdFor(inputRef_r27.conversationId))("ResolveTargetBranch", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.ResolveComposerBranch : null)("AgentTurnHandler", ctx_r0.AgentTurnHandler)("AutoNameConversation", ctx_r0.AutoNameConversation)("EnableDecisionRouting", ctx_r0.EnableDecisionRouting)("inProgressMessageIds", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.inProgressMessageIds : ctx_r0.emptyInProgressIds)("disabled", ctx_r0.isProcessing || ctx_r0.isReadOnlyView)("ReadOnly", ctx_r0.EffectiveReadOnly)("enableAttachments", ctx_r0.enableAttachments && ctx_r0.allowAttachments)("enableMentions", ctx_r0.allowMentions)("enableAgentMentions", ctx_r0.allowAgentMentions)("enableEntityMentions", ctx_r0.allowEntityMentions)("enableSkillCommands", ctx_r0.allowSkillCommands)("enablePlanMode", ctx_r0.allowPlanMode)("enableRealtime", ctx_r0.allowRealtime && ctx_r0.OpenView.Kind !== "DraftFork")("Placeholder", ctx_r0.ComposerPlaceholderFor(inputRef_r27.conversationId))("SendSlotMode", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.SendSlotMode : "send")("StopCount", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.StopCount : 0)("StopLabel", ctx_r0.StopLabel)("StatusText", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.StatusText : null)("StatusElapsed", inputRef_r27.conversationId === ctx_r0.conversationId ? ctx_r0.StatusElapsed : null)("maxAttachments", ctx_r0.maxAttachments)("maxAttachmentSizeBytes", ctx_r0.maxAttachmentSizeBytes)("acceptedFileTypes", ctx_r0.acceptedFileTypes)("initialMessage", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r27.conversationId) ? ctx_r0.pendingMessage : null)("initialAttachments", ctx_r0.shouldDeliverPendingMessageTo(inputRef_r27.conversationId) ? ctx_r0.pendingAttachments : null);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 107);
+    i0.ɵɵelementStart(0, "div", 108);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -641,12 +645,12 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional
     i0.ɵɵtextInterpolate(ctx_r0.ComposerHint);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_0_Template, 4, 0, "div", 86);
-    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_Template, 2, 6, "div", 92);
-    i0.ɵɵelementStart(2, "div", 93);
-    i0.ɵɵrepeaterCreate(3, ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template, 2, 45, "mj-message-input", 106, _forTrack0);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_0_Template, 4, 0, "div", 87);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_1_Template, 2, 6, "div", 93);
+    i0.ɵɵelementStart(2, "div", 94);
+    i0.ɵɵrepeaterCreate(3, ConversationChatAreaComponent_Conditional_14_Conditional_10_For_4_Template, 2, 45, "mj-message-input", 107, _forTrack0);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_5_Template, 2, 1, "div", 107);
+    i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_14_Conditional_10_Conditional_5_Template, 2, 1, "div", 108);
 } if (rf & 2) {
     let tmp_6_0;
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -660,18 +664,18 @@ function ConversationChatAreaComponent_Conditional_14_Conditional_10_Template(rf
 } }
 function ConversationChatAreaComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_14_Conditional_1_Template, 2, 1, "div", 95);
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_14_Conditional_2_Template, 2, 1, "div", 96);
-    i0.ɵɵelementStart(3, "div", 97, 6);
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_14_Conditional_1_Template, 2, 1, "div", 96);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_14_Conditional_2_Template, 2, 1, "div", 97);
+    i0.ɵɵelementStart(3, "div", 98, 6);
     i0.ɵɵlistener("scroll", function ConversationChatAreaComponent_Conditional_14_Template_div_scroll_3_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.checkScroll()); })("keydown.escape", function ConversationChatAreaComponent_Conditional_14_Template_div_keydown_escape_3_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnViewEscape($event)); });
-    i0.ɵɵelementStart(5, "mj-conversation-message-list", 98);
-    i0.ɵɵlistener("OlderRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_OlderRequested_5_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOlderMessagesRequested()); })("DateJumpRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_DateJumpRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDateJumpRequested($event)); })("ForkOpenRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ForkOpenRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkOpenRequested($event)); })("EditResendRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_EditResendRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnEditResendRequested($event)); })("RegenerateRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_RegenerateRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnRegenerateRequested($event)); })("ResendInPlaceRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ResendInPlaceRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnResendInPlaceRequested($event)); })("ForkRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ForkRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkRequested($event)); })("realtimeSessionOpenRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_realtimeSessionOpenRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OpenRealtimeSessionReview($event)); })("deleteMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_deleteMessage_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteMessage($event)); })("BeforeStopClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_BeforeStopClicked_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.BeforeStopClicked.emit($event)); })("StopMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_StopMessage_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnStopMessage($event)); })("testFeedbackMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_testFeedbackMessage_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_artifactClicked_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_messageEdited_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_openEntityRecord_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_suggestedResponseSelected_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSuggestedResponseSelected($event)); })("attachmentClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_attachmentClicked_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAttachmentClicked($event)); })("diagnosticRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_diagnosticRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDiagnosticRequested($event)); })("LivenessCheckRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_LivenessCheckRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnLivenessCheckRequested($event)); })("messagePinToggled", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_messagePinToggled_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessagePinToggled($event)); })("beforeResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_beforeResponseFormSubmitted_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.beforeResponseFormSubmitted.emit($event)); })("afterResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_afterResponseFormSubmitted_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.afterResponseFormSubmitted.emit($event)); });
+    i0.ɵɵelementStart(5, "mj-conversation-message-list", 99);
+    i0.ɵɵlistener("OlderRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_OlderRequested_5_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOlderMessagesRequested()); })("DateJumpRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_DateJumpRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDateJumpRequested($event)); })("ForkOpenRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ForkOpenRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkOpenRequested($event)); })("EditResendRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_EditResendRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnEditResendRequested($event)); })("RegenerateRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_RegenerateRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnRegenerateRequested($event)); })("ResendInPlaceRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ResendInPlaceRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnResendInPlaceRequested($event)); })("ForkRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ForkRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkRequested($event)); })("realtimeSessionOpenRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_realtimeSessionOpenRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OpenRealtimeSessionReview($event)); })("deleteMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_deleteMessage_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteMessage($event)); })("BeforeStopClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_BeforeStopClicked_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.BeforeStopClicked.emit($event)); })("StopMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_StopMessage_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnStopMessage($event)); })("testFeedbackMessage", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_testFeedbackMessage_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_artifactClicked_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_messageEdited_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_openEntityRecord_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_suggestedResponseSelected_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSuggestedResponseSelected($event)); })("attachmentClicked", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_attachmentClicked_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAttachmentClicked($event)); })("diagnosticRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_diagnosticRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDiagnosticRequested($event)); })("LivenessCheckRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_LivenessCheckRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnLivenessCheckRequested($event)); })("messagePinToggled", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_messagePinToggled_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessagePinToggled($event)); })("beforeResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_beforeResponseFormSubmitted_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.beforeResponseFormSubmitted.emit($event)); })("afterResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_afterResponseFormSubmitted_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.afterResponseFormSubmitted.emit($event)); })("TaskGraphPanelRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_TaskGraphPanelRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnTaskGraphPanelRequested($event)); })("ScrollToMessageRequested", function ConversationChatAreaComponent_Conditional_14_Template_mj_conversation_message_list_ScrollToMessageRequested_5_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnJumpToMessage($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_14_Conditional_6_Template, 2, 0, "span", 99);
+    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_14_Conditional_6_Template, 2, 0, "span", 100);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 91);
-    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_14_Conditional_8_Template, 2, 0, "div", 100)(9, ConversationChatAreaComponent_Conditional_14_Conditional_9_Template, 4, 1, "div", 86)(10, ConversationChatAreaComponent_Conditional_14_Conditional_10_Template, 6, 3);
+    i0.ɵɵelementStart(7, "div", 92);
+    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_14_Conditional_8_Template, 2, 0, "div", 101)(9, ConversationChatAreaComponent_Conditional_14_Conditional_9_Template, 4, 1, "div", 87)(10, ConversationChatAreaComponent_Conditional_14_Conditional_10_Template, 6, 3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -688,14 +692,14 @@ function ConversationChatAreaComponent_Conditional_14_Template(rf, ctx) { if (rf
 } }
 function ConversationChatAreaComponent_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 112);
+    i0.ɵɵelementStart(0, "div", 113);
     i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_15_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeStart($event)); })("touchstart", function ConversationChatAreaComponent_Conditional_15_Conditional_0_Template_div_touchstart_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeTouchStart($event)); });
     i0.ɵɵelementEnd();
 } }
 function ConversationChatAreaComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_15_Conditional_0_Template, 1, 0, "div", 109);
-    i0.ɵɵelementStart(1, "div", 110)(2, "mj-artifact-viewer-panel", 111);
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_15_Conditional_0_Template, 1, 0, "div", 110);
+    i0.ɵɵelementStart(1, "div", 111)(2, "mj-artifact-viewer-panel", 112);
     i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_closed_2_listener() { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCloseArtifactPanel()); })("saveToCollectionRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_saveToCollectionRequested_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSaveToCollectionRequested($event)); })("navigateToLink", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_navigateToLink_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactLinkNavigation($event)); })("shareRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_shareRequested_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactShareRequested($event)); })("maximizeToggled", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_maximizeToggled_2_listener() { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleMaximizeArtifactPane()); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_openEntityRecord_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("navigationRequest", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_navigationRequest_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onNavigationRequest($event)); })("analyzeRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_analyzeRequested_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnAnalyzeArtifact($event)); })("applyFormRequested", function ConversationChatAreaComponent_Conditional_15_Template_mj_artifact_viewer_panel_applyFormRequested_2_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnApplyFormRequested($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -707,33 +711,90 @@ function ConversationChatAreaComponent_Conditional_15_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("artifactId", ctx_r0.selectedArtifactId)("currentUser", ctx_r0.currentUser)("environmentId", ctx_r0.environmentId)("versionNumber", ctx_r0.selectedVersionNumber)("viewContext", "conversation")("Scope", ctx_r0.ArtifactViewerScope)("canShare", ctx_r0.canShareSelectedArtifact)("canEdit", ctx_r0.canEditSelectedArtifact)("isMaximized", ctx_r0.isArtifactPaneMaximized)("refreshTrigger", ctx_r0.artifactViewerRefresh$);
 } }
-function ConversationChatAreaComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 113);
+    i0.ɵɵlistener("mousedown", function ConversationChatAreaComponent_Conditional_16_Conditional_0_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeStart($event)); })("touchstart", function ConversationChatAreaComponent_Conditional_16_Conditional_0_Template_div_touchstart_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onResizeTouchStart($event)); });
+    i0.ɵɵelementEnd();
+} }
+function ConversationChatAreaComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-pinned-messages-panel", 113);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_17_Template_mj_pinned_messages_panel_closed_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showPinsPanel = false); })("jumpRequested", function ConversationChatAreaComponent_Conditional_17_Template_mj_pinned_messages_panel_jumpRequested_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onJumpToMessage($event)); })("unpinRequested", function ConversationChatAreaComponent_Conditional_17_Template_mj_pinned_messages_panel_unpinRequested_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onUnpinFromPanel($event)); });
+    i0.ɵɵconditionalCreate(0, ConversationChatAreaComponent_Conditional_16_Conditional_0_Template, 1, 0, "div", 110);
+    i0.ɵɵelementStart(1, "div", 114)(2, "div", 115)(3, "div", 116)(4, "span", 117);
+    i0.ɵɵelement(5, "i", 118);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 119)(7, "span", 120);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 121);
+    i0.ɵɵtext(10, "Interactive Task Graph & Step Inspector");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 122)(12, "button", 123);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r30); const taskGraphRunView_r32 = i0.ɵɵreference(22); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnSaveTaskGraphAsWorkflow(taskGraphRunView_r32.Spec)); });
+    i0.ɵɵelement(13, "i", 124);
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "button", 125);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleMaximizeArtifactPane()); });
+    i0.ɵɵelement(17, "i", 124);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 126);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_16_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r30); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnCloseTaskGraphPanel()); });
+    i0.ɵɵelement(19, "i", 127);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(20, "div", 128);
+    i0.ɵɵelement(21, "mj-task-graph-run-view", 129, 8);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
+    const taskGraphRunView_r32 = i0.ɵɵreference(22);
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("pinnedMessages", ctx_r0.pinnedMessages)("isLoading", ctx_r0.isLoadingPins)("AllowUnpin", !ctx_r0.EffectiveReadOnly);
+    i0.ɵɵconditional(!ctx_r0.isArtifactPaneMaximized ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r0.artifactPaneWidth, "%");
+    i0.ɵɵclassProp("maximized", ctx_r0.isArtifactPaneMaximized);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r0.SelectedTaskGraphPanel.workflowTitle);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("disabled", ctx_r0.IsSavingTaskGraphWorkflow || !(taskGraphRunView_r32.Spec == null ? null : taskGraphRunView_r32.Spec.tasks == null ? null : taskGraphRunView_r32.Spec.tasks.length));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-spinner", ctx_r0.IsSavingTaskGraphWorkflow)("fa-spin", ctx_r0.IsSavingTaskGraphWorkflow)("fa-floppy-disk", !ctx_r0.IsSavingTaskGraphWorkflow);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.IsSavingTaskGraphWorkflow ? "Saving\u2026" : "Save as Workflow");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", ctx_r0.isArtifactPaneMaximized ? "Restore panel size" : "Maximize panel");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-compress", ctx_r0.isArtifactPaneMaximized)("fa-expand", !ctx_r0.isArtifactPaneMaximized);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ParentTaskID", ctx_r0.SelectedTaskGraphPanel.parentTaskId)("WorkflowName", ctx_r0.SelectedTaskGraphPanel.workflowTitle)("LiveUpdates", true)("ShowVariables", true)("Height", "100%");
 } }
 function ConversationChatAreaComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-conversation-forks-popover", 114);
-    i0.ɵɵlistener("ForkSelected", function ConversationChatAreaComponent_Conditional_18_Template_mj_conversation_forks_popover_ForkSelected_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkSelectedFromList($event)); })("Closed", function ConversationChatAreaComponent_Conditional_18_Template_mj_conversation_forks_popover_Closed_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.CloseForksPopover()); });
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-pinned-messages-panel", 130);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_18_Template_mj_pinned_messages_panel_closed_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showPinsPanel = false); })("jumpRequested", function ConversationChatAreaComponent_Conditional_18_Template_mj_pinned_messages_panel_jumpRequested_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onJumpToMessage($event)); })("unpinRequested", function ConversationChatAreaComponent_Conditional_18_Template_mj_pinned_messages_panel_unpinRequested_0_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onUnpinFromPanel($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("pinnedMessages", ctx_r0.pinnedMessages)("isLoading", ctx_r0.isLoadingPins)("AllowUnpin", !ctx_r0.EffectiveReadOnly);
+} }
+function ConversationChatAreaComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-conversation-forks-popover", 131);
+    i0.ɵɵlistener("ForkSelected", function ConversationChatAreaComponent_Conditional_19_Template_mj_conversation_forks_popover_ForkSelected_0_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnForkSelectedFromList($event)); })("Closed", function ConversationChatAreaComponent_Conditional_19_Template_mj_conversation_forks_popover_Closed_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.CloseForksPopover()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("PanelID", ctx_r0.ForksPopoverID)("Summaries", ctx_r0.ForkSummaries)("CurrentUserID", ctx_r0.CurrentUser.ID);
 } }
-function ConversationChatAreaComponent_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 117);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_19_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.RealtimeSession.SetMinimized(false)); });
-    i0.ɵɵelement(1, "span", 118)(2, "i", 119);
-    i0.ɵɵelementStart(3, "span", 120)(4, "span", 121);
+function ConversationChatAreaComponent_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 134);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_20_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.RealtimeSession.SetMinimized(false)); });
+    i0.ɵɵelement(1, "span", 135)(2, "i", 136);
+    i0.ɵɵelementStart(3, "span", 137)(4, "span", 138);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 122);
+    i0.ɵɵelementStart(6, "span", 139);
     i0.ɵɵtext(7, "Tap to return");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -741,13 +802,13 @@ function ConversationChatAreaComponent_Conditional_19_Conditional_2_Template(rf,
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1("On call \u00B7 ", ctx_r0.RealtimeSession.CurrentAgentName);
 } }
-function ConversationChatAreaComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-realtime-session-overlay", 115);
+function ConversationChatAreaComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-realtime-session-overlay", 132);
     i0.ɵɵpipe(1, "async");
-    i0.ɵɵlistener("NavigateRequest", function ConversationChatAreaComponent_Conditional_19_Template_mj_realtime_session_overlay_NavigateRequest_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRealtimeNavigateRequest($event)); })("StartLiveRequested", function ConversationChatAreaComponent_Conditional_19_Template_mj_realtime_session_overlay_StartLiveRequested_0_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewStartLive($event)); })("ReviewClosed", function ConversationChatAreaComponent_Conditional_19_Template_mj_realtime_session_overlay_ReviewClosed_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewClosed()); });
+    i0.ɵɵlistener("NavigateRequest", function ConversationChatAreaComponent_Conditional_20_Template_mj_realtime_session_overlay_NavigateRequest_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRealtimeNavigateRequest($event)); })("StartLiveRequested", function ConversationChatAreaComponent_Conditional_20_Template_mj_realtime_session_overlay_StartLiveRequested_0_listener($event) { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewStartLive($event)); })("ReviewClosed", function ConversationChatAreaComponent_Conditional_20_Template_mj_realtime_session_overlay_ReviewClosed_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReviewClosed()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_19_Conditional_2_Template, 8, 1, "button", 116);
+    i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_20_Conditional_2_Template, 8, 1, "button", 133);
     i0.ɵɵpipe(3, "async");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -755,32 +816,32 @@ function ConversationChatAreaComponent_Conditional_19_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(i0.ɵɵpipeBind1(3, 13, ctx_r0.RealtimeSession.Minimized$) ? 2 : -1);
 } }
-function ConversationChatAreaComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r34 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 123);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_24_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
-    i0.ɵɵelementStart(1, "div", 124);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_24_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(2, "div", 125)(3, "h3");
+function ConversationChatAreaComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r37 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 140);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
+    i0.ɵɵelementStart(1, "div", 141);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(2, "div", 142)(3, "h3");
     i0.ɵɵtext(4, "Assign Project");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 126);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_24_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
-    i0.ɵɵelement(6, "i", 127);
+    i0.ɵɵelementStart(5, "button", 143);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
+    i0.ɵɵelement(6, "i", 144);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 128)(8, "mj-project-selector", 129);
-    i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_24_Template_mj_project_selector_projectSelected_8_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onProjectSelected($event)); });
+    i0.ɵɵelementStart(7, "div", 145)(8, "mj-project-selector", 146);
+    i0.ɵɵlistener("projectSelected", function ConversationChatAreaComponent_Conditional_25_Template_mj_project_selector_projectSelected_8_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onProjectSelected($event)); });
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(8);
     i0.ɵɵproperty("environmentId", ctx_r0.environmentId)("currentUser", ctx_r0.currentUser)("selectedProjectId", ctx_r0.conversation.ProjectID);
 } }
-function ConversationChatAreaComponent_Conditional_25_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 136);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r36); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleSystemArtifacts()); });
-    i0.ɵɵelement(1, "i", 137);
+function ConversationChatAreaComponent_Conditional_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 153);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r39); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleSystemArtifacts()); });
+    i0.ɵɵelement(1, "i", 154);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -790,106 +851,106 @@ function ConversationChatAreaComponent_Conditional_25_Conditional_6_Template(rf,
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("", ctx_r0.showSystemArtifacts ? "Hide" : "Show", " System");
 } }
-function ConversationChatAreaComponent_Conditional_25_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 134);
+function ConversationChatAreaComponent_Conditional_26_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 151);
 } }
-function ConversationChatAreaComponent_Conditional_25_For_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
-    const artifact_r38 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵtextInterpolate1(" ", artifact_r38.versionCount, " versions ");
+    const artifact_r41 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" ", artifact_r41.versionCount, " versions ");
 } }
-function ConversationChatAreaComponent_Conditional_25_For_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " 1 version ");
 } }
-function ConversationChatAreaComponent_Conditional_25_For_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 149);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_For_12_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r39); const artifact_r38 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleArtifactExpansion(artifact_r38.artifactId, $event)); });
-    i0.ɵɵelement(1, "i", 150);
+function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r42 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 166);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_10_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r42); const artifact_r41 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleArtifactExpansion(artifact_r41.artifactId, $event)); });
+    i0.ɵɵelement(1, "i", 167);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r38 = i0.ɵɵnextContext().$implicit;
+    const artifact_r41 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.expandedArtifactId !== artifact_r38.artifactId)("fa-chevron-up", ctx_r0.expandedArtifactId === artifact_r38.artifactId);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r0.expandedArtifactId !== artifact_r41.artifactId)("fa-chevron-up", ctx_r0.expandedArtifactId === artifact_r41.artifactId);
 } }
-function ConversationChatAreaComponent_Conditional_25_For_12_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r40 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 152);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_For_12_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r41 = i0.ɵɵrestoreView(_r40).$implicit; const artifact_r38 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.openArtifactFromModal(artifact_r38.artifactId, version_r41.versionNumber); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 153);
+function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r43 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 169);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r44 = i0.ɵɵrestoreView(_r43).$implicit; const artifact_r41 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.openArtifactFromModal(artifact_r41.artifactId, version_r44.versionNumber); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "span", 170);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 154);
+    i0.ɵɵelementStart(3, "span", 171);
     i0.ɵɵtext(4, "Open this version");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 155);
+    i0.ɵɵelement(5, "i", 172);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const version_r41 = ctx.$implicit;
+    const version_r44 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("v", version_r41.versionNumber);
+    i0.ɵɵtextInterpolate1("v", version_r44.versionNumber);
 } }
-function ConversationChatAreaComponent_Conditional_25_For_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 148);
-    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_25_For_12_Conditional_13_For_2_Template, 6, 1, "div", 151, _forTrack2);
+function ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 165);
+    i0.ɵɵrepeaterCreate(1, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_For_2_Template, 6, 1, "div", 168, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r38 = i0.ɵɵnextContext().$implicit;
+    const artifact_r41 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(artifact_r38.versions);
+    i0.ɵɵrepeater(artifact_r41.versions);
 } }
-function ConversationChatAreaComponent_Conditional_25_For_12_Template(rf, ctx) { if (rf & 1) {
-    const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 138)(1, "div", 139);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_For_12_Template_div_click_1_listener() { const artifact_r38 = i0.ɵɵrestoreView(_r37).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openArtifactFromModal(artifact_r38.artifactId)); });
-    i0.ɵɵelementStart(2, "div", 140);
-    i0.ɵɵelement(3, "i", 141);
+function ConversationChatAreaComponent_Conditional_26_For_12_Template(rf, ctx) { if (rf & 1) {
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 155)(1, "div", 156);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_For_12_Template_div_click_1_listener() { const artifact_r41 = i0.ɵɵrestoreView(_r40).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openArtifactFromModal(artifact_r41.artifactId)); });
+    i0.ɵɵelementStart(2, "div", 157);
+    i0.ɵɵelement(3, "i", 158);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 142)(5, "div", 143);
+    i0.ɵɵelementStart(4, "div", 159)(5, "div", 160);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 144);
-    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_25_For_12_Conditional_8_Template, 1, 1)(9, ConversationChatAreaComponent_Conditional_25_For_12_Conditional_9_Template, 1, 0);
+    i0.ɵɵelementStart(7, "div", 161);
+    i0.ɵɵconditionalCreate(8, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_8_Template, 1, 1)(9, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_9_Template, 1, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_25_For_12_Conditional_10_Template, 2, 4, "button", 145);
-    i0.ɵɵelementStart(11, "div", 146);
-    i0.ɵɵelement(12, "i", 147);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_10_Template, 2, 4, "button", 162);
+    i0.ɵɵelementStart(11, "div", 163);
+    i0.ɵɵelement(12, "i", 164);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_25_For_12_Conditional_13_Template, 3, 0, "div", 148);
+    i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_26_For_12_Conditional_13_Template, 3, 0, "div", 165);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const artifact_r38 = ctx.$implicit;
+    const artifact_r41 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("expanded", ctx_r0.expandedArtifactId === artifact_r38.artifactId)("system-artifact", artifact_r38.visibility === "System Only");
+    i0.ɵɵclassProp("expanded", ctx_r0.expandedArtifactId === artifact_r41.artifactId)("system-artifact", artifact_r41.visibility === "System Only");
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(artifact_r38.name);
+    i0.ɵɵtextInterpolate(artifact_r41.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(artifact_r38.versionCount > 1 ? 8 : 9);
+    i0.ɵɵconditional(artifact_r41.versionCount > 1 ? 8 : 9);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(artifact_r38.versionCount > 1 ? 10 : -1);
+    i0.ɵɵconditional(artifact_r41.versionCount > 1 ? 10 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.expandedArtifactId === artifact_r38.artifactId && artifact_r38.versionCount > 1 ? 13 : -1);
+    i0.ɵɵconditional(ctx_r0.expandedArtifactId === artifact_r41.artifactId && artifact_r41.versionCount > 1 ? 13 : -1);
 } }
-function ConversationChatAreaComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 123);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
-    i0.ɵɵelementStart(1, "div", 130);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
-    i0.ɵɵelementStart(2, "div", 125)(3, "h3");
+function ConversationChatAreaComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 140);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r38); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
+    i0.ɵɵelementStart(1, "div", 147);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
+    i0.ɵɵelementStart(2, "div", 142)(3, "h3");
     i0.ɵɵtext(4, "Conversation Artifacts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 131);
-    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_25_Conditional_6_Template, 4, 3, "button", 132);
-    i0.ɵɵelementStart(7, "button", 126);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_25_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r35); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
-    i0.ɵɵelement(8, "i", 127);
+    i0.ɵɵelementStart(5, "div", 148);
+    i0.ɵɵconditionalCreate(6, ConversationChatAreaComponent_Conditional_26_Conditional_6_Template, 4, 3, "button", 149);
+    i0.ɵɵelementStart(7, "button", 143);
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_26_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r38); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
+    i0.ɵɵelement(8, "i", 144);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 133);
-    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_25_Conditional_10_Template, 1, 0, "mj-empty-state", 134);
-    i0.ɵɵrepeaterCreate(11, ConversationChatAreaComponent_Conditional_25_For_12_Template, 14, 8, "div", 135, _forTrack1);
+    i0.ɵɵelementStart(9, "div", 150);
+    i0.ɵɵconditionalCreate(10, ConversationChatAreaComponent_Conditional_26_Conditional_10_Template, 1, 0, "mj-empty-state", 151);
+    i0.ɵɵrepeaterCreate(11, ConversationChatAreaComponent_Conditional_26_For_12_Template, 14, 8, "div", 152, _forTrack1);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -900,28 +961,28 @@ function ConversationChatAreaComponent_Conditional_25_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.getArtifactsArray());
 } }
-function ConversationChatAreaComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 156);
-    i0.ɵɵlistener("completed", function ConversationChatAreaComponent_Conditional_26_Template_mj_artifact_collection_picker_modal_completed_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCompleted($event)); })("cancelled", function ConversationChatAreaComponent_Conditional_26_Template_mj_artifact_collection_picker_modal_cancelled_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCancelled()); });
+function ConversationChatAreaComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    const _r45 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-artifact-collection-picker-modal", 173);
+    i0.ɵɵlistener("completed", function ConversationChatAreaComponent_Conditional_27_Template_mj_artifact_collection_picker_modal_completed_0_listener($event) { i0.ɵɵrestoreView(_r45); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCompleted($event)); })("cancelled", function ConversationChatAreaComponent_Conditional_27_Template_mj_artifact_collection_picker_modal_cancelled_0_listener() { i0.ɵɵrestoreView(_r45); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCollectionPickerCancelled()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     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_27_Template(rf, ctx) { if (rf & 1) {
-    const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-test-feedback-dialog", 157);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_27_Template_mj_test_feedback_dialog_closed_0_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackDialogClosed($event)); });
+function ConversationChatAreaComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-test-feedback-dialog", 174);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_28_Template_mj_test_feedback_dialog_closed_0_listener($event) { i0.ɵɵrestoreView(_r46); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackDialogClosed($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("data", ctx_r0.testFeedbackDialogData)("visible", ctx_r0.showTestFeedbackDialog);
 } }
-function ConversationChatAreaComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r44 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-image-viewer", 158);
-    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_28_Template_mj_image_viewer_closed_0_listener() { i0.ɵɵrestoreView(_r44); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onImageViewerClosed()); });
+function ConversationChatAreaComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r47 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-image-viewer", 175);
+    i0.ɵɵlistener("closed", function ConversationChatAreaComponent_Conditional_29_Template_mj_image_viewer_closed_0_listener() { i0.ɵɵrestoreView(_r47); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onImageViewerClosed()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -1145,6 +1206,24 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     get allowRealtime() {
         return this.AllowRealtime;
     }
+    /**
+     * Host-level cap for starting conversation forks: Fork from here, and Edit or
+     * Regenerate as a fork. Defaults true (current behavior). Hosts with no forking
+     * experience set false; Edit and Regenerate then change the latest turn in place,
+     * as for a person without the `Conversations: Fork` authorization. UI only: deny
+     * that authorization to a role to stop the server creating forks as well.
+     */
+    AllowForking = true;
+    /**
+     * Host-level cap for stopping and continuing agent runs: the composer's Stop and Stop all, the
+     * Stop pill on an in-progress reply, the Continue button on a stopped reply, and the "Continue,
+     * or tell {agent} what to do differently" placeholder. Defaults true (current behavior). Hosts
+     * with no stop experience (a review surface, a space whose runs are managed elsewhere) set false
+     * without making the conversation read-only. UI only: a run stopped from another client still
+     * shows as stopped, and the next message still continues it. The composer's status line
+     * ({@link StatusText}) is not part of the cap: it reports that a reply is in flight either way.
+     */
+    AllowStopRun = true;
     /**
      * Whether the message list renders its built-in "No messages yet" filler
      * when a conversation has zero messages. Defaults true. Hosts that render
@@ -1934,12 +2013,6 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      */
     afterToolInvoked = this.AfterToolInvoked;
     /** Cancelable — fired BEFORE a response form's submitted values are sent. */
-    /**
-     * Whether people may stop an in-progress agent run from its reply. Default true. A host can
-     * turn it off for a surface (a view-only review, a space whose runs are managed elsewhere)
-     * without making the conversation read-only.
-     */
-    AllowStopRun = true;
     BeforeResponseFormSubmitted = new EventEmitter();
     /**
      * @deprecated Use {@link BeforeResponseFormSubmitted}.
@@ -2333,6 +2406,14 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     /** Gap kept between the pane's top edge and the turn's first message. */
     static TURN_TOP_GAP_PX = 16;
     lastLoadedConversationId = null; // Track which conversation's peripheral data was loaded
+    /**
+     * The conversation whose artifacts are currently held in {@link ArtifactsByDetailId}.
+     * Unlike {@link lastLoadedConversationId} (which {@link resetComponentState} zeroes on every
+     * message send / agent response to force {@link loadPeripheralData} to re-run), this stays set
+     * to the owning conversation until {@link ArtifactsByDetailId} is actually cleared or rebuilt
+     * for another conversation.
+     */
+    artifactMapConversationId = null;
     currentlyLoadingConversationId = null; // Track which conversation is currently being loaded
     conversationLoadToken = 0; // Monotonic token to discard stale async conversation loads
     /** The conversation whose load has ended; null while a load runs and before the first one. */
@@ -2472,6 +2553,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.ShowProjectSelector = value;
     }
     ShowArtifactPanel = false;
+    SelectedTaskGraphPanel = null;
     /** @deprecated Use {@link ShowArtifactPanel}. */
     get showArtifactPanel() {
         return this.ShowArtifactPanel;
@@ -2724,6 +2806,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.syncSendSlot();
     }
     _inProgressMessageIds = [];
+    /** Tracks the ID each in-progress reply entity was last registered under so adopting the server's row ID drops the local placeholder UUID. */
+    inProgressIdByEntity;
     // ── The composer's send slot as the stop control ──────────────────────────────────────
     // While replies are in flight the composer's send slot is the stop control (one run: "Stop
     // {agent}"; several: "Stop all N", and each reply shows its own pill as well). The slot's mode,
@@ -2759,22 +2843,27 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         const agent = this.inFlightAgentName();
         return agent ? `Stop ${agent}` : 'Stop';
     }
-    /** The composer's status line: who is working, or what is being stopped. Null when the slot is Send. */
+    /**
+     * The composer's status line: who is working, or what is being stopped. Null with nothing in
+     * flight. It is information, not a control, so it shows whenever a reply is in flight, whether
+     * or not the viewer may stop it (a read-only viewer, or a host with {@link AllowStopRun} off);
+     * only the send slot is gated. The stopping text likewise reads the stopping state itself, not
+     * the slot's mode.
+     */
     get StatusText() {
-        const mode = this.SendSlotMode;
-        if (mode === 'send') {
+        const count = this.InFlightCount;
+        if (count === 0) {
             return null;
         }
-        const count = this.InFlightCount;
         const agent = this.inFlightAgentName();
-        if (mode === 'stopping') {
+        if (this.isAnyStopping()) {
             return count > 1 ? `Stopping ${count} runs…` : `Stopping ${agent ?? 'the run'}…`;
         }
         return count > 1 ? `${count} agents working` : `${agent ?? 'The agent'} is working`;
     }
-    /** The elapsed time after the status line, for a single run that is working. */
+    /** The elapsed time after the status line, for a single run that is working (not one being stopped). */
     get StatusElapsed() {
-        return this.SendSlotMode === 'stop' && this.InFlightCount === 1 ? this.SendSlotElapsed : null;
+        return this.InFlightCount === 1 && !this.isAnyStopping() ? this.SendSlotElapsed : null;
     }
     /**
      * The composer's stop control. Every in-flight reply is stopped through the same path as the
@@ -2957,8 +3046,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     boundOnResizeEnd = this.onResizeEnd.bind(this);
     boundOnResizeTouchMove = this.onResizeTouchMove.bind(this);
     boundOnResizeTouchEnd = this.onResizeTouchEnd.bind(this);
-    // LocalStorage key
-    ARTIFACT_PANE_WIDTH_KEY = 'mj-conversations-artifact-pane-width';
+    // UserInfoEngine setting key for artifact pane width
+    ARTIFACT_PANE_WIDTH_KEY = 'mj.conversations.artifactPaneWidth';
     // Pinned messages panel state
     ShowPinsPanel = false;
     /** @deprecated Use {@link ShowPinsPanel}. */
@@ -3510,18 +3599,26 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             .pipe(takeUntil(this.destroy$))
             .subscribe((request) => {
             const { command, conversationId } = request;
+            if (conversationId && !this.isActiveConversation(conversationId)) {
+                return;
+            }
             if (command.type === 'client:capture-data-snapshot') {
-                if (conversationId && !this.isActiveConversation(conversationId)) {
-                    return;
-                }
                 void this.handleCaptureDataSnapshotCommand(command);
                 return;
             }
-            if (command.type === 'open:resource' && command.resourceType === 'Record' && command.entityName) {
-                if (conversationId && !this.isActiveConversation(conversationId)) {
+            if (command.type === 'open:resource') {
+                if (this.isConversationArtifactCommand(command)) {
+                    if (this.OpenConversationArtifactForCommand(command)) {
+                        return;
+                    }
+                }
+                if (command.resourceType === 'Record' && command.entityName) {
+                    this.emitOpenResourceRecord(command);
                     return;
                 }
-                this.emitOpenResourceRecord(command);
+                if (this.OverlayMode) {
+                    this.handleOverlayOpenResourceCommand(command);
+                }
             }
         });
         // REALTIME-CREATED CONVERSATIONS — three-beat lifecycle so the UI feels live:
@@ -3539,6 +3636,16 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             namedThisSession = false;
             this.onRealtimeSessionStarted();
         });
+        // A call that ends over a failure (a failed start, a dropped connection, a time limit) is ended by the
+        // runtime itself, which closes the call surface with it: say why, or the call just vanishes.
+        this.RealtimeSession.SessionEnded$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((ended) => {
+            if (ended.reason === 'error') {
+                const notice = DescribeCallFailureNotice(this.RealtimeSession.LastStartError, this.RealtimeSession.LastSessionError);
+                MJNotificationService.Instance.CreateSimpleNotification(notice, 'error', 6000);
+            }
+        });
         let voiceWasActive = false;
         this.RealtimeSession.Active$
             .pipe(takeUntil(this.destroy$))
@@ -3667,13 +3774,33 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 await this.handleMessageCompletion(message, event.agentRunId, conversationId);
             }
             else if (conversationId) {
-                // The completion is for a message we do not currently hold — it belongs to another
-                // conversation, or to one scrolled out of the loaded window. Previously this event was
-                // simply dropped, and for the scrolled-out case nothing else ever picked it up: the
-                // `recentCompletions` replay only fires on conversation OPEN. Reconciling reads durable
-                // state for every in-progress message we do hold, which repairs it if it is ours and
-                // costs one narrow query if it is not.
-                await this.ReconcileNow('completion-for-unloaded-message');
+                // A completion for an unloaded ConversationDetailID may be a server-created workflow
+                // continuation reply (from TaskGraphContinuationDeliverer) in the active conversation,
+                // or a scrolled-out message. Reload the active window first so new continuation messages
+                // and their artifacts appear immediately in real time without leaving the chat.
+                const artifactBaseline = this.snapshotArtifactPanelBaseline();
+                await this.reloadMessagesForActiveConversation();
+                const newlyLoaded = event.conversationDetailId
+                    ? this.messages.find(m => UUIDsEqual(m.ID, event.conversationDetailId))
+                    : undefined;
+                if (newlyLoaded) {
+                    await this.reloadArtifactsForMessage(newlyLoaded.ID, conversationId);
+                    // Also refresh artifacts on any preceding AI messages that may have received task-step artifacts
+                    const aiMessages = this.messages.filter(m => m.Role === 'AI');
+                    for (const aiMsg of aiMessages.slice(-3)) {
+                        if (!UUIDsEqual(aiMsg.ID, newlyLoaded.ID)) {
+                            await this.reloadArtifactsForMessage(aiMsg.ID, conversationId);
+                        }
+                    }
+                    this.resetComponentState(conversationId);
+                    await this.decideAndApplyArtifactPanel(artifactBaseline, conversationId);
+                    this.messages = [...this.messages];
+                    this.followTranscript('new');
+                    this.cdr.detectChanges();
+                }
+                else {
+                    await this.ReconcileNow('completion-for-unloaded-message');
+                }
             }
         });
         // Reconciliation triggers that do NOT depend on a clean socket close. This is the
@@ -3859,6 +3986,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     resetConversationScopedViewState() {
         this.clearTurnTracking();
         this.ShowArtifactPanel = false;
+        this.SelectedTaskGraphPanel = null;
         this.SelectedArtifactId = null;
         this.SelectedVersionNumber = undefined;
         this.CanShareSelectedArtifact = false;
@@ -3929,6 +4057,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.hadActiveAgents = false;
         if (conversationId) {
             this.currentlyLoadingConversationId = conversationId;
+            if ((this.ArtifactsByDetailId?.size ?? 0) === 0 && this.artifactMapConversationId === null) {
+                this.artifactMapConversationId = conversationId;
+            }
             if (!this.messageInputMetadataCache.has(conversationId)) {
                 this.messageInputMetadataCache.set(conversationId, {
                     conversationId: conversationId,
@@ -3986,20 +4117,37 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         else {
             // No active conversation - show empty state
             this.messages = [];
+            this.ArtifactsByDetailId?.clear();
+            this.SystemArtifactsByDetailId?.clear();
             this.IsLoadingConversation = false;
             this.currentlyLoadingConversationId = null;
             this.lastLoadedConversationId = null;
+            this.artifactMapConversationId = null;
             this.agentStateService.stopPolling();
             this.conversationLoadEnded$?.next();
         }
     }
+    _cachedInputsArray = [];
+    _cachedInputsKey = '';
     /**
-     * Returns array of cached message-input metadata for rendering
+     * Returns array of cached message-input metadata for rendering.
      * This allows multiple message-input components to exist simultaneously (hidden)
-     * preserving their state when switching conversations
+     * preserving their state when switching conversations.
+     * Memoized on cache contents so template `@for` loops receive a stable array reference across CD ticks.
      */
     GetCachedInputs() {
-        return Array.from(this.messageInputMetadataCache.values());
+        if (this.messageInputMetadataCache.size === 0) {
+            return this._cachedInputsArray.length === 0 ? this._cachedInputsArray : (this._cachedInputsArray = []);
+        }
+        let key = '';
+        for (const [id, meta] of this.messageInputMetadataCache.entries()) {
+            key += `${id}:${meta.conversationName ?? ''}|`;
+        }
+        if (key !== this._cachedInputsKey) {
+            this._cachedInputsKey = key;
+            this._cachedInputsArray = Array.from(this.messageInputMetadataCache.values());
+        }
+        return this._cachedInputsArray;
     }
     /** @deprecated Use {@link GetCachedInputs}. */
     getCachedInputs() {
@@ -4349,6 +4497,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             for (const [detailId, artifacts] of cacheEntry.ArtifactsByDetailId) {
                 this.applyArtifactsForDetail(detailId, artifacts);
             }
+            this.artifactMapConversationId = conversationId;
             // Copy ratings from engine cache
             for (const [detailId, ratings] of cacheEntry.RatingsByDetailId) {
                 this.RatingsByDetailId.set(detailId, ratings);
@@ -4390,6 +4539,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         catch (error) {
             console.error('Failed to process peripheral data:', error);
             this.lastLoadedConversationId = null;
+            this.artifactMapConversationId = null;
         }
     }
     /**
@@ -4534,18 +4684,11 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.windowStore.ApplyLocalDetail(message);
         // Check if message already exists in the array (by ID) to prevent duplicates
         // Messages can be emitted multiple times as they're updated (e.g., status changes)
-        const existingIndex = this.messages.findIndex(m => UUIDsEqual(m.ID, message.ID));
-        if (existingIndex >= 0) {
-            // Update existing message in place (replace with updated version)
-            this.messages = [
-                ...this.messages.slice(0, existingIndex),
-                message,
-                ...this.messages.slice(existingIndex + 1)
-            ];
-        }
-        else {
-            // Add new message to the list
-            this.messages = [...this.messages, message];
+        // An agent reply's placeholder takes the server row's ID when the run is acknowledged; a refresh may already have
+        // brought that row in, so other copies of the ID are dropped.
+        const upsert = UpsertMessageById(this.messages, message);
+        this.messages = upsert.Messages;
+        if (!upsert.Existed) {
             // Ensure current user is in the avatar map for new messages
             this.ensureCurrentUserInAvatarMap();
             // Invalidate cache when new message is added.
@@ -4566,8 +4709,17 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // row does not stay In-Progress until the conversation is opened again. Register the row
         // for the live callback either way — an update of an existing In-Progress row included.
         if (message.Status === 'In-Progress' && message.ID) {
-            if (!this.InProgressMessageIds.some((id) => UUIDsEqual(id, message.ID))) {
-                this.InProgressMessageIds = [...this.InProgressMessageIds, message.ID];
+            const entityMap = (this.inProgressIdByEntity ??= new WeakMap());
+            const previousId = entityMap.get(message);
+            entityMap.set(message, message.ID);
+            const withoutPrevious = previousId && !UUIDsEqual(previousId, message.ID)
+                ? this.InProgressMessageIds.filter((id) => !UUIDsEqual(id, previousId))
+                : this.InProgressMessageIds;
+            if (!withoutPrevious.some((id) => UUIDsEqual(id, message.ID))) {
+                this.InProgressMessageIds = [...withoutPrevious, message.ID];
+            }
+            else if (withoutPrevious !== this.InProgressMessageIds) {
+                this.InProgressMessageIds = withoutPrevious;
             }
             const recentCompletion = this.streamingService.GetRecentCompletion(message.ID);
             if (recentCompletion) {
@@ -4579,7 +4731,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }
         // Where the viewport goes: a fresh send follows — an in-place update of a message that
         // is already on screen must not re-run the send path's scroll.
-        this.followTranscript(existingIndex >= 0 ? 'update' : 'new', message);
+        this.followTranscript(upsert.Existed ? 'update' : 'new', message);
         // Force change detection — zone.js 0.15 no longer patches graphql-ws WebSocket callbacks,
         // so progress updates that arrive via PubSub run outside Angular's zone. Without this,
         // the UI does not update when the messages array is modified from a streaming callback.
@@ -4733,21 +4885,28 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             return;
         }
         if (event.agentRun) {
-            // Directly update map with fresh data from progress (no database query needed)
-            // Don't create new Map - message-list component needs to keep the same reference
-            this.AgentRunsByDetailId.set(event.conversationDetailId, event.agentRun);
-            // Also update ConversationEngine's cache for other consumers
-            if (event.conversationId) {
-                ConversationEngine.Instance.SetAgentRunForDetail(event.conversationId, event.conversationDetailId, event.agentRun);
+            const existingRun = this.AgentRunsByDetailId.get(event.conversationDetailId);
+            if (!existingRun || ShouldReplaceDetailAgentRun(existingRun, event.agentRun)) {
+                // Directly update map with fresh data from progress (no database query needed)
+                // Don't create new Map - message-list component needs to keep the same reference
+                this.AgentRunsByDetailId.set(event.conversationDetailId, event.agentRun);
+                // Also update ConversationEngine's cache for other consumers
+                if (event.conversationId) {
+                    ConversationEngine.Instance.SetAgentRunForDetail(event.conversationId, event.conversationDetailId, event.agentRun);
+                }
             }
         }
         else {
             // no agent run, should have agentRunId
             await this.addAgentRunToMap(event.conversationId, event.conversationDetailId, event.agentRunId);
+            return;
+        }
+        // Refresh the rendered message in place so its agentRun reference updates without
+        // cloning the entire messages array and triggering a full virtual-timeline rebuild.
+        const targetMessage = this.messages.find(m => UUIDsEqual(m.ID, event.conversationDetailId));
+        if (!targetMessage || !this.messageListComponent?.RefreshRenderedMessage(targetMessage, { markStreaming: false })) {
+            this.messages = [...this.messages];
         }
-        // Force message list to re-render with updated agent run
-        // This ensures message components receive the fresh agent run data
-        this.messages = [...this.messages];
         this.cdr.detectChanges();
     }
     /** @deprecated Use {@link OnAgentRunUpdate}. */
@@ -4803,8 +4962,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                     merged.set(msg.ID, msg);
                 }
             }
-            this.messages = Array.from(merged.values())
-                .sort((a, b) => (a.__mj_CreatedAt?.getTime() || 0) - (b.__mj_CreatedAt?.getTime() || 0));
+            this.messages = Array.from(merged.values()).sort(CompareMessagesByCreatedAt);
             // Find newly discovered messages (delegated agents)
             const newMessages = engineDetails.filter(m => !existingMessageIds.has(m.ID));
             // Check engine cache for agent runs on new messages
@@ -5827,7 +5985,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (active && this.OpenView.Kind !== 'Main') {
             return FORK_COMPOSER_PLACEHOLDER;
         }
-        if (active && this.SendSlotMode === 'send') {
+        if (active && this.SendSlotMode === 'send' && this.AllowStopRun !== false) {
             const stoppedAgent = this.stoppedLastReplyAgent();
             if (stoppedAgent !== undefined) {
                 return `Continue, or tell ${stoppedAgent ?? 'the agent'} what to do differently`;
@@ -6084,9 +6242,14 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      */
     async handleMessageCompletion(message, _agentRunId, expectedConversationId = message.ConversationID, loadToken) {
         const completionId = message.ID ? NormalizeUUID(message.ID) : '';
+        const existingAgentRun = this.AgentRunsByDetailId.get(message.ID);
+        const isNewContinuationRun = Boolean(_agentRunId && existingAgentRun?.ID && !UUIDsEqual(existingAgentRun.ID, _agentRunId));
         if (completionId) {
             this.handledCompletionIds ??= new Set();
-            if (this.handledCompletionIds.has(completionId)) {
+            if (isNewContinuationRun) {
+                this.handledCompletionIds.delete(completionId);
+            }
+            else if (this.handledCompletionIds.has(completionId)) {
                 return;
             }
             this.handledCompletionIds.add(completionId);
@@ -6103,14 +6266,34 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             if (!isCurrent()) {
                 return;
             }
+            // If this is a bottom continuation reply linked via ParentID to an earlier workflow message,
+            // also reload that originating message so its completion note and step artifacts stay fresh.
+            if (message.ParentID) {
+                const originMsg = (this.messages ?? []).find((m) => UUIDsEqual(m.ID, message.ParentID));
+                if (originMsg?.ID) {
+                    await originMsg.Load(originMsg.ID);
+                    if (!isCurrent()) {
+                        return;
+                    }
+                    this.windowStore.ApplyLocalDetail(originMsg);
+                }
+            }
             // Reload agent run to get final status, timestamps, and cost
-            const agentRun = this.AgentRunsByDetailId.get(message.ID);
-            if (agentRun?.ID) {
-                await agentRun.Load(agentRun.ID);
+            if (isNewContinuationRun) {
+                await this.addAgentRunToMap(message.ConversationID, message.ID, _agentRunId, true);
                 if (!isCurrent()) {
                     return;
                 }
             }
+            else {
+                const agentRun = this.AgentRunsByDetailId.get(message.ID);
+                if (agentRun?.ID) {
+                    await agentRun.Load(agentRun.ID);
+                    if (!isCurrent()) {
+                        return;
+                    }
+                }
+            }
             // Reload artifacts for this completed message
             await this.reloadArtifactsForMessage(message.ID, expectedConversationId, loadToken);
             if (!isCurrent()) {
@@ -6229,28 +6412,42 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      */
     async addAgentRunToMap(conversationId, conversationDetailId, agentRunId, forceRefresh = false) {
         try {
+            const existingRun = this.AgentRunsByDetailId.get(conversationDetailId);
             // Always refresh if forced, or if not in map yet
-            if (forceRefresh || !this.AgentRunsByDetailId.has(conversationDetailId)) {
+            if (forceRefresh || !existingRun) {
                 const md = this.ProviderToUse;
                 const agentRun = await md.GetEntityObject('MJ: AI Agent Runs', this.CurrentUser);
                 if (await agentRun.Load(agentRunId)) {
                     if (!this.isActiveConversation(conversationId)) {
                         return agentRun;
                     }
-                    this.AgentRunsByDetailId.set(conversationDetailId, agentRun);
-                    // Also update ConversationEngine's cache for other consumers
-                    if (conversationId) {
-                        ConversationEngine.Instance.SetAgentRunForDetail(conversationId, conversationDetailId, agentRun);
+                    if (!existingRun || ShouldReplaceDetailAgentRun(existingRun, agentRun)) {
+                        this.AgentRunsByDetailId.set(conversationDetailId, agentRun);
+                        // Also update ConversationEngine's cache for other consumers
+                        if (conversationId) {
+                            ConversationEngine.Instance.SetAgentRunForDetail(conversationId, conversationDetailId, agentRun);
+                        }
+                    }
+                    else if (forceRefresh && !UUIDsEqual(existingRun.ID, agentRun.ID)) {
+                        // A continuation synthesis run completed, but existingRun is the primary
+                        // root orchestrating run — reload existingRun so its final status/timestamps are fresh.
+                        await existingRun.Load(existingRun.ID);
+                        if (conversationId) {
+                            ConversationEngine.Instance.SetAgentRunForDetail(conversationId, conversationDetailId, existingRun);
+                        }
+                    }
+                    // Refresh the target message in place when already rendered; fall back to
+                    // shallow array copy only when the message is not yet mounted in the list.
+                    const targetMessage = this.messages.find(m => UUIDsEqual(m.ID, conversationDetailId));
+                    if (!targetMessage || !this.messageListComponent?.RefreshRenderedMessage(targetMessage, { markStreaming: false })) {
+                        this.messages = [...this.messages];
                     }
-                    // Force message list to re-render with updated agent run
-                    // Keep same Map reference so message-list component can access updates
-                    this.messages = [...this.messages];
                     this.cdr.detectChanges();
                 }
-                return agentRun;
+                return this.AgentRunsByDetailId.get(conversationDetailId) ?? agentRun;
             }
             else {
-                return this.AgentRunsByDetailId.get(conversationDetailId);
+                return existingRun;
             }
         }
         catch (error) {
@@ -6381,7 +6578,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         return {
             Versions: SnapshotArtifactVersions(this.allArtifactRefs()),
             conversationId: this.ConversationId,
-            MapConversationId: this.lastLoadedConversationId,
+            MapConversationId: this.artifactMapConversationId ?? this.lastLoadedConversationId,
             MapGeneration: this.artifactMapGeneration,
             SelectionEpoch: this.artifactSelectionEpoch,
         };
@@ -6513,17 +6710,30 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     get hasSystemArtifacts() {
         return this.HasSystemArtifacts;
     }
+    _artifactsArrayCache = [];
+    _artifactsArrayKey = '';
     /**
-     * Get unique artifacts grouped by artifact ID (not by conversation detail)
-     * Returns the latest version info for each unique artifact with all versions
-     * Works with LazyArtifactInfo - uses display data without loading full entities
-     * Respects showSystemArtifacts toggle
+     * Get unique artifacts grouped by artifact ID (not by conversation detail).
+     * Returns the latest version info for each unique artifact with all versions.
+     * Works with LazyArtifactInfo - uses display data without loading full entities.
+     * Respects showSystemArtifacts toggle and memoizes the result across CD passes.
      */
     GetArtifactsArray() {
+        const effectiveMap = this.EffectiveArtifactsMap;
+        let sig = `${this.ShowSystemArtifacts ? 1 : 0}|${effectiveMap.size}|`;
+        for (const artifactList of effectiveMap.values()) {
+            for (const info of artifactList) {
+                sig += `${info.artifactVersionId}:${info.artifactName ?? ''};`;
+            }
+        }
+        if (sig === this._artifactsArrayKey) {
+            return this._artifactsArrayCache;
+        }
+        this._artifactsArrayKey = sig;
         const artifactMap = new Map();
         // Group by artifactId, collecting all version details
         // Use effectiveArtifactsMap to respect showSystemArtifacts toggle
-        for (const artifactList of this.EffectiveArtifactsMap.values()) {
+        for (const artifactList of effectiveMap.values()) {
             for (const info of artifactList) {
                 const artifactId = info.artifactId;
                 const versionId = info.artifactVersionId;
@@ -6550,7 +6760,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             }
         }
         // Convert to array with version count, sorted by version number descending
-        return Array.from(artifactMap.values()).map(item => ({
+        this._artifactsArrayCache = Array.from(artifactMap.values()).map(item => ({
             artifactId: item.artifactId,
             versionId: item.versionId,
             name: item.name,
@@ -6558,6 +6768,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             versionCount: item.versions.length,
             versions: item.versions.sort((a, b) => b.versionNumber - a.versionNumber)
         }));
+        return this._artifactsArrayCache;
     }
     /** @deprecated Use {@link GetArtifactsArray}. */
     getArtifactsArray() {
@@ -6699,12 +6910,13 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         return this.ReadOnly || this.IsReadOnlyView;
     }
     /**
-     * True when this person may start forks in the open conversation: holds `Conversations: Fork`, has not
-     * switched forking off in My Profile, and may write. When false, no fork action is offered and Edit and
-     * Regenerate change the latest turn in place.
+     * True when this person may start forks in the open conversation: the host allows forking
+     * ({@link AllowForking}), the person holds `Conversations: Fork`, has not switched forking off in My
+     * Profile, and may write. When false, no fork action is offered and Edit and Regenerate change the
+     * latest turn in place.
      */
     get CanFork() {
-        return CanForkFrom({
+        return this.AllowForking !== false && CanForkFrom({
             HoldsAuthorization: UserHoldsAuthorization(this.CurrentUser, CONVERSATIONS_FORK_AUTHORIZATION, this.ProviderToUse),
             SettingValue: this.forkingSettingValue(),
             MayWrite: !this.EffectiveReadOnly,
@@ -6943,7 +7155,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         message.IsPinned = false;
         this.cdr.detectChanges();
         try {
-            await message.Save();
+            if (!(await SavePinState(this.ProviderToUse, message.ID, false))) {
+                throw new Error(`the pin on message ${message.ID} could not be saved`);
+            }
             this.OnMessagePinToggled(message);
         }
         catch (err) {
@@ -7162,6 +7376,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             // No specific version, let viewer default to latest
             this.SelectedVersionNumber = undefined;
         }
+        this.SelectedTaskGraphPanel = null;
         this.ShowArtifactPanel = true;
         // Load permissions for the selected artifact
         await this.loadArtifactPermissions(data.artifactId, conversationId, data.artifactId);
@@ -7177,6 +7392,72 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     async onArtifactClicked(data) {
         return this.OnArtifactClicked(data);
     }
+    OnTaskGraphPanelRequested(data) {
+        if (!data?.parentTaskId) {
+            return;
+        }
+        if (this.SelectedTaskGraphPanel && UUIDsEqual(this.SelectedTaskGraphPanel.parentTaskId, data.parentTaskId)) {
+            this.OnCloseTaskGraphPanel();
+            return;
+        }
+        this.ShowArtifactPanel = false;
+        this.SelectedArtifactId = null;
+        this.SelectedTaskGraphPanel = {
+            parentTaskId: data.parentTaskId,
+            workflowTitle: data.workflowTitle || data.workflowName || 'Task Graph',
+        };
+        this.cdr.detectChanges();
+    }
+    IsSavingTaskGraphWorkflow = false;
+    OnCloseTaskGraphPanel() {
+        this.SelectedTaskGraphPanel = null;
+        this.resetArtifactPaneSizing();
+        this.cdr.detectChanges();
+    }
+    /**
+     * Persists the currently displayed Task Graph in the chat side-panel as a reusable
+     * Draft Flow Agent workflow via {@link WorkflowSaveOperation} and opens the new
+     * `MJ: AI Agents` record.
+     */
+    async OnSaveTaskGraphAsWorkflow(spec) {
+        if (!spec?.tasks?.length || this.IsSavingTaskGraphWorkflow) {
+            return;
+        }
+        this.IsSavingTaskGraphWorkflow = true;
+        this.cdr.detectChanges();
+        try {
+            const name = spec.workflowName?.trim() ||
+                this.SelectedTaskGraphPanel?.workflowTitle?.trim() ||
+                'Saved Workflow';
+            const workflowSpec = {
+                name,
+                description: `Saved from Conversation ${this.Conversation?.Name || this.ConversationId || ''}`.trim(),
+                status: 'Draft',
+                graph: { ...spec, workflowName: name },
+                triggers: [],
+            };
+            const op = new WorkflowSaveOperation();
+            const result = await op.Execute({ spec: workflowSpec }, { provider: this.ProviderToUse, user: this.CurrentUser });
+            const output = result.Output;
+            if (!result.Success || !output?.success || !output.agentID) {
+                MJNotificationService.Instance.CreateSimpleNotification(output?.errorMessage ?? result.ErrorMessage ?? 'Could not save workflow.', 'error', 5000);
+                return;
+            }
+            MJNotificationService.Instance.CreateSimpleNotification(`Saved workflow "${name}". Opening Flow Agent record…`, 'success', 3500);
+            this.OpenEntityRecord.emit({
+                entityName: 'MJ: AI Agents',
+                compositeKey: CompositeKey.FromID(output.agentID),
+            });
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            MJNotificationService.Instance.CreateSimpleNotification(`Failed to save workflow: ${msg}`, 'error', 5000);
+        }
+        finally {
+            this.IsSavingTaskGraphWorkflow = false;
+            this.cdr.detectChanges();
+        }
+    }
     async OnArtifactCreated(data) {
         // Guard: ignore artifacts created by a background conversation's agent after a swap.
         // Without this, reloadArtifactsForMessage -> loadPeripheralData would CLEAR the active
@@ -7387,11 +7668,11 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }
     }
     /**
-     * LocalStorage persistence methods for artifact pane
+     * UserInfoEngine persistence methods for artifact pane width
      */
     loadArtifactPaneWidth() {
         try {
-            const saved = localStorage.getItem(this.ARTIFACT_PANE_WIDTH_KEY);
+            const saved = UserInfoEngine.Instance?.GetSetting(this.ARTIFACT_PANE_WIDTH_KEY);
             if (saved) {
                 const width = parseFloat(saved);
                 if (!isNaN(width) && width >= 20 && width <= 70) {
@@ -7400,15 +7681,15 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             }
         }
         catch (error) {
-            console.warn('Failed to load artifact pane width from localStorage:', error);
+            console.warn('Failed to load artifact pane width from UserInfoEngine:', error);
         }
     }
     saveArtifactPaneWidth() {
         try {
-            localStorage.setItem(this.ARTIFACT_PANE_WIDTH_KEY, this.ArtifactPaneWidth.toString());
+            UserInfoEngine.Instance?.SetSettingDebounced(this.ARTIFACT_PANE_WIDTH_KEY, this.ArtifactPaneWidth.toString());
         }
         catch (error) {
-            console.warn('Failed to save artifact pane width to localStorage:', error);
+            console.warn('Failed to save artifact pane width to UserInfoEngine:', error);
         }
     }
     OnConversationRenamed(event) {
@@ -7508,6 +7789,93 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     onOpenEntityRecord(event) {
         return this.OnOpenEntityRecord(event);
     }
+    /**
+     * Returns true when an `open:resource` command refers to a conversation artifact or generated file
+     * (either explicitly via `resourceType: 'Artifact' | 'File'` or via `resourceType: 'Record'` with
+     * an artifact/file entity name).
+     */
+    isConversationArtifactCommand(command) {
+        const rt = (command.resourceType ?? '').trim().toLowerCase();
+        if (rt === 'artifact' || rt === 'file') {
+            return true;
+        }
+        if (rt === 'record' && command.entityName) {
+            const normalizedEntity = command.entityName.trim().toLowerCase();
+            return (normalizedEntity === 'mj: artifacts' ||
+                normalizedEntity === 'artifacts' ||
+                normalizedEntity === 'mj: artifact versions' ||
+                normalizedEntity === 'artifact versions' ||
+                normalizedEntity === 'mj: files' ||
+                normalizedEntity === 'files');
+        }
+        return false;
+    }
+    /**
+     * Opens the matching (or most recent) artifact in the current conversation's artifact viewer panel.
+     * Returns true if a conversation artifact was found and opened.
+     */
+    OpenConversationArtifactForCommand(command) {
+        const rawTarget = String(command.resourceId ?? '').trim();
+        const labelTarget = String(command.label ?? '').trim().toLowerCase();
+        let latestArtifact = null;
+        let matchedArtifact = null;
+        for (const artifacts of this.ArtifactsByDetailId.values()) {
+            for (const item of artifacts) {
+                latestArtifact = item;
+                if (rawTarget && (UUIDsEqual(item.ArtifactId, rawTarget) || UUIDsEqual(item.ArtifactVersionId, rawTarget))) {
+                    matchedArtifact = item;
+                }
+                else if (rawTarget && (item.ArtifactName?.toLowerCase() === rawTarget.toLowerCase() || item.VersionName?.toLowerCase() === rawTarget.toLowerCase())) {
+                    matchedArtifact = item;
+                }
+                else if (!matchedArtifact && labelTarget && item.ArtifactName && labelTarget.includes(item.ArtifactName.toLowerCase())) {
+                    matchedArtifact = item;
+                }
+            }
+        }
+        const chosen = matchedArtifact ?? latestArtifact;
+        if (!chosen) {
+            return false;
+        }
+        void this.OnArtifactClicked({
+            artifactId: chosen.ArtifactId,
+            versionId: chosen.ArtifactVersionId
+        });
+        return true;
+    }
+    /**
+     * Handles non-Record `open:resource` commands when rendered inside the floating chat overlay
+     * (`OverlayMode === true`), where `ChatConversationsResource` is not mounted.
+     */
+    handleOverlayOpenResourceCommand(command) {
+        const rt = (command.resourceType ?? '').trim().toLowerCase();
+        if (rt === 'report' || rt === 'dashboard') {
+            if (!this.OpenConversationArtifactForCommand(command)) {
+                MJNotificationService.Instance?.CreateSimpleNotification('No artifact found in this conversation to open.', 'info', 3500);
+            }
+            return;
+        }
+        if (rt === 'app' || rt === 'navitem') {
+            const appName = rt === 'app' ? command.resourceId : command.entityName;
+            const navItemName = rt === 'navitem'
+                ? (command.resourceId || command.entityName || '')
+                : (command.entityName || command.resourceId || '');
+            let queryParams;
+            if (command.parameters && Object.keys(command.parameters).length > 0) {
+                queryParams = {};
+                for (const [k, v] of Object.entries(command.parameters)) {
+                    if (v != null) {
+                        queryParams[k] = String(v);
+                    }
+                }
+            }
+            this.navigationRequest.emit({
+                navItemName,
+                appName,
+                queryParams
+            });
+        }
+    }
     /** Record `open:resource` buttons → same openEntityRecord chain as agent-run links. */
     emitOpenResourceRecord(command) {
         if (!command.entityName)
@@ -7515,13 +7883,31 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         const entity = this.ProviderToUse.EntityByName(command.entityName);
         if (!entity) {
             console.warn('open:resource: unknown entity', command.entityName);
+            MJNotificationService.Instance?.CreateSimpleNotification(`Unable to open record: unknown entity "${command.entityName}".`, 'info', 4000);
             return;
         }
         const compositeKey = ConversationUtility.CompositeKeyFromOpenResource(command, entity.PrimaryKeys.map(pk => pk.Name));
         if (!compositeKey) {
             console.warn('open:resource: incomplete primary key', command.entityName, command);
+            MJNotificationService.Instance?.CreateSimpleNotification(`Unable to open ${command.entityName}: no record identifier was provided.`, 'info', 4000);
             return;
         }
+        // Guard against LLM-emitted placeholder IDs (e.g., "<FileID from storage result>") or non-UUID strings
+        // on uniqueidentifier primary keys so we don't navigate to a broken form URL.
+        for (const kv of compositeKey.KeyValuePairs) {
+            const rawVal = String(kv.Value ?? '').trim();
+            const pkField = entity.PrimaryKeys.find(pk => pk.Name === kv.FieldName);
+            const isUuidPk = pkField?.Type?.toLowerCase() === 'uniqueidentifier';
+            const isPlaceholder = !rawVal || (rawVal.startsWith('<') && rawVal.endsWith('>'));
+            if (isPlaceholder || (isUuidPk && !IsValidUUID(rawVal))) {
+                if (this.OpenConversationArtifactForCommand(command)) {
+                    return;
+                }
+                console.warn('open:resource: invalid or placeholder primary key value', command.entityName, kv);
+                MJNotificationService.Instance?.CreateSimpleNotification(`Unable to open ${command.entityName}: invalid record ID "${rawVal}".`, 'info', 4000);
+                return;
+            }
+        }
         this.OpenEntityRecord.emit({ entityName: command.entityName, compositeKey });
     }
     OnNavigationRequest(event) {
@@ -8556,17 +8942,21 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (!result.Success || !this.isActiveConversationLoad(conversationId, loadToken)) {
             return;
         }
-        // `OrderBy __mj_CreatedAt DESC` puts the newest run first, so the first row seen for a detail
-        // in THIS pass wins — a retried message must reconcile against its latest run, not its first.
-        // Tracked per pass rather than by consulting the map, which usually already holds a run from
-        // an earlier pass and is cleared only on conversation load.
-        const seenDetailIds = new Set();
+        // Select the preferred root primary orchestrating run per detail in THIS pass
+        // (prioritizing ParentRunID == null and ContinuationDepth == 0 over continuation
+        // synthesis runs, and newest __mj_CreatedAt among ties so retried messages use their latest run).
+        const chosenByDetailId = new Map();
         for (const run of result.Results || []) {
             const detailId = run.ConversationDetailID;
-            if (!detailId || seenDetailIds.has(detailId)) {
+            if (!detailId) {
                 continue;
             }
-            seenDetailIds.add(detailId);
+            const existing = chosenByDetailId.get(detailId);
+            if (ShouldReplaceDetailAgentRun(existing, run)) {
+                chosenByDetailId.set(detailId, run);
+            }
+        }
+        for (const [detailId, run] of chosenByDetailId.entries()) {
             this.AgentRunsByDetailId.set(detailId, run);
         }
         // New map reference so OnPush children re-read it.
@@ -8821,6 +9211,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     scrollToMessage(messageId) {
         // Wait for DOM to update, then scroll
         setTimeout(() => {
+            if (this.messageListComponent?.ScrollToMessage(messageId)) {
+                return;
+            }
             const messageElement = document.querySelector(`[data-message-id="${messageId}"]`);
             if (messageElement) {
                 messageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -8905,40 +9298,41 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.titleRenameButton = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.forksButton = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageInputComponents = _t);
-        } }, inputs: { EnvironmentId: "EnvironmentId", environmentId: "environmentId", CurrentUser: "CurrentUser", currentUser: "currentUser", ConversationId: "ConversationId", conversationId: "conversationId", Conversation: "Conversation", conversation: "conversation", SuppressNewConversationEmptyState: "SuppressNewConversationEmptyState", suppressNewConversationEmptyState: "suppressNewConversationEmptyState", AllowMentions: "AllowMentions", allowMentions: "allowMentions", AllowAgentMentions: "AllowAgentMentions", allowAgentMentions: "allowAgentMentions", AllowEntityMentions: "AllowEntityMentions", allowEntityMentions: "allowEntityMentions", AllowSkillCommands: "AllowSkillCommands", allowSkillCommands: "allowSkillCommands", AllowAttachments: "AllowAttachments", allowAttachments: "allowAttachments", AllowPlanMode: "AllowPlanMode", allowPlanMode: "allowPlanMode", AllowRealtime: "AllowRealtime", allowRealtime: "allowRealtime", ShowEmptyFill: "ShowEmptyFill", showEmptyFill: "showEmptyFill", ShowLoadingState: "ShowLoadingState", showLoadingState: "showLoadingState", ReadReplyFromTop: "ReadReplyFromTop", readReplyFromTop: "readReplyFromTop", ShowAgentRunDetails: "ShowAgentRunDetails", showAgentRunDetails: "showAgentRunDetails", ShowReactions: "ShowReactions", showReactions: "showReactions", ShowMessageRating: "ShowMessageRating", showMessageRating: "showMessageRating", AllowPinning: "AllowPinning", allowPinning: "allowPinning", AllowMessageEdit: "AllowMessageEdit", allowMessageEdit: "allowMessageEdit", AllowMessageDelete: "AllowMessageDelete", allowMessageDelete: "allowMessageDelete", ReadOnly: "ReadOnly", ReadOnlyMessage: "ReadOnlyMessage", ShowSuggestedPrompts: "ShowSuggestedPrompts", showSuggestedPrompts: "showSuggestedPrompts", ShowDateNavigation: "ShowDateNavigation", showDateNavigation: "showDateNavigation", AssistantDisplayName: "AssistantDisplayName", assistantDisplayName: "assistantDisplayName", AssistantAvatarUrl: "AssistantAvatarUrl", assistantAvatarUrl: "assistantAvatarUrl", IsNewConversation: "IsNewConversation", isNewConversation: "isNewConversation", PendingMessage: "PendingMessage", pendingMessage: "pendingMessage", PendingMessageConversationId: "PendingMessageConversationId", pendingMessageConversationId: "pendingMessageConversationId", PendingAttachments: "PendingAttachments", pendingAttachments: "pendingAttachments", PendingArtifactId: "PendingArtifactId", pendingArtifactId: "pendingArtifactId", PendingArtifactVersionNumber: "PendingArtifactVersionNumber", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", PendingArtifactConversationId: "PendingArtifactConversationId", pendingArtifactConversationId: "pendingArtifactConversationId", OverlayMode: "OverlayMode", overlayMode: "overlayMode", ShowExportButton: "ShowExportButton", showExportButton: "showExportButton", ExportButtonLabel: "ExportButtonLabel", exportButtonLabel: "exportButtonLabel", ExportButtonIcon: "ExportButtonIcon", exportButtonIcon: "exportButtonIcon", ExportBranding: "ExportBranding", exportBranding: "exportBranding", ShowShareButton: "ShowShareButton", showShareButton: "showShareButton", ShowArtifactIndicator: "ShowArtifactIndicator", showArtifactIndicator: "showArtifactIndicator", AppContext: "AppContext", appContext: "appContext", DefaultAgentId: "DefaultAgentId", defaultAgentId: "defaultAgentId", AgentReplyMode: "AgentReplyMode", AllowedAgentIDs: "AllowedAgentIDs", MentionPeople: "MentionPeople", AgentHistoryFrom: "AgentHistoryFrom", AgentTurnHandler: "AgentTurnHandler", AutoNameConversation: "AutoNameConversation", EnableDecisionRouting: "EnableDecisionRouting", ApplicationScope: "ApplicationScope", applicationScope: "applicationScope", ApplicationId: "ApplicationId", applicationId: "applicationId", LinkedEntityId: "LinkedEntityId", linkedEntityId: "linkedEntityId", LinkedRecordId: "LinkedRecordId", linkedRecordId: "linkedRecordId", ShowAgentPicker: "ShowAgentPicker", showAgentPicker: "showAgentPicker", ShowAgentModePicker: "ShowAgentModePicker", showAgentModePicker: "showAgentModePicker", EmptyStateGreeting: "EmptyStateGreeting", emptyStateGreeting: "emptyStateGreeting", ShowSidebarToggle: "ShowSidebarToggle", showSidebarToggle: "showSidebarToggle", ShowAgentCharacter: "ShowAgentCharacter", showAgentCharacter: "showAgentCharacter", AgentCharacterConfig: "AgentCharacterConfig", agentCharacterConfig: "agentCharacterConfig", EmptyStateConfig: "EmptyStateConfig", emptyStateConfig: "emptyStateConfig", ShowDemonstrationSurface: "ShowDemonstrationSurface", showDemonstrationSurface: "showDemonstrationSurface", DemonstrationSurfaceContent: "DemonstrationSurfaceContent", demonstrationSurfaceContent: "demonstrationSurfaceContent", AllowStopRun: "AllowStopRun", ComposerDraft: "ComposerDraft", composerDraft: "composerDraft", ComposerAgentMention: "ComposerAgentMention", composerAgentMention: "composerAgentMention" }, outputs: { BeforeAgentTurn: "BeforeAgentTurn", beforeAgentTurn: "beforeAgentTurn", AfterAgentTurn: "AfterAgentTurn", afterAgentTurn: "afterAgentTurn", BeforeToolInvoked: "BeforeToolInvoked", beforeToolInvoked: "beforeToolInvoked", AfterToolInvoked: "AfterToolInvoked", afterToolInvoked: "afterToolInvoked", BeforeResponseFormSubmitted: "BeforeResponseFormSubmitted", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", AfterResponseFormSubmitted: "AfterResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", BeforeStopClicked: "BeforeStopClicked", AfterStopClicked: "AfterStopClicked", SessionStarted: "SessionStarted", sessionStarted: "sessionStarted", SessionChannelStateChanged: "SessionChannelStateChanged", sessionChannelStateChanged: "sessionChannelStateChanged", SessionEnded: "SessionEnded", sessionEnded: "sessionEnded", ConversationRenamed: "ConversationRenamed", conversationRenamed: "conversationRenamed", OpenEntityRecord: "OpenEntityRecord", openEntityRecord: "openEntityRecord", RealtimeConversationReady: "RealtimeConversationReady", realtimeConversationReady: "realtimeConversationReady", navigationRequest: "navigationRequest", TaskClicked: "TaskClicked", taskClicked: "taskClicked", ArtifactLinkClicked: "ArtifactLinkClicked", artifactLinkClicked: "artifactLinkClicked", SidebarToggleClicked: "SidebarToggleClicked", sidebarToggleClicked: "sidebarToggleClicked", ConversationCreated: "ConversationCreated", conversationCreated: "conversationCreated", PendingArtifactConsumed: "PendingArtifactConsumed", pendingArtifactConsumed: "pendingArtifactConsumed", PendingMessageConsumed: "PendingMessageConsumed", pendingMessageConsumed: "pendingMessageConsumed", PendingMessageRequested: "PendingMessageRequested", pendingMessageRequested: "pendingMessageRequested", ComposerDraftConsumed: "ComposerDraftConsumed", composerDraftConsumed: "composerDraftConsumed", ComposerAgentMentionConsumed: "ComposerAgentMentionConsumed", composerAgentMentionConsumed: "composerAgentMentionConsumed" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 29, vars: 35, consts: [["titleBar", ""], ["titleName", ""], ["forksButton", ""], ["titleNameInput", ""], ["titleRenameButton", ""], ["emptyStateInput", ""], ["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], [1, "chat-agent-presence", 3, "chat-agent-presence--prominent"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-demonstration-stage"], [1, "chat-messages-pane"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "pinnedMessages", "isLoading", "AllowUnpin"], [3, "PanelID", "Summaries", "CurrentUserID"], [3, "cancelled", "exported", "branding", "isVisible", "conversation", "Scope", "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-header", 3, "keydown.escape"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "shared-by-badge", 3, "title"], [1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [1, "chat-actions", "chat-actions-buttons"], ["mjButton", "", "Variant", "flat", "Size", "sm", "aria-haspopup", "dialog", "title", "Forks in this conversation", 1, "forks-button", 3, "active"], ["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", "AllowedAgentIDs", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "shared", "title"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], [4, "ngTemplateOutlet"], [1, "fas", "fa-share-nodes"], [1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["mjButton", "", "Variant", "flat", "Size", "sm", "aria-haspopup", "dialog", "title", "Forks in this conversation", 1, "forks-button", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "btn-label"], [1, "forks-count"], ["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", 3, "click", "title"], [1, "chat-title-bar"], ["aria-label", "Breadcrumb", 1, "chat-title-path"], [1, "chat-title-crumbs"], ["aria-current", "page", 1, "chat-title-current"], ["aria-hidden", "true"], [1, "chat-title-crumb", "chat-title-ellipsis", 3, "collapses-wide"], [1, "chat-title-crumb"], ["mjButton", "", "Variant", "flat", "Size", "sm", "type", "button", 3, "click", "title"], [1, "chat-title-crumb-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-right", "chat-title-sep"], [1, "chat-title-crumb", "chat-title-ellipsis"], ["mjButton", "", "Variant", "flat", "Size", "sm", "type", "button", "aria-label", "Show the whole path", "title", "Show the whole path", 3, "click"], ["type", "text", "maxlength", "255", 1, "chat-title-input", 3, "ngModel"], ["type", "text", "maxlength", "255", 1, "chat-title-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "blur", "ngModel"], [1, "chat-title", 3, "title"], ["mjButton", "", "Variant", "icon", "Size", "sm", "type", "button", 1, "chat-title-rename", 3, "title"], ["mjButton", "", "Variant", "icon", "Size", "sm", "type", "button", 1, "chat-title-rename", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], [1, "conversation-loading-state"], ["text", "Loading conversation...", "size", "large"], ["role", "status", 1, "read-only-banner"], [3, "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "AllowedAgentIDs", "MentionPeople", "ComposerExtraTemplate", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "fas", "fa-eye"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "sidebarToggleClicked", "messageSent", "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "AllowedAgentIDs", "MentionPeople", "ComposerExtraTemplate", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "chat-composer-extra"], [1, "message-input-container-wrapper"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "emptyStateSubmit", "emptyStateMode", "initialDraft", "currentUser", "disabled", "ReadOnly", "appContext", "applicationId", "defaultAgentId", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "AllowedAgentIDs", "MentionPeople", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], ["role", "region", "aria-label", "Fork", 1, "fork-view-bar"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll", "keydown.escape"], [3, "OlderRequested", "DateJumpRequested", "ForkOpenRequested", "EditResendRequested", "RegenerateRequested", "ResendInPlaceRequested", "ForkRequested", "realtimeSessionOpenRequested", "deleteMessage", "BeforeStopClicked", "StopMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "diagnosticRequested", "LivenessCheckRequested", "messagePinToggled", "beforeResponseFormSubmitted", "afterResponseFormSubmitted", "showEmptyFill", "showDateNavigation", "showAgentRunDetails", "showReactions", "showMessageRating", "allowPinning", "allowMessageEdit", "allowMessageDelete", "ReadOnly", "AllowStopRun", "InFlightCount", "assistantDisplayName", "assistantAvatarUrl", "messages", "HasMoreAbove", "IsLoadingOlder", "ScrollRoot", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap", "messageRendererTemplate", "messageExtraTemplate", "sessionMetaMap", "ForkChipMap", "ForkLayout", "CanFork", "InPlaceTurn"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "loading-peripheral-placeholder"], ["role", "region", "aria-label", "Fork", 1, "fork-view-bar", 3, "keydown.escape"], ["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"], [3, "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "AgentReplyMode", "AllowedAgentIDs", "MentionPeople", "AgentHistoryFrom", "TargetBranchID", "ResolveTargetBranch", "AgentTurnHandler", "AutoNameConversation", "EnableDecisionRouting", "inProgressMessageIds", "disabled", "ReadOnly", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "Placeholder", "SendSlotMode", "StopCount", "StopLabel", "StatusText", "StatusElapsed", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "fork-composer-hint"], [3, "DraftStateChanged", "ComposerBlurred", "StopClicked", "initialMessageAutoSendStarted", "initialMessageAutoSendFailed", "messageSent", "MessageStreamed", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "AgentReplyMode", "AllowedAgentIDs", "MentionPeople", "AgentHistoryFrom", "TargetBranchID", "ResolveTargetBranch", "AgentTurnHandler", "AutoNameConversation", "EnableDecisionRouting", "inProgressMessageIds", "disabled", "ReadOnly", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "Placeholder", "SendSlotMode", "StopCount", "StopLabel", "StatusText", "StatusElapsed", "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", "Scope", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [3, "closed", "jumpRequested", "unpinRequested", "pinnedMessages", "isLoading", "AllowUnpin"], [3, "ForkSelected", "Closed", "PanelID", "Summaries", "CurrentUserID"], [3, "NavigateRequest", "StartLiveRequested", "ReviewClosed", "AgentName", "Hidden", "CurrentUser", "EnvironmentID", "ReviewData", "AllowStartLive", "Chrome", "Compact", "ShowDevLinks", "ShowDensityPicker"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill", 3, "click"], ["aria-hidden", "true", 1, "voice-call-pill__pulse"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-volume"], [1, "voice-call-pill__text"], [1, "voice-call-pill__name"], [1, "voice-call-pill__hint"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], ["Icon", "fa-solid fa-cube", "Title", "No artifacts in this conversation yet", 1, "artifacts-empty-fill"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "completed", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "closed", "data", "visible"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 8);
-            i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Template, 3, 3, "div", 9);
-            i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_2_Template, 1, 8, "ng-container")(3, ConversationChatAreaComponent_Conditional_3_Template, 17, 16, "div", 10);
+        } }, inputs: { EnvironmentId: "EnvironmentId", environmentId: "environmentId", CurrentUser: "CurrentUser", currentUser: "currentUser", ConversationId: "ConversationId", conversationId: "conversationId", Conversation: "Conversation", conversation: "conversation", SuppressNewConversationEmptyState: "SuppressNewConversationEmptyState", suppressNewConversationEmptyState: "suppressNewConversationEmptyState", AllowMentions: "AllowMentions", allowMentions: "allowMentions", AllowAgentMentions: "AllowAgentMentions", allowAgentMentions: "allowAgentMentions", AllowEntityMentions: "AllowEntityMentions", allowEntityMentions: "allowEntityMentions", AllowSkillCommands: "AllowSkillCommands", allowSkillCommands: "allowSkillCommands", AllowAttachments: "AllowAttachments", allowAttachments: "allowAttachments", AllowPlanMode: "AllowPlanMode", allowPlanMode: "allowPlanMode", AllowRealtime: "AllowRealtime", allowRealtime: "allowRealtime", AllowForking: "AllowForking", AllowStopRun: "AllowStopRun", ShowEmptyFill: "ShowEmptyFill", showEmptyFill: "showEmptyFill", ShowLoadingState: "ShowLoadingState", showLoadingState: "showLoadingState", ReadReplyFromTop: "ReadReplyFromTop", readReplyFromTop: "readReplyFromTop", ShowAgentRunDetails: "ShowAgentRunDetails", showAgentRunDetails: "showAgentRunDetails", ShowReactions: "ShowReactions", showReactions: "showReactions", ShowMessageRating: "ShowMessageRating", showMessageRating: "showMessageRating", AllowPinning: "AllowPinning", allowPinning: "allowPinning", AllowMessageEdit: "AllowMessageEdit", allowMessageEdit: "allowMessageEdit", AllowMessageDelete: "AllowMessageDelete", allowMessageDelete: "allowMessageDelete", ReadOnly: "ReadOnly", ReadOnlyMessage: "ReadOnlyMessage", ShowSuggestedPrompts: "ShowSuggestedPrompts", showSuggestedPrompts: "showSuggestedPrompts", ShowDateNavigation: "ShowDateNavigation", showDateNavigation: "showDateNavigation", AssistantDisplayName: "AssistantDisplayName", assistantDisplayName: "assistantDisplayName", AssistantAvatarUrl: "AssistantAvatarUrl", assistantAvatarUrl: "assistantAvatarUrl", IsNewConversation: "IsNewConversation", isNewConversation: "isNewConversation", PendingMessage: "PendingMessage", pendingMessage: "pendingMessage", PendingMessageConversationId: "PendingMessageConversationId", pendingMessageConversationId: "pendingMessageConversationId", PendingAttachments: "PendingAttachments", pendingAttachments: "pendingAttachments", PendingArtifactId: "PendingArtifactId", pendingArtifactId: "pendingArtifactId", PendingArtifactVersionNumber: "PendingArtifactVersionNumber", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", PendingArtifactConversationId: "PendingArtifactConversationId", pendingArtifactConversationId: "pendingArtifactConversationId", OverlayMode: "OverlayMode", overlayMode: "overlayMode", ShowExportButton: "ShowExportButton", showExportButton: "showExportButton", ExportButtonLabel: "ExportButtonLabel", exportButtonLabel: "exportButtonLabel", ExportButtonIcon: "ExportButtonIcon", exportButtonIcon: "exportButtonIcon", ExportBranding: "ExportBranding", exportBranding: "exportBranding", ShowShareButton: "ShowShareButton", showShareButton: "showShareButton", ShowArtifactIndicator: "ShowArtifactIndicator", showArtifactIndicator: "showArtifactIndicator", AppContext: "AppContext", appContext: "appContext", DefaultAgentId: "DefaultAgentId", defaultAgentId: "defaultAgentId", AgentReplyMode: "AgentReplyMode", AllowedAgentIDs: "AllowedAgentIDs", MentionPeople: "MentionPeople", AgentHistoryFrom: "AgentHistoryFrom", AgentTurnHandler: "AgentTurnHandler", AutoNameConversation: "AutoNameConversation", EnableDecisionRouting: "EnableDecisionRouting", ApplicationScope: "ApplicationScope", applicationScope: "applicationScope", ApplicationId: "ApplicationId", applicationId: "applicationId", LinkedEntityId: "LinkedEntityId", linkedEntityId: "linkedEntityId", LinkedRecordId: "LinkedRecordId", linkedRecordId: "linkedRecordId", ShowAgentPicker: "ShowAgentPicker", showAgentPicker: "showAgentPicker", ShowAgentModePicker: "ShowAgentModePicker", showAgentModePicker: "showAgentModePicker", EmptyStateGreeting: "EmptyStateGreeting", emptyStateGreeting: "emptyStateGreeting", ShowSidebarToggle: "ShowSidebarToggle", showSidebarToggle: "showSidebarToggle", ShowAgentCharacter: "ShowAgentCharacter", showAgentCharacter: "showAgentCharacter", AgentCharacterConfig: "AgentCharacterConfig", agentCharacterConfig: "agentCharacterConfig", EmptyStateConfig: "EmptyStateConfig", emptyStateConfig: "emptyStateConfig", ShowDemonstrationSurface: "ShowDemonstrationSurface", showDemonstrationSurface: "showDemonstrationSurface", DemonstrationSurfaceContent: "DemonstrationSurfaceContent", demonstrationSurfaceContent: "demonstrationSurfaceContent", ComposerDraft: "ComposerDraft", composerDraft: "composerDraft", ComposerAgentMention: "ComposerAgentMention", composerAgentMention: "composerAgentMention" }, outputs: { BeforeAgentTurn: "BeforeAgentTurn", beforeAgentTurn: "beforeAgentTurn", AfterAgentTurn: "AfterAgentTurn", afterAgentTurn: "afterAgentTurn", BeforeToolInvoked: "BeforeToolInvoked", beforeToolInvoked: "beforeToolInvoked", AfterToolInvoked: "AfterToolInvoked", afterToolInvoked: "afterToolInvoked", BeforeResponseFormSubmitted: "BeforeResponseFormSubmitted", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", AfterResponseFormSubmitted: "AfterResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", BeforeStopClicked: "BeforeStopClicked", AfterStopClicked: "AfterStopClicked", SessionStarted: "SessionStarted", sessionStarted: "sessionStarted", SessionChannelStateChanged: "SessionChannelStateChanged", sessionChannelStateChanged: "sessionChannelStateChanged", SessionEnded: "SessionEnded", sessionEnded: "sessionEnded", ConversationRenamed: "ConversationRenamed", conversationRenamed: "conversationRenamed", OpenEntityRecord: "OpenEntityRecord", openEntityRecord: "openEntityRecord", RealtimeConversationReady: "RealtimeConversationReady", realtimeConversationReady: "realtimeConversationReady", navigationRequest: "navigationRequest", TaskClicked: "TaskClicked", taskClicked: "taskClicked", ArtifactLinkClicked: "ArtifactLinkClicked", artifactLinkClicked: "artifactLinkClicked", SidebarToggleClicked: "SidebarToggleClicked", sidebarToggleClicked: "sidebarToggleClicked", ConversationCreated: "ConversationCreated", conversationCreated: "conversationCreated", PendingArtifactConsumed: "PendingArtifactConsumed", pendingArtifactConsumed: "pendingArtifactConsumed", PendingMessageConsumed: "PendingMessageConsumed", pendingMessageConsumed: "pendingMessageConsumed", PendingMessageRequested: "PendingMessageRequested", pendingMessageRequested: "pendingMessageRequested", ComposerDraftConsumed: "ComposerDraftConsumed", composerDraftConsumed: "composerDraftConsumed", ComposerAgentMentionConsumed: "ComposerAgentMentionConsumed", composerAgentMentionConsumed: "composerAgentMentionConsumed" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 36, consts: [["titleBar", ""], ["titleName", ""], ["forksButton", ""], ["titleNameInput", ""], ["titleRenameButton", ""], ["emptyStateInput", ""], ["scrollContainer", ""], ["messageInput", ""], ["taskGraphRunView", ""], [1, "chat-area"], [1, "chat-agent-presence", 3, "chat-agent-presence--prominent"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-demonstration-stage"], [1, "chat-messages-pane"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "pinnedMessages", "isLoading", "AllowUnpin"], [3, "PanelID", "Summaries", "CurrentUserID"], [3, "cancelled", "exported", "branding", "isVisible", "conversation", "Scope", "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-header", 3, "keydown.escape"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "shared-by-badge", 3, "title"], [1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [1, "chat-actions", "chat-actions-buttons"], ["mjButton", "", "Variant", "flat", "Size", "sm", "aria-haspopup", "dialog", "title", "Forks in this conversation", 1, "forks-button", 3, "active"], ["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", "AllowedAgentIDs", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "shared", "title"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], [4, "ngTemplateOutlet"], [1, "fas", "fa-share-nodes"], [1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["mjButton", "", "Variant", "flat", "Size", "sm", "aria-haspopup", "dialog", "title", "Forks in this conversation", 1, "forks-button", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "btn-label"], [1, "forks-count"], ["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", 3, "click", "title"], [1, "chat-title-bar"], ["aria-label", "Breadcrumb", 1, "chat-title-path"], [1, "chat-title-crumbs"], ["aria-current", "page", 1, "chat-title-current"], ["aria-hidden", "true"], [1, "chat-title-crumb", "chat-title-ellipsis", 3, "collapses-wide"], [1, "chat-title-crumb"], ["mjButton", "", "Variant", "flat", "Size", "sm", "type", "button", 3, "click", "title"], [1, "chat-title-crumb-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-right", "chat-title-sep"], [1, "chat-title-crumb", "chat-title-ellipsis"], ["mjButton", "", "Variant", "flat", "Size", "sm", "type", "button", "aria-label", "Show the whole path", "title", "Show the whole path", 3, "click"], ["type", "text", "maxlength", "255", 1, "chat-title-input", 3, "ngModel"], ["type", "text", "maxlength", "255", 1, "chat-title-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "blur", "ngModel"], [1, "chat-title", 3, "title"], ["mjButton", "", "Variant", "icon", "Size", "sm", "type", "button", 1, "chat-title-rename", 3, "title"], ["mjButton", "", "Variant", "icon", "Size", "sm", "type", "button", 1, "chat-title-rename", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-pen"], [1, "conversation-loading-state"], ["text", "Loading conversation...", "size", "large"], ["role", "status", 1, "read-only-banner"], [3, "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "AllowedAgentIDs", "MentionPeople", "ComposerExtraTemplate", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "fas", "fa-eye"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "sidebarToggleClicked", "messageSent", "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "AllowedAgentIDs", "MentionPeople", "ComposerExtraTemplate", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "chat-composer-extra"], [1, "message-input-container-wrapper"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "emptyStateSubmit", "emptyStateMode", "initialDraft", "currentUser", "disabled", "ReadOnly", "appContext", "applicationId", "defaultAgentId", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "AllowedAgentIDs", "MentionPeople", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], ["role", "region", "aria-label", "Fork", 1, "fork-view-bar"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll", "keydown.escape"], [3, "OlderRequested", "DateJumpRequested", "ForkOpenRequested", "EditResendRequested", "RegenerateRequested", "ResendInPlaceRequested", "ForkRequested", "realtimeSessionOpenRequested", "deleteMessage", "BeforeStopClicked", "StopMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "diagnosticRequested", "LivenessCheckRequested", "messagePinToggled", "beforeResponseFormSubmitted", "afterResponseFormSubmitted", "TaskGraphPanelRequested", "ScrollToMessageRequested", "showEmptyFill", "showDateNavigation", "showAgentRunDetails", "showReactions", "showMessageRating", "allowPinning", "allowMessageEdit", "allowMessageDelete", "ReadOnly", "AllowStopRun", "InFlightCount", "assistantDisplayName", "assistantAvatarUrl", "messages", "HasMoreAbove", "IsLoadingOlder", "ScrollRoot", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap", "messageRendererTemplate", "messageExtraTemplate", "sessionMetaMap", "ForkChipMap", "ForkLayout", "CanFork", "InPlaceTurn"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "loading-peripheral-placeholder"], ["role", "region", "aria-label", "Fork", 1, "fork-view-bar", 3, "keydown.escape"], ["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"], [3, "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "AgentReplyMode", "AllowedAgentIDs", "MentionPeople", "AgentHistoryFrom", "TargetBranchID", "ResolveTargetBranch", "AgentTurnHandler", "AutoNameConversation", "EnableDecisionRouting", "inProgressMessageIds", "disabled", "ReadOnly", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "Placeholder", "SendSlotMode", "StopCount", "StopLabel", "StatusText", "StatusElapsed", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "fork-composer-hint"], [3, "DraftStateChanged", "ComposerBlurred", "StopClicked", "initialMessageAutoSendStarted", "initialMessageAutoSendFailed", "messageSent", "MessageStreamed", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "AgentReplyMode", "AllowedAgentIDs", "MentionPeople", "AgentHistoryFrom", "TargetBranchID", "ResolveTargetBranch", "AgentTurnHandler", "AutoNameConversation", "EnableDecisionRouting", "inProgressMessageIds", "disabled", "ReadOnly", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "Placeholder", "SendSlotMode", "StopCount", "StopLabel", "StatusText", "StatusElapsed", "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", "Scope", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [1, "chat-artifact-pane", "chat-task-graph-pane"], [1, "task-graph-pane-header"], [1, "task-graph-pane-title-group"], [1, "task-graph-pane-icon"], [1, "fa-solid", "fa-diagram-project"], [1, "task-graph-pane-titles"], [1, "task-graph-pane-title"], [1, "task-graph-pane-subtitle"], [1, "task-graph-pane-actions"], ["type", "button", "title", "Save this task graph as a reusable Draft Flow Agent workflow", 1, "task-graph-pane-save-btn", 3, "click", "disabled"], [1, "fa-solid"], ["type", "button", 1, "task-graph-pane-btn", 3, "click", "title"], ["type", "button", "title", "Close Task Graph panel", 1, "task-graph-pane-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "task-graph-pane-body"], [3, "ParentTaskID", "WorkflowName", "LiveUpdates", "ShowVariables", "Height"], [3, "closed", "jumpRequested", "unpinRequested", "pinnedMessages", "isLoading", "AllowUnpin"], [3, "ForkSelected", "Closed", "PanelID", "Summaries", "CurrentUserID"], [3, "NavigateRequest", "StartLiveRequested", "ReviewClosed", "AgentName", "Hidden", "CurrentUser", "EnvironmentID", "ReviewData", "AllowStartLive", "Chrome", "Compact", "ShowDevLinks", "ShowDensityPicker"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill", 3, "click"], ["aria-hidden", "true", 1, "voice-call-pill__pulse"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-volume"], [1, "voice-call-pill__text"], [1, "voice-call-pill__name"], [1, "voice-call-pill__hint"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], ["Icon", "fa-solid fa-cube", "Title", "No artifacts in this conversation yet", 1, "artifacts-empty-fill"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "completed", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "closed", "data", "visible"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 9);
+            i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Template, 3, 3, "div", 10);
+            i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_2_Template, 1, 8, "ng-container")(3, ConversationChatAreaComponent_Conditional_3_Template, 17, 16, "div", 11);
             i0.ɵɵtemplate(4, ConversationChatAreaComponent_ng_template_4_Template, 3, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(6, ConversationChatAreaComponent_ng_template_6_Template, 2, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
-            i0.ɵɵelementStart(8, "div", 11);
-            i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_9_Template, 2, 6, "div", 12);
-            i0.ɵɵelementStart(10, "div", 13);
-            i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_11_Template, 1, 1)(12, ConversationChatAreaComponent_Conditional_12_Template, 3, 1)(13, ConversationChatAreaComponent_Conditional_13_Template, 5, 1, "div", 14)(14, ConversationChatAreaComponent_Conditional_14_Template, 11, 36, "div", 14);
+            i0.ɵɵelementStart(8, "div", 12);
+            i0.ɵɵconditionalCreate(9, ConversationChatAreaComponent_Conditional_9_Template, 2, 6, "div", 13);
+            i0.ɵɵelementStart(10, "div", 14);
+            i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_11_Template, 1, 1)(12, ConversationChatAreaComponent_Conditional_12_Template, 3, 1)(13, ConversationChatAreaComponent_Conditional_13_Template, 5, 1, "div", 15)(14, ConversationChatAreaComponent_Conditional_14_Template, 11, 36, "div", 15);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(15, ConversationChatAreaComponent_Conditional_15_Template, 3, 15);
-            i0.ɵɵelementStart(16, "mj-artifact-share-modal", 15);
-            i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_saved_16_listener() { return ctx.onArtifactShared(); })("cancelled", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_cancelled_16_listener() { return ctx.onArtifactShareModalClose(); });
+            i0.ɵɵconditionalCreate(16, ConversationChatAreaComponent_Conditional_16_Template, 23, 24);
+            i0.ɵɵelementStart(17, "mj-artifact-share-modal", 16);
+            i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_saved_17_listener() { return ctx.onArtifactShared(); })("cancelled", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_cancelled_17_listener() { return ctx.onArtifactShareModalClose(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(17, ConversationChatAreaComponent_Conditional_17_Template, 1, 3, "mj-pinned-messages-panel", 16);
-            i0.ɵɵconditionalCreate(18, ConversationChatAreaComponent_Conditional_18_Template, 1, 3, "mj-conversation-forks-popover", 17);
+            i0.ɵɵconditionalCreate(18, ConversationChatAreaComponent_Conditional_18_Template, 1, 3, "mj-pinned-messages-panel", 17);
+            i0.ɵɵconditionalCreate(19, ConversationChatAreaComponent_Conditional_19_Template, 1, 3, "mj-conversation-forks-popover", 18);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(19, ConversationChatAreaComponent_Conditional_19_Template, 4, 15);
-            i0.ɵɵpipe(20, "async");
+            i0.ɵɵconditionalCreate(20, ConversationChatAreaComponent_Conditional_20_Template, 4, 15);
+            i0.ɵɵpipe(21, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "mj-export-modal", 18);
-            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_export_modal_cancelled_21_listener() { return ctx.onExportModalCancelled(); })("exported", function ConversationChatAreaComponent_Template_mj_export_modal_exported_21_listener() { return ctx.onExportModalComplete(); });
+            i0.ɵɵelementStart(22, "mj-export-modal", 19);
+            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_export_modal_cancelled_22_listener() { return ctx.onExportModalCancelled(); })("exported", function ConversationChatAreaComponent_Template_mj_export_modal_exported_22_listener() { return ctx.onExportModalComplete(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "mj-resource-share-dialog", 19);
-            i0.ɵɵlistener("Result", function ConversationChatAreaComponent_Template_mj_resource_share_dialog_Result_22_listener($event) { return ctx.onShareDialogResult($event); });
+            i0.ɵɵelementStart(23, "mj-resource-share-dialog", 20);
+            i0.ɵɵlistener("Result", function ConversationChatAreaComponent_Template_mj_resource_share_dialog_Result_23_listener($event) { return ctx.onShareDialogResult($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "mj-members-modal", 20);
-            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_members_modal_cancelled_23_listener() { return ctx.showMembersModal = false; })("membersChanged", function ConversationChatAreaComponent_Template_mj_members_modal_membersChanged_23_listener() { return ctx.showMembersModal = false; });
+            i0.ɵɵelementStart(24, "mj-members-modal", 21);
+            i0.ɵɵlistener("cancelled", function ConversationChatAreaComponent_Template_mj_members_modal_cancelled_24_listener() { return ctx.showMembersModal = false; })("membersChanged", function ConversationChatAreaComponent_Template_mj_members_modal_membersChanged_24_listener() { return ctx.showMembersModal = false; });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(24, ConversationChatAreaComponent_Conditional_24_Template, 9, 3, "div", 21);
-            i0.ɵɵconditionalCreate(25, ConversationChatAreaComponent_Conditional_25_Template, 13, 2, "div", 21);
-            i0.ɵɵconditionalCreate(26, ConversationChatAreaComponent_Conditional_26_Template, 1, 7, "mj-artifact-collection-picker-modal", 22);
-            i0.ɵɵconditionalCreate(27, ConversationChatAreaComponent_Conditional_27_Template, 1, 2, "mj-test-feedback-dialog", 23);
-            i0.ɵɵconditionalCreate(28, ConversationChatAreaComponent_Conditional_28_Template, 1, 4, "mj-image-viewer", 24);
+            i0.ɵɵconditionalCreate(25, ConversationChatAreaComponent_Conditional_25_Template, 9, 3, "div", 22);
+            i0.ɵɵconditionalCreate(26, ConversationChatAreaComponent_Conditional_26_Template, 13, 2, "div", 22);
+            i0.ɵɵconditionalCreate(27, ConversationChatAreaComponent_Conditional_27_Template, 1, 7, "mj-artifact-collection-picker-modal", 23);
+            i0.ɵɵconditionalCreate(28, ConversationChatAreaComponent_Conditional_28_Template, 1, 2, "mj-test-feedback-dialog", 24);
+            i0.ɵɵconditionalCreate(29, ConversationChatAreaComponent_Conditional_29_Template, 1, 4, "mj-image-viewer", 25);
         } if (rf & 2) {
             let tmp_3_0;
             i0.ɵɵadvance();
@@ -8950,19 +9344,21 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isDemonstrationActive ? 9 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("full-width", !ctx.showArtifactPanel)("hidden", ctx.isArtifactPaneMaximized);
+            i0.ɵɵclassProp("full-width", !ctx.showArtifactPanel && !ctx.SelectedTaskGraphPanel)("hidden", ctx.isArtifactPaneMaximized);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoadingConversation ? 11 : (ctx.isNewConversation || !ctx.conversationId) && !ctx.suppressNewConversationEmptyState ? 12 : (ctx.isNewConversation || !ctx.conversationId) && ctx.suppressNewConversationEmptyState ? 13 : 14);
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.showArtifactPanel && ctx.selectedArtifactId ? 15 : -1);
             i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.SelectedTaskGraphPanel ? 16 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("isOpen", ctx.isArtifactShareModalOpen)("artifact", ctx.artifactToShare)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.allowPinning && ctx.showPinsPanel ? 17 : -1);
+            i0.ɵɵconditional(ctx.allowPinning && ctx.showPinsPanel ? 18 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.ShowForksPopover ? 18 : -1);
+            i0.ɵɵconditional(ctx.ShowForksPopover ? 19 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(i0.ɵɵpipeBind1(20, 33, ctx.RealtimeSession.Active$) || ctx.RealtimeReview ? 19 : -1);
+            i0.ɵɵconditional(i0.ɵɵpipeBind1(21, 34, ctx.RealtimeSession.Active$) || ctx.RealtimeReview ? 20 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("branding", ctx.exportBranding)("isVisible", ctx.showExportModal)("conversation", ctx.conversation || undefined)("Scope", ctx.ExportScope)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
@@ -8970,20 +9366,20 @@ 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 ? 24 : -1);
+            i0.ɵɵconditional(ctx.showProjectSelector && ctx.conversation ? 25 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showArtifactsModal ? 25 : -1);
+            i0.ɵɵconditional(ctx.showArtifactsModal ? 26 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCollectionPicker ? 26 : -1);
+            i0.ɵɵconditional(ctx.showCollectionPicker ? 27 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.testFeedbackDialogData ? 27 : -1);
+            i0.ɵɵconditional(ctx.testFeedbackDialogData ? 28 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showImageViewer ? 28 : -1);
-        } }, dependencies: [i13.NgTemplateOutlet, i14.DefaultValueAccessor, i14.NgControlStatus, i14.MaxLengthValidator, i14.NgModel, i15.MJButtonDirective, i15.MJEmptyStateComponent, i10.ArtifactViewerPanelComponent, i16.TestFeedbackDialogComponent, i17.LoadingComponent, i18.GenericShareDialogComponent, i19.ArtifactCollectionPickerModalComponent, i20.ArtifactShareModalComponent, i21.MJChatAgentPresenceDefaultComponent, i22.RealtimeSessionOverlayComponent, i23.MessageListComponent, i24.MessageInputComponent, i25.ConversationEmptyStateComponent, i26.ConversationAgentPickerComponent, i27.ConversationModePickerComponent, i28.ProjectSelectorComponent, i29.MembersModalComponent, i30.ExportModalComponent, i31.ImageViewerComponent, i32.PinnedMessagesPanelComponent, i33.ForksPopoverComponent, 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  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.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.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\n.chat-title-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.chat-title[_ngcontent-%COMP%] {\n  flex: 0 1 auto;\n  min-width: 0;\n  margin: 0;\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.chat-title-path[_ngcontent-%COMP%] {\n  min-width: 0;\n}\n\n.chat-title-crumbs[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n\n.chat-title-crumb[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 0 100 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 80px;\n}\n\n.chat-title-crumb.chat-title-ellipsis[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.chat-title-crumb[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  min-width: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n}\n\n.chat-title-crumb-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.chat-title-crumb.collapsed-wide[_ngcontent-%COMP%], \n.chat-title-ellipsis[_ngcontent-%COMP%]:not(.collapses-wide) {\n  display: none;\n}\n\n.chat-title-sep[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-border-strong);\n}\n\n.chat-title-current[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 120px;\n}\n\n.chat-title-kind[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  margin: 0 var(--mj-space-1);\n  color: var(--mj-status-info);\n}\n\n.chat-title-kind[data-kind='Edit'][_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.chat-title-kind[data-kind='Regenerate'][_ngcontent-%COMP%] {\n  color: var(--mj-brand-tertiary);\n}\n\n.chat-title-bar[_ngcontent-%COMP%]   .chat-title-rename[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  color: var(--mj-text-muted);\n  opacity: 0.6;\n  transition: opacity 0.15s ease, color 0.15s ease;\n}\n\n.chat-title-bar[_ngcontent-%COMP%]:hover   .chat-title-rename[_ngcontent-%COMP%], \n.chat-title-bar[_ngcontent-%COMP%]   .chat-title-rename[_ngcontent-%COMP%]:focus-visible {\n  color: var(--mj-text-primary);\n  opacity: 1;\n}\n\n.chat-title-input[_ngcontent-%COMP%] {\n  flex: 0 1 360px;\n  min-width: 120px;\n  padding: var(--mj-space-1) var(--mj-space-2);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font: inherit;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.chat-title-input[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\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.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.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  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.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.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\n.chat-composer-extra[_ngcontent-%COMP%] {\n  margin-bottom: 0.5rem;\n}\n\n.read-only-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n\n.artifacts-empty-fill[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n@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-bar[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  \n  .chat-title-crumb.path-middle[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-title-ellipsis[_ngcontent-%COMP%]:not(.collapses-wide) {\n    display: flex;\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  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\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  .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    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@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.artifact-picker-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: _ngcontent-%COMP%_slideInRight 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-pdf[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-excel[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-word[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n.voice-call-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; \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}\n\n\n.fork-view-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.fork-composer-hint[_ngcontent-%COMP%] {\n  padding: var(--mj-space-1) var(--mj-space-4) 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.chat-actions-buttons[_ngcontent-%COMP%]    > .forks-button[_ngcontent-%COMP%]   .forks-count[_ngcontent-%COMP%] {\n  margin-left: var(--mj-space-1);\n  padding: 0 var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n}\n.chat-actions-buttons[_ngcontent-%COMP%]    > .forks-button.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}"] });
+            i0.ɵɵconditional(ctx.showImageViewer ? 29 : -1);
+        } }, dependencies: [i13.NgTemplateOutlet, i14.DefaultValueAccessor, i14.NgControlStatus, i14.MaxLengthValidator, i14.NgModel, i15.TaskGraphRunViewComponent, i16.MJButtonDirective, i16.MJEmptyStateComponent, i10.ArtifactViewerPanelComponent, i17.TestFeedbackDialogComponent, i18.LoadingComponent, i19.GenericShareDialogComponent, i20.ArtifactCollectionPickerModalComponent, i21.ArtifactShareModalComponent, i22.MJChatAgentPresenceDefaultComponent, i23.RealtimeSessionOverlayComponent, i24.MessageListComponent, i25.MessageInputComponent, i26.ConversationEmptyStateComponent, i27.ConversationAgentPickerComponent, i28.ConversationModePickerComponent, i29.ProjectSelectorComponent, i30.MembersModalComponent, i31.ExportModalComponent, i32.ImageViewerComponent, i33.PinnedMessagesPanelComponent, i34.ForksPopoverComponent, 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  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.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.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\n.chat-title-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.chat-title[_ngcontent-%COMP%] {\n  flex: 0 1 auto;\n  min-width: 0;\n  margin: 0;\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.chat-title-path[_ngcontent-%COMP%] {\n  min-width: 0;\n}\n\n.chat-title-crumbs[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n\n.chat-title-crumb[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 0 100 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 80px;\n}\n\n.chat-title-crumb.chat-title-ellipsis[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.chat-title-crumb[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n  min-width: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n}\n\n.chat-title-crumb-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.chat-title-crumb.collapsed-wide[_ngcontent-%COMP%], \n.chat-title-ellipsis[_ngcontent-%COMP%]:not(.collapses-wide) {\n  display: none;\n}\n\n.chat-title-sep[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-border-strong);\n}\n\n.chat-title-current[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 120px;\n}\n\n.chat-title-kind[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  margin: 0 var(--mj-space-1);\n  color: var(--mj-status-info);\n}\n\n.chat-title-kind[data-kind='Edit'][_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.chat-title-kind[data-kind='Regenerate'][_ngcontent-%COMP%] {\n  color: var(--mj-brand-tertiary);\n}\n\n.chat-title-bar[_ngcontent-%COMP%]   .chat-title-rename[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  color: var(--mj-text-muted);\n  opacity: 0.6;\n  transition: opacity 0.15s ease, color 0.15s ease;\n}\n\n.chat-title-bar[_ngcontent-%COMP%]:hover   .chat-title-rename[_ngcontent-%COMP%], \n.chat-title-bar[_ngcontent-%COMP%]   .chat-title-rename[_ngcontent-%COMP%]:focus-visible {\n  color: var(--mj-text-primary);\n  opacity: 1;\n}\n\n.chat-title-input[_ngcontent-%COMP%] {\n  flex: 0 1 360px;\n  min-width: 120px;\n  padding: var(--mj-space-1) var(--mj-space-2);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font: inherit;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.chat-title-input[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\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.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.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  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-task-graph-pane[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.task-graph-pane-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.task-graph-pane-title-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.task-graph-pane-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-titles[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n}\n\n.task-graph-pane-title[_ngcontent-%COMP%] {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.task-graph-pane-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.task-graph-pane-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-save-btn[_ngcontent-%COMP%] {\n  height: 30px;\n  padding: 0 10px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  cursor: pointer;\n  transition: opacity 0.15s ease, filter 0.15s ease;\n}\n\n.task-graph-pane-save-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  filter: brightness(1.06);\n}\n\n.task-graph-pane-save-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.task-graph-pane-btn[_ngcontent-%COMP%] {\n  width: 30px;\n  height: 30px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n}\n\n.task-graph-pane-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.task-graph-pane-body[_ngcontent-%COMP%] {\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 0;\n  padding: 12px 16px 16px;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.task-graph-pane-body[_ngcontent-%COMP%]    > mj-task-graph-run-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 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.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.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\n.chat-composer-extra[_ngcontent-%COMP%] {\n  margin-bottom: 0.5rem;\n}\n\n.read-only-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n\n.artifacts-empty-fill[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n@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-bar[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  \n  .chat-title-crumb.path-middle[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-title-ellipsis[_ngcontent-%COMP%]:not(.collapses-wide) {\n    display: flex;\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  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\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  .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    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@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.artifact-picker-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: _ngcontent-%COMP%_slideInRight 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-pdf[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-excel[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-word[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n.voice-call-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; \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}\n\n\n.fork-view-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.fork-composer-hint[_ngcontent-%COMP%] {\n  padding: var(--mj-space-1) var(--mj-space-4) 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.chat-actions-buttons[_ngcontent-%COMP%]    > .forks-button[_ngcontent-%COMP%]   .forks-count[_ngcontent-%COMP%] {\n  margin-left: var(--mj-space-1);\n  padding: 0 var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n}\n.chat-actions-buttons[_ngcontent-%COMP%]    > .forks-button.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationChatAreaComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n       06-10 design: persistent presence indicator (Sid's face + live voice\n       state). Off by default; opt in via [showAgentCharacter]. When a\n       consumer projects an `mjChatSlot=\"agentPresence\"` template, it\n       replaces the default presence component. -->\n  @if (showAgentCharacter) {\n    <div class=\"chat-agent-presence\" [class.chat-agent-presence--prominent]=\"agentCharacterConfig?.voiceStateMode === 'prominent'\">\n      @if (slotTemplate('agentPresence'); as t) {\n        <ng-container *ngTemplateOutlet=\"t; context: {\n          $implicit: agentCharacterConfig,\n          state: agentCharacterConfig?.state ?? 'idle',\n          agentName: agentCharacterConfig?.characterName,\n          avatarUrl: agentCharacterConfig?.avatarUrl,\n          mode: agentCharacterConfig?.voiceStateMode ?? 'subtle'\n        }\"></ng-container>\n      } @else {\n        <mj-chat-agent-presence-default\n          [State]=\"agentCharacterConfig?.state ?? 'idle'\"\n          [AgentName]=\"agentCharacterConfig?.characterName\"\n          [AvatarUrl]=\"agentCharacterConfig?.avatarUrl\"\n          [Mode]=\"agentCharacterConfig?.voiceStateMode ?? 'subtle'\">\n        </mj-chat-agent-presence-default>\n      }\n    </div>\n  }\n\n  <!-- header slot \u2014 replaces the entire chat-header chrome (title, badges,\n       export/share/agent-picker buttons). When projected, the consumer owns\n       the entire header rendering; the default chrome below is bypassed\n       wholesale. Context exposes the minimal IMJChatHeaderComponent shape;\n       consumers needing more app state should bind to chat-area inputs\n       directly via @ViewChild or wrap the whole component. -->\n  @if (slotTemplate('header'); as t) {\n    <ng-container *ngTemplateOutlet=\"t; context: {\n      $implicit: conversation,\n      conversationTitle: conversation?.Name ?? null,\n      sharedBy: sharedByBadge?.display ?? null,\n      artifactCount: artifactCountDisplay,\n      showArtifactIndicator: showArtifactIndicator\n    }\"></ng-container>\n  } @else if (conversation || HasPreConversationHeader) {\n    <!-- Default header \u2014 also renders BEFORE a conversation exists when the\n         embedder has pre-conversation chrome to surface (currently just the\n         mode picker \u2014 agent / share / export / members / artifacts all\n         require a conversation row and stay hidden). Lets embedded surfaces\n         like the Form Builder cockpit show the mode picker above the\n         empty-state on a fresh chat instead of waiting for the first\n         message to round-trip. -->\n    <div class=\"chat-header\" (keydown.escape)=\"OnViewEscape($event)\">\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          <ng-container *ngTemplateOutlet=\"titleBar\"></ng-container>\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()\" [attr.title]=\"EffectiveReadOnly ? 'Project' : '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 (ForkSummaries.length > 0) {\n          <button mjButton #forksButton Variant=\"flat\" Size=\"sm\" class=\"forks-button\" [class.active]=\"ShowForksPopover\"\n            aria-haspopup=\"dialog\" [attr.aria-expanded]=\"ShowForksPopover\" [attr.aria-controls]=\"ShowForksPopover ? ForksPopoverID : null\"\n            (click)=\"ToggleForksPopover()\" title=\"Forks in this conversation\">\n            <i class=\"fa-solid fa-code-branch\"></i>\n            <span class=\"btn-label\">Forks</span>\n            <span class=\"forks-count\">{{ ForkSummaries.length }}</span>\n          </button>\n        }\n        @if (allowPinning && pinnedMessageCount > 0) {\n          <button class=\"pin-chip\" [class.active]=\"showPinsPanel\" (click)=\"TogglePinsPanel()\" title=\"View pinned messages\">\n            <i class=\"fas fa-thumbtack\"></i>\n            <span class=\"pin-chip-count\">{{ pinnedMessageCount }}</span>\n          </button>\n        }\n        @if (showArtifactIndicator && artifactCountDisplay > 0) {\n          <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\">\n            <i class=\"fas fa-cube\"></i>\n            <span class=\"artifact-badge\">{{ artifactCountDisplay }}</span>\n          </button>\n        }\n        @if (memberCount > 1) {\n          <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n            <i class=\"fas fa-users\"></i>\n            <span class=\"members-badge\">{{ memberCount }}</span>\n          </button>\n        }\n        @if (!overlayMode && showAgentModePicker && ModePickerTargetAgentId && !EffectiveReadOnly) {\n          <!-- Per-agent mode/quality picker (Draft / Standard / High).\n               Targets the agent the next non-mention message will route\n               to. Auto-hides when that agent has fewer than 2 configured\n               presets. Choice persists per-user, per-agent via\n               UserInfoEngine; emits the picked configuration ID up so\n               <mj-message-input> can forward it on the next route.\n               Hidden in overlayMode (the compact chat overlay): the\n               mode dropdown wastes the narrow top-right space there. -->\n          <mj-conversation-mode-picker\n            [AgentID]=\"ModePickerTargetAgentId\"\n            [Disabled]=\"isProcessing\"\n            (PresetChanged)=\"OnAgentModePresetChanged($event)\">\n          </mj-conversation-mode-picker>\n        }\n        @if (showAgentPicker && conversation) {\n          <!-- Per-conversation default-agent pin. When set, non-mention\n               messages route to this agent instead of Sage. Persists to\n               MJConversationEntity.DefaultAgentID. Hidden when no\n               conversation is loaded or when the embedder disables it. -->\n          <mj-conversation-agent-picker\n            [Conversation]=\"conversation\"\n            [CurrentUser]=\"currentUser\"\n            [AllowedAgentIDs]=\"AllowedAgentIDs\"\n            [Disabled]=\"EffectiveReadOnly\">\n          </mj-conversation-agent-picker>\n        }\n        @if (showExportButton) {\n          <button mjButton variant=\"flat\" size=\"sm\" (click)=\"exportConversation()\" [title]=\"exportButtonLabel + ' conversation'\">\n            <i [class]=\"exportButtonIcon\"></i>\n            <span class=\"btn-label\">{{ exportButtonLabel }}</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        <!-- headerActions slot \u2014 ADDITIVE host buttons rendered after the stock\n             actions (unlike the `header` slot, which replaces the whole header\n             and therefore never reaches this branch). For visual parity,\n             projected buttons should use mjButton variant=\"flat\" size=\"sm\". -->\n        @if (slotTemplate('headerActions'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: conversation,\n            conversationId: conversationId,\n            isProcessing: isProcessing\n          }\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Header title. Main: the conversation name. A fork: the path, the conversation and each parent fork\n       (each opens its view; the parent is the way back), then the open fork with its kind icon. Past three\n       entries, and on narrow screens, the middle crumbs collapse into an ellipsis that opens the forks list.\n       The current name can be renamed in place. -->\n  <ng-template #titleBar>\n    <div class=\"chat-title-bar\">\n      @if (OpenView.Kind === 'Main') {\n        <ng-container *ngTemplateOutlet=\"titleName\"></ng-container>\n      } @else {\n        <nav class=\"chat-title-path\" aria-label=\"Breadcrumb\">\n          <ol class=\"chat-title-crumbs\">\n            @for (parent of HeaderPath.Parents; track $index) {\n              @if ($index === 1) {\n                <li class=\"chat-title-crumb chat-title-ellipsis\" [class.collapses-wide]=\"HeaderPath.CollapsesWide\">\n                  <button mjButton Variant=\"flat\" Size=\"sm\" type=\"button\" (click)=\"ShowWholePath()\" aria-label=\"Show the whole path\" title=\"Show the whole path\">\u2026</button>\n                  <i class=\"fa-solid fa-chevron-right chat-title-sep\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li class=\"chat-title-crumb\" [class.path-middle]=\"parent.IsMiddle\" [class.collapsed-wide]=\"parent.CollapsedWide\">\n                <button mjButton Variant=\"flat\" Size=\"sm\" type=\"button\" (click)=\"OpenCrumb(parent.Crumb)\" [title]=\"'Back to ' + parent.Crumb.Label\">\n                  <span class=\"chat-title-crumb-label\">{{ parent.Crumb.Label }}</span>\n                </button>\n                <i class=\"fa-solid fa-chevron-right chat-title-sep\" aria-hidden=\"true\"></i>\n              </li>\n            }\n            <li class=\"chat-title-current\" aria-current=\"page\">\n              <i [class]=\"'chat-title-kind ' + OpenViewIcon\" [attr.data-kind]=\"OpenViewKind\" aria-hidden=\"true\"></i>\n              <ng-container *ngTemplateOutlet=\"titleName\"></ng-container>\n            </li>\n          </ol>\n        </nav>\n      }\n    </div>\n  </ng-template>\n\n  <!-- The current name and its rename button; the inline field while renaming -->\n  <ng-template #titleName>\n    @if (IsRenamingTitle) {\n      <input\n        #titleNameInput\n        type=\"text\"\n        class=\"chat-title-input\"\n        maxlength=\"255\"\n        [attr.aria-label]=\"TitleRenameLabel\"\n        [(ngModel)]=\"TitleRenameText\"\n        (keydown.enter)=\"$event.preventDefault(); SaveTitleRename(true)\"\n        (keydown.escape)=\"$event.preventDefault(); $event.stopPropagation(); CancelTitleRename()\"\n        (blur)=\"SaveTitleRename()\" />\n    } @else {\n      <h2 class=\"chat-title\" [title]=\"HeaderTitle\">{{ HeaderTitle }}</h2>\n      @if (CanRenameTitle) {\n        <button mjButton #titleRenameButton Variant=\"icon\" Size=\"sm\" type=\"button\" class=\"chat-title-rename\" (click)=\"StartTitleRename()\" [attr.aria-label]=\"TitleRenameLabel\" [title]=\"TitleRenameLabel\">\n          <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    }\n  </ng-template>\n\n  <!-- Messages and Artifact Split Layout \u2014 restructures into [stage | rail]\n       when isDemonstrationActive (per Matt's 06-10 design). The .demonstration-mode\n       class drives the CSS Grid switch; the stage container renders only when the\n       slot is projected AND the host opts in via [showDemonstrationSurface]. -->\n  <div class=\"chat-content-area\" [class.demonstration-mode]=\"isDemonstrationActive\">\n    <!-- demonstrationSurface stage \u2014 takes the main pane; messages shrink to\n         a side rail (or move below on mobile). Off unless both\n         [showDemonstrationSurface] is true AND a slot template is projected. -->\n    @if (isDemonstrationActive) {\n      <div class=\"chat-demonstration-stage\">\n        <ng-container *ngTemplateOutlet=\"slotTemplate('demonstrationSurface'); context: {\n          $implicit: demonstrationSurfaceContent,\n          content: demonstrationSurfaceContent,\n          visible: showDemonstrationSurface\n        }\"></ng-container>\n      </div>\n    }\n\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n      [class.full-width]=\"!showArtifactPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isLoadingConversation) {\n        <!-- Loading State - checked FIRST to prevent empty state flash. The branch\n             always short-circuits the panes below; showLoadingState only controls\n             whether the built-in spinner renders (hosts with their own loading\n             chrome set it false and get a blank pane instead). -->\n        @if (showLoadingState) {\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        }\n      } @else if ((isNewConversation || !conversationId) && !suppressNewConversationEmptyState) {\n        <!-- emptyState slot \u2014 when a consumer projects mjChatSlot=\"emptyState\",\n             they take over the entire empty-state region (including any send\n             affordance \u2014 the slot interface doesn't include a sendMessage\n             output, so consumers handle send via their own input). When no\n             slot is projected, the rich built-in <mj-conversation-empty-state>\n             renders with its own greeting, prompt chips, and message input.\n             emptyStateConfig (when supplied) takes precedence over the legacy\n             [emptyStateGreeting] string for backwards compatibility. -->\n        @if (ReadOnly) {\n          <div class=\"read-only-banner\" role=\"status\">\n            <i class=\"fas fa-eye\"></i>\n            <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n          </div>\n        } @else if (slotTemplate('emptyState'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: emptyStateConfig,\n            greeting: emptyStateConfig?.greeting ?? emptyStateGreeting,\n            subtext: emptyStateConfig?.subtext,\n            suggestedPrompts: emptyStateConfig?.suggestedPrompts ?? []\n          }\"></ng-container>\n        } @else {\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [initialDraft]=\"GetInitialDraftFor(null)\"\n            (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n            [disabled]=\"isProcessing\"\n            [showSidebarToggle]=\"showSidebarToggle\"\n            [overlayMode]=\"overlayMode\"\n            [greeting]=\"emptyStateConfig?.greeting ?? emptyStateGreeting\"\n            [showSuggestedPrompts]=\"showSuggestedPrompts\"\n            [enableAttachments]=\"enableAttachments && allowAttachments\"\n            [enableMentions]=\"allowMentions\"\n            [enableAgentMentions]=\"allowAgentMentions\"\n            [enableEntityMentions]=\"allowEntityMentions\"\n            [enableSkillCommands]=\"allowSkillCommands\"\n            [AllowedAgentIDs]=\"AllowedAgentIDs\"\n            [MentionPeople]=\"MentionPeople\"\n            [ComposerExtraTemplate]=\"slotTemplate('composerExtra')\"\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            @if (ReadOnly) {\n              <div class=\"read-only-banner\" role=\"status\">\n                <i class=\"fas fa-eye\"></i>\n                <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n              </div>\n            } @else {\n              <!-- composerExtra slot \u2014 host UI directly above the composer (IMJChatComposerExtraContext). -->\n              @if (slotTemplate('composerExtra'); as t) {\n                <div class=\"chat-composer-extra\">\n                  <ng-container *ngTemplateOutlet=\"t; context: {\n                    $implicit: conversation,\n                    ConversationId: conversationId,\n                    IsProcessing: isProcessing\n                  }\"></ng-container>\n                </div>\n              }\n              <div class=\"message-input-container-wrapper\">\n                <mj-message-input\n                  #emptyStateInput\n                  [emptyStateMode]=\"true\"\n                  [initialDraft]=\"GetInitialDraftFor(null)\"\n                  (initialDraftApplied)=\"OnComposerDraftApplied()\"\n                  (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n                  (ComposerBlurred)=\"OnComposerBlurred()\"\n                  [currentUser]=\"currentUser\"\n                  [disabled]=\"isProcessing\"\n                  [ReadOnly]=\"EffectiveReadOnly\"\n                  [appContext]=\"appContext\"\n                  [applicationId]=\"applicationId\"\n                  [defaultAgentId]=\"defaultAgentId\"\n                  [enableAttachments]=\"enableAttachments && allowAttachments\"\n                  [enableMentions]=\"allowMentions\"\n                  [enableAgentMentions]=\"allowAgentMentions\"\n                  [enableEntityMentions]=\"allowEntityMentions\"\n                  [enableSkillCommands]=\"allowSkillCommands\"\n                  [enablePlanMode]=\"allowPlanMode\"\n                  [enableRealtime]=\"allowRealtime\"\n                  [AllowedAgentIDs]=\"AllowedAgentIDs\"\n                  [MentionPeople]=\"MentionPeople\"\n                  [maxAttachments]=\"maxAttachments\"\n                  [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                  [acceptedFileTypes]=\"acceptedFileTypes\"\n                  (emptyStateSubmit)=\"onEmptyStateMessageSent($event)\">\n                </mj-message-input>\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          @if (OpenView.Kind !== 'Main' && slotTemplate('header')) {\n            <!-- A host header replaces the default one, so the fork title shows above the transcript. -->\n            <div class=\"fork-view-bar\" role=\"region\" aria-label=\"Fork\" (keydown.escape)=\"OnViewEscape($event)\">\n              <ng-container *ngTemplateOutlet=\"titleBar\"></ng-container>\n            </div>\n          }\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()\" (keydown.escape)=\"OnViewEscape($event)\">\n            <mj-conversation-message-list\n              [showEmptyFill]=\"showEmptyFill\"\n              [showDateNavigation]=\"showDateNavigation\"\n              [showAgentRunDetails]=\"showAgentRunDetails\"\n              [showReactions]=\"showReactions\"\n              [showMessageRating]=\"showMessageRating\"\n              [allowPinning]=\"allowPinning && !EffectiveReadOnly\"\n              [allowMessageEdit]=\"allowMessageEdit && !EffectiveReadOnly\"\n              [allowMessageDelete]=\"allowMessageDelete && !EffectiveReadOnly\"\n              [ReadOnly]=\"EffectiveReadOnly\"\n              [AllowStopRun]=\"AllowStopRun\"\n              [InFlightCount]=\"InFlightCount\"\n              [assistantDisplayName]=\"assistantDisplayName\"\n              [assistantAvatarUrl]=\"assistantAvatarUrl\"\n              [messages]=\"DisplayMessages\"\n              [HasMoreAbove]=\"ListHasMoreAbove\"\n              [IsLoadingOlder]=\"isLoadingOlderMessages\"\n              [ScrollRoot]=\"messageScrollRoot\"\n              (OlderRequested)=\"onOlderMessagesRequested()\"\n              (DateJumpRequested)=\"onDateJumpRequested($event)\"\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              [ForkChipMap]=\"ForkChipMap\"\n              [ForkLayout]=\"ForkLayout\"\n              [CanFork]=\"CanFork\"\n              [InPlaceTurn]=\"InPlaceTurn\"\n              (ForkOpenRequested)=\"OnForkOpenRequested($event)\"\n              (EditResendRequested)=\"OnEditResendRequested($event)\"\n              (RegenerateRequested)=\"OnRegenerateRequested($event)\"\n              (ResendInPlaceRequested)=\"OnResendInPlaceRequested($event)\"\n              (ForkRequested)=\"OnForkRequested($event)\"\n              (realtimeSessionOpenRequested)=\"OpenRealtimeSessionReview($event)\"\n              (deleteMessage)=\"onDeleteMessage($event)\"\n              (BeforeStopClicked)=\"BeforeStopClicked.emit($event)\"\n              (StopMessage)=\"OnStopMessage($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              (LivenessCheckRequested)=\"OnLivenessCheckRequested($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 && DisplayMessages.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 if (ReadOnly) {\n              <div class=\"read-only-banner\" role=\"status\">\n                <i class=\"fas fa-eye\"></i>\n                <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\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              <!-- composerExtra slot \u2014 host UI directly above the composer (IMJChatComposerExtraContext). -->\n              @if (slotTemplate('composerExtra'); as t) {\n                <div class=\"chat-composer-extra\">\n                  <ng-container *ngTemplateOutlet=\"t; context: {\n                    $implicit: conversation,\n                    ConversationId: conversationId,\n                    IsProcessing: isProcessing\n                  }\"></ng-container>\n                </div>\n              }\n              <!-- Input Component - Multiple instances cached, only one visible -->\n              <div class=\"message-input-container-wrapper\">\n                @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                  <mj-message-input\n                    #messageInput\n                    [hidden]=\"inputRef.conversationId !== conversationId\"\n                    [initialDraft]=\"GetInitialDraftFor(inputRef.conversationId)\"\n                    (DraftStateChanged)=\"OnDraftStateChanged(inputRef.conversationId, $event)\"\n                    (ComposerBlurred)=\"OnComposerBlurred()\"\n                    [conversationId]=\"inputRef.conversationId\"\n                    [conversationName]=\"inputRef.conversationName\"\n                    [currentUser]=\"currentUser\"\n                    [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                    [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                    [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                    [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                    [appContext]=\"appContext\"\n                    [applicationId]=\"applicationId\"\n                    [defaultAgentId]=\"defaultAgentId\"\n                    [conversationDefaultAgentId]=\"inputRef.conversationId === conversationId ? (conversation?.DefaultAgentID ?? null) : null\"\n                    [agentConfigurationPresetId]=\"inputRef.conversationId === conversationId ? ActiveAgentConfigurationPresetId : null\"\n                    [AgentReplyMode]=\"AgentReplyMode\"\n                    [AllowedAgentIDs]=\"AllowedAgentIDs\"\n                    [MentionPeople]=\"MentionPeople\"\n                    [AgentHistoryFrom]=\"AgentHistoryFrom\"\n                    [TargetBranchID]=\"TargetBranchIdFor(inputRef.conversationId)\"\n                    [ResolveTargetBranch]=\"inputRef.conversationId === conversationId ? ResolveComposerBranch : null\"\n                    [AgentTurnHandler]=\"AgentTurnHandler\"\n                    [AutoNameConversation]=\"AutoNameConversation\"\n                    [EnableDecisionRouting]=\"EnableDecisionRouting\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing || isReadOnlyView\"\n                    [ReadOnly]=\"EffectiveReadOnly\"\n                    [enableAttachments]=\"enableAttachments && allowAttachments\"\n                    [enableMentions]=\"allowMentions\"\n                    [enableAgentMentions]=\"allowAgentMentions\"\n                    [enableEntityMentions]=\"allowEntityMentions\"\n                    [enableSkillCommands]=\"allowSkillCommands\"\n                    [enablePlanMode]=\"allowPlanMode\"\n                    [enableRealtime]=\"allowRealtime && OpenView.Kind !== 'DraftFork'\"\n                    [Placeholder]=\"ComposerPlaceholderFor(inputRef.conversationId)\"\n                    [SendSlotMode]=\"inputRef.conversationId === conversationId ? SendSlotMode : 'send'\"\n                    [StopCount]=\"inputRef.conversationId === conversationId ? StopCount : 0\"\n                    [StopLabel]=\"StopLabel\"\n                    [StatusText]=\"inputRef.conversationId === conversationId ? StatusText : null\"\n                    [StatusElapsed]=\"inputRef.conversationId === conversationId ? StatusElapsed : null\"\n                    (StopClicked)=\"OnComposerStopClicked()\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingMessage : null\"\n                    [initialAttachments]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingAttachments : null\"\n                    (initialMessageAutoSendStarted)=\"onInitialMessageAutoSendStarted($event)\"\n                    (initialMessageAutoSendFailed)=\"onInitialMessageAutoSendFailed($event)\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (MessageStreamed)=\"OnMessageStreamed($event)\"\n                    (agentResponse)=\"onAgentResponse($event)\"\n                    (agentRunDetected)=\"onAgentRunDetected($event)\"\n                    (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                    (messageComplete)=\"onMessageComplete($event)\"\n                    (artifactCreated)=\"onArtifactCreated($event)\"\n                    (conversationRenamed)=\"onConversationRenamed($event)\"\n                    (intentCheckStarted)=\"onIntentCheckStarted($event)\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted($event)\"\n                    (beforeAgentTurn)=\"beforeAgentTurn.emit($event)\"\n                    (afterAgentTurn)=\"afterAgentTurn.emit($event)\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n              @if (ComposerHint) {\n                <div class=\"fork-composer-hint\">{{ ComposerHint }}</div>\n              }\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          [Scope]=\"ArtifactViewerScope\"\n          [canShare]=\"canShareSelectedArtifact\"\n          [canEdit]=\"canEditSelectedArtifact\"\n          [isMaximized]=\"isArtifactPaneMaximized\"\n          [refreshTrigger]=\"artifactViewerRefresh$\"\n          (closed)=\"onCloseArtifactPanel()\"\n          (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n          (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n          (shareRequested)=\"onArtifactShareRequested($event)\"\n          (maximizeToggled)=\"toggleMaximizeArtifactPane()\"\n          (openEntityRecord)=\"onOpenEntityRecord($event)\"\n          (navigationRequest)=\"onNavigationRequest($event)\"\n          (analyzeRequested)=\"OnAnalyzeArtifact($event)\"\n          (applyFormRequested)=\"OnApplyFormRequested($event)\">\n        </mj-artifact-viewer-panel>\n      </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n\n    <!-- Pinned Messages Panel (overlay) -->\n    @if (allowPinning && showPinsPanel) {\n      <mj-pinned-messages-panel\n        [pinnedMessages]=\"pinnedMessages\"\n        [isLoading]=\"isLoadingPins\"\n        [AllowUnpin]=\"!EffectiveReadOnly\"\n        (closed)=\"showPinsPanel = false\"\n        (jumpRequested)=\"onJumpToMessage($event)\"\n        (unpinRequested)=\"onUnpinFromPanel($event)\">\n      </mj-pinned-messages-panel>\n    }\n\n    @if (ShowForksPopover) {\n      <mj-conversation-forks-popover\n        [PanelID]=\"ForksPopoverID\"\n        [Summaries]=\"ForkSummaries\"\n        [CurrentUserID]=\"CurrentUser.ID\"\n        (ForkSelected)=\"OnForkSelectedFromList($event)\"\n        (Closed)=\"CloseForksPopover()\">\n      </mj-conversation-forks-popover>\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      [AllowStartLive]=\"CanStartVoiceFromReview\"\n      [Chrome]=\"overlayMode ? 'orb' : 'auto'\"\n      [Compact]=\"overlayMode\"\n      [ShowDevLinks]=\"!overlayMode\"\n      [ShowDensityPicker]=\"!overlayMode\"\n      (NavigateRequest)=\"onRealtimeNavigateRequest($event)\"\n      (StartLiveRequested)=\"onReviewStartLive($event)\"\n      (ReviewClosed)=\"onReviewClosed()\">\n    </mj-realtime-session-overlay>\n    @if (RealtimeSession.Minimized$ | async) {\n      <button type=\"button\" class=\"voice-call-pill\" (click)=\"RealtimeSession.SetMinimized(false)\"\n              title=\"Return to the live call\" aria-label=\"Return to the live call\">\n        <span class=\"voice-call-pill__pulse\" aria-hidden=\"true\"></span>\n        <i class=\"fa-solid fa-phone-volume\" aria-hidden=\"true\"></i>\n        <span class=\"voice-call-pill__text\">\n          <span class=\"voice-call-pill__name\">On call \u00B7 {{ RealtimeSession.CurrentAgentName }}</span>\n          <span class=\"voice-call-pill__hint\">Tap to return</span>\n        </span>\n      </button>\n    }\n  }\n</div>\n\n<!-- Export Modal -->\n<!-- [branding] is bound BEFORE [isVisible] deliberately: Angular sets inputs in\n     template order within a change-detection pass, and the modal's isVisible setter\n     reads `branding` to default its \"Include branding\" checkbox on a fresh open. -->\n<mj-export-modal\n  [branding]=\"exportBranding\"\n  [isVisible]=\"showExportModal\"\n  [conversation]=\"conversation || undefined\"\n  [Scope]=\"ExportScope\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Share Dialog (generic, shared with dashboards) -->\n<mj-resource-share-dialog\n  [Visible]=\"showShareModal\"\n  [Context]=\"shareContext\"\n  [Adapter]=\"shareAdapter\"\n  (Result)=\"onShareDialogResult($event)\">\n</mj-resource-share-dialog>\n\n<!-- Members Modal -->\n<mj-members-modal\n  [isVisible]=\"showMembersModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"showMembersModal = false\"\n  (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n  <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <mj-project-selector\n          [environmentId]=\"environmentId\"\n          [currentUser]=\"currentUser\"\n          [selectedProjectId]=\"conversation.ProjectID\"\n          (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n  <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n          @if (hasSystemArtifacts) {\n            <button class=\"toggle-system-btn\"\n              [class.active]=\"showSystemArtifacts\"\n              (click)=\"toggleSystemArtifacts()\"\n              title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n            </button>\n          }\n          <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n          <mj-empty-state\n            class=\"artifacts-empty-fill\"\n            Icon=\"fa-solid fa-cube\"\n            Title=\"No artifacts in this conversation yet\" />\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n          <div class=\"artifact-modal-card\"\n            [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n            [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n            <!-- Main card header - click to open latest version -->\n            <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n              <div class=\"artifact-modal-icon\">\n                <i class=\"fas fa-file-code\"></i>\n              </div>\n              <div class=\"artifact-modal-info\">\n                <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                <div class=\"artifact-modal-meta\">\n                  @if (artifact.versionCount > 1) {\n                    {{artifact.versionCount}} versions\n                  } @else {\n                    1 version\n                  }\n                </div>\n              </div>\n              @if (artifact.versionCount > 1) {\n                <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                  <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                  [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                </button>\n              }\n              <div class=\"artifact-modal-action\">\n                <i class=\"fas fa-external-link-alt\"></i>\n              </div>\n            </div>\n\n            <!-- Expanded version list -->\n            @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n              <div class=\"artifact-versions-list\">\n                @for (version of artifact.versions; track version.versionId) {\n                  <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                    <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                    <span class=\"version-open-text\">Open this version</span>\n                    <i class=\"fas fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    [artifactVersionId]=\"collectionPickerVersionId\"\n    [artifactName]=\"collectionPickerArtifactName\"\n    [artifactVersionNumber]=\"collectionPickerVersionNumber\"\n    (completed)=\"onCollectionPickerCompleted($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Test Feedback Dialog -->\n@if (testFeedbackDialogData) {\n  <mj-test-feedback-dialog\n    [data]=\"testFeedbackDialogData\"\n    [visible]=\"showTestFeedbackDialog\"\n    (closed)=\"onTestFeedbackDialogClosed($event)\">\n  </mj-test-feedback-dialog>\n}\n\n<!-- Image Viewer Modal -->\n@if (showImageViewer) {\n  <mj-image-viewer\n    [imageUrl]=\"selectedImageUrl\"\n    [alt]=\"selectedImageAlt\"\n    [fileName]=\"selectedImageFileName\"\n    [visible]=\"showImageViewer\"\n    (closed)=\"onImageViewerClosed()\">\n  </mj-image-viewer>\n}\n", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  /* Positioned context for the in-place realtime \"call mode\" overlay (absolute inset:0) */\n  position: relative;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n   06-10 placement design: persistent presence indicator above the messages.\n   Renders only when [showAgentCharacter] is true, so existing embeds see no\n   layout change. The prominent variant grows toward a centered presence\n   (per Matt: \"can grow larger toward a centered presence\"). */\n.chat-agent-presence {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Sidebar toggle button in header */\n.sidebar-toggle-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn i {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: var(--mj-text-primary);\n}\n\n/* Header title: the conversation name in Main; in a fork, the path ending in the open fork */\n.chat-title-bar {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.chat-title {\n  flex: 0 1 auto;\n  min-width: 0;\n  margin: 0;\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.chat-title-path {\n  min-width: 0;\n}\n\n.chat-title-crumbs {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Parent crumbs shrink first, down to 80px each; the current entry keeps 120px before it truncates */\n.chat-title-crumb {\n  display: flex;\n  flex: 0 100 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 80px;\n}\n\n.chat-title-crumb.chat-title-ellipsis {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.chat-title-crumb > button {\n  min-width: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n}\n\n.chat-title-crumb-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Past three entries the crumbs between the first and the parent collapse into the ellipsis */\n.chat-title-crumb.collapsed-wide,\n.chat-title-ellipsis:not(.collapses-wide) {\n  display: none;\n}\n\n.chat-title-sep {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-border-strong);\n}\n\n.chat-title-current {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 120px;\n}\n\n.chat-title-kind {\n  flex-shrink: 0;\n  margin: 0 var(--mj-space-1);\n  color: var(--mj-status-info);\n}\n\n.chat-title-kind[data-kind='Edit'] {\n  color: var(--mj-status-warning);\n}\n\n.chat-title-kind[data-kind='Regenerate'] {\n  color: var(--mj-brand-tertiary);\n}\n\n.chat-title-bar .chat-title-rename {\n  flex-shrink: 0;\n  color: var(--mj-text-muted);\n  opacity: 0.6;\n  transition: opacity 0.15s ease, color 0.15s ease;\n}\n\n.chat-title-bar:hover .chat-title-rename,\n.chat-title-bar .chat-title-rename:focus-visible {\n  color: var(--mj-text-primary);\n  opacity: 1;\n}\n\n.chat-title-input {\n  flex: 0 1 360px;\n  min-width: 120px;\n  padding: var(--mj-space-1) var(--mj-space-2);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font: inherit;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.chat-title-input:focus-visible {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\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/* composerExtra slot: host UI directly above the composer. Spacing only; the host styles its content. */\n.chat-composer-extra {\n  margin-bottom: 0.5rem;\n}\n\n.read-only-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n/* Empty-state spans the full artifacts grid */\n.artifacts-empty-fill {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item:hover .version-open-text {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title-bar {\n    flex: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  /* The path keeps the first crumb and the current entry; every middle crumb collapses into the ellipsis */\n  .chat-title-crumb.path-middle {\n    display: none;\n  }\n  .chat-title-ellipsis:not(.collapses-wide) {\n    display: flex;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; /* Hide on mobile to save space */\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  /* Action buttons - icon only on mobile */\n  .chat-actions-buttons {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons .action-btn {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons .action-btn .btn-label {\n    display: none;\n  }\n  .chat-actions {\n    flex-wrap: nowrap;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile, overlapping header */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; /* 48px nav + 8px dark strip above blue border */\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n\n/* Artifact Picker Panel */\n.artifact-picker-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: slideInRight 0.2s ease-out;\n}\n\n@keyframes slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item i {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item i.fa-file-pdf { color: var(--mj-status-error); }\n.artifact-picker-item i.fa-file-excel { color: var(--mj-status-success); }\n.artifact-picker-item i.fa-file-word { color: var(--mj-brand-primary); }\n.artifact-picker-item i.fa-file { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* ---------- Floating \"on call\" pill (minimized realtime voice session) ----------\n   Shown bottom-right of the chat panel while the live call overlay is minimized\n   (e.g. after a gear-gated dev link navigated to a record). The mic + session stay\n   live; tapping the pill restores the full call overlay. */\n.voice-call-pill {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; /* just under the full call overlay (z-index 50) */\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n\n/* The fork title above the transcript, shown only when a host header replaces the default one */\n.fork-view-bar {\n  display: flex;\n  align-items: center;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.fork-composer-hint {\n  padding: var(--mj-space-1) var(--mj-space-4) 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.chat-actions-buttons > .forks-button .forks-count {\n  margin-left: var(--mj-space-1);\n  padding: 0 var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n}\n.chat-actions-buttons > .forks-button.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n       06-10 design: persistent presence indicator (Sid's face + live voice\n       state). Off by default; opt in via [showAgentCharacter]. When a\n       consumer projects an `mjChatSlot=\"agentPresence\"` template, it\n       replaces the default presence component. -->\n  @if (showAgentCharacter) {\n    <div class=\"chat-agent-presence\" [class.chat-agent-presence--prominent]=\"agentCharacterConfig?.voiceStateMode === 'prominent'\">\n      @if (slotTemplate('agentPresence'); as t) {\n        <ng-container *ngTemplateOutlet=\"t; context: {\n          $implicit: agentCharacterConfig,\n          state: agentCharacterConfig?.state ?? 'idle',\n          agentName: agentCharacterConfig?.characterName,\n          avatarUrl: agentCharacterConfig?.avatarUrl,\n          mode: agentCharacterConfig?.voiceStateMode ?? 'subtle'\n        }\"></ng-container>\n      } @else {\n        <mj-chat-agent-presence-default\n          [State]=\"agentCharacterConfig?.state ?? 'idle'\"\n          [AgentName]=\"agentCharacterConfig?.characterName\"\n          [AvatarUrl]=\"agentCharacterConfig?.avatarUrl\"\n          [Mode]=\"agentCharacterConfig?.voiceStateMode ?? 'subtle'\">\n        </mj-chat-agent-presence-default>\n      }\n    </div>\n  }\n\n  <!-- header slot \u2014 replaces the entire chat-header chrome (title, badges,\n       export/share/agent-picker buttons). When projected, the consumer owns\n       the entire header rendering; the default chrome below is bypassed\n       wholesale. Context exposes the minimal IMJChatHeaderComponent shape;\n       consumers needing more app state should bind to chat-area inputs\n       directly via @ViewChild or wrap the whole component. -->\n  @if (slotTemplate('header'); as t) {\n    <ng-container *ngTemplateOutlet=\"t; context: {\n      $implicit: conversation,\n      conversationTitle: conversation?.Name ?? null,\n      sharedBy: sharedByBadge?.display ?? null,\n      artifactCount: artifactCountDisplay,\n      showArtifactIndicator: showArtifactIndicator\n    }\"></ng-container>\n  } @else if (conversation || HasPreConversationHeader) {\n    <!-- Default header \u2014 also renders BEFORE a conversation exists when the\n         embedder has pre-conversation chrome to surface (currently just the\n         mode picker \u2014 agent / share / export / members / artifacts all\n         require a conversation row and stay hidden). Lets embedded surfaces\n         like the Form Builder cockpit show the mode picker above the\n         empty-state on a fresh chat instead of waiting for the first\n         message to round-trip. -->\n    <div class=\"chat-header\" (keydown.escape)=\"OnViewEscape($event)\">\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          <ng-container *ngTemplateOutlet=\"titleBar\"></ng-container>\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()\" [attr.title]=\"EffectiveReadOnly ? 'Project' : '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 (ForkSummaries.length > 0) {\n          <button mjButton #forksButton Variant=\"flat\" Size=\"sm\" class=\"forks-button\" [class.active]=\"ShowForksPopover\"\n            aria-haspopup=\"dialog\" [attr.aria-expanded]=\"ShowForksPopover\" [attr.aria-controls]=\"ShowForksPopover ? ForksPopoverID : null\"\n            (click)=\"ToggleForksPopover()\" title=\"Forks in this conversation\">\n            <i class=\"fa-solid fa-code-branch\"></i>\n            <span class=\"btn-label\">Forks</span>\n            <span class=\"forks-count\">{{ ForkSummaries.length }}</span>\n          </button>\n        }\n        @if (allowPinning && pinnedMessageCount > 0) {\n          <button class=\"pin-chip\" [class.active]=\"showPinsPanel\" (click)=\"TogglePinsPanel()\" title=\"View pinned messages\">\n            <i class=\"fas fa-thumbtack\"></i>\n            <span class=\"pin-chip-count\">{{ pinnedMessageCount }}</span>\n          </button>\n        }\n        @if (showArtifactIndicator && artifactCountDisplay > 0) {\n          <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\">\n            <i class=\"fas fa-cube\"></i>\n            <span class=\"artifact-badge\">{{ artifactCountDisplay }}</span>\n          </button>\n        }\n        @if (memberCount > 1) {\n          <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n            <i class=\"fas fa-users\"></i>\n            <span class=\"members-badge\">{{ memberCount }}</span>\n          </button>\n        }\n        @if (!overlayMode && showAgentModePicker && ModePickerTargetAgentId && !EffectiveReadOnly) {\n          <!-- Per-agent mode/quality picker (Draft / Standard / High).\n               Targets the agent the next non-mention message will route\n               to. Auto-hides when that agent has fewer than 2 configured\n               presets. Choice persists per-user, per-agent via\n               UserInfoEngine; emits the picked configuration ID up so\n               <mj-message-input> can forward it on the next route.\n               Hidden in overlayMode (the compact chat overlay): the\n               mode dropdown wastes the narrow top-right space there. -->\n          <mj-conversation-mode-picker\n            [AgentID]=\"ModePickerTargetAgentId\"\n            [Disabled]=\"isProcessing\"\n            (PresetChanged)=\"OnAgentModePresetChanged($event)\">\n          </mj-conversation-mode-picker>\n        }\n        @if (showAgentPicker && conversation) {\n          <!-- Per-conversation default-agent pin. When set, non-mention\n               messages route to this agent instead of Sage. Persists to\n               MJConversationEntity.DefaultAgentID. Hidden when no\n               conversation is loaded or when the embedder disables it. -->\n          <mj-conversation-agent-picker\n            [Conversation]=\"conversation\"\n            [CurrentUser]=\"currentUser\"\n            [AllowedAgentIDs]=\"AllowedAgentIDs\"\n            [Disabled]=\"EffectiveReadOnly\">\n          </mj-conversation-agent-picker>\n        }\n        @if (showExportButton) {\n          <button mjButton variant=\"flat\" size=\"sm\" (click)=\"exportConversation()\" [title]=\"exportButtonLabel + ' conversation'\">\n            <i [class]=\"exportButtonIcon\"></i>\n            <span class=\"btn-label\">{{ exportButtonLabel }}</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        <!-- headerActions slot \u2014 ADDITIVE host buttons rendered after the stock\n             actions (unlike the `header` slot, which replaces the whole header\n             and therefore never reaches this branch). For visual parity,\n             projected buttons should use mjButton variant=\"flat\" size=\"sm\". -->\n        @if (slotTemplate('headerActions'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: conversation,\n            conversationId: conversationId,\n            isProcessing: isProcessing\n          }\"></ng-container>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Header title. Main: the conversation name. A fork: the path, the conversation and each parent fork\n       (each opens its view; the parent is the way back), then the open fork with its kind icon. Past three\n       entries, and on narrow screens, the middle crumbs collapse into an ellipsis that opens the forks list.\n       The current name can be renamed in place. -->\n  <ng-template #titleBar>\n    <div class=\"chat-title-bar\">\n      @if (OpenView.Kind === 'Main') {\n        <ng-container *ngTemplateOutlet=\"titleName\"></ng-container>\n      } @else {\n        <nav class=\"chat-title-path\" aria-label=\"Breadcrumb\">\n          <ol class=\"chat-title-crumbs\">\n            @for (parent of HeaderPath.Parents; track $index) {\n              @if ($index === 1) {\n                <li class=\"chat-title-crumb chat-title-ellipsis\" [class.collapses-wide]=\"HeaderPath.CollapsesWide\">\n                  <button mjButton Variant=\"flat\" Size=\"sm\" type=\"button\" (click)=\"ShowWholePath()\" aria-label=\"Show the whole path\" title=\"Show the whole path\">\u2026</button>\n                  <i class=\"fa-solid fa-chevron-right chat-title-sep\" aria-hidden=\"true\"></i>\n                </li>\n              }\n              <li class=\"chat-title-crumb\" [class.path-middle]=\"parent.IsMiddle\" [class.collapsed-wide]=\"parent.CollapsedWide\">\n                <button mjButton Variant=\"flat\" Size=\"sm\" type=\"button\" (click)=\"OpenCrumb(parent.Crumb)\" [title]=\"'Back to ' + parent.Crumb.Label\">\n                  <span class=\"chat-title-crumb-label\">{{ parent.Crumb.Label }}</span>\n                </button>\n                <i class=\"fa-solid fa-chevron-right chat-title-sep\" aria-hidden=\"true\"></i>\n              </li>\n            }\n            <li class=\"chat-title-current\" aria-current=\"page\">\n              <i [class]=\"'chat-title-kind ' + OpenViewIcon\" [attr.data-kind]=\"OpenViewKind\" aria-hidden=\"true\"></i>\n              <ng-container *ngTemplateOutlet=\"titleName\"></ng-container>\n            </li>\n          </ol>\n        </nav>\n      }\n    </div>\n  </ng-template>\n\n  <!-- The current name and its rename button; the inline field while renaming -->\n  <ng-template #titleName>\n    @if (IsRenamingTitle) {\n      <input\n        #titleNameInput\n        type=\"text\"\n        class=\"chat-title-input\"\n        maxlength=\"255\"\n        [attr.aria-label]=\"TitleRenameLabel\"\n        [(ngModel)]=\"TitleRenameText\"\n        (keydown.enter)=\"$event.preventDefault(); SaveTitleRename(true)\"\n        (keydown.escape)=\"$event.preventDefault(); $event.stopPropagation(); CancelTitleRename()\"\n        (blur)=\"SaveTitleRename()\" />\n    } @else {\n      <h2 class=\"chat-title\" [title]=\"HeaderTitle\">{{ HeaderTitle }}</h2>\n      @if (CanRenameTitle) {\n        <button mjButton #titleRenameButton Variant=\"icon\" Size=\"sm\" type=\"button\" class=\"chat-title-rename\" (click)=\"StartTitleRename()\" [attr.aria-label]=\"TitleRenameLabel\" [title]=\"TitleRenameLabel\">\n          <i class=\"fa-solid fa-pen\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    }\n  </ng-template>\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 && !SelectedTaskGraphPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isLoadingConversation) {\n        <!-- Loading State - checked FIRST to prevent empty state flash. The branch\n             always short-circuits the panes below; showLoadingState only controls\n             whether the built-in spinner renders (hosts with their own loading\n             chrome set it false and get a blank pane instead). -->\n        @if (showLoadingState) {\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        }\n      } @else if ((isNewConversation || !conversationId) && !suppressNewConversationEmptyState) {\n        <!-- emptyState slot \u2014 when a consumer projects mjChatSlot=\"emptyState\",\n             they take over the entire empty-state region (including any send\n             affordance \u2014 the slot interface doesn't include a sendMessage\n             output, so consumers handle send via their own input). When no\n             slot is projected, the rich built-in <mj-conversation-empty-state>\n             renders with its own greeting, prompt chips, and message input.\n             emptyStateConfig (when supplied) takes precedence over the legacy\n             [emptyStateGreeting] string for backwards compatibility. -->\n        @if (ReadOnly) {\n          <div class=\"read-only-banner\" role=\"status\">\n            <i class=\"fas fa-eye\"></i>\n            <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n          </div>\n        } @else if (slotTemplate('emptyState'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: emptyStateConfig,\n            greeting: emptyStateConfig?.greeting ?? emptyStateGreeting,\n            subtext: emptyStateConfig?.subtext,\n            suggestedPrompts: emptyStateConfig?.suggestedPrompts ?? []\n          }\"></ng-container>\n        } @else {\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [initialDraft]=\"GetInitialDraftFor(null)\"\n            (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n            [disabled]=\"isProcessing\"\n            [showSidebarToggle]=\"showSidebarToggle\"\n            [overlayMode]=\"overlayMode\"\n            [greeting]=\"emptyStateConfig?.greeting ?? emptyStateGreeting\"\n            [showSuggestedPrompts]=\"showSuggestedPrompts\"\n            [enableAttachments]=\"enableAttachments && allowAttachments\"\n            [enableMentions]=\"allowMentions\"\n            [enableAgentMentions]=\"allowAgentMentions\"\n            [enableEntityMentions]=\"allowEntityMentions\"\n            [enableSkillCommands]=\"allowSkillCommands\"\n            [AllowedAgentIDs]=\"AllowedAgentIDs\"\n            [MentionPeople]=\"MentionPeople\"\n            [ComposerExtraTemplate]=\"slotTemplate('composerExtra')\"\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            @if (ReadOnly) {\n              <div class=\"read-only-banner\" role=\"status\">\n                <i class=\"fas fa-eye\"></i>\n                <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\n              </div>\n            } @else {\n              <!-- composerExtra slot \u2014 host UI directly above the composer (IMJChatComposerExtraContext). -->\n              @if (slotTemplate('composerExtra'); as t) {\n                <div class=\"chat-composer-extra\">\n                  <ng-container *ngTemplateOutlet=\"t; context: {\n                    $implicit: conversation,\n                    ConversationId: conversationId,\n                    IsProcessing: isProcessing\n                  }\"></ng-container>\n                </div>\n              }\n              <div class=\"message-input-container-wrapper\">\n                <mj-message-input\n                  #emptyStateInput\n                  [emptyStateMode]=\"true\"\n                  [initialDraft]=\"GetInitialDraftFor(null)\"\n                  (initialDraftApplied)=\"OnComposerDraftApplied()\"\n                  (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n                  (ComposerBlurred)=\"OnComposerBlurred()\"\n                  [currentUser]=\"currentUser\"\n                  [disabled]=\"isProcessing\"\n                  [ReadOnly]=\"EffectiveReadOnly\"\n                  [appContext]=\"appContext\"\n                  [applicationId]=\"applicationId\"\n                  [defaultAgentId]=\"defaultAgentId\"\n                  [enableAttachments]=\"enableAttachments && allowAttachments\"\n                  [enableMentions]=\"allowMentions\"\n                  [enableAgentMentions]=\"allowAgentMentions\"\n                  [enableEntityMentions]=\"allowEntityMentions\"\n                  [enableSkillCommands]=\"allowSkillCommands\"\n                  [enablePlanMode]=\"allowPlanMode\"\n                  [enableRealtime]=\"allowRealtime\"\n                  [AllowedAgentIDs]=\"AllowedAgentIDs\"\n                  [MentionPeople]=\"MentionPeople\"\n                  [maxAttachments]=\"maxAttachments\"\n                  [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                  [acceptedFileTypes]=\"acceptedFileTypes\"\n                  (emptyStateSubmit)=\"onEmptyStateMessageSent($event)\">\n                </mj-message-input>\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          @if (OpenView.Kind !== 'Main' && slotTemplate('header')) {\n            <!-- A host header replaces the default one, so the fork title shows above the transcript. -->\n            <div class=\"fork-view-bar\" role=\"region\" aria-label=\"Fork\" (keydown.escape)=\"OnViewEscape($event)\">\n              <ng-container *ngTemplateOutlet=\"titleBar\"></ng-container>\n            </div>\n          }\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()\" (keydown.escape)=\"OnViewEscape($event)\">\n            <mj-conversation-message-list\n              [showEmptyFill]=\"showEmptyFill\"\n              [showDateNavigation]=\"showDateNavigation\"\n              [showAgentRunDetails]=\"showAgentRunDetails\"\n              [showReactions]=\"showReactions\"\n              [showMessageRating]=\"showMessageRating\"\n              [allowPinning]=\"allowPinning && !EffectiveReadOnly\"\n              [allowMessageEdit]=\"allowMessageEdit && !EffectiveReadOnly\"\n              [allowMessageDelete]=\"allowMessageDelete && !EffectiveReadOnly\"\n              [ReadOnly]=\"EffectiveReadOnly\"\n              [AllowStopRun]=\"AllowStopRun\"\n              [InFlightCount]=\"InFlightCount\"\n              [assistantDisplayName]=\"assistantDisplayName\"\n              [assistantAvatarUrl]=\"assistantAvatarUrl\"\n              [messages]=\"DisplayMessages\"\n              [HasMoreAbove]=\"ListHasMoreAbove\"\n              [IsLoadingOlder]=\"isLoadingOlderMessages\"\n              [ScrollRoot]=\"messageScrollRoot\"\n              (OlderRequested)=\"onOlderMessagesRequested()\"\n              (DateJumpRequested)=\"onDateJumpRequested($event)\"\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              [ForkChipMap]=\"ForkChipMap\"\n              [ForkLayout]=\"ForkLayout\"\n              [CanFork]=\"CanFork\"\n              [InPlaceTurn]=\"InPlaceTurn\"\n              (ForkOpenRequested)=\"OnForkOpenRequested($event)\"\n              (EditResendRequested)=\"OnEditResendRequested($event)\"\n              (RegenerateRequested)=\"OnRegenerateRequested($event)\"\n              (ResendInPlaceRequested)=\"OnResendInPlaceRequested($event)\"\n              (ForkRequested)=\"OnForkRequested($event)\"\n              (realtimeSessionOpenRequested)=\"OpenRealtimeSessionReview($event)\"\n              (deleteMessage)=\"onDeleteMessage($event)\"\n              (BeforeStopClicked)=\"BeforeStopClicked.emit($event)\"\n              (StopMessage)=\"OnStopMessage($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              (LivenessCheckRequested)=\"OnLivenessCheckRequested($event)\"\n              (messagePinToggled)=\"onMessagePinToggled($event)\"\n              (beforeResponseFormSubmitted)=\"beforeResponseFormSubmitted.emit($event)\"\n              (afterResponseFormSubmitted)=\"afterResponseFormSubmitted.emit($event)\"\n              (TaskGraphPanelRequested)=\"OnTaskGraphPanelRequested($event)\"\n              (ScrollToMessageRequested)=\"OnJumpToMessage($event)\">\n            </mj-conversation-message-list>\n\n            <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n            @if (showScrollToBottomIcon && DisplayMessages.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 if (ReadOnly) {\n              <div class=\"read-only-banner\" role=\"status\">\n                <i class=\"fas fa-eye\"></i>\n                <span>{{ ReadOnlyMessage || 'You have view-only access to this conversation.' }}</span>\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              <!-- composerExtra slot \u2014 host UI directly above the composer (IMJChatComposerExtraContext). -->\n              @if (slotTemplate('composerExtra'); as t) {\n                <div class=\"chat-composer-extra\">\n                  <ng-container *ngTemplateOutlet=\"t; context: {\n                    $implicit: conversation,\n                    ConversationId: conversationId,\n                    IsProcessing: isProcessing\n                  }\"></ng-container>\n                </div>\n              }\n              <!-- Input Component - Multiple instances cached, only one visible -->\n              <div class=\"message-input-container-wrapper\">\n                @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                  <mj-message-input\n                    #messageInput\n                    [hidden]=\"inputRef.conversationId !== conversationId\"\n                    [initialDraft]=\"GetInitialDraftFor(inputRef.conversationId)\"\n                    (DraftStateChanged)=\"OnDraftStateChanged(inputRef.conversationId, $event)\"\n                    (ComposerBlurred)=\"OnComposerBlurred()\"\n                    [conversationId]=\"inputRef.conversationId\"\n                    [conversationName]=\"inputRef.conversationName\"\n                    [currentUser]=\"currentUser\"\n                    [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                    [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                    [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                    [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                    [appContext]=\"appContext\"\n                    [applicationId]=\"applicationId\"\n                    [defaultAgentId]=\"defaultAgentId\"\n                    [conversationDefaultAgentId]=\"inputRef.conversationId === conversationId ? (conversation?.DefaultAgentID ?? null) : null\"\n                    [agentConfigurationPresetId]=\"inputRef.conversationId === conversationId ? ActiveAgentConfigurationPresetId : null\"\n                    [AgentReplyMode]=\"AgentReplyMode\"\n                    [AllowedAgentIDs]=\"AllowedAgentIDs\"\n                    [MentionPeople]=\"MentionPeople\"\n                    [AgentHistoryFrom]=\"AgentHistoryFrom\"\n                    [TargetBranchID]=\"TargetBranchIdFor(inputRef.conversationId)\"\n                    [ResolveTargetBranch]=\"inputRef.conversationId === conversationId ? ResolveComposerBranch : null\"\n                    [AgentTurnHandler]=\"AgentTurnHandler\"\n                    [AutoNameConversation]=\"AutoNameConversation\"\n                    [EnableDecisionRouting]=\"EnableDecisionRouting\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing || isReadOnlyView\"\n                    [ReadOnly]=\"EffectiveReadOnly\"\n                    [enableAttachments]=\"enableAttachments && allowAttachments\"\n                    [enableMentions]=\"allowMentions\"\n                    [enableAgentMentions]=\"allowAgentMentions\"\n                    [enableEntityMentions]=\"allowEntityMentions\"\n                    [enableSkillCommands]=\"allowSkillCommands\"\n                    [enablePlanMode]=\"allowPlanMode\"\n                    [enableRealtime]=\"allowRealtime && OpenView.Kind !== 'DraftFork'\"\n                    [Placeholder]=\"ComposerPlaceholderFor(inputRef.conversationId)\"\n                    [SendSlotMode]=\"inputRef.conversationId === conversationId ? SendSlotMode : 'send'\"\n                    [StopCount]=\"inputRef.conversationId === conversationId ? StopCount : 0\"\n                    [StopLabel]=\"StopLabel\"\n                    [StatusText]=\"inputRef.conversationId === conversationId ? StatusText : null\"\n                    [StatusElapsed]=\"inputRef.conversationId === conversationId ? StatusElapsed : null\"\n                    (StopClicked)=\"OnComposerStopClicked()\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingMessage : null\"\n                    [initialAttachments]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingAttachments : null\"\n                    (initialMessageAutoSendStarted)=\"onInitialMessageAutoSendStarted($event)\"\n                    (initialMessageAutoSendFailed)=\"onInitialMessageAutoSendFailed($event)\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (MessageStreamed)=\"OnMessageStreamed($event)\"\n                    (agentResponse)=\"onAgentResponse($event)\"\n                    (agentRunDetected)=\"onAgentRunDetected($event)\"\n                    (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                    (messageComplete)=\"onMessageComplete($event)\"\n                    (artifactCreated)=\"onArtifactCreated($event)\"\n                    (conversationRenamed)=\"onConversationRenamed($event)\"\n                    (intentCheckStarted)=\"onIntentCheckStarted($event)\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted($event)\"\n                    (beforeAgentTurn)=\"beforeAgentTurn.emit($event)\"\n                    (afterAgentTurn)=\"afterAgentTurn.emit($event)\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n              @if (ComposerHint) {\n                <div class=\"fork-composer-hint\">{{ ComposerHint }}</div>\n              }\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          [Scope]=\"ArtifactViewerScope\"\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    <!-- Task Graph Run Viewer Pane -->\n    @if (SelectedTaskGraphPanel) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane chat-task-graph-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <div class=\"task-graph-pane-header\">\n          <div class=\"task-graph-pane-title-group\">\n            <span class=\"task-graph-pane-icon\">\n              <i class=\"fa-solid fa-diagram-project\"></i>\n            </span>\n            <div class=\"task-graph-pane-titles\">\n              <span class=\"task-graph-pane-title\">{{ SelectedTaskGraphPanel.workflowTitle }}</span>\n              <span class=\"task-graph-pane-subtitle\">Interactive Task Graph &amp; Step Inspector</span>\n            </div>\n          </div>\n          <div class=\"task-graph-pane-actions\">\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-save-btn\"\n              [disabled]=\"IsSavingTaskGraphWorkflow || !taskGraphRunView.Spec?.tasks?.length\"\n              (click)=\"OnSaveTaskGraphAsWorkflow(taskGraphRunView.Spec)\"\n              title=\"Save this task graph as a reusable Draft Flow Agent workflow\">\n              <i class=\"fa-solid\" [class.fa-spinner]=\"IsSavingTaskGraphWorkflow\" [class.fa-spin]=\"IsSavingTaskGraphWorkflow\" [class.fa-floppy-disk]=\"!IsSavingTaskGraphWorkflow\"></i>\n              <span>{{ IsSavingTaskGraphWorkflow ? 'Saving\u2026' : 'Save as Workflow' }}</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-btn\"\n              (click)=\"toggleMaximizeArtifactPane()\"\n              [title]=\"isArtifactPaneMaximized ? 'Restore panel size' : 'Maximize panel'\">\n              <i class=\"fa-solid\" [class.fa-compress]=\"isArtifactPaneMaximized\" [class.fa-expand]=\"!isArtifactPaneMaximized\"></i>\n            </button>\n            <button\n              type=\"button\"\n              class=\"task-graph-pane-btn\"\n              (click)=\"OnCloseTaskGraphPanel()\"\n              title=\"Close Task Graph panel\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n        </div>\n        <div class=\"task-graph-pane-body\">\n          <mj-task-graph-run-view\n            #taskGraphRunView\n            [ParentTaskID]=\"SelectedTaskGraphPanel.parentTaskId\"\n            [WorkflowName]=\"SelectedTaskGraphPanel.workflowTitle\"\n            [LiveUpdates]=\"true\"\n            [ShowVariables]=\"true\"\n            [Height]=\"'100%'\">\n          </mj-task-graph-run-view>\n        </div>\n      </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n\n    <!-- Pinned Messages Panel (overlay) -->\n    @if (allowPinning && showPinsPanel) {\n      <mj-pinned-messages-panel\n        [pinnedMessages]=\"pinnedMessages\"\n        [isLoading]=\"isLoadingPins\"\n        [AllowUnpin]=\"!EffectiveReadOnly\"\n        (closed)=\"showPinsPanel = false\"\n        (jumpRequested)=\"onJumpToMessage($event)\"\n        (unpinRequested)=\"onUnpinFromPanel($event)\">\n      </mj-pinned-messages-panel>\n    }\n\n    @if (ShowForksPopover) {\n      <mj-conversation-forks-popover\n        [PanelID]=\"ForksPopoverID\"\n        [Summaries]=\"ForkSummaries\"\n        [CurrentUserID]=\"CurrentUser.ID\"\n        (ForkSelected)=\"OnForkSelectedFromList($event)\"\n        (Closed)=\"CloseForksPopover()\">\n      </mj-conversation-forks-popover>\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      [AllowStartLive]=\"CanStartVoiceFromReview\"\n      [Chrome]=\"overlayMode ? 'orb' : 'auto'\"\n      [Compact]=\"overlayMode\"\n      [ShowDevLinks]=\"!overlayMode\"\n      [ShowDensityPicker]=\"!overlayMode\"\n      (NavigateRequest)=\"onRealtimeNavigateRequest($event)\"\n      (StartLiveRequested)=\"onReviewStartLive($event)\"\n      (ReviewClosed)=\"onReviewClosed()\">\n    </mj-realtime-session-overlay>\n    @if (RealtimeSession.Minimized$ | async) {\n      <button type=\"button\" class=\"voice-call-pill\" (click)=\"RealtimeSession.SetMinimized(false)\"\n              title=\"Return to the live call\" aria-label=\"Return to the live call\">\n        <span class=\"voice-call-pill__pulse\" aria-hidden=\"true\"></span>\n        <i class=\"fa-solid fa-phone-volume\" aria-hidden=\"true\"></i>\n        <span class=\"voice-call-pill__text\">\n          <span class=\"voice-call-pill__name\">On call \u00B7 {{ RealtimeSession.CurrentAgentName }}</span>\n          <span class=\"voice-call-pill__hint\">Tap to return</span>\n        </span>\n      </button>\n    }\n  }\n</div>\n\n<!-- Export Modal -->\n<!-- [branding] is bound BEFORE [isVisible] deliberately: Angular sets inputs in\n     template order within a change-detection pass, and the modal's isVisible setter\n     reads `branding` to default its \"Include branding\" checkbox on a fresh open. -->\n<mj-export-modal\n  [branding]=\"exportBranding\"\n  [isVisible]=\"showExportModal\"\n  [conversation]=\"conversation || undefined\"\n  [Scope]=\"ExportScope\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Share Dialog (generic, shared with dashboards) -->\n<mj-resource-share-dialog\n  [Visible]=\"showShareModal\"\n  [Context]=\"shareContext\"\n  [Adapter]=\"shareAdapter\"\n  (Result)=\"onShareDialogResult($event)\">\n</mj-resource-share-dialog>\n\n<!-- Members Modal -->\n<mj-members-modal\n  [isVisible]=\"showMembersModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"showMembersModal = false\"\n  (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n  <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <mj-project-selector\n          [environmentId]=\"environmentId\"\n          [currentUser]=\"currentUser\"\n          [selectedProjectId]=\"conversation.ProjectID\"\n          (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n  <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n          @if (hasSystemArtifacts) {\n            <button class=\"toggle-system-btn\"\n              [class.active]=\"showSystemArtifacts\"\n              (click)=\"toggleSystemArtifacts()\"\n              title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n            </button>\n          }\n          <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n          <mj-empty-state\n            class=\"artifacts-empty-fill\"\n            Icon=\"fa-solid fa-cube\"\n            Title=\"No artifacts in this conversation yet\" />\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n          <div class=\"artifact-modal-card\"\n            [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n            [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n            <!-- Main card header - click to open latest version -->\n            <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n              <div class=\"artifact-modal-icon\">\n                <i class=\"fas fa-file-code\"></i>\n              </div>\n              <div class=\"artifact-modal-info\">\n                <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                <div class=\"artifact-modal-meta\">\n                  @if (artifact.versionCount > 1) {\n                    {{artifact.versionCount}} versions\n                  } @else {\n                    1 version\n                  }\n                </div>\n              </div>\n              @if (artifact.versionCount > 1) {\n                <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                  <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                  [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                </button>\n              }\n              <div class=\"artifact-modal-action\">\n                <i class=\"fas fa-external-link-alt\"></i>\n              </div>\n            </div>\n\n            <!-- Expanded version list -->\n            @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n              <div class=\"artifact-versions-list\">\n                @for (version of artifact.versions; track version.versionId) {\n                  <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                    <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                    <span class=\"version-open-text\">Open this version</span>\n                    <i class=\"fas fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    [artifactVersionId]=\"collectionPickerVersionId\"\n    [artifactName]=\"collectionPickerArtifactName\"\n    [artifactVersionNumber]=\"collectionPickerVersionNumber\"\n    (completed)=\"onCollectionPickerCompleted($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Test Feedback Dialog -->\n@if (testFeedbackDialogData) {\n  <mj-test-feedback-dialog\n    [data]=\"testFeedbackDialogData\"\n    [visible]=\"showTestFeedbackDialog\"\n    (closed)=\"onTestFeedbackDialogClosed($event)\">\n  </mj-test-feedback-dialog>\n}\n\n<!-- Image Viewer Modal -->\n@if (showImageViewer) {\n  <mj-image-viewer\n    [imageUrl]=\"selectedImageUrl\"\n    [alt]=\"selectedImageAlt\"\n    [fileName]=\"selectedImageFileName\"\n    [visible]=\"showImageViewer\"\n    (closed)=\"onImageViewerClosed()\">\n  </mj-image-viewer>\n}\n", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  /* Positioned context for the in-place realtime \"call mode\" overlay (absolute inset:0) */\n  position: relative;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n   06-10 placement design: persistent presence indicator above the messages.\n   Renders only when [showAgentCharacter] is true, so existing embeds see no\n   layout change. The prominent variant grows toward a centered presence\n   (per Matt: \"can grow larger toward a centered presence\"). */\n.chat-agent-presence {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Sidebar toggle button in header */\n.sidebar-toggle-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn i {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: var(--mj-text-primary);\n}\n\n/* Header title: the conversation name in Main; in a fork, the path ending in the open fork */\n.chat-title-bar {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.chat-title {\n  flex: 0 1 auto;\n  min-width: 0;\n  margin: 0;\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.chat-title-path {\n  min-width: 0;\n}\n\n.chat-title-crumbs {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Parent crumbs shrink first, down to 80px each; the current entry keeps 120px before it truncates */\n.chat-title-crumb {\n  display: flex;\n  flex: 0 100 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 80px;\n}\n\n.chat-title-crumb.chat-title-ellipsis {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.chat-title-crumb > button {\n  min-width: 0;\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-sm);\n  font-weight: 500;\n}\n\n.chat-title-crumb-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Past three entries the crumbs between the first and the parent collapse into the ellipsis */\n.chat-title-crumb.collapsed-wide,\n.chat-title-ellipsis:not(.collapses-wide) {\n  display: none;\n}\n\n.chat-title-sep {\n  flex-shrink: 0;\n  font-size: 12px;\n  color: var(--mj-border-strong);\n}\n\n.chat-title-current {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--mj-space-1);\n  min-width: 120px;\n}\n\n.chat-title-kind {\n  flex-shrink: 0;\n  margin: 0 var(--mj-space-1);\n  color: var(--mj-status-info);\n}\n\n.chat-title-kind[data-kind='Edit'] {\n  color: var(--mj-status-warning);\n}\n\n.chat-title-kind[data-kind='Regenerate'] {\n  color: var(--mj-brand-tertiary);\n}\n\n.chat-title-bar .chat-title-rename {\n  flex-shrink: 0;\n  color: var(--mj-text-muted);\n  opacity: 0.6;\n  transition: opacity 0.15s ease, color 0.15s ease;\n}\n\n.chat-title-bar:hover .chat-title-rename,\n.chat-title-bar .chat-title-rename:focus-visible {\n  color: var(--mj-text-primary);\n  opacity: 1;\n}\n\n.chat-title-input {\n  flex: 0 1 360px;\n  min-width: 120px;\n  padding: var(--mj-space-1) var(--mj-space-2);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font: inherit;\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.chat-title-input:focus-visible {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-focus-ring);\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-task-graph-pane {\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.task-graph-pane-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.task-graph-pane-title-group {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.task-graph-pane-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-titles {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n}\n\n.task-graph-pane-title {\n  font-size: 13.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.task-graph-pane-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.task-graph-pane-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n\n.task-graph-pane-save-btn {\n  height: 30px;\n  padding: 0 10px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  border: 1px solid var(--mj-brand-primary);\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  cursor: pointer;\n  transition: opacity 0.15s ease, filter 0.15s ease;\n}\n\n.task-graph-pane-save-btn:hover:not(:disabled) {\n  filter: brightness(1.06);\n}\n\n.task-graph-pane-save-btn:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n\n.task-graph-pane-btn {\n  width: 30px;\n  height: 30px;\n  border-radius: 6px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;\n}\n\n.task-graph-pane-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n.task-graph-pane-body {\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 0;\n  padding: 12px 16px 16px;\n  box-sizing: border-box;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.task-graph-pane-body > mj-task-graph-run-view {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n  min-width: 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/* composerExtra slot: host UI directly above the composer. Spacing only; the host styles its content. */\n.chat-composer-extra {\n  margin-bottom: 0.5rem;\n}\n\n.read-only-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n/* Empty-state spans the full artifacts grid */\n.artifacts-empty-fill {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item:hover .version-open-text {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title-bar {\n    flex: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  /* The path keeps the first crumb and the current entry; every middle crumb collapses into the ellipsis */\n  .chat-title-crumb.path-middle {\n    display: none;\n  }\n  .chat-title-ellipsis:not(.collapses-wide) {\n    display: flex;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; /* Hide on mobile to save space */\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  /* Action buttons - icon only on mobile */\n  .chat-actions-buttons {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons .action-btn {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons .action-btn .btn-label {\n    display: none;\n  }\n  .chat-actions {\n    flex-wrap: nowrap;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile, overlapping header */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; /* 48px nav + 8px dark strip above blue border */\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n\n/* Artifact Picker Panel */\n.artifact-picker-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: slideInRight 0.2s ease-out;\n}\n\n@keyframes slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item i {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item i.fa-file-pdf { color: var(--mj-status-error); }\n.artifact-picker-item i.fa-file-excel { color: var(--mj-status-success); }\n.artifact-picker-item i.fa-file-word { color: var(--mj-brand-primary); }\n.artifact-picker-item i.fa-file { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* ---------- Floating \"on call\" pill (minimized realtime voice session) ----------\n   Shown bottom-right of the chat panel while the live call overlay is minimized\n   (e.g. after a gear-gated dev link navigated to a record). The mic + session stay\n   live; tapping the pill restores the full call overlay. */\n.voice-call-pill {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; /* just under the full call overlay (z-index 50) */\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n\n/* The fork title above the transcript, shown only when a host header replaces the default one */\n.fork-view-bar {\n  display: flex;\n  align-items: center;\n  padding: var(--mj-space-2) var(--mj-space-4);\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n.fork-composer-hint {\n  padding: var(--mj-space-1) var(--mj-space-4) 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.chat-actions-buttons > .forks-button .forks-count {\n  margin-left: var(--mj-space-1);\n  padding: 0 var(--mj-space-2);\n  border-radius: var(--mj-radius-full);\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  font-size: var(--mj-text-xs);\n  font-weight: 600;\n}\n.chat-actions-buttons > .forks-button.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n"] }]
     }], () => [{ type: i1.AgentStateService }, { type: i2.ConversationLivenessDomService }, { type: i3.ConversationAgentService }, { type: i4.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { 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
         }], environmentId: [{
@@ -9032,6 +9428,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             type: Input
         }], allowRealtime: [{
             type: Input
+        }], AllowForking: [{
+            type: Input
+        }], AllowStopRun: [{
+            type: Input
         }], ShowEmptyFill: [{
             type: Input
         }], showEmptyFill: [{
@@ -9234,8 +9634,6 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             type: Output
         }], afterToolInvoked: [{
             type: Output
-        }], AllowStopRun: [{
-            type: Input
         }], BeforeResponseFormSubmitted: [{
             type: Output
         }], beforeResponseFormSubmitted: [{
@@ -9346,5 +9744,5 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             type: ViewChild,
             args: ['forksButton', { read: ElementRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 201 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 204 }); })();
 //# sourceMappingURL=conversation-chat-area.component.js.map