@memberjunction/ng-conversations 6.1.0-edge.5 → 6.1.0-edge.7

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

@@ -20,6 +20,7 @@ import { RealtimeSessionReviewService } from '../../services/realtime-session-re
 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 { decideArtifactPanelAction, snapshotArtifactVersions } from '../../utils/artifact-panel-action';
 import { NormalizeUUID, UUIDsEqual } from '@memberjunction/global';
 // PR 2c — Widget extension surface
 import { ChatSlotDirective } from '../../directives/chat-slot.directive';
@@ -503,7 +504,7 @@ function ConversationChatAreaComponent_Conditional_20_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(0, "div", 91);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_20_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showProjectSelector = false); });
     i0.ɵɵelementStart(1, "div", 92);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_20_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r23); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_20_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
     i0.ɵɵelementStart(2, "div", 93)(3, "h3");
     i0.ɵɵtext(4, "Assign Project");
     i0.ɵɵelementEnd();
@@ -620,7 +621,7 @@ function ConversationChatAreaComponent_Conditional_21_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(0, "div", 91);
     i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showArtifactsModal = false); });
     i0.ɵɵelementStart(1, "div", 98);
-    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r24); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵlistener("click", function ConversationChatAreaComponent_Conditional_21_Template_div_click_1_listener($event) { return $event.stopPropagation(); });
     i0.ɵɵelementStart(2, "div", 93)(3, "h3");
     i0.ɵɵtext(4, "Conversation Artifacts");
     i0.ɵɵelementEnd();
@@ -775,6 +776,19 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * set false.
      */
     showLoadingState = true;
+    /**
+     * Read each reply from its top instead of its bottom.
+     *
+     * Default false (current behaviour): the pane follows the tail, so a run ends with the
+     * reader looking at the END of the answer and scrolling back up to start reading it.
+     *
+     * When true, sending and the run itself behave as before, but when the reply lands and
+     * the reader was following it, the turn — the reader's own message with the reply under
+     * it — is scrolled so it starts at the top of the pane, IF it is taller than the pane. A
+     * turn that fits stays where it is: it is all on screen anyway. A reader who scrolled up
+     * during the run is never moved; the scroll-to-bottom button is their way back.
+     */
+    readReplyFromTop = false;
     // --- Additional host-level feature gates (all default true; false removes the
     //     affordance entirely). Forwarded to the message list / message items / empty
     //     state so white-labeled end-user surfaces can pare the chat down through the
@@ -1193,7 +1207,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     /** Live draft persistence (store debounces the server write). */
     OnDraftStateChanged(conversationId, serialized) {
-        console.log(`[Drafts] chat-area: draft change for '${conversationId ?? 'new'}' (${serialized.length} chars)`);
+        // verboseOnly: fires on every keystroke, same as the store's own SetDraft log below it.
+        LogStatusEx({ message: `[Drafts] chat-area: draft change for '${conversationId ?? 'new'}' (${serialized.length} chars)`, verboseOnly: true });
         this.draftStore.SetDraft(conversationId, serialized);
     }
     /** Blur = a natural save point — persist immediately. */
@@ -1265,6 +1280,24 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     messages = [];
     showScrollToBottomIcon = false;
     scrollToBottom = false;
+    /**
+     * Whether the reader was at (within a few px of) the bottom at the last scroll event.
+     * An in-place message update only follows the tail for a reader who is already there;
+     * one who scrolled up to reread history is left alone, whichever mode is on.
+     */
+    readerAtBottom = true;
+    /** readReplyFromTop: the reader's message that opened the current turn. */
+    currentTurnStartMessageId = null;
+    /** readReplyFromTop: set when the reply lands, consumed once it has rendered. */
+    pendingTurnStartMessageId = null;
+    /**
+     * readReplyFromTop: while a landing is under way, bottom-follow timers already armed by the
+     * last progress updates must not fire and drag the reader back down.
+     */
+    bottomFollowSuppressedUntil = 0;
+    turnStartRetryHandle = null;
+    /** Gap kept between the pane's top edge and the turn's first message. */
+    static TURN_TOP_GAP_PX = 16;
     lastLoadedConversationId = null; // Track which conversation's peripheral data was loaded
     currentlyLoadingConversationId = null; // Track which conversation is currently being loaded
     conversationLoadToken = 0; // Monotonic token to discard stale async conversation loads
@@ -1289,6 +1322,21 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     showSystemArtifacts = false; // Toggle for showing system-only artifacts
     selectedArtifactId = null;
     selectedVersionNumber = undefined; // Version to show in artifact viewer
+    /**
+     * Bumped whenever artifacts are MERGED into `artifactsByDetailId` by something other than the
+     * turn in flight — today only the scroll-up paging path. A before/after diff spanning such a
+     * merge cannot tell an artifact that arrived from an older page from one a run just created, so
+     * the baseline records this counter and the decision refuses to infer creations when it moved.
+     */
+    artifactMapGeneration = 0;
+    /**
+     * Bumped whenever the USER changes what the artifact panel is showing (clicks a card, opens one
+     * from the modal or a deep link, closes the panel). An agent turn can finish while such a click
+     * is in flight — two completion handlers run per turn, each holding its own pre-turn snapshot —
+     * and without this the slower one would pull the panel back onto the run's artifact and discard
+     * the selection the user just made.
+     */
+    artifactSelectionEpoch = 0;
     artifactPaneWidth = DEFAULT_ARTIFACT_PANE_WIDTH;
     isArtifactPaneMaximized = false; // Track maximize state
     artifactPaneWidthBeforeMaximize = DEFAULT_ARTIFACT_PANE_WIDTH;
