@memberjunction/ng-conversations 6.1.0-edge.2 → 6.1.0-edge.4

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

@@ -3,6 +3,7 @@ import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { RunView, CompositeKey, LogStatusEx } from '@memberjunction/core';
 import { ArtifactMetadataEngine, ConversationEngine } from '@memberjunction/core-entities';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
+import { ConversationDetailWindowStore } from '../../services/conversation-detail-window.store';
 import { MentionAutocompleteService } from '../../services/mention-autocomplete.service';
 import { MJResourcePermissionShareAdapter } from '@memberjunction/ng-resource-permissions';
 import { LazyArtifactInfo } from '../../models/lazy-artifact-info';
@@ -16,6 +17,8 @@ import { ConversationsRuntime } from '@memberjunction/conversations-runtime';
 import { RealtimeSessionService } from '../../services/realtime-session.service';
 import { RealtimeSessionReviewService } from '../../services/realtime-session-review.service';
 import { GenerateAndApplyConversationName } from '../../services/conversation-naming';
+import { ResolveDateJumpTarget, CombineDateJumpOutcome, DescribeDateJumpOutcome, DATE_JUMP_MAX_PAGES } from '../../utils/date-jump';
+import { MessageListComponent } from '../message/message-list.component';
 import { NormalizeUUID, UUIDsEqual } from '@memberjunction/global';
 // PR 2c — Widget extension surface
 import { ChatSlotDirective } from '../../directives/chat-slot.directive';
@@ -151,7 +154,7 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_6_Template(rf,
 function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 44);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.showPinsPanel = !ctx_r0.showPinsPanel); });
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.TogglePinsPanel()); });
     i0.ɵɵelement(1, "i", 45);
     i0.ɵɵelementStart(2, "span", 46);
     i0.ɵɵtext(3);
@@ -160,7 +163,7 @@ function ConversationChatAreaComponent_Conditional_3_Conditional_8_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("active", ctx_r0.showPinsPanel);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r0.pinnedMessages.length);
+    i0.ɵɵtextInterpolate(ctx_r0.pinnedMessageCount);
 } }
 function ConversationChatAreaComponent_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -275,7 +278,7 @@ function ConversationChatAreaComponent_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional((ctx_r0.conversation == null ? null : ctx_r0.conversation.TestRunID) ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.allowPinning && ctx_r0.pinnedMessages.length > 0 ? 8 : -1);
+    i0.ɵɵconditional(ctx_r0.allowPinning && ctx_r0.pinnedMessageCount > 0 ? 8 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.showArtifactIndicator && ctx_r0.artifactCountDisplay > 0 ? 9 : -1);
     i0.ɵɵadvance();
@@ -407,7 +410,7 @@ function ConversationChatAreaComponent_Conditional_10_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(2, "div", 65, 1);
     i0.ɵɵlistener("scroll", function ConversationChatAreaComponent_Conditional_10_Template_div_scroll_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.checkScroll()); });
     i0.ɵɵelementStart(4, "mj-conversation-message-list", 66);
-    i0.ɵɵlistener("realtimeSessionOpenRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_realtimeSessionOpenRequested_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OpenRealtimeSessionReview($event)); })("replyInThread", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_replyInThread_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReplyInThread($event)); })("viewThread", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_viewThread_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onViewThread($event)); })("deleteMessage", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_deleteMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteMessage($event)); })("retryMessage", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_retryMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRetryMessage($event)); })("testFeedbackMessage", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_testFeedbackMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_artifactClicked_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_messageEdited_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_openEntityRecord_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_suggestedResponseSelected_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSuggestedResponseSelected($event)); })("attachmentClicked", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_attachmentClicked_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAttachmentClicked($event)); })("diagnosticRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_diagnosticRequested_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDiagnosticRequested($event)); })("messagePinToggled", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_messagePinToggled_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessagePinToggled($event)); })("beforeResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_beforeResponseFormSubmitted_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.beforeResponseFormSubmitted.emit($event)); })("afterResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_afterResponseFormSubmitted_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.afterResponseFormSubmitted.emit($event)); });
+    i0.ɵɵlistener("OlderRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_OlderRequested_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOlderMessagesRequested()); })("DateJumpRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_DateJumpRequested_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDateJumpRequested($event)); })("realtimeSessionOpenRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_realtimeSessionOpenRequested_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OpenRealtimeSessionReview($event)); })("replyInThread", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_replyInThread_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onReplyInThread($event)); })("viewThread", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_viewThread_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onViewThread($event)); })("deleteMessage", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_deleteMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDeleteMessage($event)); })("retryMessage", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_retryMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onRetryMessage($event)); })("testFeedbackMessage", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_testFeedbackMessage_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTestFeedbackMessage($event)); })("artifactClicked", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_artifactClicked_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactClicked($event)); })("messageEdited", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_messageEdited_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessageEdited($event)); })("openEntityRecord", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_openEntityRecord_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("suggestedResponseSelected", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_suggestedResponseSelected_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSuggestedResponseSelected($event)); })("attachmentClicked", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_attachmentClicked_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAttachmentClicked($event)); })("diagnosticRequested", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_diagnosticRequested_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onDiagnosticRequested($event)); })("messagePinToggled", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_messagePinToggled_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onMessagePinToggled($event)); })("beforeResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_beforeResponseFormSubmitted_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.beforeResponseFormSubmitted.emit($event)); })("afterResponseFormSubmitted", function ConversationChatAreaComponent_Conditional_10_Template_mj_conversation_message_list_afterResponseFormSubmitted_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.afterResponseFormSubmitted.emit($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_10_Conditional_5_Template, 2, 0, "span", 67);
     i0.ɵɵelementEnd();
@@ -419,7 +422,7 @@ function ConversationChatAreaComponent_Conditional_10_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isUploadingAttachments ? 1 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("showEmptyFill", ctx_r0.showEmptyFill)("showDateNavigation", ctx_r0.showDateNavigation)("showAgentRunDetails", ctx_r0.showAgentRunDetails)("showReactions", ctx_r0.showReactions)("showMessageRating", ctx_r0.showMessageRating)("allowPinning", ctx_r0.allowPinning)("allowMessageEdit", ctx_r0.allowMessageEdit)("allowMessageDelete", ctx_r0.allowMessageDelete)("assistantDisplayName", ctx_r0.assistantDisplayName)("assistantAvatarUrl", ctx_r0.assistantAvatarUrl)("messages", ctx_r0.messages)("conversation", ctx_r0.conversation)("currentUser", ctx_r0.currentUser)("isProcessing", ctx_r0.isProcessing)("artifactMap", ctx_r0.effectiveArtifactsMap)("agentRunMap", ctx_r0.agentRunsByDetailId)("ratingsMap", ctx_r0.ratingsByDetailId)("userAvatarMap", ctx_r0.userAvatarMap)("attachmentsMap", ctx_r0.attachmentsByDetailId)("messageRendererTemplate", ctx_r0.slotTemplate("messageRenderer"))("messageExtraTemplate", ctx_r0.slotTemplate("messageExtra"))("sessionMetaMap", ctx_r0.realtimeSessionMetaMap);
+    i0.ɵɵproperty("showEmptyFill", ctx_r0.showEmptyFill)("showDateNavigation", ctx_r0.showDateNavigation)("showAgentRunDetails", ctx_r0.showAgentRunDetails)("showReactions", ctx_r0.showReactions)("showMessageRating", ctx_r0.showMessageRating)("allowPinning", ctx_r0.allowPinning)("allowMessageEdit", ctx_r0.allowMessageEdit)("allowMessageDelete", ctx_r0.allowMessageDelete)("assistantDisplayName", ctx_r0.assistantDisplayName)("assistantAvatarUrl", ctx_r0.assistantAvatarUrl)("messages", ctx_r0.messages)("HasMoreAbove", ctx_r0.hasMoreMessagesAbove)("IsLoadingOlder", ctx_r0.isLoadingOlderMessages)("ScrollRoot", ctx_r0.messageScrollRoot)("conversation", ctx_r0.conversation)("currentUser", ctx_r0.currentUser)("isProcessing", ctx_r0.isProcessing)("artifactMap", ctx_r0.effectiveArtifactsMap)("agentRunMap", ctx_r0.agentRunsByDetailId)("ratingsMap", ctx_r0.ratingsByDetailId)("userAvatarMap", ctx_r0.userAvatarMap)("attachmentsMap", ctx_r0.attachmentsByDetailId)("messageRendererTemplate", ctx_r0.slotTemplate("messageRenderer"))("messageExtraTemplate", ctx_r0.slotTemplate("messageExtra"))("sessionMetaMap", ctx_r0.realtimeSessionMetaMap);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.showScrollToBottomIcon && ctx_r0.messages && ctx_r0.messages.length > 0 ? 5 : -1);
     i0.ɵɵadvance(2);
@@ -453,7 +456,7 @@ function ConversationChatAreaComponent_Conditional_13_Template(rf, ctx) { if (rf
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("pinnedMessages", ctx_r0.pinnedMessages);
+    i0.ɵɵproperty("pinnedMessages", ctx_r0.pinnedMessages)("isLoading", ctx_r0.isLoadingPins);
 } }
 function ConversationChatAreaComponent_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
@@ -1358,9 +1361,158 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     ARTIFACT_PANE_WIDTH_KEY = 'mj-conversations-artifact-pane-width';
     // Pinned messages panel state
     showPinsPanel = false;