@@ -1882,11 +1930,20 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (this.scrollToBottom) {
             this.scrollToBottom = false;
             setTimeout(() => {
+                if (Date.now() < this.bottomFollowSuppressedUntil) {
+                    return;
+                }
                 this.scrollToBottomNow();
                 // Check scroll state after scrolling to bottom
                 this.checkScroll();
             }, 100);
         }
+        if (this.pendingTurnStartMessageId) {
+            const messageId = this.pendingTurnStartMessageId;
+            this.pendingTurnStartMessageId = null;
+            // Deferred for the same reason checkScroll() is not called synchronously below.
+            setTimeout(() => this.scrollTurnToTop(messageId), 0);
+        }
         // Removed synchronous checkScroll() from else branch to prevent
         // ExpressionChangedAfterItHasBeenCheckedError. Calling detectChanges()
         // inside ngAfterViewChecked re-enters change detection and causes
@@ -1901,6 +1958,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // Complete destroy subject to cleanup subscriptions
         this.destroy$.next();
         this.destroy$.complete();
+        this.clearTurnTracking();
         // Remove resize listeners
         window.removeEventListener('mousemove', this.boundOnResizeMove);
         window.removeEventListener('mouseup', this.boundOnResizeEnd);
@@ -1919,6 +1977,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             : this.isActiveConversation(conversationId);
     }
     resetConversationScopedViewState() {
+        this.clearTurnTracking();
         this.showArtifactPanel = false;
         this.selectedArtifactId = null;
         this.selectedVersionNumber = undefined;
@@ -2133,7 +2192,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                     }
                 }
             }
-            this.scrollToBottom = true;
+            this.followTranscript('load');
             // Process peripheral data (agent runs, artifacts, ratings, attachments) from engine cache
             await this.loadPeripheralData(conversationId, snapshot, loadToken);
             if (!this.isActiveConversationLoad(conversationId, loadToken)) {
@@ -2279,6 +2338,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (sessionMeta.size > 0) {
             this.realtimeSessionMetaMap = new Map([...this.realtimeSessionMetaMap, ...sessionMeta]);
         }
+        // A page of OLDER artifacts just entered the map. Any artifact-panel baseline taken before
+        // this point can no longer be diffed against the map for creations — these arrived from
+        // history, not from a run. See snapshotArtifactPanelBaseline.
+        this.artifactMapGeneration++;
         // New references so the message list's ngOnChanges sees the extended maps.
         this.agentRunsByDetailId = new Map(this.agentRunsByDetailId);
         this.artifactsByDetailId = new Map(this.artifactsByDetailId);
@@ -2510,8 +2573,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 this.inProgressMessageIds = [...this.inProgressMessageIds, message.ID];
             }
         }
-        // Scroll to bottom when new message is sent
-        this.scrollToBottom = true;
+        // Where the viewport goes: a fresh send follows — an in-place update of a message that
+        // is already on screen must not re-run the send path's scroll.
+        this.followTranscript(existingIndex >= 0 ? 'update' : 'new', message);
         // Force change detection — zone.js 0.15 no longer patches graphql-ws WebSocket callbacks,
         // so progress updates that arrive via PubSub run outside Angular's zone. Without this,
         // the UI does not update when the messages array is modified from a streaming callback.
@@ -2736,8 +2800,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         try {
             const isCurrent = () => this.isCurrentConversationContext(expectedConversationId, loadToken);
             LogStatusEx({ message: `🎉 Handling completion for message ${message.ID}`, verboseOnly: true });
-            // Snapshot artifact IDs before reload to detect newly created artifacts
-            const artifactIdsBefore = this.collectAllArtifactIds();
+            // Snapshot the artifact population before the reloads below so we can tell a NEW artifact
+            // from a new VERSION of one already on screen (#529).
+            const artifactBaseline = this.snapshotArtifactPanelBaseline();
             // Reload message from database to get final content and status
             await message.Load(message.ID);
             if (!isCurrent()) {
@@ -2773,12 +2838,12 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             this.inProgressMessageIds = [...this.messages
                     .filter(m => m.Status === 'In-Progress')
                     .map(m => m.ID)];
-            // Auto-open artifact panel if NEW artifacts were discovered (not just the triggering message).
+            // Open/refresh the artifact panel from the version diff (not just the triggering message).
             // When Sage delegates to a sub-agent (e.g., Skip), the artifact is on the sub-agent's
             // message, not Sage's. Checking only the triggering message would miss delegated artifacts.
-            if (!this.showArtifactPanel) {
-                await this.autoOpenNewArtifact(artifactIdsBefore, expectedConversationId);
-            }
+            // #529: a delegated build discovered here must surface even with the panel already open on
+            // another artifact, so this is NOT gated on `!this.showArtifactPanel`.
+            await this.decideAndApplyArtifactPanel(artifactBaseline, expectedConversationId);
             // Remove task from ActiveTasksService (clears spinner in conversation list)
             const task = this.activeTasks.getByConversationDetailId(message.ID);
             if (task) {
@@ -2812,8 +2877,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (this.conversationId) {
             this.resetComponentState(this.conversationId);
         }
-        // Scroll to bottom when agent responds
-        this.scrollToBottom = true;
+        // Where the viewport goes when the agent responds
+        this.followTranscript('new', event.message);
         // CRITICAL FIX: Always refresh the agent run data when agent completes
         // This ensures we get the final status and timestamps, replacing any stale data from when agent started
         // agentResult is ExecuteAgentResult which contains agentRun property
@@ -2823,17 +2888,17 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
                 return;
             }
         }
-        // Snapshot artifact IDs before reload to detect newly created artifacts
-        const artifactIdsBefore = this.collectAllArtifactIds();
+        // Snapshot the artifact population before reload so we can tell a NEW artifact from a new
+        // VERSION of one already on screen (#529).
+        const artifactBaseline = this.snapshotArtifactPanelBaseline();
         // Reload artifact mapping for this message to pick up newly created artifacts
         await this.reloadArtifactsForMessage(event.message.ID, event.message.ConversationID);
         if (!this.isActiveConversation(event.message.ConversationID)) {
             return;
         }
-        // Auto-open artifact panel if NEW artifacts were discovered
-        if (!this.showArtifactPanel) {
-            await this.autoOpenNewArtifact(artifactIdsBefore, event.message.ConversationID);
-        }
+        // #529: open a newly created artifact even with the panel already open on another one, refresh
+        // the shown artifact when it gained a version, and switch to a retargeted one.
+        await this.decideAndApplyArtifactPanel(artifactBaseline, event.message.ConversationID);
         // Force change detection to update the UI
         this.cdr.detectChanges();
     }