-    /** All currently pinned messages in the active conversation, newest pin first */
+    /** True once the pin ENTITIES are loaded. The COUNT is known from conversation open. */
+    pinsHydrated = false;
+    /** Spinner state for the panel's first open — the rows now arrive after the panel does. */
+    isLoadingPins = false;
+    /**
+     * TRUE pin count for the chip. Deliberately NOT `pinnedMessages.length`, which is 0 until
+     * the panel has been opened and would hide the chip on a conversation full of pins.
+     */
+    get pinnedMessageCount() {
+        return this.windowStore.PinnedTotalCount;
+    }
+    /**
+     * Opens/closes the pins panel, hydrating its rows on first open.
+     *
+     * Lazy on purpose: the panel is closed by default, so loading pin entities during
+     * conversation open costs every user for a panel most never open.
+     */
+    async TogglePinsPanel() {
+        this.showPinsPanel = !this.showPinsPanel;
+        if (this.showPinsPanel && !this.pinsHydrated && this.conversationId) {
+            this.isLoadingPins = true;
+            this.cdr.detectChanges();
+            try {
+                await this.hydratePinnedMessages(this.conversationId);
+            }
+            finally {
+                this.isLoadingPins = false;
+            }
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * All currently pinned messages in the active conversation, newest pin first.
+     *
+     * Read from the window store's separate pin set, NOT filtered out of `messages` — a pin
+     * older than the loaded window would otherwise vanish from the panel. Loaded by its own
+     * `IsPinned=1` query in {@link loadMessages}, already ordered `Sequence DESC`.
+     *
+     * This and the three getters around it are TEMPLATE-BOUND, so they run on every change
+     * detection cycle. They read the store's cheap single-value accessors rather than
+     * `GetSnapshot()`, which copies the whole loaded window on every call — four of those per
+     * cycle, during streaming per token, is exactly the length-proportional work this feature
+     * exists to remove.
+     */
     get pinnedMessages() {
-        return this.messages.filter(m => m.IsPinned).reverse();
+        return this.windowStore.PinnedDetails;
+    }
+    /** True when older transcript pages remain above the loaded window (drives the sentinel). */
+    get hasMoreMessagesAbove() {
+        return this.windowStore.HasMoreAbove;
+    }
+    /** True while an older transcript page is being fetched. */
+    get isLoadingOlderMessages() {
+        return this.windowStore.IsLoadingOlder;
+    }
+    /**
+     * The transcript list — needed so a date jump can scroll AFTER this component has finished
+     * paging older history. The list owns the scroll; this component owns the window.
+     */
+    messageListComponent;
+    /**
+     * The element that actually scrolls the transcript, handed to the message list so its
+     * "earlier messages" observer has a correct root.
+     *
+     * The list's own container does not scroll — this one carries the `overflow-y: auto` and
+     * `min-height: 0` that make it a real scroller. Passing it down beats having the list
+     * discover it, which depends on layout having settled.
+     */
+    get messageScrollRoot() {
+        return this.scrollContainer?.nativeElement ?? null;
+    }
+    /**
+     * Loads the next older page — fired by the message list's "earlier messages" sentinel.
+     *
+     * `LoadOlder` already no-ops when nothing is above or a load is in flight, so repeated
+     * observer fires during a fast scroll are harmless. `messages` is reassigned to a NEW
+     * array so the list's ngOnChanges runs; the list then detects the prepend and holds the
+     * user's scroll position rather than jumping.
+     */
+    async onOlderMessagesRequested() {
+        const conversationId = this.conversationId;
+        await this.windowStore.LoadOlder(this.currentUser);
+        if (!this.isActiveConversation(conversationId)) {
+            return;
+        }
+        await this.refreshAfterPaging(conversationId);
+    }
+    /**
+     * Re-renders the transcript after one or more older pages have been merged.
+     *
+     * Costs proportional to what was ADDED, not to the whole window. It diffs the snapshot
+     * against the rows currently rendered and hands only the difference to
+     * {@link mergePeripheralsForNewRows} — so ordinary sentinel paging and a 50-page date jump
+     * both pay per new row exactly once, and neither re-queries attachments for rows that are
+     * already on screen.
+     *
+     * `this.messages` is assigned ONCE, after the peripherals land. Assigning it before the
+     * await would show the rows a beat sooner, but the second assignment then changes bubble
+     * heights (artifacts and attachments render) AFTER the list has already restored the
+     * scroll position for the prepend — which is a visible jump. One render keeps the
+     * measurement the list scrolls to and the content it finally paints in agreement.
+     */
+    async refreshAfterPaging(conversationId) {
+        const snapshot = this.windowStore.GetSnapshot();
+        const renderedIds = new Set(this.messages.map(m => NormalizeUUID(m.ID)));
+        const newDetails = snapshot.Details.filter(d => !renderedIds.has(NormalizeUUID(d.ID)));
+        if (newDetails.length > 0) {
+            await this.mergePeripheralsForNewRows(conversationId, snapshot, newDetails);
+            if (!this.isActiveConversation(conversationId)) {
+                return;
+            }
+        }
+        this.messages = [...snapshot.Details];
+        this.cdr.detectChanges();
+    }
+    /**
+     * Pages older history until a date jump can be satisfied, then scrolls to it.
+     *
+     * Windowing is exactly what broke the old implementation: the transcript no longer holds
+     * every day, so "jump to last month" targets messages that are simply not loaded. This
+     * pages until the target is in the loaded set, history runs out, or the page cap is hit —
+     * and always reports the outcome, because the plan forbids a silent no-op here.
+     */
+    async onDateJumpRequested(period) {
+        const conversationId = this.conversationId;
+        let pagesLoaded = 0;
+        // The loop's ONLY job is to load enough history for the jump to be answerable. It does
+        // not decide whether the jump succeeded — see CombineDateJumpOutcome.
+        while (pagesLoaded < DATE_JUMP_MAX_PAGES) {
+            const snapshot = this.windowStore.GetSnapshot();
+            const { NeedsOlder } = ResolveDateJumpTarget(snapshot.Details, period, new Date());
+            if (!NeedsOlder || !snapshot.Cursor.HasMoreAbove) {
+                break; // answerable, or no more history to load
+            }
+            // Store-level paging: the per-page peripheral rebuild is deferred to a single
+            // refresh below, so a deep jump costs one rebuild instead of one per page.
+            await this.windowStore.LoadOlder(this.currentUser);
+            if (!this.isActiveConversation(conversationId)) {
+                return; // user switched away mid-jump
+            }
+            pagesLoaded++;
+        }
+        // One rebuild for however many pages arrived, then let it render before measuring.
+        if (pagesLoaded > 0) {
+            await this.refreshAfterPaging(conversationId);
+        }
+        this.cdr.detectChanges();
+        const scrollOutcome = this.messageListComponent?.ScrollToDateTarget(period) ?? 'empty';
+        const finalOutcome = CombineDateJumpOutcome(scrollOutcome, pagesLoaded >= DATE_JUMP_MAX_PAGES);
+        if (finalOutcome !== 'reached') {
+            MJNotificationService.Instance.CreateSimpleNotification(DescribeDateJumpOutcome(finalOutcome, period), 'info', 3000);
+        }
     }
     // Test feedback dialog state
     showTestFeedbackDialog = false;
@@ -1381,6 +1533,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     acceptedFileTypes = 'image/*';
     conversationManagerAgent = null;
     engine = ConversationEngine.Instance;
+    windowStore = new ConversationDetailWindowStore(ConversationEngine.Instance);
     /**
      * Voice session service — exposed to the template so the realtime "call mode"
      * overlay can be hosted here (it fills this conversation panel in place while
@@ -1623,20 +1776,19 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             const conversationAgents = agents.filter(a => UUIDsEqual(a.run.ConversationID, conversationId));
             const hasActiveAgents = conversationAgents.length > 0;
             if (this.hadActiveAgents && !hasActiveAgents) {
-                // Agents just completed — surgical refresh picks up new messages,
-                // updated agent runs, and new artifacts in one query with minimal UI repaint
-                await this.engine.RefreshConversationDetails(conversationId, this.currentUser);
+                // Agents just completed — refresh the NEWEST window page to pick up new messages,
+                // updated agent runs, and new artifacts. Deliberately not the engine's full-history
+                // RefreshConversationDetails: that would re-query the whole conversation and, via
+                // GetCachedDetails, replace the loaded window with every row.
+                await this.windowStore.RefreshLatest(this.currentUser);
                 if (!this.isActiveConversation(conversationId)) {
                     return;
                 }
-                // Re-read messages from the surgically updated engine cache
-                const freshDetails = this.engine.GetCachedDetails(conversationId);
-                if (freshDetails) {
-                    this.messages = freshDetails;
-                }
-                // Reprocess peripheral data (artifacts, ratings) from updated cache
+                const refreshed = this.windowStore.GetSnapshot();
+                this.messages = refreshed.Details;
+                // Reprocess peripheral data (artifacts, ratings) from the refreshed window
                 this.lastLoadedConversationId = null;
-                await this.loadPeripheralData(conversationId);
+                await this.loadPeripheralData(conversationId, refreshed);
                 if (!this.isActiveConversation(conversationId)) {
                     return;
                 }
@@ -1783,6 +1935,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         this.showTestFeedbackDialog = false;
         this.testFeedbackDialogData = null;
         this.showPinsPanel = false;
+        this.pinsHydrated = false;
         this.showAgentPanel = false;
         this.showExportModal = false;
         this.showShareModal = false;
@@ -1909,20 +2062,42 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     async loadMessages(conversationId, loadToken) {
         try {
-            // Single source of truth: ConversationEngine handles caching and DB queries.
-            // Cache hit = instant (no DB). Cache miss = one GetConversationComplete query.
-            // If peripheral data (artifacts/ratings) changed externally, force refresh to pick up joined fields.
-            const existingEntry = this.engine.GetCachedDetailEntry(conversationId);
-            const forceRefresh = existingEntry?.PeripheralDataStale === true;
-            const cacheEntry = await this.engine.LoadConversationDetails(conversationId, this.currentUser, forceRefresh);
+            // WINDOWED read: only the newest page of the transcript, not the whole conversation.
+            // The store owns the loaded window and its paging cursors; the engine's full-history
+            // LoadConversationDetails stays untouched for agent/server callers. There is no
+            // forceRefresh here — a window is always fetched fresh, so no cache can go stale.
+            //
+            // DELIBERATE TRADE, both directions. The path this replaced went through
+            // LoadConversationDetails, which cached per conversation id in the engine's
+            // `_detailCache` — so re-entering a conversation you had already opened was instant
+            // with zero database work. `LoadLatest` always fetches, so every re-entry now costs a
+            // window read plus the follow-ups in LoadDetailWindow's round-trip profile. For a user
+            // tabbing between a handful of conversations that is a REGRESSION against the old
+            // behaviour, on a change whose headline is that opening a conversation got cheaper.
+            //
+            // Accepted for now because the win it buys is unbounded (first open no longer scales
+            // with conversation length) and the loss is bounded (a fixed handful of queries), and
+            // because the obvious remedy — caching partial windows — is exactly the thing that must
+            // never leak into `_detailCache`, where `GetAgentContextWindow` would read it as
+            // complete history. A separate `_partialDetailCache` is the shape to reach for if
+            // measurement says re-entry is worth it. Measure before building it.
+            // Pins are counted separately: a pin can sit far below the window's oldest Sequence,
+            // and the pins panel must list ALL of them, not just the ones currently on screen.
+            // Concurrent with the window — the two share only the conversation id, and running the
+            // pin read after the window made it delay first paint for no reason.
+            await Promise.all([
+                this.windowStore.LoadLatest(conversationId, this.currentUser),
+                this.loadPinnedMessageCount(conversationId, loadToken)
+            ]);
             if (!this.isActiveConversationLoad(conversationId, loadToken)) {
                 return;
             }
-            // Set messages from engine cache
-            this.messages = cacheEntry.Details;
-            // Copy user avatars from engine cache
+            // Read the loaded window back off the store
+            const snapshot = this.windowStore.GetSnapshot();
+            this.messages = snapshot.Details;
+            // Copy user avatars from the window result
             this.userAvatarMap.clear();
-            for (const [userId, avatar] of cacheEntry.UserAvatars) {
+            for (const [userId, avatar] of snapshot.UserAvatars) {
                 this.userAvatarMap.set(userId, {
                     imageUrl: avatar.ImageURL,
                     iconClass: avatar.IconClass
@@ -1952,7 +2127,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             }
             this.scrollToBottom = true;
             // Process peripheral data (agent runs, artifacts, ratings, attachments) from engine cache
-            await this.loadPeripheralData(conversationId, loadToken);
+            await this.loadPeripheralData(conversationId, snapshot, loadToken);
             if (!this.isActiveConversationLoad(conversationId, loadToken)) {
                 return;
             }
@@ -1971,30 +2146,164 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }
     }
     /**
-     * Process peripheral data (agent runs and artifacts) from cached conversation data
-     * Parses JSON columns and builds maps for display
+     * Reads only the PIN COUNT on conversation open.
+     *
+     * `count_only` returns no rows at all — the chip needs a number, and the panel needs
+     * nothing until it is opened. Hydrating every pin here put an unbounded `entity_object`
+     * read on the critical path of a change whose whole point is a bounded open, and because
+     * it was awaited AFTER the window load it also delayed first paint.
+     *
+     * The entities load in {@link hydratePinnedMessages}, on first panel open.
+     */
+    async loadPinnedMessageCount(conversationId, loadToken) {
+        const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+        const result = await rv.RunView({
+            EntityName: 'MJ: Conversation Details',
+            ExtraFilter: `ConversationID='${conversationId}' AND IsPinned=1`,
+            ResultType: 'count_only'
+        }, this.currentUser);
+        if (!this.isActiveConversationLoad(conversationId, loadToken)) {
+            return;
+        }
+        this.windowStore.SetPinnedCount(result.Success ? result.TotalRowCount : 0);
+    }
+    /**
+     * Hydrates the pins panel's rows — first panel open only.
+     *
+     * Deliberately unbounded: the panel's contract is that it lists EVERY pin, including ones
+     * below the loaded window, and by this point the user has explicitly asked for them.
+     *
+     * `entity_object` is required, not incidental — {@link onUnpinFromPanel} mutates `IsPinned`
+     * and calls `.Save()` on these instances directly, so `'simple'` would break unpinning
+     * from the panel with no error at all.
+     */
+    async hydratePinnedMessages(conversationId) {
+        const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+        const result = await rv.RunView({
+            EntityName: 'MJ: Conversation Details',
+            ExtraFilter: `ConversationID='${conversationId}' AND IsPinned=1`,
+            OrderBy: 'Sequence DESC', // newest pin first — the panel's order
+            ResultType: 'entity_object'
+        }, this.currentUser);
+        if (!this.isActiveConversation(conversationId)) {
+            return;
+        }
+        if (!result.Success) {
+            console.error('Failed to load pinned messages:', result.ErrorMessage);
+            return; // keep the count — the chip stays honest even though the panel is empty
+        }
+        this.windowStore.SetPinnedDetails(result.Results ?? []);
+        this.pinsHydrated = true;
+    }
+    /**
+     * Reshapes one detail's artifacts into the UI's `LazyArtifactInfo` lists, splitting the
+     * system-only ones out. Shared by the full rebuild and the incremental prepend so the two
+     * can never disagree about how an artifact becomes a card.
+     */
+    applyArtifactsForDetail(detailId, artifacts) {
+        const artifactList = [];
+        const systemArtifactList = [];
+        for (const artifactData of artifacts) {
+            const lazyInfo = new LazyArtifactInfo(artifactData, this.currentUser);
+            if (artifactData.Visibility === 'System Only') {
+                systemArtifactList.push(lazyInfo);
+            }
+            else {
+                artifactList.push(lazyInfo);
+            }
+        }
+        if (artifactList.length > 0) {
+            this.artifactsByDetailId.set(detailId, artifactList);
+        }
+        if (systemArtifactList.length > 0) {
+            this.systemArtifactsByDetailId.set(detailId, systemArtifactList);
+        }
+    }
+    /**
+     * Extends the display maps with JUST the rows a prepend added.
+     *
+     * The counterpart to {@link loadPeripheralData}, which clears and rebuilds all four maps
+     * over the whole accumulated window, re-queries attachments for every loaded id, and
+     * re-allocates every `LazyArtifactInfo`. Paying that per page makes ordinary scroll-up
+     * paging quadratic — ten pages back re-queries attachments for roughly fifty-five pages'
+     * worth of ids — which, stacked on the per-page round trips documented on
+     * `LoadDetailWindow`, ends up costing more than the single full load this feature replaced.
      *
-     * PERFORMANCE OPTIMIZATION: Uses cached data instead of querying
-     * - Data already loaded by loadMessages() - no additional queries needed
-     * - Processes cached JSON data to build display maps
-     * - Instant when switching between conversations
+     * Everything here is scoped to `newDetails`, so the cost is proportional to the PAGE. The
+     * store already accumulates peripherals correctly across pages, so the snapshot's maps are
+     * read only at the new ids.
+     *
+     * @param newDetails - Rows present in the snapshot that were not already rendered
      */
-    async loadPeripheralData(conversationId, loadToken) {
+    async mergePeripheralsForNewRows(conversationId, snapshot, newDetails) {
+        const newIds = newDetails.map(d => d.ID).filter((id) => !!id);
+        // Merge, never clear — the rows already on screen keep the peripherals they were
+        // rendered with.
+        for (const detailId of newIds) {
+            const agentRun = snapshot.AgentRunsByDetailId.get(detailId);
+            if (agentRun) {
+                this.agentRunsByDetailId.set(detailId, agentRun);
+            }
+            const artifacts = snapshot.ArtifactsByDetailId.get(detailId);
+            if (artifacts) {
+                this.applyArtifactsForDetail(detailId, artifacts);
+            }
+            const ratings = snapshot.RatingsByDetailId.get(detailId);
+            if (ratings) {
+                this.ratingsByDetailId.set(detailId, ratings);
+            }
+        }
+        if (newIds.length > 0) {
+            const attachmentsMap = await this.attachmentService.loadAttachmentsForMessages(newIds, this.currentUser);
+            if (!this.isActiveConversation(conversationId)) {
+                return;
+            }
+            for (const [detailId, attachments] of attachmentsMap) {
+                this.attachmentsByDetailId.set(detailId, attachments);
+            }
+        }
+        // Session meta MERGES here rather than replacing: an older page's sessions are additional
+        // cards, and replacing would strip the status chips off the ones already rendered.
+        const sessionMeta = await this.fetchRealtimeSessionMeta(newDetails, conversationId);
+        if (sessionMeta === null) {
+            return;
+        }
+        if (sessionMeta.size > 0) {
+            this.realtimeSessionMetaMap = new Map([...this.realtimeSessionMetaMap, ...sessionMeta]);
+        }
+        // New references so the message list's ngOnChanges sees the extended maps.
+        this.agentRunsByDetailId = new Map(this.agentRunsByDetailId);
+        this.artifactsByDetailId = new Map(this.artifactsByDetailId);
+        this.ratingsByDetailId = new Map(this.ratingsByDetailId);
+        this.systemArtifactsByDetailId = new Map(this.systemArtifactsByDetailId);
+        this.attachmentsByDetailId = new Map(this.attachmentsByDetailId);
+        this._combinedArtifactsMap = null;
+        this.artifactCount = this.calculateUniqueArtifactCount();
+        this.updateArtifactCountDisplay();
+    }
+    /**
+     * Builds the display maps (agent runs, artifacts, ratings) for the LOADED WINDOW.
+     *
+     * The peripherals arrive with the window itself — `ConversationEngine.LoadDetailWindow`
+     * batches them in one `RunViews` scoped to the window's detail IDs — so this method only
+     * reshapes them for the UI and issues no queries of its own.
+     *
+     * @param snapshot - The loaded window, from `windowStore.GetSnapshot()`. Passed in rather
+     *   than read from the engine's `_detailCache`, which the windowed path never populates.
+     */
+    async loadPeripheralData(conversationId, snapshot, loadToken) {
         if (!this.isCurrentConversationContext(conversationId, loadToken)) {
             return;
         }
-        // Skip if we've already processed peripheral data for this conversation
+        // Skip if we've already processed peripheral data for this conversation.
+        // NOTE (Phase 5): paging up loads OLDER rows with their own peripherals — this guard
+        // must not block that refresh once the sentinel lands.
         if (this.lastLoadedConversationId === conversationId) {
             return;
         }
         try {
-            // Read from engine cache — always present after loadMessages() calls LoadConversationDetails()
-            const cacheEntry = this.engine.GetCachedDetailEntry(conversationId);
-            if (!cacheEntry) {
-                console.warn(`No engine cache found for conversation ${conversationId}`);
-                return;
-            }
-            // Clear and rebuild component maps from engine cache
+            const cacheEntry = snapshot;
+            // Clear and rebuild component maps from the window's peripherals
             this.agentRunsByDetailId.clear();
             this.artifactsByDetailId.clear();
             this.systemArtifactsByDetailId.clear();
@@ -2005,23 +2314,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             }
             // Convert ArtifactJSON[] from engine cache into LazyArtifactInfo[] for UI
             for (const [detailId, artifacts] of cacheEntry.ArtifactsByDetailId) {
-                const artifactList = [];
-                const systemArtifactList = [];
-                for (const artifactData of artifacts) {
-                    const lazyInfo = new LazyArtifactInfo(artifactData, this.currentUser);
-                    if (artifactData.Visibility === 'System Only') {
-                        systemArtifactList.push(lazyInfo);
-                    }
-                    else {
-                        artifactList.push(lazyInfo);
-                    }
-                }
-                if (artifactList.length > 0) {
-                    this.artifactsByDetailId.set(detailId, artifactList);
-                }
-                if (systemArtifactList.length > 0) {
-                    this.systemArtifactsByDetailId.set(detailId, systemArtifactList);
-                }
+                this.applyArtifactsForDetail(detailId, artifacts);
             }
             // Copy ratings from engine cache
             for (const [detailId, ratings] of cacheEntry.RatingsByDetailId) {
@@ -2074,6 +2367,24 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * failure leaves the map empty — cards degrade to their generic label.
      */
     async loadRealtimeSessionMeta(details, conversationId, loadToken) {
+        const metaMap = await this.fetchRealtimeSessionMeta(details, conversationId, loadToken);
+        if (metaMap === null) {
+            return; // stale load — the conversation changed underneath
+        }
+        // New reference so the message list's ngOnChanges sees the update
+        this.realtimeSessionMetaMap = metaMap;
+    }
+    /**
+     * Reads the session rows for `details` and returns them, WITHOUT deciding what happens to
+     * the component's map.
+     *
+     * Split from {@link loadRealtimeSessionMeta} because the two callers want opposite
+     * policies: a full (re)load replaces the map, while prepending an older page must merge —
+     * replacing there would strip the status chips off every session card already on screen.
+     *
+     * @returns The fetched meta, or null when the conversation changed mid-read.
+     */
+    async fetchRealtimeSessionMeta(details, conversationId, loadToken) {
         const sessionIds = [];
         const seen = new Set();
         for (const detail of details) {
@@ -2116,10 +2427,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             }
         }
         if (conversationId && !this.isCurrentConversationContext(conversationId, loadToken)) {
-            return;
+            return null;
         }
-        // New reference so the message list's ngOnChanges sees the update
-        this.realtimeSessionMetaMap = metaMap;
+        return metaMap;
     }
     /**
      * REMOVED: Active tasks should only track currently-running tasks in this browser session.
@@ -2152,6 +2462,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             }
             return;
         }
+        // Mirror the row into the loaded window so its NewestSequence tracks live appends.
+        // Local path only — the entity is already in hand, so this issues no query.
+        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));
@@ -2359,24 +2672,27 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             return;
         }
         try {
-            // Read from engine cache — already warm from entity event handler auto-sync
-            const engineDetails = this.engine.GetCachedDetails(conversationId);
-            if (!engineDetails || engineDetails.length === 0) {
+            // Refresh the newest window page rather than reading the engine's full-history cache,
+            // which the windowed path never populates — reading it here returned undefined and
+            // silently skipped everything below, so delegated-agent messages never appeared.
+            await this.windowStore.RefreshLatest(this.currentUser);
+            if (!this.isActiveConversation(conversationId)) {
                 return;
             }
-            if (!this.isActiveConversation(conversationId)) {
+            const engineDetails = this.windowStore.GetSnapshot().Details;
+            if (engineDetails.length === 0) {
                 return;
             }
             // Track existing message IDs before reload to identify new messages
             const existingMessageIds = new Set(this.messages.map(m => m.ID));
-            // Merge engine cache with existing client-side messages.
+            // Merge the refreshed window with existing client-side messages.
             // Preserves messages added client-side (e.g., by handleSubAgentInvocation)
             // that haven't been picked up by entity events yet due to timing.
             const merged = new Map();
             for (const msg of engineDetails) {
                 merged.set(msg.ID, msg);
             }
-            // Preserve client-side messages not yet in engine cache
+            // Preserve client-side messages not yet in the window
             for (const msg of this.messages) {
                 if (!merged.has(msg.ID)) {
                     merged.set(msg.ID, msg);
@@ -2460,6 +2776,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             if (task) {
                 this.activeTasks.remove(task.id);
             }
+            // The completed message was mutated in place — refresh the window's copy too.
+            this.windowStore.ApplyLocalDetail(message);
             // Force re-render with updated agent run and artifacts
             this.messages = [...this.messages];
             this.cdr.detectChanges();
@@ -2480,6 +2798,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             return;
         }
         // Add the agent's response message to the conversation
+        this.windowStore.ApplyLocalDetail(event.message);
         this.messages = [...this.messages, event.message];
         // Invalidate cache for this conversation since we have new messages
         if (this.conversationId) {
@@ -2580,14 +2899,15 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             if (!UUIDsEqual(detailConversationId, targetConversationId) || !isCurrent()) {
                 return;
             }
-            // Surgical refresh — merges new artifacts into existing cache without replacing objects
-            await this.engine.RefreshConversationDetails(detailConversationId, this.currentUser);
+            // Refresh the newest window page — picks up artifacts written by the just-finished run
+            // without re-querying the whole conversation.
+            await this.windowStore.RefreshLatest(this.currentUser);
             if (!isCurrent()) {
                 return;
             }
-            // Reprocess peripheral data from the updated engine cache
+            // Reprocess peripheral data from the refreshed window
             this.lastLoadedConversationId = null;
-            await this.loadPeripheralData(detailConversationId, loadToken);
+            await this.loadPeripheralData(detailConversationId, this.windowStore.GetSnapshot(), loadToken);
         }
         catch (error) {
             console.error('Failed to reload artifacts for message:', error);
@@ -2908,24 +3228,31 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     onMessageEdited(message) {
         // Message was edited and saved, trigger change detection
         LogStatusEx({ message: 'Message edited', verboseOnly: true, additionalArgs: [message.ID] });
-        // The message entity is already updated in place, so no need to reload
-        // Just ensure the UI reflects the changes
+        // The entity was mutated in place, so the transcript already shows the new text. Replace
+        // it in the window explicitly anyway: the store dedupes by ID on merge, and without this
+        // a later RefreshLatest could fold a server copy over the edited one.
+        this.windowStore.ApplyLocalDetail(message);
     }
     onMessagePinToggled(message) {
-        // The entity object is already mutated by .Save() and the engine cache holds the same
-        // object reference, so no explicit cache update is needed here.
-        // Update engine's raw data cache to stay in sync
-        if (this.conversationId) {
-            const cacheEntry = this.engine.GetCachedDetailEntry(this.conversationId);
-            if (cacheEntry) {
-                const row = cacheEntry.RawData.find((r) => UUIDsEqual(r.ID, message.ID));
-                if (row) {
-                    row.IsPinned = message.IsPinned;
-                }
-            }
+        // The entity object is already mutated by .Save(), and the window holds that same object
+        // reference, so the transcript reflects the change with no cache write.
+        //
+        // The engine's RawData row-sync that used to live here is gone: the windowed path never
+        // populates `_detailCache`, and a window carries no RawData (those JSON columns only
+        // exist on the GetConversationComplete stored query).
+        this.windowStore.ApplyLocalDetail(message);
+        // The pins panel reads a separate set (it must show pins older than the window), so it
+        // needs the toggle applied explicitly — but only once that set is REAL. Applying a pin
+        // to a not-yet-hydrated (empty) set would leave one entry that looks like the whole set,
+        // and opening the panel would show a single pin on a conversation with many.
+        if (this.pinsHydrated) {
+            this.windowStore.ApplyLocalPin(message);
+        }
+        else {
+            this.windowStore.SetPinnedCount(this.pinnedMessageCount + (message.IsPinned ? 1 : -1));
         }
         // Auto-close the panel when the last pin is removed
-        if (this.showPinsPanel && this.pinnedMessages.length === 0) {
+        if (this.showPinsPanel && this.pinnedMessageCount === 0) {
             setTimeout(() => { this.showPinsPanel = false; this.cdr.detectChanges(); }, 600);
         }
         this.cdr.detectChanges();
@@ -2934,13 +3261,71 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * Scrolls the message list to the target message and plays the beacon animation.
      * Called when the user clicks "Jump to message" in the pins panel.
      */
-    onJumpToMessage(messageId) {
-        const el = this.scrollContainer?.nativeElement?.querySelector(`[data-message-id="${messageId}"]`);
-        if (!el)
+    async onJumpToMessage(messageId) {
+        // Delegated to the list rather than queried here. A `[data-message-id]` lookup only finds
+        // MOUNTED messages, and a pin is by definition often far above the viewport — exactly the
+        // region the list unmounts into spacers — so this button silently did nothing for any pin
+        // that wasn't already on screen. The list resolves through the timeline key, which a
+        // spacer shares with the item it stands in for.
+        if (this.messageListComponent?.ScrollToMessage(messageId)) {
+            this.beaconMessage(messageId);
+            return;
+        }
+        // Not in the loaded window. Pins are fetched by their own query precisely so the panel can
+        // list pins older than the transcript, so this is the EXPECTED case for an old pin, not an
+        // error — page back until it is loaded, the same way a date jump does.
+        const reached = await this.loadUntilMessageIsWindowed(messageId);
+        if (!reached) {
+            MJNotificationService.Instance.CreateSimpleNotification('Could not reach that message — it is further back than this jump loads.', 'info', 3000);
             return;
-        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        // Add beacon animation after scroll settles
+        }
+        // The paging loop deliberately skipped the per-page peripheral rebuild — pay it once,
+        // here, before asking the list for element positions.
+        await this.refreshAfterPaging(this.conversationId);
+        if (this.messageListComponent?.ScrollToMessage(messageId)) {
+            this.beaconMessage(messageId);
+        }
+    }
+    /**
+     * Pages older history until `messageId` falls inside the loaded window.
+     *
+     * Deterministic rather than heuristic: a pin carries its own `Sequence`, so the stop
+     * condition is simply "the window now reaches at least that far back" — no equivalent of
+     * the date jump's `NeedsOlder` probing is needed. Bounded by the same page cap, for the same
+     * reason: an unbounded walk back is the thing windowing exists to avoid.
+     */
+    async loadUntilMessageIsWindowed(messageId) {
+        const target = this.pinnedMessages.find(p => UUIDsEqual(p.ID, messageId));
+        if (!target) {
+            return false; // not a loaded pin — nothing tells us how far back to page
+        }
+        const conversationId = this.conversationId;
+        for (let page = 0; page < DATE_JUMP_MAX_PAGES; page++) {
+            const snapshot = this.windowStore.GetSnapshot();
+            const oldest = snapshot.Cursor.OldestSequence;
+            if (oldest !== null && oldest <= target.Sequence) {
+                return true; // the window now covers it
+            }
+            if (!snapshot.Cursor.HasMoreAbove) {
+                return false; // ran out of conversation
+            }
+            // Store-level paging for the same reason as the date jump — the caller refreshes once.
+            await this.windowStore.LoadOlder(this.currentUser);
+            if (!this.isActiveConversation(conversationId)) {
+                return false; // user switched away mid-jump
+            }
+        }
+        return false; // hit the page cap
+    }
+    /** Flashes the beacon on a message once its scroll has settled. */
+    beaconMessage(messageId) {
+        // Re-queried rather than captured: the target may have been a spacer when the scroll
+        // started and been remounted as a real bubble by the time it lands.
         setTimeout(() => {
+            const el = this.scrollContainer?.nativeElement?.querySelector(`[data-message-id="${messageId}"]`);
+            if (!el) {
+                return;
+            }
             el.classList.add('pin-beacon');
             setTimeout(() => el.classList.remove('pin-beacon'), 1500);
         }, 350);
@@ -3026,6 +3411,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             }
         }
         const hideIds = new Set(toHide.map(m => m.ID));
+        // Drop them from the window too, or the next RefreshLatest merge reinstates them.
+        for (const id of hideIds) {
+            this.windowStore.RemoveDetail(id);
+        }
         this.messages = this.messages.filter(m => !hideIds.has(m.ID));
         this.resetComponentState(this.conversationId);
         this.cdr.detectChanges();
@@ -3481,18 +3870,16 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             return;
         }
         try {
-            await this.engine.RefreshConversationDetails(conversationId, this.currentUser);
+            await this.windowStore.RefreshLatest(this.currentUser);
             if (!this.isActiveConversation(conversationId)) {
                 return;
             }
-            // Re-read messages from the surgically updated engine cache
-            const freshDetails = this.engine.GetCachedDetails(conversationId);
-            if (freshDetails) {
-                this.messages = freshDetails;
-            }
+            // Re-read the refreshed window
+            const refreshed = this.windowStore.GetSnapshot();
+            this.messages = refreshed.Details;
             // Reprocess peripheral data + realtime session meta (drives the timeline's session cards)
             this.lastLoadedConversationId = null;
-            await this.loadPeripheralData(conversationId);
+            await this.loadPeripheralData(conversationId, refreshed);
             if (!this.isActiveConversation(conversationId)) {
                 return;
             }
@@ -4300,27 +4687,28 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chatSlotChildren = _t);
         } }, viewQuery: function ConversationChatAreaComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5)(ArtifactViewerPanelComponent, 5)(ConversationEmptyStateComponent, 5)(_c1, 5);