@@ -2959,42 +3024,106 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         return uniqueArtifactIds.size;
     }
     /**
-     * Collect all currently known artifact IDs across all messages.
-     * Used as a "before" snapshot to detect newly created artifacts after a reload.
+     * Every (artifactId, versionNumber) pair currently known across all messages, with the version's
+     * creation time so candidates can be ordered by recency rather than by whichever conversation
+     * detail the map happened to iterate last.
      */
-    collectAllArtifactIds() {
-        const ids = new Set();
+    allArtifactRefs() {
+        const refs = [];
         for (const artifactList of this.artifactsByDetailId.values()) {
             for (const info of artifactList) {
-                ids.add(info.artifactId);
+                refs.push({
+                    artifactId: info.artifactId,
+                    versionNumber: info.versionNumber,
+                    versionCreatedAt: info.versionCreatedAt,
+                });
             }
         }
-        return ids;
+        return refs;
     }
     /**
-     * Auto-open the artifact panel for the most recent NEW artifact.
-     * Compares current artifacts against a pre-reload snapshot to find
-     * only artifacts that were just discovered (avoiding re-opening for old artifacts).
-     * Searches artifactsByDetailId directly rather than iterating this.messages,
-     * because reloadMessagesForActiveConversation can temporarily remove messages
-     * from this.messages during concurrent operations.
+     * Captures everything {@link decideAndApplyArtifactPanel} needs to judge, at the START of a turn,
+     * whether the artifact population changed BECAUSE of that turn.
+     *
+     * The version map alone is not enough. `artifactsByDetailId` is rebuilt for reasons unrelated to
+     * any run — `resetConversationScopedViewState` does not clear it on a conversation switch, so it
+     * still holds the previous conversation's artifacts until `loadPeripheralData` lands, and the
+     * missed-completion path in `loadMessages` runs BEFORE that rebuild. A snapshot taken there
+     * describes a different conversation entirely, and every artifact of the conversation being
+     * opened would read as newly created. So the baseline also records which conversation the map
+     * was holding, the paging generation, and the user's selection epoch.
      */
-    async autoOpenNewArtifact(artifactIdsBefore, expectedConversationId = this.conversationId) {
-        if (!this.isActiveConversation(expectedConversationId)) {
-            return;
+    snapshotArtifactPanelBaseline() {
+        return {
+            versions: snapshotArtifactVersions(this.allArtifactRefs()),
+            conversationId: this.conversationId,
+            mapConversationId: this.lastLoadedConversationId,
+            mapGeneration: this.artifactMapGeneration,
+            selectionEpoch: this.artifactSelectionEpoch,
+        };
+    }
+    /**
+     * Diffs the current artifact population against a baseline and carries out the resulting panel
+     * action. The single entry point for all three completion paths, which previously each carried
+     * their own copy of the snapshot/decide/apply sequence.
+     *
+     * @param baseline - From {@link snapshotArtifactPanelBaseline}, taken before the turn's reloads.
+     * @param conversationId - The conversation this turn belongs to.
+     */
+    async decideAndApplyArtifactPanel(baseline, conversationId) {
+        // The baseline is comparable only if the map was holding THIS conversation's artifacts when it
+        // was taken, and nothing merged an older page in since.
+        const baselineComparable = baseline.mapConversationId != null &&
+            UUIDsEqual(baseline.mapConversationId, baseline.conversationId) &&
+            this.artifactMapGeneration === baseline.mapGeneration;
+        const action = decideArtifactPanelAction({
+            panelOpen: this.showArtifactPanel,
+            selectedArtifactId: this.selectedArtifactId,
+            before: baseline.versions,
+            after: this.allArtifactRefs(),
+            baselineComparable,
+            userChangedSelection: this.artifactSelectionEpoch !== baseline.selectionEpoch,
+        });
+        if (!baselineComparable && action.kind === 'none') {
+            LogStatusEx({
+                message: `🎨 Skipping artifact panel decision: the before/after snapshots describe different artifact populations (map held ${baseline.mapConversationId ?? 'nothing'}, conversation was ${baseline.conversationId})`,
+                verboseOnly: true
+            });
         }
-        for (const [detailId, artifactList] of this.artifactsByDetailId) {
-            const newArtifact = artifactList.find(a => !artifactIdsBefore.has(a.artifactId));
-            if (newArtifact) {
-                this.selectedArtifactId = newArtifact.artifactId;
+        await this.applyArtifactPanelAction(action, conversationId);
+    }
+    /**
+     * Carry out the decision from {@link decideArtifactPanelAction}: open the panel on an artifact
+     * version, refresh the already-open viewer, or do nothing.
+     */
+    async applyArtifactPanelAction(action, conversationId) {
+        switch (action.kind) {
+            case 'open':
+                this.selectedArtifactId = action.artifactId;
+                this.selectedVersionNumber = action.versionNumber;
                 this.showArtifactPanel = true;
-                await this.loadArtifactPermissions(newArtifact.artifactId, expectedConversationId, newArtifact.artifactId);
-                if (!this.isActiveConversation(expectedConversationId) || !UUIDsEqual(this.selectedArtifactId, newArtifact.artifactId)) {
+                await this.loadArtifactPermissions(action.artifactId, conversationId, action.artifactId);
+                // The permission load is async: the user may have switched conversations or picked a
+                // different artifact while it was in flight, so only narrate what is still on screen.
+                if (!this.isActiveConversation(conversationId) || !UUIDsEqual(this.selectedArtifactId, action.artifactId)) {
                     return;
                 }
-                LogStatusEx({ message: `🎨 Auto-opening new artifact ${newArtifact.artifactId} from detail ${detailId}`, verboseOnly: true });
+                LogStatusEx({
+                    message: `🎨 Opening artifact ${action.artifactId} v${action.versionNumber} after agent run (decided from the conversation-wide version diff, so no single detail id applies)`,
+                    verboseOnly: true
+                });
+                return;
+            case 'refresh':
+                // ONE channel, deliberately. Writing `selectedVersionNumber` as well would change the
+                // viewer's `[versionNumber]` input in the same change-detection pass, and its `ngOnChanges`
+                // would load the version a second time on top of the load this emission already starts —
+                // and that second load runs without a cancellation token, so it can also land after a newer
+                // one. The subject path is the one to keep: it reloads the version list too, which a
+                // brand-new version needs, and it carries a load token.
+                this.artifactViewerRefresh$.next({ artifactId: action.artifactId, versionNumber: action.versionNumber });
+                return;
+            case 'none':
                 return;
-            }
         }
     }
     /**
@@ -3100,6 +3229,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     async openArtifactFromModal(artifactId, versionNumber) {
         const conversationId = this.conversationId;
+        this.artifactSelectionEpoch++;
         this.selectedArtifactId = artifactId;
         this.selectedVersionNumber = versionNumber;
         this.showArtifactPanel = true;
@@ -3480,6 +3610,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     async onArtifactClicked(data) {
         const conversationId = this.conversationId;
+        this.artifactSelectionEpoch++;
         this.selectedArtifactId = data.artifactId;
         // If versionId is provided, find the version number from display data (no lazy load needed)
         if (data.versionId) {
@@ -3518,39 +3649,22 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         if (!this.isActiveConversation(data.conversationId)) {
             return;
         }
-        // Snapshot artifact IDs before reload to detect newly created artifacts
-        const artifactIdsBefore = this.collectAllArtifactIds();
+        // Snapshot the artifact population across the conversation before reload so we can tell a NEW
+        // artifact from a new VERSION of an existing one (the event itself carries placeholder ids).
+        const artifactBaseline = this.snapshotArtifactPanelBaseline();
         // Reload artifacts to get full entities (processes ALL messages in the conversation)
         await this.reloadArtifactsForMessage(data.conversationDetailId, data.conversationId);
         if (!this.isActiveConversation(data.conversationId)) {
             return;
         }
-        // Auto-open artifact panel if no artifact currently shown
-        if (!this.showArtifactPanel) {
-            // Use robust auto-open that checks ALL messages for new artifacts.
-            // When a sub-agent (e.g., Skip) creates an artifact on a different ConversationDetail
-            // than the one specified in the event, checking only data.conversationDetailId would miss it.
-            await this.autoOpenNewArtifact(artifactIdsBefore, data.conversationId);
-        }
-        else if (this.selectedArtifactId) {
-            // Panel is already open - check if new artifact is a new version of currently displayed artifact
-            const artifactList = this.artifactsByDetailId.get(data.conversationDetailId);
-            if (artifactList && artifactList.length > 0) {
-                const currentArtifact = artifactList.find(a => a.artifactId === this.selectedArtifactId);
-                if (currentArtifact) {
-                    // New version of the same artifact - refresh to show latest version
-                    const latestVersion = artifactList[artifactList.length - 1];
-                    this.artifactViewerRefresh$.next({
-                        artifactId: latestVersion.artifactId,
-                        versionNumber: latestVersion.versionNumber
-                    });
-                }
-            }
-        }
+        // #529: a new artifact opens even over an open panel (build); a bumped version of the shown
+        // artifact refreshes; a bumped version of another artifact switches to it (retargeting).
+        await this.decideAndApplyArtifactPanel(artifactBaseline, data.conversationId);
         // Force change detection to update the UI immediately
         this.cdr.detectChanges();
     }
     onCloseArtifactPanel() {
+        this.artifactSelectionEpoch++;
         this.showArtifactPanel = false;
         this.selectedArtifactId = null;
         // Clear permissions
@@ -3822,11 +3936,9 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
     }
     viewTestRun(testRunId) {
         // Open the test run record in the entity viewer
-        const compositeKey = new CompositeKey();
-        compositeKey.KeyValuePairs.push({ FieldName: 'ID', Value: testRunId });
         this.openEntityRecord.emit({
             entityName: 'MJ: Test Runs',
-            compositeKey
+            compositeKey: CompositeKey.FromID(testRunId)
         });
     }
     /**
@@ -3837,11 +3949,10 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
      * wrapper routes it through `NavigationService.OpenEntityRecord`.
      */
     onRealtimeNavigateRequest(event) {
-        const compositeKey = new CompositeKey();
-        compositeKey.KeyValuePairs.push({ FieldName: 'ID', Value: event.RecordID });
+        // The overlay can name any entity — resolve its key column(s) from metadata, not a hardcoded ID.
         this.openEntityRecord.emit({
             entityName: event.EntityName,
-            compositeKey
+            compositeKey: CompositeKey.FromURLSegment(this.ProviderToUse.EntityByName(event.EntityName), event.RecordID)
         });
     }
     /**
@@ -4232,6 +4343,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             panelAlreadyOpen);
         // Open the artifact panel so the viewer mounts (if it isn't already).
         if (!panelAlreadyOpen) {
+            this.artifactSelectionEpoch++;
             this.selectedArtifactId = artifactId;
             this.selectedVersionNumber = undefined;
             this.showArtifactPanel = true;
@@ -4486,6 +4598,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         const scrollDifference = element.scrollHeight - (element.scrollTop + element.clientHeight);
         const hasScrollableContent = element.scrollHeight > element.clientHeight + 50;
         const atBottom = scrollDifference <= buffer;
+        this.readerAtBottom = atBottom;
         const newValue = !atBottom && hasScrollableContent;
         // Only update if value changed to prevent unnecessary change detection
         if (this.showScrollToBottomIcon !== newValue) {
@@ -4519,6 +4632,122 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
         }
     }
+    /**
+     * Decides where the viewport goes after the transcript changed.
+     *
+     * - `load`   — a conversation was opened: the bottom.
+     * - `new`    — a message was appended: follow the tail, as before.
+     * - `update` — a message already on screen changed in place (progress, status, streamed
+     *              text). Never moves a reader who has scrolled away; keeps a reader who is
+     *              at the bottom there as the bubble grows. (Before this, every progress
+     *              update re-ran the send path's scroll — message-input re-emits
+     *              `messageSent` per update — and yanked the reader to the bottom.)
+     *
+     * With `readReplyFromTop`, the reader's own message opens a turn — whether it arrives as
+     * `new` or, on the auto-send path where the chat area already holds it, as `update` — and
+     * every settled AI message of that turn (Complete or Error) lands the turn instead of
+     * following, for a reader who was still following. EVERY settled message, not the first:
+     * the refinement path emits a settled status line ("Continuing with X…") before the reply,
+     * and a turn that landed on the status line alone must land again when the reply arrives
+     * (re-landing is idempotent — the same target, or nothing once the reader has been moved
+     * off the bottom). Completion is also emitted more than once for one message; none of those
+     * emits may fall through to the bottom follow. A `load` does not forget the turn: creating
+     * a conversation from the composer sends the first message while the initial load is still
+     * in flight.
+     */
+    followTranscript(change, message) {
+        if (change === 'load') {
+            this.scrollToBottom = true;
+            return;
+        }
+        if (this.readReplyFromTop) {
+            if (message?.Role === 'User' && message.ID && message.ID !== this.currentTurnStartMessageId) {
+                this.currentTurnStartMessageId = message.ID;
+            }
+            else if (this.currentTurnStartMessageId && message?.Role === 'AI' && this.isSettled(message)) {
+                if (this.readerAtBottom) {
+                    this.pendingTurnStartMessageId = this.currentTurnStartMessageId;
+                    this.scrollToBottom = false;
+                    this.bottomFollowSuppressedUntil = Date.now() + 1500;
+                }
+                return;
+            }
+        }
+        if (change === 'new' || this.readerAtBottom) {
+            if (change === 'new' && message?.Role === 'User') {
+                // The reader sending again right after a reply landed must not be swallowed by the
+                // landing's suppression. Only THEIR message lifts it: an AI message arriving new
+                // inside the window belongs to the turn that just landed and must not cancel it.
+                this.bottomFollowSuppressedUntil = 0;
+            }
+            this.scrollToBottom = true;
+        }
+    }
+    isSettled(message) {
+        return message.Status === 'Complete' || message.Status === 'Error';
+    }
+    /**
+     * readReplyFromTop: once the reply has rendered, scrolls the turn so its first message
+     * sits at the top of the pane — but only if the turn is taller than the pane. A turn that
+     * fits is already fully on screen at the bottom, and moving it would be motion for nothing.
+     */
+    scrollTurnToTop(messageId, attempt = 0) {
+        if (!this.readReplyFromTop) {
+            return;
+        }
+        const container = this.scrollContainer?.nativeElement;
+        // Resolved through the list's timeline, not a `[data-message-id]` query: a far-off item
+        // is unmounted into a spacer and a session-stamped row folds into its session card, and
+        // the list answers with the node that stands for the message in either case.
+        const target = this.messageListComponent?.FindTimelineElement(messageId) ?? null;
+        if (!container || !target) {
+            // The reply's final render lands a tick or two after the array changes — the same
+            // latency the bottom-follow path absorbs with its 100 ms timer.
+            if (attempt < 20) {
+                this.turnStartRetryHandle = setTimeout(() => this.scrollTurnToTop(messageId, attempt + 1), 50);
+            }
+            return;
+        }
+        this.turnStartRetryHandle = null;
+        const turnTop = this.offsetWithinScroller(target) - this.turnTopClearance(container);
+        const turnHeight = container.scrollHeight - turnTop; // the turn is the newest content
+        if (turnHeight > container.clientHeight) {
+            container.scroll({ top: turnTop, behavior: 'smooth' });
+        }
+        else {
+            this.scrollToBottomNow();
+        }
+        this.checkScroll();
+    }
+    /**
+     * How far below the pane's top edge the turn's first message lands: the standard gap, plus
+     * room for the list's sticky date header when it is showing — it pins to this scroller's
+     * top and would otherwise sit on the message's first line.
+     */
+    turnTopClearance(container) {
+        const stickyHeader = container.querySelector('.sticky-date-header');
+        if (!stickyHeader || !stickyHeader.offsetParent) {
+            return ConversationChatAreaComponent.TURN_TOP_GAP_PX;
+        }
+        // The header's CSS inset (`top: 12px`), NOT `offsetTop`: on a pinned sticky element
+        // `offsetTop` reports the used position, which tracks the scroll offset.
+        const inset = parseFloat(getComputedStyle(stickyHeader).top) || 0;
+        return ConversationChatAreaComponent.TURN_TOP_GAP_PX + stickyHeader.offsetHeight + inset;
+    }
+    /** An element's top edge in the scroller's content coordinates — what scrollTop counts in. */
+    offsetWithinScroller(el) {
+        const container = this.scrollContainer.nativeElement;
+        return el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop;
+    }
+    clearTurnTracking() {
+        this.currentTurnStartMessageId = null;
+        this.pendingTurnStartMessageId = null;
+        this.bottomFollowSuppressedUntil = 0;
+        if (this.turnStartRetryHandle) {
+            clearTimeout(this.turnStartRetryHandle);
+            this.turnStartRetryHandle = null;
+        }
+    }
     /**
      * Detect and reconcile agent run states against conversation detail statuses.
      * Called after loading a conversation to handle two scenarios:
@@ -4628,6 +4857,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             return;
         }
         // Open the artifact panel
+        this.artifactSelectionEpoch++;
         this.selectedArtifactId = artifactIdToOpen;
         this.selectedVersionNumber = versionNumberToOpen ?? undefined;
         this.showArtifactPanel = true;
@@ -4683,7 +4913,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
         // No ID means it's temporary (won't be saved)
         this.intentCheckMessage = tempMessage;
         this.messages = [...this.messages, tempMessage];
-        this.scrollToBottom = true;
+        this.followTranscript('new', tempMessage);
         this.cdr.detectChanges();
     }
     /**
@@ -4719,7 +4949,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             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", "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) {
+        } }, 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", readReplyFromTop: "readReplyFromTop", 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);
@@ -4792,7 +5022,7 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             i0.ɵɵconditional(ctx.testFeedbackDialogData ? 23 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showImageViewer ? 24 : -1);
-        } }, dependencies: [i12.NgTemplateOutlet, i13.MJButtonDirective, i13.MJEmptyStateComponent, i9.ArtifactViewerPanelComponent, i14.TestFeedbackDialogComponent, i15.LoadingComponent, i16.GenericShareDialogComponent, i17.ArtifactCollectionPickerModalComponent, i18.ArtifactShareModalComponent, i19.MJChatAgentPresenceDefaultComponent, i20.RealtimeSessionOverlayComponent, i21.MessageListComponent, i22.MessageInputComponent, i23.ConversationEmptyStateComponent, i24.ConversationAgentPickerComponent, i25.ConversationModePickerComponent, i26.ThreadPanelComponent, i27.ProjectSelectorComponent, i28.MembersModalComponent, i29.ExportModalComponent, i30.ImageViewerComponent, i31.PinnedMessagesPanelComponent, i12.AsyncPipe], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  \n\n  position: relative;\n}\n\n.chat-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n\n\n\n\n\n\n.chat-agent-presence[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n\n.sidebar-toggle-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n.chat-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.pin-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.pin-chip[_ngcontent-%COMP%]:hover, \n.pin-chip.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members[_ngcontent-%COMP%], \n.artifact-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members[_ngcontent-%COMP%]:hover, \n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n\n.artifact-badge[_ngcontent-%COMP%], \n.members-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.chat-content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); \n\n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.resize-handle[_ngcontent-%COMP%] {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; \n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.chat-demonstration-stage[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-demonstration-stage[_ngcontent-%COMP%] {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n   .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n\n\n.upload-indicator-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface-card);\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.read-only-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n\n\n.artifacts-empty-fill[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; \n\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  \n\n  .chat-actions-buttons[_ngcontent-%COMP%] {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: nowrap;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n\n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; \n\n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n\n.artifact-picker-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: _ngcontent-%COMP%_slideInRight 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-pdf[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-excel[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-word[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.voice-call-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; \n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse[_ngcontent-%COMP%] {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: _ngcontent-%COMP%_voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes _ngcontent-%COMP%_voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}"] });
+        } }, dependencies: [i12.NgTemplateOutlet, i13.MJButtonDirective, i13.MJEmptyStateComponent, i9.ArtifactViewerPanelComponent, i14.TestFeedbackDialogComponent, i15.LoadingComponent, i16.GenericShareDialogComponent, i17.ArtifactCollectionPickerModalComponent, i18.ArtifactShareModalComponent, i19.MJChatAgentPresenceDefaultComponent, i20.RealtimeSessionOverlayComponent, i21.MessageListComponent, i22.MessageInputComponent, i23.ConversationEmptyStateComponent, i24.ConversationAgentPickerComponent, i25.ConversationModePickerComponent, i26.ThreadPanelComponent, i27.ProjectSelectorComponent, i28.MembersModalComponent, i29.ExportModalComponent, i30.ImageViewerComponent, i31.PinnedMessagesPanelComponent, i12.AsyncPipe], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n.chat-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  \n  position: relative;\n}\n\n.chat-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 16px;\n  background: var(--mj-bg-surface-card);\n  z-index: 10;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n\n\n\n\n\n.chat-agent-presence[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 8px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  z-index: 11;\n}\n\n.chat-agent-presence--prominent[_ngcontent-%COMP%] {\n  padding: 16px 20px;\n  justify-content: center;\n}\n\n.chat-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n\n.sidebar-toggle-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:active {\n  background: color-mix(in srgb, var(--mj-text-primary) 12%, transparent);\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 18px;\n  transition: color 0.15s ease;\n}\n\n.sidebar-toggle-btn[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n.chat-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n  border-radius: 999px;\n  font-size: 12px;\n  font-weight: 500;\n  flex-shrink: 0;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.shared-by-badge[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.project-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 12px;\n}\n\n.project-tag[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-text-muted);\n}\n\n.project-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.test-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 16px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  transition: all 0.2s;\n  height: 28px;\n  margin-left: 8px;\n}\n\n.test-indicator[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.test-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n.pin-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 45%, transparent);\n  border-radius: 20px;\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.pin-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.pin-chip[_ngcontent-%COMP%]:hover, \n.pin-chip.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  border-color: var(--mj-status-warning);\n}\n\n.pin-chip-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.chat-members[_ngcontent-%COMP%], \n.artifact-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  padding: 6px 8px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.chat-members[_ngcontent-%COMP%]:hover, \n.artifact-indicator[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n.artifact-badge[_ngcontent-%COMP%], \n.members-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.members-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n}\n\n.ambient-agent-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.7;\n  }\n}\n.chat-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: transparent;\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  border-radius: 6px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: all 150ms ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.share-btn.shared[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-brand-primary-hover);\n}\n\n.share-btn.shared[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.chat-content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: min(300px, 100%); \n  overflow: hidden;\n  transition: width 0.3s ease;\n}\n\n.chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.chat-messages-pane[_ngcontent-%COMP%]:not(.full-width) {\n  flex: 1;\n}\n\n.chat-messages-pane.hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.resize-handle[_ngcontent-%COMP%] {\n  width: 4px;\n  background: transparent;\n  cursor: col-resize;\n  flex-shrink: 0;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.resize-handle[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: -4px;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.chat-artifact-pane.maximized[_ngcontent-%COMP%] {\n  width: 100% !important;\n}\n\n.chat-artifact-pane[_ngcontent-%COMP%]    > mj-artifact-viewer-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.chat-messages-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n  position: relative; \n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.chat-demonstration-stage[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n  border-right: 1px solid var(--mj-border-default);\n  flex: 1;\n  min-width: 0;\n}\n\n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n.chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n  flex: 0 0 320px;\n  width: 320px;\n  min-width: 0;\n}\n\n@media (max-width: 768px) {\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-demonstration-stage[_ngcontent-%COMP%] {\n    flex: 1 1 60%;\n    border-right: none;\n    border-bottom: 1px solid var(--mj-border-default);\n    height: auto;\n  }\n\n  .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane[_ngcontent-%COMP%], \n   .chat-content-area.demonstration-mode[_ngcontent-%COMP%]   .chat-messages-pane.full-width[_ngcontent-%COMP%] {\n    flex: 1 1 40%;\n    width: 100%;\n    height: auto;\n  }\n}\n\n\n.upload-indicator-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 95%, transparent);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  z-index: 100;\n  pointer-events: none;\n}\n\n.chat-messages-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--mj-bg-surface-card);\n  min-height: 0;\n  position: relative;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%] {\n  position: sticky;\n  bottom: 21px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 40px;\n  margin-top: -40px;\n  margin-left: auto;\n  margin-right: auto;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: var(--mj-shadow-md);\n  transition: all 0.2s ease;\n  z-index: 100;\n  pointer-events: auto;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-brand-primary);\n  transform: translateX(-50%) translateY(-2px);\n  box-shadow: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent) 0 4px 12px;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n  transition: color 0.2s;\n}\n\n.scroll-to-bottom-icon[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.chat-input-container[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-card);\n  padding: 0 1.25rem 1.25rem 1.25rem;\n  overflow: visible;\n}\n\n.read-only-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0 1.25rem 0.5rem 1.25rem;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.read-only-banner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.loading-peripheral-placeholder[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 140px;\n  padding: 24px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 50%, transparent);\n  backdrop-filter: blur(2px);\n  border-radius: 12px;\n  margin: 12px;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.project-selector-modal[_ngcontent-%COMP%] {\n  width: 600px;\n  height: 500px;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-border-default);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.toggle-system-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\n}\n\n.toggle-system-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n}\n\n.artifacts-modal[_ngcontent-%COMP%] {\n  width: 700px;\n  max-height: 600px;\n}\n\n.artifacts-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 16px;\n}\n\n\n.artifacts-empty-fill[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-card);\n  border: 1.5px solid var(--mj-border-default);\n  border-radius: 12px;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.artifact-modal-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%] {\n  opacity: 0.85;\n  border-color: var(--mj-border-default);\n  border-style: dashed;\n  position: relative;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]::before {\n  content: \"SYSTEM\";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 6px;\n  border-radius: 3px;\n  letter-spacing: 0.5px;\n  z-index: 10;\n}\n\n.artifact-modal-card.system-artifact[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.artifact-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  cursor: pointer;\n}\n\n.artifact-card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md);\n  transform: translateY(-2px);\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-radius: 10px;\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.artifact-modal-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n}\n\n.artifact-modal-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.artifact-modal-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.artifact-modal-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: color 0.2s;\n}\n\n.artifact-modal-card[_ngcontent-%COMP%]:hover   .artifact-modal-action[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.artifact-versions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0 1rem 1rem 1rem;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-version-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px 12px 68px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n  border-radius: 4px;\n}\n.artifact-version-item[_ngcontent-%COMP%]   .version-open-text[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n.artifact-version-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   .version-open-text[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.artifact-version-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-peripheral-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px 24px;\n  background: var(--mj-bg-surface-card);\n  border: 2px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-md);\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  font-weight: 500;\n}\n.loading-peripheral-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.conversation-loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 20px;\n  gap: 16px;\n  color: var(--mj-text-secondary);\n  font-size: 15px;\n}\n.loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-brand-primary);\n}\n.loading-content[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n\n@media (max-width: 768px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    gap: 6px;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    position: relative;\n  }\n  .chat-info[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    order: 1;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 700;\n    width: auto;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n    display: none; \n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    margin-left: 0;\n    font-size: 10px;\n    padding: 3px 8px;\n    height: 24px;\n  }\n  \n  .chat-actions-buttons[_ngcontent-%COMP%] {\n    order: 2;\n    flex-shrink: 0;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    min-width: auto;\n  }\n  .chat-actions-buttons[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]   .btn-label[_ngcontent-%COMP%] {\n    display: none;\n  }\n  .chat-actions[_ngcontent-%COMP%] {\n    flex-wrap: nowrap;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 13px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    font-size: 12px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 12px;\n    padding: 4px 8px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 600px);\n    height: auto;\n  }\n  .artifacts-modal[_ngcontent-%COMP%] {\n    width: min(95vw, 700px);\n  }\n  .artifacts-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.75rem 0.75rem 0.75rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 16px;\n    width: 36px;\n    height: 36px;\n  }\n  \n  .chat-content-area[_ngcontent-%COMP%] {\n    position: relative;\n  }\n  .chat-artifact-pane[_ngcontent-%COMP%] {\n    position: fixed;\n    left: 0;\n    right: 0;\n    top: 56px; \n    bottom: 0;\n    width: 100% !important;\n    z-index: 100;\n    background: var(--mj-bg-surface-card);\n  }\n  .resize-handle[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n@media (max-width: 480px) {\n  .chat-header[_ngcontent-%COMP%] {\n    padding: 6px 8px;\n    gap: 4px;\n  }\n  .chat-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 700;\n  }\n  .project-tag[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n    display: none;\n  }\n  .test-indicator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    padding: 2px 6px;\n    height: 20px;\n  }\n  .chat-members[_ngcontent-%COMP%], \n   .artifact-indicator[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    font-size: 11px;\n  }\n  .action-btn[_ngcontent-%COMP%] {\n    padding: 5px 7px;\n    font-size: 11px;\n  }\n  .ambient-agent-indicator[_ngcontent-%COMP%] {\n    font-size: 11px;\n    padding: 3px 6px;\n  }\n  .project-selector-modal[_ngcontent-%COMP%], \n   .artifacts-modal[_ngcontent-%COMP%] {\n    width: 100vw;\n    height: 100vh;\n    border-radius: 0;\n  }\n  .chat-input-container[_ngcontent-%COMP%] {\n    padding: 0 0.5rem 0.5rem 0.5rem;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%] {\n    bottom: 12px;\n    width: 32px;\n    height: 32px;\n  }\n  .scroll-to-bottom-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n  }\n}\n\n\n.artifact-picker-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-overlay);\n  z-index: 999;\n}\n\n.artifact-picker-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 360px;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  animation: _ngcontent-%COMP%_slideInRight 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideInRight {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n\n.artifact-picker-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.artifact-picker-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n}\n\n.artifact-picker-close[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.artifact-picker-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n}\n\n.artifact-picker-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--mj-text-muted);\n  gap: 8px;\n}\n\n.artifact-picker-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n}\n\n.artifact-picker-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: background 0.15s, border-color 0.15s;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-pdf[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-excel[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file-word[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.artifact-picker-item[_ngcontent-%COMP%]   i.fa-file[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.artifact-picker-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.artifact-picker-item-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.artifact-picker-item-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n.voice-call-pill[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 18px;\n  bottom: 18px;\n  z-index: 49; \n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 9px 16px 9px 13px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  cursor: pointer;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;\n}\n.voice-call-pill[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 10px 28px color-mix(in srgb, var(--mj-brand-primary) 28%, transparent);\n  transform: translateY(-1px);\n}\n.voice-call-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n.voice-call-pill__pulse[_ngcontent-%COMP%] {\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: var(--mj-status-success);\n  flex-shrink: 0;\n  animation: _ngcontent-%COMP%_voice-pill-pulse 1.6s ease-in-out infinite;\n}\n.voice-call-pill__text[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  line-height: 1.25;\n}\n.voice-call-pill__name[_ngcontent-%COMP%] {\n  font-size: 12.5px;\n  font-weight: 700;\n}\n.voice-call-pill__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n}\n@keyframes _ngcontent-%COMP%_voice-pill-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mj-status-success) 45%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mj-status-success) 0%, transparent);\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationChatAreaComponent, [{
         type: Component,
@@ -4827,6 +5057,8 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             type: Input
         }], showLoadingState: [{
             type: Input
+        }], readReplyFromTop: [{
+            type: Input
         }], showAgentRunDetails: [{
             type: Input
         }], showReactions: [{
@@ -4976,5 +5208,5 @@ export class ConversationChatAreaComponent extends BaseAngularComponent {
             type: ViewChild,
             args: [MessageListComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 112 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationChatAreaComponent, { className: "ConversationChatAreaComponent", filePath: "src/lib/components/conversation/conversation-chat-area.component.ts", lineNumber: 113 }); })();
 //# sourceMappingURL=conversation-chat-area.component.js.map