+            i0.ɵɵviewQuery(_c0, 5)(ArtifactViewerPanelComponent, 5)(ConversationEmptyStateComponent, 5)(MessageListComponent, 5)(_c1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.artifactViewerComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyStateComponent = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageListComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.messageInputComponents = _t);
-        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", conversationId: "conversationId", conversation: "conversation", threadId: "threadId", suppressNewConversationEmptyState: "suppressNewConversationEmptyState", allowMentions: "allowMentions", allowAgentMentions: "allowAgentMentions", allowEntityMentions: "allowEntityMentions", allowSkillCommands: "allowSkillCommands", allowAttachments: "allowAttachments", allowPlanMode: "allowPlanMode", allowRealtime: "allowRealtime", showEmptyFill: "showEmptyFill", showLoadingState: "showLoadingState", showAgentRunDetails: "showAgentRunDetails", showReactions: "showReactions", showMessageRating: "showMessageRating", allowPinning: "allowPinning", allowMessageEdit: "allowMessageEdit", allowMessageDelete: "allowMessageDelete", showSuggestedPrompts: "showSuggestedPrompts", showDateNavigation: "showDateNavigation", assistantDisplayName: "assistantDisplayName", assistantAvatarUrl: "assistantAvatarUrl", isNewConversation: "isNewConversation", pendingMessage: "pendingMessage", pendingMessageConversationId: "pendingMessageConversationId", pendingAttachments: "pendingAttachments", pendingArtifactId: "pendingArtifactId", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", pendingArtifactConversationId: "pendingArtifactConversationId", overlayMode: "overlayMode", showExportButton: "showExportButton", exportButtonLabel: "exportButtonLabel", exportButtonIcon: "exportButtonIcon", exportBranding: "exportBranding", showShareButton: "showShareButton", showArtifactIndicator: "showArtifactIndicator", appContext: "appContext", defaultAgentId: "defaultAgentId", applicationScope: "applicationScope", applicationId: "applicationId", linkedEntityId: "linkedEntityId", linkedRecordId: "linkedRecordId", showAgentPicker: "showAgentPicker", showAgentModePicker: "showAgentModePicker", emptyStateGreeting: "emptyStateGreeting", showSidebarToggle: "showSidebarToggle", showAgentCharacter: "showAgentCharacter", agentCharacterConfig: "agentCharacterConfig", emptyStateConfig: "emptyStateConfig", showDemonstrationSurface: "showDemonstrationSurface", demonstrationSurfaceContent: "demonstrationSurfaceContent", composerDraft: "composerDraft", composerAgentMention: "composerAgentMention" }, outputs: { beforeAgentTurn: "beforeAgentTurn", afterAgentTurn: "afterAgentTurn", beforeToolInvoked: "beforeToolInvoked", afterToolInvoked: "afterToolInvoked", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", sessionStarted: "sessionStarted", sessionChannelStateChanged: "sessionChannelStateChanged", sessionEnded: "sessionEnded", conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", realtimeConversationReady: "realtimeConversationReady", navigationRequest: "navigationRequest", taskClicked: "taskClicked", artifactLinkClicked: "artifactLinkClicked", sidebarToggleClicked: "sidebarToggleClicked", conversationCreated: "conversationCreated", threadOpened: "threadOpened", threadClosed: "threadClosed", pendingArtifactConsumed: "pendingArtifactConsumed", pendingMessageConsumed: "pendingMessageConsumed", pendingMessageRequested: "pendingMessageRequested", composerDraftConsumed: "composerDraftConsumed", composerAgentMentionConsumed: "composerAgentMentionConsumed" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 34, consts: [["emptyStateInput", ""], ["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], [1, "chat-agent-presence", 3, "chat-agent-presence--prominent"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-demonstration-stage"], [1, "chat-messages-pane"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "pinnedMessages"], [3, "parentMessageId", "conversationId", "currentUser"], [3, "cancelled", "exported", "branding", "isVisible", "conversation", "currentUser"], [3, "Result", "Visible", "Context", "Adapter"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "data", "visible"], [3, "imageUrl", "alt", "fileName", "visible"], [1, "chat-agent-presence"], [3, "State", "AgentName", "AvatarUrl", "Mode"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "chat-title"], [1, "shared-by-badge", 3, "title"], ["title", "Assign to project", 1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [1, "chat-actions", "chat-actions-buttons"], ["title", "View pinned messages", 1, "pin-chip", 3, "active"], ["title", "View artifacts", 1, "artifact-indicator"], ["title", "View members", 1, "chat-members"], [3, "AgentID", "Disabled"], [3, "Conversation", "CurrentUser", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "shared", "title"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], [1, "fas", "fa-share-nodes"], ["title", "Assign to project", 1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["title", "View pinned messages", 1, "pin-chip", 3, "click"], [1, "fas", "fa-thumbtack"], [1, "pin-chip-count"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [1, "artifact-badge"], ["title", "View members", 1, "chat-members", 3, "click"], [1, "fas", "fa-users"], [1, "members-badge"], [3, "PresetChanged", "AgentID", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], [1, "btn-label"], [1, "conversation-loading-state"], ["text", "Loading conversation...", "size", "large"], [3, "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "sidebarToggleClicked", "messageSent", "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "message-input-container-wrapper"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "emptyStateSubmit", "emptyStateMode", "initialDraft", "currentUser", "disabled", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll"], [3, "realtimeSessionOpenRequested", "replyInThread", "viewThread", "deleteMessage", "retryMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "diagnosticRequested", "messagePinToggled", "beforeResponseFormSubmitted", "afterResponseFormSubmitted", "showEmptyFill", "showDateNavigation", "showAgentRunDetails", "showReactions", "showMessageRating", "allowPinning", "allowMessageEdit", "allowMessageDelete", "assistantDisplayName", "assistantAvatarUrl", "messages", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap", "messageRendererTemplate", "messageExtraTemplate", "sessionMetaMap"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "loading-peripheral-placeholder"], ["size", "medium", 3, "text"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], ["text", "Loading conversation data...", "size", "medium"], ["role", "status", 1, "read-only-banner"], [3, "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "inProgressMessageIds", "disabled", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "fas", "fa-eye"], [3, "DraftStateChanged", "ComposerBlurred", "initialMessageAutoSendStarted", "initialMessageAutoSendFailed", "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "inProgressMessageIds", "disabled", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "resize-handle"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "maximizeToggled", "openEntityRecord", "navigationRequest", "analyzeRequested", "applyFormRequested", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [3, "closed", "jumpRequested", "unpinRequested", "pinnedMessages"], [3, "NavigateRequest", "StartLiveRequested", "ReviewClosed", "AgentName", "Hidden", "CurrentUser", "EnvironmentID", "ReviewData", "Chrome", "Compact", "ShowDevLinks", "ShowDensityPicker"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill", 3, "click"], ["aria-hidden", "true", 1, "voice-call-pill__pulse"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-volume"], [1, "voice-call-pill__text"], [1, "voice-call-pill__name"], [1, "voice-call-pill__hint"], [3, "closed", "replyAdded", "parentMessageId", "conversationId", "currentUser"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], ["Icon", "fa-solid fa-cube", "Title", "No artifacts in this conversation yet", 1, "artifacts-empty-fill"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "completed", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "closed", "data", "visible"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", conversationId: "conversationId", conversation: "conversation", threadId: "threadId", suppressNewConversationEmptyState: "suppressNewConversationEmptyState", allowMentions: "allowMentions", allowAgentMentions: "allowAgentMentions", allowEntityMentions: "allowEntityMentions", allowSkillCommands: "allowSkillCommands", allowAttachments: "allowAttachments", allowPlanMode: "allowPlanMode", allowRealtime: "allowRealtime", showEmptyFill: "showEmptyFill", showLoadingState: "showLoadingState", showAgentRunDetails: "showAgentRunDetails", showReactions: "showReactions", showMessageRating: "showMessageRating", allowPinning: "allowPinning", allowMessageEdit: "allowMessageEdit", allowMessageDelete: "allowMessageDelete", showSuggestedPrompts: "showSuggestedPrompts", showDateNavigation: "showDateNavigation", assistantDisplayName: "assistantDisplayName", assistantAvatarUrl: "assistantAvatarUrl", isNewConversation: "isNewConversation", pendingMessage: "pendingMessage", pendingMessageConversationId: "pendingMessageConversationId", pendingAttachments: "pendingAttachments", pendingArtifactId: "pendingArtifactId", pendingArtifactVersionNumber: "pendingArtifactVersionNumber", pendingArtifactConversationId: "pendingArtifactConversationId", overlayMode: "overlayMode", showExportButton: "showExportButton", exportButtonLabel: "exportButtonLabel", exportButtonIcon: "exportButtonIcon", exportBranding: "exportBranding", showShareButton: "showShareButton", showArtifactIndicator: "showArtifactIndicator", appContext: "appContext", defaultAgentId: "defaultAgentId", applicationScope: "applicationScope", applicationId: "applicationId", linkedEntityId: "linkedEntityId", linkedRecordId: "linkedRecordId", showAgentPicker: "showAgentPicker", showAgentModePicker: "showAgentModePicker", emptyStateGreeting: "emptyStateGreeting", showSidebarToggle: "showSidebarToggle", showAgentCharacter: "showAgentCharacter", agentCharacterConfig: "agentCharacterConfig", emptyStateConfig: "emptyStateConfig", showDemonstrationSurface: "showDemonstrationSurface", demonstrationSurfaceContent: "demonstrationSurfaceContent", composerDraft: "composerDraft", composerAgentMention: "composerAgentMention" }, outputs: { beforeAgentTurn: "beforeAgentTurn", afterAgentTurn: "afterAgentTurn", beforeToolInvoked: "beforeToolInvoked", afterToolInvoked: "afterToolInvoked", beforeResponseFormSubmitted: "beforeResponseFormSubmitted", afterResponseFormSubmitted: "afterResponseFormSubmitted", sessionStarted: "sessionStarted", sessionChannelStateChanged: "sessionChannelStateChanged", sessionEnded: "sessionEnded", conversationRenamed: "conversationRenamed", openEntityRecord: "openEntityRecord", realtimeConversationReady: "realtimeConversationReady", navigationRequest: "navigationRequest", taskClicked: "taskClicked", artifactLinkClicked: "artifactLinkClicked", sidebarToggleClicked: "sidebarToggleClicked", conversationCreated: "conversationCreated", threadOpened: "threadOpened", threadClosed: "threadClosed", pendingArtifactConsumed: "pendingArtifactConsumed", pendingMessageConsumed: "pendingMessageConsumed", pendingMessageRequested: "pendingMessageRequested", composerDraftConsumed: "composerDraftConsumed", composerAgentMentionConsumed: "composerAgentMentionConsumed" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 34, consts: [["emptyStateInput", ""], ["scrollContainer", ""], ["messageInput", ""], [1, "chat-area"], [1, "chat-agent-presence", 3, "chat-agent-presence--prominent"], [1, "chat-header"], [1, "chat-content-area"], [1, "chat-demonstration-stage"], [1, "chat-messages-pane"], [1, "chat-messages-wrapper"], [3, "saved", "cancelled", "isOpen", "artifact", "currentUser"], [3, "pinnedMessages", "isLoading"], [3, "parentMessageId", "conversationId", "currentUser"], [3, "cancelled", "exported", "branding", "isVisible", "conversation", "currentUser"], [3, "Result", "Visible", "Context", "Adapter"], [3, "cancelled", "membersChanged", "isVisible", "conversation", "currentUser"], [1, "modal-overlay"], [3, "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "data", "visible"], [3, "imageUrl", "alt", "fileName", "visible"], [1, "chat-agent-presence"], [3, "State", "AgentName", "AvatarUrl", "Mode"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "chat-info"], ["title", "Show conversations", 1, "sidebar-toggle-btn"], [1, "chat-title"], [1, "shared-by-badge", 3, "title"], ["title", "Assign to project", 1, "project-tag"], ["title", "View Test Run", 1, "test-indicator"], [1, "chat-actions", "chat-actions-buttons"], ["title", "View pinned messages", 1, "pin-chip", 3, "active"], ["title", "View artifacts", 1, "artifact-indicator"], ["title", "View members", 1, "chat-members"], [3, "AgentID", "Disabled"], [3, "Conversation", "CurrentUser", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "shared", "title"], ["title", "Show conversations", 1, "sidebar-toggle-btn", 3, "click"], [1, "fas", "fa-table-columns"], [1, "fas", "fa-share-nodes"], ["title", "Assign to project", 1, "project-tag", 3, "click"], [1, "fas", "fa-folder"], ["title", "View Test Run", 1, "test-indicator", 3, "click"], [1, "fas", "fa-flask"], ["title", "View pinned messages", 1, "pin-chip", 3, "click"], [1, "fas", "fa-thumbtack"], [1, "pin-chip-count"], ["title", "View artifacts", 1, "artifact-indicator", 3, "click"], [1, "fas", "fa-cube"], [1, "artifact-badge"], ["title", "View members", 1, "chat-members", 3, "click"], [1, "fas", "fa-users"], [1, "members-badge"], [3, "PresetChanged", "AgentID", "Disabled"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], [1, "btn-label"], [1, "conversation-loading-state"], ["text", "Loading conversation...", "size", "large"], [3, "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "sidebarToggleClicked", "messageSent", "currentUser", "initialDraft", "disabled", "showSidebarToggle", "overlayMode", "greeting", "showSuggestedPrompts", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "chat-messages-container"], [1, "chat-input-container"], [1, "message-input-container-wrapper"], [3, "initialDraftApplied", "DraftStateChanged", "ComposerBlurred", "emptyStateSubmit", "emptyStateMode", "initialDraft", "currentUser", "disabled", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes"], [1, "upload-indicator-overlay"], [1, "chat-messages-container", 3, "scroll"], [3, "OlderRequested", "DateJumpRequested", "realtimeSessionOpenRequested", "replyInThread", "viewThread", "deleteMessage", "retryMessage", "testFeedbackMessage", "artifactClicked", "messageEdited", "openEntityRecord", "suggestedResponseSelected", "attachmentClicked", "diagnosticRequested", "messagePinToggled", "beforeResponseFormSubmitted", "afterResponseFormSubmitted", "showEmptyFill", "showDateNavigation", "showAgentRunDetails", "showReactions", "showMessageRating", "allowPinning", "allowMessageEdit", "allowMessageDelete", "assistantDisplayName", "assistantAvatarUrl", "messages", "HasMoreAbove", "IsLoadingOlder", "ScrollRoot", "conversation", "currentUser", "isProcessing", "artifactMap", "agentRunMap", "ratingsMap", "userAvatarMap", "attachmentsMap", "messageRendererTemplate", "messageExtraTemplate", "sessionMetaMap"], [1, "scroll-to-bottom-icon", 2, "left", "50%"], [1, "loading-peripheral-placeholder"], ["size", "medium", 3, "text"], [1, "scroll-to-bottom-icon", 2, "left", "50%", 3, "click"], [1, "fas", "fa-arrow-down"], ["text", "Loading conversation data...", "size", "medium"], ["role", "status", 1, "read-only-banner"], [3, "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "inProgressMessageIds", "disabled", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "fas", "fa-eye"], [3, "DraftStateChanged", "ComposerBlurred", "initialMessageAutoSendStarted", "initialMessageAutoSendFailed", "messageSent", "agentResponse", "agentRunDetected", "agentRunUpdate", "messageComplete", "artifactCreated", "conversationRenamed", "intentCheckStarted", "intentCheckCompleted", "beforeAgentTurn", "afterAgentTurn", "uploadStateChanged", "hidden", "initialDraft", "conversationId", "conversationName", "currentUser", "conversationHistory", "artifactsByDetailId", "systemArtifactsByDetailId", "agentRunsByDetailId", "appContext", "applicationId", "defaultAgentId", "conversationDefaultAgentId", "agentConfigurationPresetId", "inProgressMessageIds", "disabled", "enableAttachments", "enableMentions", "enableAgentMentions", "enableEntityMentions", "enableSkillCommands", "enablePlanMode", "enableRealtime", "maxAttachments", "maxAttachmentSizeBytes", "acceptedFileTypes", "initialMessage", "initialAttachments"], [1, "resize-handle"], [1, "chat-artifact-pane"], [3, "closed", "saveToCollectionRequested", "navigateToLink", "shareRequested", "maximizeToggled", "openEntityRecord", "navigationRequest", "analyzeRequested", "applyFormRequested", "artifactId", "currentUser", "environmentId", "versionNumber", "viewContext", "canShare", "canEdit", "isMaximized", "refreshTrigger"], [1, "resize-handle", 3, "mousedown", "touchstart"], [3, "closed", "jumpRequested", "unpinRequested", "pinnedMessages", "isLoading"], [3, "NavigateRequest", "StartLiveRequested", "ReviewClosed", "AgentName", "Hidden", "CurrentUser", "EnvironmentID", "ReviewData", "Chrome", "Compact", "ShowDevLinks", "ShowDensityPicker"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill"], ["type", "button", "title", "Return to the live call", "aria-label", "Return to the live call", 1, "voice-call-pill", 3, "click"], ["aria-hidden", "true", 1, "voice-call-pill__pulse"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-volume"], [1, "voice-call-pill__text"], [1, "voice-call-pill__name"], [1, "voice-call-pill__hint"], [3, "closed", "replyAdded", "parentMessageId", "conversationId", "currentUser"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "project-selector-modal", 3, "click"], [1, "modal-header"], [1, "modal-close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "modal-body"], [3, "projectSelected", "environmentId", "currentUser", "selectedProjectId"], [1, "modal-content", "artifacts-modal", 3, "click"], [1, "modal-header-actions"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "active"], [1, "modal-body", "artifacts-grid"], ["Icon", "fa-solid fa-cube", "Title", "No artifacts in this conversation yet", 1, "artifacts-empty-fill"], [1, "artifact-modal-card", 3, "expanded", "system-artifact"], ["title", "Toggle system artifacts visibility", 1, "toggle-system-btn", 3, "click"], [1, "fas", "fa-cog"], [1, "artifact-modal-card"], [1, "artifact-card-header", 3, "click"], [1, "artifact-modal-icon"], [1, "fas", "fa-file-code"], [1, "artifact-modal-info"], [1, "artifact-modal-title"], [1, "artifact-modal-meta"], [1, "expand-btn"], [1, "artifact-modal-action"], [1, "fas", "fa-external-link-alt"], [1, "artifact-versions-list"], [1, "expand-btn", 3, "click"], [1, "fas"], [1, "artifact-version-item"], [1, "artifact-version-item", 3, "click"], [1, "version-badge"], [1, "version-open-text"], [1, "fas", "fa-arrow-right"], [3, "completed", "cancelled", "isOpen", "environmentId", "currentUser", "excludeCollectionIds", "artifactVersionId", "artifactName", "artifactVersionNumber"], [3, "closed", "data", "visible"], [3, "closed", "imageUrl", "alt", "fileName", "visible"]], template: function ConversationChatAreaComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 3);
             i0.ɵɵconditionalCreate(1, ConversationChatAreaComponent_Conditional_1_Template, 3, 3, "div", 4);
             i0.ɵɵconditionalCreate(2, ConversationChatAreaComponent_Conditional_2_Template, 1, 8, "ng-container")(3, ConversationChatAreaComponent_Conditional_3_Template, 16, 15, "div", 5);
             i0.ɵɵelementStart(4, "div", 6);
             i0.ɵɵconditionalCreate(5, ConversationChatAreaComponent_Conditional_5_Template, 2, 6, "div", 7);
             i0.ɵɵelementStart(6, "div", 8);
-            i0.ɵɵconditionalCreate(7, ConversationChatAreaComponent_Conditional_7_Template, 1, 1)(8, ConversationChatAreaComponent_Conditional_8_Template, 2, 1)(9, ConversationChatAreaComponent_Conditional_9_Template, 6, 14, "div", 9)(10, ConversationChatAreaComponent_Conditional_10_Template, 9, 25, "div", 9);
+            i0.ɵɵconditionalCreate(7, ConversationChatAreaComponent_Conditional_7_Template, 1, 1)(8, ConversationChatAreaComponent_Conditional_8_Template, 2, 1)(9, ConversationChatAreaComponent_Conditional_9_Template, 6, 14, "div", 9)(10, ConversationChatAreaComponent_Conditional_10_Template, 9, 28, "div", 9);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(11, ConversationChatAreaComponent_Conditional_11_Template, 3, 14);
             i0.ɵɵelementStart(12, "mj-artifact-share-modal", 10);
             i0.ɵɵlistener("saved", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_saved_12_listener() { return ctx.onArtifactShared(); })("cancelled", function ConversationChatAreaComponent_Template_mj_artifact_share_modal_cancelled_12_listener() { return ctx.onArtifactShareModalClose(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_13_Template, 1, 1, "mj-pinned-messages-panel", 11);
+            i0.ɵɵconditionalCreate(13, ConversationChatAreaComponent_Conditional_13_Template, 1, 2, "mj-pinned-messages-panel", 11);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(14, ConversationChatAreaComponent_Conditional_14_Template, 4, 14);
             i0.ɵɵpipe(15, "async");
@@ -4384,7 +4772,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationChatAreaComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n       06-10 design: persistent presence indicator (Sid's face + live voice\n       state). Off by default; opt in via [showAgentCharacter]. When a\n       consumer projects an `mjChatSlot=\"agentPresence\"` template, it\n       replaces the default presence component. -->\n  @if (showAgentCharacter) {\n    <div class=\"chat-agent-presence\" [class.chat-agent-presence--prominent]=\"agentCharacterConfig?.voiceStateMode === 'prominent'\">\n      @if (slotTemplate('agentPresence'); as t) {\n        <ng-container *ngTemplateOutlet=\"t; context: {\n          $implicit: agentCharacterConfig,\n          state: agentCharacterConfig?.state ?? 'idle',\n          agentName: agentCharacterConfig?.characterName,\n          avatarUrl: agentCharacterConfig?.avatarUrl,\n          mode: agentCharacterConfig?.voiceStateMode ?? 'subtle'\n        }\"></ng-container>\n      } @else {\n        <mj-chat-agent-presence-default\n          [State]=\"agentCharacterConfig?.state ?? 'idle'\"\n          [AgentName]=\"agentCharacterConfig?.characterName\"\n          [AvatarUrl]=\"agentCharacterConfig?.avatarUrl\"\n          [Mode]=\"agentCharacterConfig?.voiceStateMode ?? 'subtle'\">\n        </mj-chat-agent-presence-default>\n      }\n    </div>\n  }\n\n  <!-- header slot \u2014 replaces the entire chat-header chrome (title, badges,\n       export/share/agent-picker buttons). When projected, the consumer owns\n       the entire header rendering; the default chrome below is bypassed\n       wholesale. Context exposes the minimal IMJChatHeaderComponent shape;\n       consumers needing more app state should bind to chat-area inputs\n       directly via @ViewChild or wrap the whole component. -->\n  @if (slotTemplate('header'); as t) {\n    <ng-container *ngTemplateOutlet=\"t; context: {\n      $implicit: conversation,\n      conversationTitle: conversation?.Name ?? null,\n      sharedBy: sharedByBadge?.display ?? null,\n      artifactCount: artifactCountDisplay,\n      showArtifactIndicator: showArtifactIndicator\n    }\"></ng-container>\n  } @else if (conversation || HasPreConversationHeader) {\n    <!-- Default header \u2014 also renders BEFORE a conversation exists when the\n         embedder has pre-conversation chrome to surface (currently just the\n         mode picker \u2014 agent / share / export / members / artifacts all\n         require a conversation row and stay hidden). Lets embedded surfaces\n         like the Form Builder cockpit show the mode picker above the\n         empty-state on a fresh chat instead of waiting for the first\n         message to round-trip. -->\n    <div class=\"chat-header\">\n      <div class=\"chat-info\" [class.with-sidebar-toggle]=\"showSidebarToggle\">\n        @if (showSidebarToggle) {\n          <button class=\"sidebar-toggle-btn\"\n            (click)=\"sidebarToggleClicked.emit()\"\n            title=\"Show conversations\">\n            <i class=\"fas fa-table-columns\"></i>\n          </button>\n        }\n        @if (conversation) {\n          <div class=\"chat-title\">{{ conversation.Name || '' }}</div>\n        }\n        @if (sharedByBadge) {\n          <span class=\"shared-by-badge\" [title]=\"sharedByBadge.fullTooltip\">\n            <i class=\"fas fa-share-nodes\"></i>\n            <span>Shared by {{ sharedByBadge.display }}</span>\n          </span>\n        }\n        @if (conversation?.ProjectID) {\n          <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\">\n            <i class=\"fas fa-folder\"></i>\n            <span>{{ conversation!.Project || 'Project' }}</span>\n          </button>\n        }\n        @if (conversation?.TestRunID) {\n          <button class=\"test-indicator\" (click)=\"viewTestRun(conversation!.TestRunID!)\" title=\"View Test Run\">\n            <i class=\"fas fa-flask\"></i>\n            <span>Test</span>\n          </button>\n        }\n      </div>\n      <div class=\"chat-actions chat-actions-buttons\">\n        @if (allowPinning && pinnedMessages.length > 0) {\n          <button class=\"pin-chip\" [class.active]=\"showPinsPanel\" (click)=\"showPinsPanel = !showPinsPanel\" title=\"View pinned messages\">\n            <i class=\"fas fa-thumbtack\"></i>\n            <span class=\"pin-chip-count\">{{ pinnedMessages.length }}</span>\n          </button>\n        }\n        @if (showArtifactIndicator && artifactCountDisplay > 0) {\n          <button class=\"artifact-indicator\" (click)=\"viewArtifacts()\" title=\"View artifacts\">\n            <i class=\"fas fa-cube\"></i>\n            <span class=\"artifact-badge\">{{ artifactCountDisplay }}</span>\n          </button>\n        }\n        @if (memberCount > 1) {\n          <button class=\"chat-members\" (click)=\"toggleMembersModal()\" title=\"View members\">\n            <i class=\"fas fa-users\"></i>\n            <span class=\"members-badge\">{{ memberCount }}</span>\n          </button>\n        }\n        @if (!overlayMode && showAgentModePicker && ModePickerTargetAgentId) {\n          <!-- Per-agent mode/quality picker (Draft / Standard / High).\n               Targets the agent the next non-mention message will route\n               to. Auto-hides when that agent has fewer than 2 configured\n               presets. Choice persists per-user, per-agent via\n               UserInfoEngine; emits the picked configuration ID up so\n               <mj-message-input> can forward it on the next route.\n               Hidden in overlayMode (the compact chat overlay): the\n               mode dropdown wastes the narrow top-right space there. -->\n          <mj-conversation-mode-picker\n            [AgentID]=\"ModePickerTargetAgentId\"\n            [Disabled]=\"isProcessing\"\n            (PresetChanged)=\"OnAgentModePresetChanged($event)\">\n          </mj-conversation-mode-picker>\n        }\n        @if (showAgentPicker && conversation) {\n          <!-- Per-conversation default-agent pin. When set, non-mention\n               messages route to this agent instead of Sage. Persists to\n               MJConversationEntity.DefaultAgentID. Hidden when no\n               conversation is loaded or when the embedder disables it. -->\n          <mj-conversation-agent-picker\n            [Conversation]=\"conversation\"\n            [CurrentUser]=\"currentUser\"\n            [Disabled]=\"isReadOnlyView\">\n          </mj-conversation-agent-picker>\n        }\n        @if (showExportButton) {\n          <button mjButton variant=\"flat\" size=\"sm\" (click)=\"exportConversation()\" [title]=\"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  <!-- Messages and Artifact Split Layout \u2014 restructures into [stage | rail]\n       when isDemonstrationActive (per Matt's 06-10 design). The .demonstration-mode\n       class drives the CSS Grid switch; the stage container renders only when the\n       slot is projected AND the host opts in via [showDemonstrationSurface]. -->\n  <div class=\"chat-content-area\" [class.demonstration-mode]=\"isDemonstrationActive\">\n    <!-- demonstrationSurface stage \u2014 takes the main pane; messages shrink to\n         a side rail (or move below on mobile). Off unless both\n         [showDemonstrationSurface] is true AND a slot template is projected. -->\n    @if (isDemonstrationActive) {\n      <div class=\"chat-demonstration-stage\">\n        <ng-container *ngTemplateOutlet=\"slotTemplate('demonstrationSurface'); context: {\n          $implicit: demonstrationSurfaceContent,\n          content: demonstrationSurfaceContent,\n          visible: showDemonstrationSurface\n        }\"></ng-container>\n      </div>\n    }\n\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n      [class.full-width]=\"!showArtifactPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isLoadingConversation) {\n        <!-- Loading State - checked FIRST to prevent empty state flash. The branch\n             always short-circuits the panes below; showLoadingState only controls\n             whether the built-in spinner renders (hosts with their own loading\n             chrome set it false and get a blank pane instead). -->\n        @if (showLoadingState) {\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        }\n      } @else if ((isNewConversation || !conversationId) && !suppressNewConversationEmptyState) {\n        <!-- emptyState slot \u2014 when a consumer projects mjChatSlot=\"emptyState\",\n             they take over the entire empty-state region (including any send\n             affordance \u2014 the slot interface doesn't include a sendMessage\n             output, so consumers handle send via their own input). When no\n             slot is projected, the rich built-in <mj-conversation-empty-state>\n             renders with its own greeting, prompt chips, and message input.\n             emptyStateConfig (when supplied) takes precedence over the legacy\n             [emptyStateGreeting] string for backwards compatibility. -->\n        @if (slotTemplate('emptyState'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: emptyStateConfig,\n            greeting: emptyStateConfig?.greeting ?? emptyStateGreeting,\n            subtext: emptyStateConfig?.subtext,\n            suggestedPrompts: emptyStateConfig?.suggestedPrompts ?? []\n          }\"></ng-container>\n        } @else {\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [initialDraft]=\"GetInitialDraftFor(null)\"\n            (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n            [disabled]=\"isProcessing\"\n            [showSidebarToggle]=\"showSidebarToggle\"\n            [overlayMode]=\"overlayMode\"\n            [greeting]=\"emptyStateConfig?.greeting ?? emptyStateGreeting\"\n            [showSuggestedPrompts]=\"showSuggestedPrompts\"\n            [enableAttachments]=\"enableAttachments && allowAttachments\"\n            [enableMentions]=\"allowMentions\"\n            [enableAgentMentions]=\"allowAgentMentions\"\n            [enableEntityMentions]=\"allowEntityMentions\"\n            [enableSkillCommands]=\"allowSkillCommands\"\n            [maxAttachments]=\"maxAttachments\"\n            [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n            [acceptedFileTypes]=\"acceptedFileTypes\"\n            (sidebarToggleClicked)=\"sidebarToggleClicked.emit()\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        }\n      } @else if ((isNewConversation || !conversationId) && suppressNewConversationEmptyState) {\n        <!-- Pre-conversation normal-view: empty message list + emptyStateMode input.\n             Used when host (e.g. Form Builder cockpit) wants the header + mode picker\n             visible on first open instead of the centered welcome card. First send\n             routes through onEmptyStateMessageSent which creates the conversation. -->\n        <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\"></div>\n          <div class=\"chat-input-container\">\n            <div class=\"message-input-container-wrapper\">\n              <mj-message-input\n                #emptyStateInput\n                [emptyStateMode]=\"true\"\n                [initialDraft]=\"GetInitialDraftFor(null)\"\n                (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n                [currentUser]=\"currentUser\"\n                [disabled]=\"isProcessing\"\n                [enableAttachments]=\"enableAttachments && allowAttachments\"\n                [enableMentions]=\"allowMentions\"\n                [enableAgentMentions]=\"allowAgentMentions\"\n                [enableEntityMentions]=\"allowEntityMentions\"\n                [enableSkillCommands]=\"allowSkillCommands\"\n                [enablePlanMode]=\"allowPlanMode\"\n                [enableRealtime]=\"allowRealtime\"\n                [maxAttachments]=\"maxAttachments\"\n                [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                [acceptedFileTypes]=\"acceptedFileTypes\"\n                (emptyStateSubmit)=\"onEmptyStateMessageSent($event)\">\n              </mj-message-input>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          <!-- Upload Indicator Overlay (centered in conversation area) -->\n          @if (isUploadingAttachments) {\n            <div class=\"upload-indicator-overlay\">\n              <mj-loading [text]=\"uploadingMessage\" size=\"medium\"></mj-loading>\n            </div>\n          }\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n            <mj-conversation-message-list\n              [showEmptyFill]=\"showEmptyFill\"\n              [showDateNavigation]=\"showDateNavigation\"\n              [showAgentRunDetails]=\"showAgentRunDetails\"\n              [showReactions]=\"showReactions\"\n              [showMessageRating]=\"showMessageRating\"\n              [allowPinning]=\"allowPinning\"\n              [allowMessageEdit]=\"allowMessageEdit\"\n              [allowMessageDelete]=\"allowMessageDelete\"\n              [assistantDisplayName]=\"assistantDisplayName\"\n              [assistantAvatarUrl]=\"assistantAvatarUrl\"\n              [messages]=\"messages\"\n              [conversation]=\"conversation\"\n              [currentUser]=\"currentUser\"\n              [isProcessing]=\"isProcessing\"\n              [artifactMap]=\"effectiveArtifactsMap\"\n              [agentRunMap]=\"agentRunsByDetailId\"\n              [ratingsMap]=\"ratingsByDetailId\"\n              [userAvatarMap]=\"userAvatarMap\"\n              [attachmentsMap]=\"attachmentsByDetailId\"\n              [messageRendererTemplate]=\"slotTemplate('messageRenderer')\"\n              [messageExtraTemplate]=\"slotTemplate('messageExtra')\"\n              [sessionMetaMap]=\"realtimeSessionMetaMap\"\n              (realtimeSessionOpenRequested)=\"OpenRealtimeSessionReview($event)\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (deleteMessage)=\"onDeleteMessage($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (testFeedbackMessage)=\"onTestFeedbackMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\"\n              (attachmentClicked)=\"onAttachmentClicked($event)\"\n              (diagnosticRequested)=\"onDiagnosticRequested($event)\"\n              (messagePinToggled)=\"onMessagePinToggled($event)\"\n              (beforeResponseFormSubmitted)=\"beforeResponseFormSubmitted.emit($event)\"\n              (afterResponseFormSubmitted)=\"afterResponseFormSubmitted.emit($event)\">\n            </mj-conversation-message-list>\n\n            <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n            @if (showScrollToBottomIcon && messages && messages.length > 0) {\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                (click)=\"scrollToBottomAnimate()\">\n                <i class=\"fas fa-arrow-down\"></i>\n              </span>\n            }\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n            @if (isLoadingPeripheralData) {\n              <!-- Loading State -->\n              <div class=\"loading-peripheral-placeholder\">\n                <mj-loading text=\"Loading conversation data...\" size=\"medium\"></mj-loading>\n              </div>\n            } @else {\n              @if (isReadOnlyView) {\n                <div class=\"read-only-banner\" role=\"status\">\n                  <i class=\"fas fa-eye\"></i>\n                  <span>You have view-only access to this conversation.</span>\n                </div>\n              }\n              <!-- Input Component - Multiple instances cached, only one visible -->\n              <div class=\"message-input-container-wrapper\">\n                @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                  <mj-message-input\n                    #messageInput\n                    [hidden]=\"inputRef.conversationId !== conversationId\"\n                    [initialDraft]=\"GetInitialDraftFor(inputRef.conversationId)\"\n                    (DraftStateChanged)=\"OnDraftStateChanged(inputRef.conversationId, $event)\"\n                    (ComposerBlurred)=\"OnComposerBlurred()\"\n                    [conversationId]=\"inputRef.conversationId\"\n                    [conversationName]=\"inputRef.conversationName\"\n                    [currentUser]=\"currentUser\"\n                    [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                    [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                    [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                    [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                    [appContext]=\"appContext\"\n                    [applicationId]=\"applicationId\"\n                    [defaultAgentId]=\"defaultAgentId\"\n                    [conversationDefaultAgentId]=\"inputRef.conversationId === conversationId ? (conversation?.DefaultAgentID ?? null) : null\"\n                    [agentConfigurationPresetId]=\"inputRef.conversationId === conversationId ? ActiveAgentConfigurationPresetId : null\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing || isReadOnlyView\"\n                    [enableAttachments]=\"enableAttachments && allowAttachments\"\n                    [enableMentions]=\"allowMentions\"\n                    [enableAgentMentions]=\"allowAgentMentions\"\n                    [enableEntityMentions]=\"allowEntityMentions\"\n                    [enableSkillCommands]=\"allowSkillCommands\"\n                    [enablePlanMode]=\"allowPlanMode\"\n                    [enableRealtime]=\"allowRealtime\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingMessage : null\"\n                    [initialAttachments]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingAttachments : null\"\n                    (initialMessageAutoSendStarted)=\"onInitialMessageAutoSendStarted($event)\"\n                    (initialMessageAutoSendFailed)=\"onInitialMessageAutoSendFailed($event)\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (agentResponse)=\"onAgentResponse($event)\"\n                    (agentRunDetected)=\"onAgentRunDetected($event)\"\n                    (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                    (messageComplete)=\"onMessageComplete($event)\"\n                    (artifactCreated)=\"onArtifactCreated($event)\"\n                    (conversationRenamed)=\"onConversationRenamed($event)\"\n                    (intentCheckStarted)=\"onIntentCheckStarted($event)\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted($event)\"\n                    (beforeAgentTurn)=\"beforeAgentTurn.emit($event)\"\n                    (afterAgentTurn)=\"afterAgentTurn.emit($event)\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <mj-artifact-viewer-panel\n          [artifactId]=\"selectedArtifactId\"\n          [currentUser]=\"currentUser\"\n          [environmentId]=\"environmentId\"\n          [versionNumber]=\"selectedVersionNumber\"\n          [viewContext]=\"'conversation'\"\n          [canShare]=\"canShareSelectedArtifact\"\n          [canEdit]=\"canEditSelectedArtifact\"\n          [isMaximized]=\"isArtifactPaneMaximized\"\n          [refreshTrigger]=\"artifactViewerRefresh$\"\n          (closed)=\"onCloseArtifactPanel()\"\n          (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n          (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n          (shareRequested)=\"onArtifactShareRequested($event)\"\n          (maximizeToggled)=\"toggleMaximizeArtifactPane()\"\n          (openEntityRecord)=\"onOpenEntityRecord($event)\"\n          (navigationRequest)=\"onNavigationRequest($event)\"\n          (analyzeRequested)=\"OnAnalyzeArtifact($event)\"\n          (applyFormRequested)=\"OnApplyFormRequested($event)\">\n        </mj-artifact-viewer-panel>\n      </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n\n    <!-- Pinned Messages Panel (overlay) -->\n    @if (allowPinning && showPinsPanel) {\n      <mj-pinned-messages-panel\n        [pinnedMessages]=\"pinnedMessages\"\n        (closed)=\"showPinsPanel = false\"\n        (jumpRequested)=\"onJumpToMessage($event)\"\n        (unpinRequested)=\"onUnpinFromPanel($event)\">\n      </mj-pinned-messages-panel>\n    }\n  </div>\n\n  <!-- Live voice \"call mode\" overlay \u2014 fills this conversation panel in place\n       (header + thread + composer) while a realtime session is active. When the\n       call is MINIMIZED (e.g. a dev link navigated to a record) the overlay HIDES\n       (not destroyed \u2014 its merged session state must survive), the session stays\n       fully live, and a floating \"on call\" pill offers the way back.\n       ALSO hosted in SESSION REVIEW mode (RealtimeReview set, no live call): the\n       overlay renders what went down in a PAST session, with a \"Start live session\"\n       button that resumes it as a new call. -->\n  @if ((RealtimeSession.Active$ | async) || RealtimeReview) {\n    <mj-realtime-session-overlay\n      [AgentName]=\"realtimeOverlayAgentName\"\n      [Hidden]=\"(RealtimeSession.Minimized$ | async) === true\"\n      [CurrentUser]=\"currentUser\"\n      [EnvironmentID]=\"environmentId\"\n      [ReviewData]=\"RealtimeReview\"\n      [Chrome]=\"overlayMode ? 'orb' : 'auto'\"\n      [Compact]=\"overlayMode\"\n      [ShowDevLinks]=\"!overlayMode\"\n      [ShowDensityPicker]=\"!overlayMode\"\n      (NavigateRequest)=\"onRealtimeNavigateRequest($event)\"\n      (StartLiveRequested)=\"onReviewStartLive($event)\"\n      (ReviewClosed)=\"onReviewClosed()\">\n    </mj-realtime-session-overlay>\n    @if (RealtimeSession.Minimized$ | async) {\n      <button type=\"button\" class=\"voice-call-pill\" (click)=\"RealtimeSession.SetMinimized(false)\"\n              title=\"Return to the live call\" aria-label=\"Return to the live call\">\n        <span class=\"voice-call-pill__pulse\" aria-hidden=\"true\"></span>\n        <i class=\"fa-solid fa-phone-volume\" aria-hidden=\"true\"></i>\n        <span class=\"voice-call-pill__text\">\n          <span class=\"voice-call-pill__name\">On call \u00B7 {{ RealtimeSession.CurrentAgentName }}</span>\n          <span class=\"voice-call-pill__hint\">Tap to return</span>\n        </span>\n      </button>\n    }\n  }\n</div>\n\n<!-- Thread Panel -->\n@if (threadId) {\n  <mj-thread-panel\n    [parentMessageId]=\"threadId\"\n    [conversationId]=\"conversationId || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onLocalThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n  </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<!-- [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  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Share Dialog (generic, shared with dashboards) -->\n<mj-resource-share-dialog\n  [Visible]=\"showShareModal\"\n  [Context]=\"shareContext\"\n  [Adapter]=\"shareAdapter\"\n  (Result)=\"onShareDialogResult($event)\">\n</mj-resource-share-dialog>\n\n<!-- Members Modal -->\n<mj-members-modal\n  [isVisible]=\"showMembersModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"showMembersModal = false\"\n  (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n  <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <mj-project-selector\n          [environmentId]=\"environmentId\"\n          [currentUser]=\"currentUser\"\n          [selectedProjectId]=\"conversation.ProjectID\"\n          (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n  <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n          @if (hasSystemArtifacts) {\n            <button class=\"toggle-system-btn\"\n              [class.active]=\"showSystemArtifacts\"\n              (click)=\"toggleSystemArtifacts()\"\n              title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n            </button>\n          }\n          <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n          <mj-empty-state\n            class=\"artifacts-empty-fill\"\n            Icon=\"fa-solid fa-cube\"\n            Title=\"No artifacts in this conversation yet\" />\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n          <div class=\"artifact-modal-card\"\n            [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n            [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n            <!-- Main card header - click to open latest version -->\n            <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n              <div class=\"artifact-modal-icon\">\n                <i class=\"fas fa-file-code\"></i>\n              </div>\n              <div class=\"artifact-modal-info\">\n                <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                <div class=\"artifact-modal-meta\">\n                  @if (artifact.versionCount > 1) {\n                    {{artifact.versionCount}} versions\n                  } @else {\n                    1 version\n                  }\n                </div>\n              </div>\n              @if (artifact.versionCount > 1) {\n                <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                  <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                  [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                </button>\n              }\n              <div class=\"artifact-modal-action\">\n                <i class=\"fas fa-external-link-alt\"></i>\n              </div>\n            </div>\n\n            <!-- Expanded version list -->\n            @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n              <div class=\"artifact-versions-list\">\n                @for (version of artifact.versions; track version.versionId) {\n                  <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                    <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                    <span class=\"version-open-text\">Open this version</span>\n                    <i class=\"fas fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    [artifactVersionId]=\"collectionPickerVersionId\"\n    [artifactName]=\"collectionPickerArtifactName\"\n    [artifactVersionNumber]=\"collectionPickerVersionNumber\"\n    (completed)=\"onCollectionPickerCompleted($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Test Feedback Dialog -->\n@if (testFeedbackDialogData) {\n  <mj-test-feedback-dialog\n    [data]=\"testFeedbackDialogData\"\n    [visible]=\"showTestFeedbackDialog\"\n    (closed)=\"onTestFeedbackDialogClosed($event)\">\n  </mj-test-feedback-dialog>\n}\n\n<!-- Image Viewer Modal -->\n@if (showImageViewer) {\n  <mj-image-viewer\n    [imageUrl]=\"selectedImageUrl\"\n    [alt]=\"selectedImageAlt\"\n    [fileName]=\"selectedImageFileName\"\n    [visible]=\"showImageViewer\"\n    (closed)=\"onImageViewerClosed()\">\n  </mj-image-viewer>\n}\n", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  /* Positioned context for the in-place realtime \"call mode\" overlay (absolute inset:0) */\n  position: relative;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n   06-10 placement design: persistent presence indicator above the messages.\n   Renders only when [showAgentCharacter] is true, so existing embeds see no\n   layout change. The prominent variant grows toward a centered presence\n   (per Matt: \"can grow larger toward a centered presence\"). */\n.chat-agent-presence {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Sidebar toggle button in header */\n.sidebar-toggle-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn i {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: var(--mj-text-primary);\n}\n\n.chat-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge i {\n  font-size: 10px;\n}\n\n.shared-by-badge span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag i {\n  font-size: 10px;\n}\n\n.test-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n/* Pinned messages chip in chat header */\n.pin-chip {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip i {\n  font-size: 11px;\n}\n\n.pin-chip:hover,\n.pin-chip.active {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members,\n.artifact-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover,\n.artifact-indicator:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n/* Badge overlay for artifact and member counts */\n.artifact-badge,\n.members-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.chat-content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); /* Respect container bounds while maintaining minimum */\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width {\n  width: 100%;\n}\n\n.chat-messages-pane:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden {\n  display: none;\n}\n\n.resize-handle {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized {\n  width: 100% !important;\n}\n\n.chat-artifact-pane > mj-artifact-viewer-panel {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; /* For upload overlay positioning */\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   demonstrationSurface layout-mode (Matt's 06-10 placement design)\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   When .chat-content-area gets .demonstration-mode, the layout flips\n   from \"messages pane (+ optional artifact pane)\" to \"stage + side rail\":\n     - stage (.chat-demonstration-stage) \u2014 left, flexible, holds the\n       consumer's projected demonstrationSurface slot template\n     - rail (.chat-messages-pane) \u2014 right, fixed-width 320px, holds the\n       messages list + composer (\"the conversation as a companion rail\")\n   On mobile (\u2264768px) the same two stack vertically (stage above, rail\n   below) per Matt's note about mobile. The rail intentionally keeps the\n   composer inside it \u2014 Matt's design refers to the conversation rail\n   inclusively (messages + composer together), not as separate regions.\n*/\n.chat-demonstration-stage {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode .chat-messages-pane,\n.chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode .chat-demonstration-stage {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode .chat-messages-pane,\n  .chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n/* Upload indicator overlay - centered in conversation area */\n.upload-indicator-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface-card);\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon i {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.read-only-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n/* Empty-state spans the full artifacts grid */\n.artifacts-empty-fill {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item:hover .version-open-text {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; /* Hide on mobile to save space */\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  /* Action buttons - icon only on mobile */\n  .chat-actions-buttons {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons .action-btn {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons .action-btn .btn-label {\n    display: none;\n  }\n  .chat-actions {\n    flex-wrap: nowrap;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile, overlapping header */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; /* 48px nav + 8px dark strip above blue border */\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n\n/* Artifact Picker Panel */\n.artifact-picker-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: slideInRight 0.2s ease-out;\n}\n\n@keyframes slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item i {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item i.fa-file-pdf { color: var(--mj-status-error); }\n.artifact-picker-item i.fa-file-excel { color: var(--mj-status-success); }\n.artifact-picker-item i.fa-file-word { color: var(--mj-brand-primary); }\n.artifact-picker-item i.fa-file { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* ---------- Floating \"on call\" pill (minimized realtime voice session) ----------\n   Shown bottom-right of the chat panel while the live call overlay is minimized\n   (e.g. after a gear-gated dev link navigated to a record). The mic + session stay\n   live; tapping the pill restores the full call overlay. */\n.voice-call-pill {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; /* just under the full call overlay (z-index 50) */\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-conversation-chat-area', template: "<div class=\"chat-area\">\n  <!-- agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n       06-10 design: persistent presence indicator (Sid's face + live voice\n       state). Off by default; opt in via [showAgentCharacter]. When a\n       consumer projects an `mjChatSlot=\"agentPresence\"` template, it\n       replaces the default presence component. -->\n  @if (showAgentCharacter) {\n    <div class=\"chat-agent-presence\" [class.chat-agent-presence--prominent]=\"agentCharacterConfig?.voiceStateMode === 'prominent'\">\n      @if (slotTemplate('agentPresence'); as t) {\n        <ng-container *ngTemplateOutlet=\"t; context: {\n          $implicit: agentCharacterConfig,\n          state: agentCharacterConfig?.state ?? 'idle',\n          agentName: agentCharacterConfig?.characterName,\n          avatarUrl: agentCharacterConfig?.avatarUrl,\n          mode: agentCharacterConfig?.voiceStateMode ?? 'subtle'\n        }\"></ng-container>\n      } @else {\n        <mj-chat-agent-presence-default\n          [State]=\"agentCharacterConfig?.state ?? 'idle'\"\n          [AgentName]=\"agentCharacterConfig?.characterName\"\n          [AvatarUrl]=\"agentCharacterConfig?.avatarUrl\"\n          [Mode]=\"agentCharacterConfig?.voiceStateMode ?? 'subtle'\">\n        </mj-chat-agent-presence-default>\n      }\n    </div>\n  }\n\n  <!-- header slot \u2014 replaces the entire chat-header chrome (title, badges,\n       export/share/agent-picker buttons). When projected, the consumer owns\n       the entire header rendering; the default chrome below is bypassed\n       wholesale. Context exposes the minimal IMJChatHeaderComponent shape;\n       consumers needing more app state should bind to chat-area inputs\n       directly via @ViewChild or wrap the whole component. -->\n  @if (slotTemplate('header'); as t) {\n    <ng-container *ngTemplateOutlet=\"t; context: {\n      $implicit: conversation,\n      conversationTitle: conversation?.Name ?? null,\n      sharedBy: sharedByBadge?.display ?? null,\n      artifactCount: artifactCountDisplay,\n      showArtifactIndicator: showArtifactIndicator\n    }\"></ng-container>\n  } @else if (conversation || HasPreConversationHeader) {\n    <!-- Default header \u2014 also renders BEFORE a conversation exists when the\n         embedder has pre-conversation chrome to surface (currently just the\n         mode picker \u2014 agent / share / export / members / artifacts all\n         require a conversation row and stay hidden). Lets embedded surfaces\n         like the Form Builder cockpit show the mode picker above the\n         empty-state on a fresh chat instead of waiting for the first\n         message to round-trip. -->\n    <div class=\"chat-header\">\n      <div class=\"chat-info\" [class.with-sidebar-toggle]=\"showSidebarToggle\">\n        @if (showSidebarToggle) {\n          <button class=\"sidebar-toggle-btn\"\n            (click)=\"sidebarToggleClicked.emit()\"\n            title=\"Show conversations\">\n            <i class=\"fas fa-table-columns\"></i>\n          </button>\n        }\n        @if (conversation) {\n          <div class=\"chat-title\">{{ conversation.Name || '' }}</div>\n        }\n        @if (sharedByBadge) {\n          <span class=\"shared-by-badge\" [title]=\"sharedByBadge.fullTooltip\">\n            <i class=\"fas fa-share-nodes\"></i>\n            <span>Shared by {{ sharedByBadge.display }}</span>\n          </span>\n        }\n        @if (conversation?.ProjectID) {\n          <button class=\"project-tag\" (click)=\"openProjectSelector()\" title=\"Assign to project\">\n            <i class=\"fas fa-folder\"></i>\n            <span>{{ conversation!.Project || 'Project' }}</span>\n          </button>\n        }\n        @if (conversation?.TestRunID) {\n          <button class=\"test-indicator\" (click)=\"viewTestRun(conversation!.TestRunID!)\" title=\"View Test Run\">\n            <i class=\"fas fa-flask\"></i>\n            <span>Test</span>\n          </button>\n        }\n      </div>\n      <div class=\"chat-actions chat-actions-buttons\">\n        @if (allowPinning && 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) {\n          <!-- Per-agent mode/quality picker (Draft / Standard / High).\n               Targets the agent the next non-mention message will route\n               to. Auto-hides when that agent has fewer than 2 configured\n               presets. Choice persists per-user, per-agent via\n               UserInfoEngine; emits the picked configuration ID up so\n               <mj-message-input> can forward it on the next route.\n               Hidden in overlayMode (the compact chat overlay): the\n               mode dropdown wastes the narrow top-right space there. -->\n          <mj-conversation-mode-picker\n            [AgentID]=\"ModePickerTargetAgentId\"\n            [Disabled]=\"isProcessing\"\n            (PresetChanged)=\"OnAgentModePresetChanged($event)\">\n          </mj-conversation-mode-picker>\n        }\n        @if (showAgentPicker && conversation) {\n          <!-- Per-conversation default-agent pin. When set, non-mention\n               messages route to this agent instead of Sage. Persists to\n               MJConversationEntity.DefaultAgentID. Hidden when no\n               conversation is loaded or when the embedder disables it. -->\n          <mj-conversation-agent-picker\n            [Conversation]=\"conversation\"\n            [CurrentUser]=\"currentUser\"\n            [Disabled]=\"isReadOnlyView\">\n          </mj-conversation-agent-picker>\n        }\n        @if (showExportButton) {\n          <button mjButton variant=\"flat\" size=\"sm\" (click)=\"exportConversation()\" [title]=\"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  <!-- Messages and Artifact Split Layout \u2014 restructures into [stage | rail]\n       when isDemonstrationActive (per Matt's 06-10 design). The .demonstration-mode\n       class drives the CSS Grid switch; the stage container renders only when the\n       slot is projected AND the host opts in via [showDemonstrationSurface]. -->\n  <div class=\"chat-content-area\" [class.demonstration-mode]=\"isDemonstrationActive\">\n    <!-- demonstrationSurface stage \u2014 takes the main pane; messages shrink to\n         a side rail (or move below on mobile). Off unless both\n         [showDemonstrationSurface] is true AND a slot template is projected. -->\n    @if (isDemonstrationActive) {\n      <div class=\"chat-demonstration-stage\">\n        <ng-container *ngTemplateOutlet=\"slotTemplate('demonstrationSurface'); context: {\n          $implicit: demonstrationSurfaceContent,\n          content: demonstrationSurfaceContent,\n          visible: showDemonstrationSurface\n        }\"></ng-container>\n      </div>\n    }\n\n    <!-- Messages Pane -->\n    <div class=\"chat-messages-pane\"\n      [class.full-width]=\"!showArtifactPanel\"\n      [class.hidden]=\"isArtifactPaneMaximized\">\n      @if (isLoadingConversation) {\n        <!-- Loading State - checked FIRST to prevent empty state flash. The branch\n             always short-circuits the panes below; showLoadingState only controls\n             whether the built-in spinner renders (hosts with their own loading\n             chrome set it false and get a blank pane instead). -->\n        @if (showLoadingState) {\n          <div class=\"conversation-loading-state\">\n            <mj-loading text=\"Loading conversation...\" size=\"large\"></mj-loading>\n          </div>\n        }\n      } @else if ((isNewConversation || !conversationId) && !suppressNewConversationEmptyState) {\n        <!-- emptyState slot \u2014 when a consumer projects mjChatSlot=\"emptyState\",\n             they take over the entire empty-state region (including any send\n             affordance \u2014 the slot interface doesn't include a sendMessage\n             output, so consumers handle send via their own input). When no\n             slot is projected, the rich built-in <mj-conversation-empty-state>\n             renders with its own greeting, prompt chips, and message input.\n             emptyStateConfig (when supplied) takes precedence over the legacy\n             [emptyStateGreeting] string for backwards compatibility. -->\n        @if (slotTemplate('emptyState'); as t) {\n          <ng-container *ngTemplateOutlet=\"t; context: {\n            $implicit: emptyStateConfig,\n            greeting: emptyStateConfig?.greeting ?? emptyStateGreeting,\n            subtext: emptyStateConfig?.subtext,\n            suggestedPrompts: emptyStateConfig?.suggestedPrompts ?? []\n          }\"></ng-container>\n        } @else {\n          <mj-conversation-empty-state\n            [currentUser]=\"currentUser\"\n            [initialDraft]=\"GetInitialDraftFor(null)\"\n            (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n            [disabled]=\"isProcessing\"\n            [showSidebarToggle]=\"showSidebarToggle\"\n            [overlayMode]=\"overlayMode\"\n            [greeting]=\"emptyStateConfig?.greeting ?? emptyStateGreeting\"\n            [showSuggestedPrompts]=\"showSuggestedPrompts\"\n            [enableAttachments]=\"enableAttachments && allowAttachments\"\n            [enableMentions]=\"allowMentions\"\n            [enableAgentMentions]=\"allowAgentMentions\"\n            [enableEntityMentions]=\"allowEntityMentions\"\n            [enableSkillCommands]=\"allowSkillCommands\"\n            [maxAttachments]=\"maxAttachments\"\n            [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n            [acceptedFileTypes]=\"acceptedFileTypes\"\n            (sidebarToggleClicked)=\"sidebarToggleClicked.emit()\"\n            (messageSent)=\"onEmptyStateMessageSent($event)\">\n          </mj-conversation-empty-state>\n        }\n      } @else if ((isNewConversation || !conversationId) && suppressNewConversationEmptyState) {\n        <!-- Pre-conversation normal-view: empty message list + emptyStateMode input.\n             Used when host (e.g. Form Builder cockpit) wants the header + mode picker\n             visible on first open instead of the centered welcome card. First send\n             routes through onEmptyStateMessageSent which creates the conversation. -->\n        <div class=\"chat-messages-wrapper\">\n          <div class=\"chat-messages-container\"></div>\n          <div class=\"chat-input-container\">\n            <div class=\"message-input-container-wrapper\">\n              <mj-message-input\n                #emptyStateInput\n                [emptyStateMode]=\"true\"\n                [initialDraft]=\"GetInitialDraftFor(null)\"\n                (initialDraftApplied)=\"OnComposerDraftApplied()\"\n            (DraftStateChanged)=\"OnDraftStateChanged(null, $event)\"\n            (ComposerBlurred)=\"OnComposerBlurred()\"\n                [currentUser]=\"currentUser\"\n                [disabled]=\"isProcessing\"\n                [enableAttachments]=\"enableAttachments && allowAttachments\"\n                [enableMentions]=\"allowMentions\"\n                [enableAgentMentions]=\"allowAgentMentions\"\n                [enableEntityMentions]=\"allowEntityMentions\"\n                [enableSkillCommands]=\"allowSkillCommands\"\n                [enablePlanMode]=\"allowPlanMode\"\n                [enableRealtime]=\"allowRealtime\"\n                [maxAttachments]=\"maxAttachments\"\n                [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                [acceptedFileTypes]=\"acceptedFileTypes\"\n                (emptyStateSubmit)=\"onEmptyStateMessageSent($event)\">\n              </mj-message-input>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Message View -->\n        <div class=\"chat-messages-wrapper\">\n          <!-- Upload Indicator Overlay (centered in conversation area) -->\n          @if (isUploadingAttachments) {\n            <div class=\"upload-indicator-overlay\">\n              <mj-loading [text]=\"uploadingMessage\" size=\"medium\"></mj-loading>\n            </div>\n          }\n          <div class=\"chat-messages-container\" #scrollContainer (scroll)=\"checkScroll()\">\n            <mj-conversation-message-list\n              [showEmptyFill]=\"showEmptyFill\"\n              [showDateNavigation]=\"showDateNavigation\"\n              [showAgentRunDetails]=\"showAgentRunDetails\"\n              [showReactions]=\"showReactions\"\n              [showMessageRating]=\"showMessageRating\"\n              [allowPinning]=\"allowPinning\"\n              [allowMessageEdit]=\"allowMessageEdit\"\n              [allowMessageDelete]=\"allowMessageDelete\"\n              [assistantDisplayName]=\"assistantDisplayName\"\n              [assistantAvatarUrl]=\"assistantAvatarUrl\"\n              [messages]=\"messages\"\n              [HasMoreAbove]=\"hasMoreMessagesAbove\"\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              (realtimeSessionOpenRequested)=\"OpenRealtimeSessionReview($event)\"\n              (replyInThread)=\"onReplyInThread($event)\"\n              (viewThread)=\"onViewThread($event)\"\n              (deleteMessage)=\"onDeleteMessage($event)\"\n              (retryMessage)=\"onRetryMessage($event)\"\n              (testFeedbackMessage)=\"onTestFeedbackMessage($event)\"\n              (artifactClicked)=\"onArtifactClicked($event)\"\n              (messageEdited)=\"onMessageEdited($event)\"\n              (openEntityRecord)=\"onOpenEntityRecord($event)\"\n              (suggestedResponseSelected)=\"onSuggestedResponseSelected($event)\"\n              (attachmentClicked)=\"onAttachmentClicked($event)\"\n              (diagnosticRequested)=\"onDiagnosticRequested($event)\"\n              (messagePinToggled)=\"onMessagePinToggled($event)\"\n              (beforeResponseFormSubmitted)=\"beforeResponseFormSubmitted.emit($event)\"\n              (afterResponseFormSubmitted)=\"afterResponseFormSubmitted.emit($event)\">\n            </mj-conversation-message-list>\n\n            <!-- Scroll to Bottom Icon (positioned within scroll container for proper centering) -->\n            @if (showScrollToBottomIcon && messages && messages.length > 0) {\n              <span class=\"scroll-to-bottom-icon\" style=\"left: 50%;\"\n                (click)=\"scrollToBottomAnimate()\">\n                <i class=\"fas fa-arrow-down\"></i>\n              </span>\n            }\n          </div>\n\n          <!-- Fixed Input Area -->\n          <div class=\"chat-input-container\">\n            @if (isLoadingPeripheralData) {\n              <!-- Loading State -->\n              <div class=\"loading-peripheral-placeholder\">\n                <mj-loading text=\"Loading conversation data...\" size=\"medium\"></mj-loading>\n              </div>\n            } @else {\n              @if (isReadOnlyView) {\n                <div class=\"read-only-banner\" role=\"status\">\n                  <i class=\"fas fa-eye\"></i>\n                  <span>You have view-only access to this conversation.</span>\n                </div>\n              }\n              <!-- Input Component - Multiple instances cached, only one visible -->\n              <div class=\"message-input-container-wrapper\">\n                @for (inputRef of getCachedInputs(); track inputRef.conversationId) {\n                  <mj-message-input\n                    #messageInput\n                    [hidden]=\"inputRef.conversationId !== conversationId\"\n                    [initialDraft]=\"GetInitialDraftFor(inputRef.conversationId)\"\n                    (DraftStateChanged)=\"OnDraftStateChanged(inputRef.conversationId, $event)\"\n                    (ComposerBlurred)=\"OnComposerBlurred()\"\n                    [conversationId]=\"inputRef.conversationId\"\n                    [conversationName]=\"inputRef.conversationName\"\n                    [currentUser]=\"currentUser\"\n                    [conversationHistory]=\"inputRef.conversationId === conversationId ? messages : []\"\n                    [artifactsByDetailId]=\"inputRef.conversationId === conversationId ? artifactsByDetailId : emptyArtifactsMap\"\n                    [systemArtifactsByDetailId]=\"inputRef.conversationId === conversationId ? systemArtifactsByDetailId : emptyArtifactsMap\"\n                    [agentRunsByDetailId]=\"inputRef.conversationId === conversationId ? agentRunsByDetailId : emptyAgentRunsMap\"\n                    [appContext]=\"appContext\"\n                    [applicationId]=\"applicationId\"\n                    [defaultAgentId]=\"defaultAgentId\"\n                    [conversationDefaultAgentId]=\"inputRef.conversationId === conversationId ? (conversation?.DefaultAgentID ?? null) : null\"\n                    [agentConfigurationPresetId]=\"inputRef.conversationId === conversationId ? ActiveAgentConfigurationPresetId : null\"\n                    [inProgressMessageIds]=\"inputRef.conversationId === conversationId ? inProgressMessageIds : emptyInProgressIds\"\n                    [disabled]=\"isProcessing || isReadOnlyView\"\n                    [enableAttachments]=\"enableAttachments && allowAttachments\"\n                    [enableMentions]=\"allowMentions\"\n                    [enableAgentMentions]=\"allowAgentMentions\"\n                    [enableEntityMentions]=\"allowEntityMentions\"\n                    [enableSkillCommands]=\"allowSkillCommands\"\n                    [enablePlanMode]=\"allowPlanMode\"\n                    [enableRealtime]=\"allowRealtime\"\n                    [maxAttachments]=\"maxAttachments\"\n                    [maxAttachmentSizeBytes]=\"maxAttachmentSizeBytes\"\n                    [acceptedFileTypes]=\"acceptedFileTypes\"\n                    [initialMessage]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingMessage : null\"\n                    [initialAttachments]=\"shouldDeliverPendingMessageTo(inputRef.conversationId) ? pendingAttachments : null\"\n                    (initialMessageAutoSendStarted)=\"onInitialMessageAutoSendStarted($event)\"\n                    (initialMessageAutoSendFailed)=\"onInitialMessageAutoSendFailed($event)\"\n                    (messageSent)=\"onMessageSent($event)\"\n                    (agentResponse)=\"onAgentResponse($event)\"\n                    (agentRunDetected)=\"onAgentRunDetected($event)\"\n                    (agentRunUpdate)=\"onAgentRunUpdate($event)\"\n                    (messageComplete)=\"onMessageComplete($event)\"\n                    (artifactCreated)=\"onArtifactCreated($event)\"\n                    (conversationRenamed)=\"onConversationRenamed($event)\"\n                    (intentCheckStarted)=\"onIntentCheckStarted($event)\"\n                    (intentCheckCompleted)=\"onIntentCheckCompleted($event)\"\n                    (beforeAgentTurn)=\"beforeAgentTurn.emit($event)\"\n                    (afterAgentTurn)=\"afterAgentTurn.emit($event)\"\n                    (uploadStateChanged)=\"onUploadStateChanged($event)\">\n                  </mj-message-input>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Artifact Viewer Pane -->\n    @if (showArtifactPanel && selectedArtifactId) {\n      @if (!isArtifactPaneMaximized) {\n        <div class=\"resize-handle\" (mousedown)=\"onResizeStart($event)\" (touchstart)=\"onResizeTouchStart($event)\"></div>\n      }\n      <div class=\"chat-artifact-pane\"\n        [style.width.%]=\"artifactPaneWidth\"\n        [class.maximized]=\"isArtifactPaneMaximized\">\n        <mj-artifact-viewer-panel\n          [artifactId]=\"selectedArtifactId\"\n          [currentUser]=\"currentUser\"\n          [environmentId]=\"environmentId\"\n          [versionNumber]=\"selectedVersionNumber\"\n          [viewContext]=\"'conversation'\"\n          [canShare]=\"canShareSelectedArtifact\"\n          [canEdit]=\"canEditSelectedArtifact\"\n          [isMaximized]=\"isArtifactPaneMaximized\"\n          [refreshTrigger]=\"artifactViewerRefresh$\"\n          (closed)=\"onCloseArtifactPanel()\"\n          (saveToCollectionRequested)=\"onSaveToCollectionRequested($event)\"\n          (navigateToLink)=\"onArtifactLinkNavigation($event)\"\n          (shareRequested)=\"onArtifactShareRequested($event)\"\n          (maximizeToggled)=\"toggleMaximizeArtifactPane()\"\n          (openEntityRecord)=\"onOpenEntityRecord($event)\"\n          (navigationRequest)=\"onNavigationRequest($event)\"\n          (analyzeRequested)=\"OnAnalyzeArtifact($event)\"\n          (applyFormRequested)=\"OnApplyFormRequested($event)\">\n        </mj-artifact-viewer-panel>\n      </div>\n    }\n\n    <!-- Artifact Share Modal -->\n    <mj-artifact-share-modal\n      [isOpen]=\"isArtifactShareModalOpen\"\n      [artifact]=\"artifactToShare\"\n      [currentUser]=\"currentUser\"\n      (saved)=\"onArtifactShared()\"\n      (cancelled)=\"onArtifactShareModalClose()\">\n    </mj-artifact-share-modal>\n\n    <!-- Pinned Messages Panel (overlay) -->\n    @if (allowPinning && showPinsPanel) {\n      <mj-pinned-messages-panel\n        [pinnedMessages]=\"pinnedMessages\"\n        [isLoading]=\"isLoadingPins\"\n        (closed)=\"showPinsPanel = false\"\n        (jumpRequested)=\"onJumpToMessage($event)\"\n        (unpinRequested)=\"onUnpinFromPanel($event)\">\n      </mj-pinned-messages-panel>\n    }\n  </div>\n\n  <!-- Live voice \"call mode\" overlay \u2014 fills this conversation panel in place\n       (header + thread + composer) while a realtime session is active. When the\n       call is MINIMIZED (e.g. a dev link navigated to a record) the overlay HIDES\n       (not destroyed \u2014 its merged session state must survive), the session stays\n       fully live, and a floating \"on call\" pill offers the way back.\n       ALSO hosted in SESSION REVIEW mode (RealtimeReview set, no live call): the\n       overlay renders what went down in a PAST session, with a \"Start live session\"\n       button that resumes it as a new call. -->\n  @if ((RealtimeSession.Active$ | async) || RealtimeReview) {\n    <mj-realtime-session-overlay\n      [AgentName]=\"realtimeOverlayAgentName\"\n      [Hidden]=\"(RealtimeSession.Minimized$ | async) === true\"\n      [CurrentUser]=\"currentUser\"\n      [EnvironmentID]=\"environmentId\"\n      [ReviewData]=\"RealtimeReview\"\n      [Chrome]=\"overlayMode ? 'orb' : 'auto'\"\n      [Compact]=\"overlayMode\"\n      [ShowDevLinks]=\"!overlayMode\"\n      [ShowDensityPicker]=\"!overlayMode\"\n      (NavigateRequest)=\"onRealtimeNavigateRequest($event)\"\n      (StartLiveRequested)=\"onReviewStartLive($event)\"\n      (ReviewClosed)=\"onReviewClosed()\">\n    </mj-realtime-session-overlay>\n    @if (RealtimeSession.Minimized$ | async) {\n      <button type=\"button\" class=\"voice-call-pill\" (click)=\"RealtimeSession.SetMinimized(false)\"\n              title=\"Return to the live call\" aria-label=\"Return to the live call\">\n        <span class=\"voice-call-pill__pulse\" aria-hidden=\"true\"></span>\n        <i class=\"fa-solid fa-phone-volume\" aria-hidden=\"true\"></i>\n        <span class=\"voice-call-pill__text\">\n          <span class=\"voice-call-pill__name\">On call \u00B7 {{ RealtimeSession.CurrentAgentName }}</span>\n          <span class=\"voice-call-pill__hint\">Tap to return</span>\n        </span>\n      </button>\n    }\n  }\n</div>\n\n<!-- Thread Panel -->\n@if (threadId) {\n  <mj-thread-panel\n    [parentMessageId]=\"threadId\"\n    [conversationId]=\"conversationId || ''\"\n    [currentUser]=\"currentUser\"\n    (closed)=\"onLocalThreadClosed()\"\n    (replyAdded)=\"onThreadReplyAdded($event)\">\n  </mj-thread-panel>\n}\n\n<!-- Export Modal -->\n<!-- [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  [currentUser]=\"currentUser\"\n  (cancelled)=\"onExportModalCancelled()\"\n  (exported)=\"onExportModalComplete()\">\n</mj-export-modal>\n\n<!-- Share Dialog (generic, shared with dashboards) -->\n<mj-resource-share-dialog\n  [Visible]=\"showShareModal\"\n  [Context]=\"shareContext\"\n  [Adapter]=\"shareAdapter\"\n  (Result)=\"onShareDialogResult($event)\">\n</mj-resource-share-dialog>\n\n<!-- Members Modal -->\n<mj-members-modal\n  [isVisible]=\"showMembersModal\"\n  [conversation]=\"conversation || undefined\"\n  [currentUser]=\"currentUser\"\n  (cancelled)=\"showMembersModal = false\"\n  (membersChanged)=\"showMembersModal = false\">\n</mj-members-modal>\n\n<!-- Project Selector Modal -->\n@if (showProjectSelector && conversation) {\n  <div class=\"modal-overlay\" (click)=\"showProjectSelector = false\">\n    <div class=\"modal-content project-selector-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Assign Project</h3>\n        <button class=\"modal-close-btn\" (click)=\"showProjectSelector = false\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <mj-project-selector\n          [environmentId]=\"environmentId\"\n          [currentUser]=\"currentUser\"\n          [selectedProjectId]=\"conversation.ProjectID\"\n          (projectSelected)=\"onProjectSelected($event)\">\n        </mj-project-selector>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Artifacts Modal -->\n@if (showArtifactsModal) {\n  <div class=\"modal-overlay\" (click)=\"showArtifactsModal = false\">\n    <div class=\"modal-content artifacts-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>Conversation Artifacts</h3>\n        <div class=\"modal-header-actions\">\n          @if (hasSystemArtifacts) {\n            <button class=\"toggle-system-btn\"\n              [class.active]=\"showSystemArtifacts\"\n              (click)=\"toggleSystemArtifacts()\"\n              title=\"Toggle system artifacts visibility\">\n              <i class=\"fas fa-cog\"></i>\n              <span>{{ showSystemArtifacts ? 'Hide' : 'Show' }} System</span>\n            </button>\n          }\n          <button class=\"modal-close-btn\" (click)=\"showArtifactsModal = false\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body artifacts-grid\">\n        @if (artifactsByDetailId.size === 0) {\n          <mj-empty-state\n            class=\"artifacts-empty-fill\"\n            Icon=\"fa-solid fa-cube\"\n            Title=\"No artifacts in this conversation yet\" />\n        }\n        @for (artifact of getArtifactsArray(); track artifact.artifactId) {\n          <div class=\"artifact-modal-card\"\n            [class.expanded]=\"expandedArtifactId === artifact.artifactId\"\n            [class.system-artifact]=\"artifact.visibility === 'System Only'\">\n            <!-- Main card header - click to open latest version -->\n            <div class=\"artifact-card-header\" (click)=\"openArtifactFromModal(artifact.artifactId)\">\n              <div class=\"artifact-modal-icon\">\n                <i class=\"fas fa-file-code\"></i>\n              </div>\n              <div class=\"artifact-modal-info\">\n                <div class=\"artifact-modal-title\">{{artifact.name}}</div>\n                <div class=\"artifact-modal-meta\">\n                  @if (artifact.versionCount > 1) {\n                    {{artifact.versionCount}} versions\n                  } @else {\n                    1 version\n                  }\n                </div>\n              </div>\n              @if (artifact.versionCount > 1) {\n                <button class=\"expand-btn\" (click)=\"toggleArtifactExpansion(artifact.artifactId, $event)\">\n                  <i class=\"fas\" [class.fa-chevron-down]=\"expandedArtifactId !== artifact.artifactId\"\n                  [class.fa-chevron-up]=\"expandedArtifactId === artifact.artifactId\"></i>\n                </button>\n              }\n              <div class=\"artifact-modal-action\">\n                <i class=\"fas fa-external-link-alt\"></i>\n              </div>\n            </div>\n\n            <!-- Expanded version list -->\n            @if (expandedArtifactId === artifact.artifactId && artifact.versionCount > 1) {\n              <div class=\"artifact-versions-list\">\n                @for (version of artifact.versions; track version.versionId) {\n                  <div class=\"artifact-version-item\" (click)=\"openArtifactFromModal(artifact.artifactId, version.versionNumber); $event.stopPropagation()\">\n                    <span class=\"version-badge\">v{{version.versionNumber}}</span>\n                    <span class=\"version-open-text\">Open this version</span>\n                    <i class=\"fas fa-arrow-right\"></i>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Collection Picker Modal -->\n@if (showCollectionPicker) {\n  <mj-artifact-collection-picker-modal\n    [isOpen]=\"showCollectionPicker\"\n    [environmentId]=\"environmentId\"\n    [currentUser]=\"currentUser\"\n    [excludeCollectionIds]=\"collectionPickerExcludedIds\"\n    [artifactVersionId]=\"collectionPickerVersionId\"\n    [artifactName]=\"collectionPickerArtifactName\"\n    [artifactVersionNumber]=\"collectionPickerVersionNumber\"\n    (completed)=\"onCollectionPickerCompleted($event)\"\n    (cancelled)=\"onCollectionPickerCancelled()\">\n  </mj-artifact-collection-picker-modal>\n}\n\n<!-- Test Feedback Dialog -->\n@if (testFeedbackDialogData) {\n  <mj-test-feedback-dialog\n    [data]=\"testFeedbackDialogData\"\n    [visible]=\"showTestFeedbackDialog\"\n    (closed)=\"onTestFeedbackDialogClosed($event)\">\n  </mj-test-feedback-dialog>\n}\n\n<!-- Image Viewer Modal -->\n@if (showImageViewer) {\n  <mj-image-viewer\n    [imageUrl]=\"selectedImageUrl\"\n    [alt]=\"selectedImageAlt\"\n    [fileName]=\"selectedImageFileName\"\n    [visible]=\"showImageViewer\"\n    (closed)=\"onImageViewerClosed()\">\n  </mj-image-viewer>\n}\n", styles: [":host {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  /* Positioned context for the in-place realtime \"call mode\" overlay (absolute inset:0) */\n  position: relative;\n}\n\n.chat-header {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n/* agentPresence slot \u2014 sticky top, anchored with the header. Per Matt's\n   06-10 placement design: persistent presence indicator above the messages.\n   Renders only when [showAgentCharacter] is true, so existing embeds see no\n   layout change. The prominent variant grows toward a centered presence\n   (per Matt: \"can grow larger toward a centered presence\"). */\n.chat-agent-presence {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Sidebar toggle button in header */\n.sidebar-toggle-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn i {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn:hover i {\n  color: var(--mj-text-primary);\n}\n\n.chat-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge i {\n  font-size: 10px;\n}\n\n.shared-by-badge span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag i {\n  font-size: 10px;\n}\n\n.test-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator i {\n  font-size: 10px;\n}\n\n/* Pinned messages chip in chat header */\n.pin-chip {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip i {\n  font-size: 11px;\n}\n\n.pin-chip:hover,\n.pin-chip.active {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members,\n.artifact-indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members:hover,\n.artifact-indicator:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n/* Badge overlay for artifact and member counts */\n.artifact-badge,\n.members-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator i {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.chat-content-area {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); /* Respect container bounds while maintaining minimum */\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width {\n  width: 100%;\n}\n\n.chat-messages-pane:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden {\n  display: none;\n}\n\n.resize-handle {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized {\n  width: 100% !important;\n}\n\n.chat-artifact-pane > mj-artifact-viewer-panel {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; /* For upload overlay positioning */\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   demonstrationSurface layout-mode (Matt's 06-10 placement design)\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   When .chat-content-area gets .demonstration-mode, the layout flips\n   from \"messages pane (+ optional artifact pane)\" to \"stage + side rail\":\n     - stage (.chat-demonstration-stage) \u2014 left, flexible, holds the\n       consumer's projected demonstrationSurface slot template\n     - rail (.chat-messages-pane) \u2014 right, fixed-width 320px, holds the\n       messages list + composer (\"the conversation as a companion rail\")\n   On mobile (\u2264768px) the same two stack vertically (stage above, rail\n   below) per Matt's note about mobile. The rail intentionally keeps the\n   composer inside it \u2014 Matt's design refers to the conversation rail\n   inclusively (messages + composer together), not as separate regions.\n*/\n.chat-demonstration-stage {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode .chat-messages-pane,\n.chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode .chat-demonstration-stage {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode .chat-messages-pane,\n  .chat-content-area.demonstration-mode .chat-messages-pane.full-width {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n/* Upload indicator overlay - centered in conversation area */\n.upload-indicator-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface-card);\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon i {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.read-only-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn i {\n  font-size: 12px;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n/* Empty-state spans the full artifacts grid */\n.artifacts-empty-fill {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon i {\n  font-size: 18px;\n}\n\n.artifact-modal-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card:hover .artifact-modal-action {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item .version-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item .version-open-text {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item i {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item:hover .version-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item:hover .version-open-text {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item:hover i {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content i {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content span {\n  font-weight: 500;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  .chat-header {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; /* Hide on mobile to save space */\n  }\n  .test-indicator {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  /* Action buttons - icon only on mobile */\n  .chat-actions-buttons {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons .action-btn {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons .action-btn .btn-label {\n    display: none;\n  }\n  .chat-actions {\n    flex-wrap: nowrap;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  /* Artifact pane - full width overlay on mobile, overlapping header */\n  .chat-content-area {\n    position: relative;\n  }\n  .chat-artifact-pane {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; /* 48px nav + 8px dark strip above blue border */\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle {\n    display: none;\n  }\n}\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .chat-header {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members,\n  .artifact-indicator {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal,\n  .artifacts-modal {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon i {\n    font-size: 14px;\n  }\n}\n\n/* Artifact Picker Panel */\n.artifact-picker-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: slideInRight 0.2s ease-out;\n}\n\n@keyframes slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item i {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item i.fa-file-pdf { color: var(--mj-status-error); }\n.artifact-picker-item i.fa-file-excel { color: var(--mj-status-success); }\n.artifact-picker-item i.fa-file-word { color: var(--mj-brand-primary); }\n.artifact-picker-item i.fa-file { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* ---------- Floating \"on call\" pill (minimized realtime voice session) ----------\n   Shown bottom-right of the chat panel while the live call overlay is minimized\n   (e.g. after a gear-gated dev link navigated to a record). The mic + session stay\n   live; tapping the pill restores the full call overlay. */\n.voice-call-pill {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; /* just under the full call overlay (z-index 50) */\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}\n"] }]
     }], () => [{ type: i1.AgentStateService }, { type: i2.ConversationAgentService }, { type: i3.ActiveTasksService }, { type: i0.ChangeDetectorRef }, { type: i4.ArtifactPermissionService }, { type: i5.ConversationAttachmentService }, { type: i6.ConversationStreamingService }, { type: i7.DialogService }, { type: i8.ConversationBridgeService }, { type: i9.AnalyzeArtifactService }, { type: i10.UICommandHandlerService }, { type: i9.InteractiveFormApplyService }, { type: i11.AgentClientService }], { environmentId: [{
             type: Input
         }], currentUser: [{
@@ -4560,6 +4948,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         }], chatSlotChildren: [{
             type: ContentChildren,
             args: [ChatSlotDirective]
+        }], messageListComponent: [{
+            type: ViewChild,
+            args: [MessageListComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 99 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 112 }); })();
 //# sourceMappingURL=conversation-chat-area.component.js.map